demo: 労働者ホームのモック とりあえず取っ掛かりというか、最初にイメージとして見せるものが 欲しかったので最小限。

Changes

1 changed files (+96/-12)

• demo/src/Main.elm
  • @@ -17,8 +17,10 @@ module Main exposing (main)
    import Browser import Browser.Navigation - import Html exposing (p, text) + import Html exposing (text) + import Html.Attributes exposing (href, style) import Url + import Url.Parser main : Program Flags Model Msg
  • @@ -45,14 +47,39 @@ type alias Flags =
    -- MODEL + type Editability + = Readonly + | ReadWrite + + + type Route + = DemoIndex + | WorkerHome Editability + | NotFound + + + routeParser : Url.Parser.Parser (Route -> a) a + routeParser = + Url.Parser.oneOf + [ Url.Parser.map DemoIndex Url.Parser.top + , Url.Parser.map (WorkerHome Readonly) (Url.Parser.s "worker") + , Url.Parser.map (WorkerHome ReadWrite) (Url.Parser.s "worker-mutable") + ] + + type alias Model = - { name : String + { route : Route + , key : Browser.Navigation.Key } init : Flags -> Url.Url -> Browser.Navigation.Key -> ( Model, Cmd Msg ) - init _ _ _ = - ( { name = "World" }, Cmd.none ) + init _ url key = + ( { route = Url.Parser.parse routeParser url |> Maybe.withDefault NotFound + , key = key + } + , Cmd.none + )
  • @@ -68,13 +95,20 @@ type Msg
    update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of - NoOp -> - ( model, Cmd.none ) + OnUrlChange url -> + ( { model + | route = Url.Parser.parse routeParser url |> Maybe.withDefault NotFound + } + , Cmd.none + ) - OnUrlChange _ -> - ( model, Cmd.none ) + OnUrlRequest (Browser.Internal url) -> + ( model, Browser.Navigation.pushUrl model.key (Url.toString url) ) - OnUrlRequest _ -> + OnUrlRequest (Browser.External href) -> + ( model, Browser.Navigation.load href ) + + NoOp -> ( model, Cmd.none )
  • @@ -84,9 +118,59 @@ update msg model =
    view : Model -> Browser.Document Msg view model = - { title = "Yamori デモ" - , body = [ p [] [ text ("Hello, " ++ model.name ++ "!") ] ] - } + case model.route of + NotFound -> + { title = "404 | Yamori デモ" + , body = [ Html.p [] [ text "存在しないページです" ] ] + } + + WorkerHome editability -> + { title = "労働者ホーム | Yamori デモ" + , body = + [ Html.h1 [] [ text "ようこそ、田中 太郎さん。" ] + , Html.p [] + [ text "残り" + , Html.strong [ style "font-size" "1.5em" ] [ text "10" ] + , text "日の有給休暇が利用可能です。" + ] + , Html.p [] + [ text "労働基準法により、" + , Html.strong [] [ text "2026/02/01" ] + , text "までに" + , Html.strong [ style "font-size" "1.5em" ] [ text "3" ] + , text "日の有給休暇を" + , Html.mark [] [ text "利用する必要" ] + , text "があります。" + ] + , Html.hr [] [] + , Html.dl [] + (case editability of + Readonly -> + [ Html.dt [] + [ Html.a [ href "#" ] [ text "予定を確認する" ] ] + , Html.dd [] + [ text "有給休暇の利用予定と実績を閲覧する画面に移動します。" ] + ] + + ReadWrite -> + [ Html.dt [] + [ Html.a [ href "#" ] [ text "予定を確認する" ] ] + , Html.dd [] + [ text "有給休暇の利用予定と実績の閲覧・編集画面に移動します。" ] + ] + ) + ] + } + + DemoIndex -> + { title = "Yamori デモ 画面選択" + , body = + [ Html.ul [] + [ Html.li [] [ Html.a [ href "/worker" ] [ text "労働者ホーム" ] ] + , Html.li [] [ Html.a [ href "/worker-mutable" ] [ text "労働者ホーム (編集権限あり)" ] ] + ] + ] + }