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」をクリックするとその施設の編集ページに遷移するようになりました。
次は、他の情報の編集欄と、入力時にモデルを更新する処理を作ります。