前回ルーティング処理を作成したので、今回は施設個別ページを作って、ページ遷移するところまでやります。
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 〜 施設情報修正ページ