Shisetsuでは、ユーザーが新しい施設を追加でき、また施設情報を編集することができます。
ここでは施設情報の編集ページを作りましょう。施設個別ページに「編集」ボタンを作り、そこから編集ページへ飛べるようにします。

編集画面では、施設名以外の全てを変更することができます。

src/Facilities/Single.elmの編集

「Edit」リンクを作ります。facilityEditPathは、あとで定義します。以下、変更部分のみです。

import Routing exposing (facilityEditPath)

editLink : Facility -> Html Msg
editLink facility =
    let
        editPath = facilityEditPath facility.id
    in
        a [ href editPath ]
            [ text "Edit" ]

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 [ class "right-align" ]
                [ editLink model ]
            , p []
                [ text ("Postal code: " ++ model.postcode ) ]
            , p []
                [ text ("Address: " ++ model.address) ]
            , a [ href model.web_site ]
                [ text model.web_site ]
            ]
        ]

src/Models.elmの編集

Route型にFacilityEditRoute FacilityIdを追加します。

type Route
    = FacilitiesRoute
    | FacilityRoute FacilityId
    | FacilityEditRoute FacilityId
    | NotFoundRoute

src/Routing.elmの編集

facilityEditPath関数を作成し、matchersにパターンを追加します。

facilityEditPath : FacilityId -> String
facilityEditPath facilityId =
    facilityPath facilityId ++ "/edit"

matchers : Parser (Route -> a) a
matchers =
    oneOf
        [ map FacilitiesRoute top
        , map FacilityEditRoute (s "facilities" </> string </> s "edit")
        , map FacilityRoute (s "facilities" </> string)
        , map FacilitiesRoute (s "facilities")
        ]

src/View.elmの編集

pageにFacilityEditRouteの条件を追加します。singleEditPage関数を作成します。singlePageとsingleEditPageは、中で呼び出すビューが違うだけなので、これを引数にとる関数を作った方が無駄が減りますね。

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

singleEditPage : Model -> FacilityId -> Html Msg
singleEditPage 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.SingleEdit.view facility
                    Nothing ->
                        notFoundView "facility ID not found"
        RemoteData.Failure error ->
            text ( toString error )

src/Facilities/SingleEdit.elmの作成

オープン/クローズ時間だけ編集できるようにしておきます。まだビューだけなので、実際に編集は反映されません。

module Facilities.SingleEdit exposing (..)

import Html exposing (button, div, h1, Html, input, p, text)
import Html.Attributes exposing (class, placeholder, name, type_, value)
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 []
        [ text "Editing..."]

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

editForm : Facility -> Html Msg
editForm model =
    div []
        [ div [ class "col col-8 px1"]
            [ p []
                [ text "Opening time: "
                , input [ type_ "time", name "open_time" ] []
                , input [ type_ "time", name "close_time" ] []
                ]
            , button [] [ text "Submit" ]
            ]
        ]

これで、施設個別ページの「Edit」をクリックするとその施設の編集ページに遷移するようになりました。
次は、他の情報の編集欄と、入力時にモデルを更新する処理を作ります。