前回ルーティング処理を作成したので、今回は施設個別ページを作って、ページ遷移するところまでやります。

src/Facilities/Single.elmを作成

ここでは、Modelではなく一つの施設データFacilityを受け取って表示するビューを作成します。

module Facilities.Single exposing (..)

import Html exposing (a, div, h1, Html, p, text)
import Html.Attributes exposing (class, href)
import Models exposing (Facility)
import Msgs exposing (Msg)

view : Facility -> Html Msg
view model =
    div []
        [ nav model
        , viewFcl model
        ]

nav : Facility -> Html Msg
nav model =
    div []
        []

viewFcl : Facility -> Html Msg
viewFcl model =
    div []
        [ h1 [] [ text model.name ]
        , content model
        ]

content : Facility -> Html Msg
content model =
    div []
        [ div [ class "col col-8 px1"]
            [ p []
                [ text ("Opening time: " ++ model.opening.open ++ " - " ++ model.opening.close) ]
            , p []
                [ text model.description ]
            ]
        , div [ class "col col-4 px1 bg-silver"]
            [ p []
                [ text ("Postal code: " ++ model.postcode ) ]
            , p []
                [ text ("Address: " ++ model.address) ]
            , a [ href model.web_site ]
                [ text model.web_site ]
            ]
        ]

src/View.elmを編集

pageで、ルートの値によって 施設一覧ページ/個別ページ/not found のどれを表示するかを決めます。singlePageは、施設データの取得状況によって条件分岐し、さらに取得できた場合は施設リストから該当するIDの施設データがあるかどうかでさらに条件分岐しています（List.headはMaybe型を返すため）。以下、変更部分だけでなく全部載せています。

module View exposing (..)

import Facilities.List
import Facilities.Single
import Html exposing (Html, div, text)
import Models exposing (Model, FacilityId)
import Msgs exposing (Msg)
import RemoteData

view : Model -> Html Msg
view model =
    div []
        [ page model ]

page : Model -> Html Msg
page model =
    case model.route of
        Models.FacilitiesRoute ->
            Facilities.List.view model.facilities
        Models.FacilityRoute facilityId ->
            singlePage model facilityId
        Models.NotFoundRoute ->
            notFoundView "url not found"

singlePage : Model -> FacilityId -> Html Msg
singlePage model facilityId =
    case model.facilities of
        RemoteData.NotAsked ->
            text "Data not asked"
        RemoteData.Loading ->
            text "Loading"
        RemoteData.Success response ->
            let
                maybeFacility =
                    List.head (List.filter (\facl -> facl.id == facilityId) response)
            in
                case maybeFacility of
                    Just facility ->
                        Facilities.Single.view facility
                    Nothing ->
                        notFoundView "facility ID not found"
        RemoteData.Failure error ->
            text ( toString error )

notFoundView : String -> Html Msg
notFoundView s =
    div [] [ text ( "Page not found. " ++ s ) ]

ここでは若干CSSを使用しています。私の類稀なるデザインセンスを発揮して、シンプルでモダンに仕上げました。

次は、施設情報を編集するページを作ります。
elmでwebアプリ11 〜 施設情報修正ページ