moves headerbar out of chest page

src/Main.elm

@@ -36,11 +36,36 @@ main =
 -- Model
 
 
-type Model
+type alias Model =
+    { navbar : Navbar
+    , page : Page
+    }
+
+
+type alias Navbar =
+    { menuOpen : Bool
+    , navKey : Nav.Key
+    }
+
+
+initNavbar key =
+    Navbar False key
+
+
+type Page
     = Chest Chest.Model
       --    | Admin Admin.Model
     | About
-    | Loading Nav.Key
+    | Loading
+
+
+type alias HasPage r =
+    { r | page : Page }
+
+
+setPage : Page -> HasPage r -> HasPage r
+setPage page model =
+    { model | page = page }
 
 
 
@@ -59,35 +84,34 @@ type Model
 
 init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
 init _ _ key =
-    ( Loading key, Session.init SessionLoaded key )
+    ( { navbar = initNavbar key
+      , page = Loading
+      }
+    , Session.init SessionLoaded key
+    )
 
 
 
-{-
+-- VIEW
-   case flags of
-       Just id ->
-           let
-               session =
-                   Session.playerSession key id
-
-               ( chest, cmd ) =
-                   Chest.init session
-           in
-           ( Chest chest, Cmd.map GotChestMsg cmd )
-
-       Nothing ->
-           ( About, Cmd.none )
--}
----
--- VIEWS
----
 
 
 view : Model -> Browser.Document Msg
 view model =
+    let
+        ( title, header, content ) =
+            viewPage model.page
+    in
+    { title = title
+    , body =
+        viewHeaderBar header.title header.links model.navbar
+            :: content
+    }
+
+
+viewPage page =
     let
         ( title, content ) =
-            case model of
+            case page of
                 Chest chest ->
                     ( "Loot-a-lot", List.map (Html.map GotChestMsg) (Chest.view chest) )
 
@@ -96,18 +120,85 @@ view model =
                 About ->
                     ( "A propos", [ p [] [ text "A propos" ] ] )
 
-                Loading _ ->
+                Loading ->
-                    ( "Chargement...", [ p [] [ text "Chargement" ] ] )
+                    ( "Veuillez patienter...", [ p [] [ text "Chargement" ] ] )
+
+        navbarTitle =
+            case page of
+                Chest chest ->
+                    chest.state.player.name
+
+                About ->
+                    "Loot-a-lot"
+
+                Loading ->
+                    "Loot-a-(...)"
+
+        navbarLinks =
+            case page of
+                Chest chest ->
+                    let
+                        linkWithGem =
+                            navLink "fas fa-gem"
                     in
-    { title = title
+                    [ navLink "fas fa-store-alt" "Marchand" "/marchand"
-    , body = content
+                    , if chest.state.player.id == 0 then
-    }
+                        linkWithGem "Nouveau loot" "/nouveau-tresor"
+
+                      else
+                        linkWithGem "Coffre de groupe" "/coffre"
+                    ]
+
+                _ ->
+                    []
+    in
+    ( title, { title = navbarTitle, links = navbarLinks }, content )
+
+
+
+-- HEADER SECTION
+
+
+navLink icon linkText url =
+    a [ class "navbar-item", href url ]
+        [ renderIcon { icon = icon, ratio = "1x", size = "medium" }
+        , span [] [ text linkText ]
+        ]
+
+
+viewHeaderBar : String -> List (Html Msg) -> Navbar -> Html Msg
+viewHeaderBar navbarTitle navbarLinks navbar =
+    nav [ class "navbar", class "is-transparent" ]
+        [ div [ class "navbar-brand" ]
+            [ a [ class "navbar-item", href "/" ]
+                [ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" }
+                , span [ class "title is-4", style "padding-left" "0.4em" ] [ text navbarTitle ]
+                ]
+            , a
+                [ class "navbar-burger"
+                , classList [ ( "is-active", navbar.menuOpen ) ]
+                , onClick SwitchMenuOpen
+                ]
+                [ span [ attribute "aria-hidden" "true" ] []
+                , span [ attribute "aria-hidden" "true" ] []
+                , span [ attribute "aria-hidden" "true" ] []
+                ]
+            ]
+        , div [ class "navbar-menu", classList [ ( "is-active", navbar.menuOpen ) ] ]
+            [ div [ class "navbar-end" ] navbarLinks
+            ]
+        ]
+
+
+
+-- UPDATE
 
 
 type Msg
     = UrlChanged Url.Url
     | LinkClicked Browser.UrlRequest
     | SessionLoaded (Maybe Session)
+    | SwitchMenuOpen
     | GotChestMsg Chest.Msg
 
 
@@ -115,19 +206,20 @@ type Msg
 --  | GotAdminMsg Admin.Msg
 
 
+update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     let
         updateChest chestMsg =
-            case model of
+            case model.page of
                 Chest chest ->
                     let
                         ( newChest, cmd ) =
                             Chest.update chestMsg chest
                     in
-                    ( Chest newChest, Cmd.map GotChestMsg cmd )
+                    ( setPage (Chest newChest) model, Cmd.map GotChestMsg cmd )
 
                 _ ->
-                    ( About, Cmd.none )
+                    ( model |> setPage About, Cmd.none )
     in
     case msg of
         SessionLoaded session ->
@@ -137,17 +229,17 @@ update msg model =
                         ( chest, cmd ) =
                             Chest.init logged
                     in
-                    ( Chest chest, Cmd.map GotChestMsg cmd )
+                    ( model |> setPage (Chest chest), Cmd.map GotChestMsg cmd )
 
                 Nothing ->
-                    ( About, Cmd.none )
+                    ( model |> setPage About, Cmd.none )
 
         LinkClicked urlRequest ->
-            case model of
+            case model.page of
                 Chest chestModel ->
                     case urlRequest of
                         Browser.Internal url ->
-                            ( model, Nav.pushUrl chestModel.navKey (Url.toString url) )
+                            ( model, Nav.pushUrl model.navbar.navKey (Url.toString url) )
 
                         Browser.External href ->
                             ( model, Cmd.none )
@@ -165,14 +257,16 @@ update msg model =
                     updateChest (Chest.SetContent content)
 
                 _ ->
-                    ( About, Cmd.none )
+                    ( model |> setPage About, Cmd.none )
 
         GotChestMsg chestMsg ->
             updateChest chestMsg
 
+        SwitchMenuOpen ->
+            ( { model | navbar = Navbar (not model.navbar.menuOpen) model.navbar.navKey }, Cmd.none )
+
 
 
--- STATE Utils
 -- SUBSCRIPTIONS
 --
 

src/Page/Chest.elm

@@ -27,8 +27,7 @@ import Utils exposing (..)
 
 
 type alias State =
-    { menuOpen : Bool
+    { mode : ActionMode
-    , mode : ActionMode
     , error : Maybe String
     , notification : Maybe String
 
@@ -73,7 +72,6 @@ init (Player navKey playerId) =
     ( Model
         navKey
         (State
-            False
             View
             Nothing
             Nothing
@@ -130,103 +128,6 @@ viewNotification model =
 
 
 
--- DEBUG SECTION
-
-
-viewDebugSection : Model -> Html Msg
-viewDebugSection model =
-    div [ class "panel is-danger" ]
-        [ p [ class "panel-heading" ] [ text "Debug" ]
-        , p [ class "panel-block has-text-danger" ] [ text <| Maybe.withDefault "" model.state.error ]
-        , p [ class "panel-block" ] [ text ("Shown content : " ++ Debug.toString model.shown) ]
-        , p [ class "panel-block" ] [ text ("Active Mode : " ++ Debug.toString model.state.mode) ]
-        , p [ class "panel-block" ] [ text ("Selection : " ++ Debug.toString model.selection) ]
-        , p [ class "panel-block" ] [ text ("Claims : " ++ Debug.toString model.claims) ]
-        , p [] debugSandbox
-        ]
-
-
-stackedIcon name =
-    span [ class "icon is-medium" ]
-        [ span [ class "fa-stack" ]
-            [ i [ class "fas fa-circle fa-stack-2x" ] []
-            , i [ class (name ++ " fa-inverse fa-stack-1x") ] []
-            , text ""
-            ]
-        ]
-
-
-debugSandbox =
-    [ stackedIcon "fas fa-coins"
-    , stackedIcon "fab fa-d-and-d"
-    , stackedIcon "fas fa-praying-hands"
-    , stackedIcon "fas fa-gem"
-    , stackedIcon "fas fa-pen"
-    , stackedIcon "fas fa-percentage"
-    , stackedIcon "fas fa-store-alt"
-    , stackedIcon "fas fa-cart-plus"
-    , stackedIcon "fas fa-angry"
-    , stackedIcon "fas fa-plus"
-    , stackedIcon "fas fa-tools"
-    , stackedIcon "fas fa-search"
-    ]
-
-
-
--- HEADER SECTION
-
-
-viewHeaderBar : String -> Model -> Html Msg
-viewHeaderBar title model =
-    nav [ class "navbar", class "is-transparent" ]
-        [ div [ class "navbar-brand" ]
-            [ a [ class "navbar-item", href "/" ]
-                [ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" }
-                , span [ class "title is-4", style "padding-left" "0.4em" ] [ text title ]
-                ]
-            , a
-                [ class "navbar-burger"
-                , classList [ ( "is-active", model.state.menuOpen ) ]
-                , onClick SwitchMenuOpen
-                ]
-                [ span [ attribute "aria-hidden" "true" ] []
-                , span [ attribute "aria-hidden" "true" ] []
-                , span [ attribute "aria-hidden" "true" ] []
-                ]
-            ]
-        , div [ class "navbar-menu", classList [ ( "is-active", model.state.menuOpen ) ] ]
-            [ div [ class "navbar-end" ]
-                [ a [ class "navbar-item", href "/marchand" ]
-                    [ renderIcon { icon = "fas fa-store-alt", ratio = "1x", size = "medium" }
-                    , span [] [ text "Marchand" ]
-                    ]
-                , a
-                    [ class "navbar-item"
-                    , href
-                        (if model.state.player.id == 0 then
-                            "/nouveau-tresor"
-
-                         else
-                            "/coffre"
-                        )
-                    ]
-                    [ renderIcon { icon = "fas fa-gem", ratio = "1x", size = "medium" }
-                    , span []
-                        [ text
-                            (if model.state.player.id == 0 then
-                                "Nouveau loot"
-
-                             else
-                                "Coffre de groupe"
-                            )
-                        ]
-                    ]
-                ]
-            ]
-        ]
-
-
-
 -- PLAYER BAR
 
 
@@ -236,14 +137,11 @@ viewPlayerBar player actionControls ( editing, amount ) =
         [ div [ class "hero-body" ]
             [ div [ class "level container is-mobile" ]
                 [ div [ class "level-left" ]
-                    ([ div [ class "level-item" ]
+                    (div [ class "level-item" ]
-                        [ p [ class "title is-3" ] [ text player.name ] ]
-                     , div [ class "level-item" ]
                         [ span [ class "icon is-large" ] [ i [ class "fas fa-2x fa-piggy-bank" ] [] ]
                         , span [ class "icon", onClick EditWealth ] [ i [ class "fas fa-tools" ] [] ]
                         ]
-                     ]
+                        :: (if editing then
-                        ++ (if editing then
                                 viewUpdateWealth amount
 
                             else
@@ -438,8 +336,7 @@ view model =
                 |> List.filter
                     (\i -> String.toLower i.name |> String.contains (String.toLower model.searchText))
     in
-    [ viewHeaderBar "Mon coffre" model
+    [ viewPlayerBar model.state.player renderControls ( model.state.editWealth, model.state.wealthAmount )
-    , viewPlayerBar model.state.player renderControls ( model.state.editWealth, model.state.wealthAmount )
     , main_
         [ class "container" ]
         [ viewNotification model
@@ -864,7 +761,6 @@ type Msg
     | GotPlayer (HttpResult Api.Player)
       -- Chest UI
     | ClearNotification
-    | SwitchMenuOpen
     | SetContent ChestContent
     | SearchTextChanged String
       -- Selection
@@ -896,7 +792,7 @@ switchEditWealth state =
 
 setWealthAmount state amount =
     { state
-        | wealthAmount = amount
+        | wealthAmount = String.replace "," "." amount
     }
 
 
@@ -950,15 +846,6 @@ update msg model =
             , Cmd.none
             )
 
-        SwitchMenuOpen ->
-            let
-                state =
-                    model.state
-            in
-            ( { model | state = { state | menuOpen = not model.state.menuOpen } }
-            , Cmd.none
-            )
-
         AddMsg addMsg ->
             case addMsg of
                 NewItemsFromList newLoot maybeErrors ->