elm/lootalot-client
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

works on design, completes AddLoot form

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-11-11 23:57:13 +01:00
parent 873c7bb61a
commit e19bba7e3a
2 changed files with 140 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
src/Page/Chest.elm
View File

@@ -133,11 +133,11 @@ debugSandbox =
viewHeaderBar : String -> Model -> Html Msg viewHeaderBar : String -> Model -> Html Msg
viewHeaderBar title model = viewHeaderBar title model =
nav [ class "navbar container", class "is-info" ] nav [ class "navbar", class "is-transparent" ]
[ div [ class "navbar-brand" ] [ div [ class "navbar-brand" ]
[ a [ class "navbar-item", href "/" ] [ a [ class "navbar-item", href "/" ]
[ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" } [ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" }
, span [] [ text title ] , span [ class "title is-4" ] [ text title ]
] ]
, a [ class "navbar-burger is-active" ] , a [ class "navbar-burger is-active" ]
[ span [ attribute "aria-hidden" "true" ] [] [ span [ attribute "aria-hidden" "true" ] []
@@ -183,26 +183,33 @@ viewHeaderBar title model =
viewPlayerBar : Api.Player -> List (Html Msg) -> Html Msg viewPlayerBar : Api.Player -> List (Html Msg) -> Html Msg
viewPlayerBar player actionControls = viewPlayerBar player actionControls =
section [ class "level container is-mobile box" ] section [ class "hero is-dark is-bold" ]
[ div [ class "level-left" ] [ div [ class "hero-body" ]
([ div [ class "level-item" ] [ div [ class "level container is-mobile" ]
[ span [ class "icon is-large" ] [ div [ class "level-left" ]
[ i [ class "fas fa-2x fa-piggy-bank" ] [] ] ([ div [ class "level-item" ]
] [ p [ class "title is-3" ] [ text player.name ] ]
] , div [ class "level-item" ]
++ viewWealth player.wealth [ span [ class "icon is-large" ]
++ (if player.debt > 0 then [ i [ class "fas fa-2x fa-piggy-bank" ] [] ]
[ div [ class "level-item" ]
[ p [ class "heading is-size-4 has-text-danger" ]
[ text ("Dette : " ++ String.fromInt player.debt ++ "po") ]
]
] ]
]
++ viewWealth player.wealth
++ [ span [ class "icon has-text-danger" ] [ i [ class "fas fa-tools" ] [] ] ]
++ (if player.debt > 0 then
[ div [ class "level-item" ]
[ p [ class "heading is-size-4 has-text-danger" ]
[ text ("Dette : " ++ String.fromInt player.debt ++ "po") ]
]
]
else else
[] []
) )
) )
, div [ class "level-right" ] actionControls , div [ class "level-right" ] actionControls
]
]
] ]
@@ -219,7 +226,7 @@ showWealthField : String -> String -> Html Msg
showWealthField name value = showWealthField name value =
div [ class "level-item" ] div [ class "level-item" ]
[ p [ class "has-text-right" ] [ p [ class "has-text-right" ]
[ strong [ class "heading is-marginless" ] [ text name ] [ strong [ class "heading is-marginless has-text-white" ] [ text name ]
, span [ class <| "is-size-4" ] [ text value ] , span [ class <| "is-size-4" ] [ text value ]
] ]
] ]
@@ -281,46 +288,47 @@ view model =
, main_ , main_
[ class "container" ] [ class "container" ]
[ viewNotification model.state.notification [ viewNotification model.state.notification
-- TODO: viewAddLoot when in Add mode -- TODO: viewAddLoot when in Add mode
, case model.state.mode of , case model.state.mode of
Add -> Add ->
viewAddLoot model viewAddLoot model
_ ->
text ""
_ ->
text ""
, viewLoot header model.searchText rowRenderer canSelect isSelected <| shownItems model , viewLoot header model.searchText rowRenderer canSelect isSelected <| shownItems model
] ]
, hr [] [] , hr [] []
, section [ class "container" ] [ viewDebugSection model ] , section [ class "container" ] [ viewDebugSection model ]
] ]
{- {-
module ActionMode module ActionMode
type Model type Model
= Add = Add
| Sell | Sell
| ... | ...
rowRenderer mode = rowRenderer mode =
... ...
controlButtons mode = controlButtons mode =
... ...
cancelAction toMsg mode = cancelAction toMsg mode =
... ...
confirmAction toMsg items mode = confirmAction toMsg items mode =
... ...
-} -}
-- VIEW LOOT -- VIEW LOOT
@@ -329,7 +337,7 @@ viewLoot header searchText maybeRowRenderer canSelect isSelected items =
let let
filteredItems = filteredItems =
List.filter List.filter
(\i -> String.toLower i.name |> String.contains (String.toLower searchText) ) (\i -> String.toLower i.name |> String.contains (String.toLower searchText))
items items
in in
article article
@@ -354,9 +362,12 @@ viewSearchBar : String -> Html Msg
viewSearchBar textValue = viewSearchBar textValue =
div [ class "field" ] div [ class "field" ]
[ p [ class "control has-icons-left" ] [ p [ class "control has-icons-left" ]
[ input [ class "input" [ input
, onInput SearchTextChanged [ class "input"
, value textValue ] [] , onInput SearchTextChanged
, value textValue
]
[]
, span [ class "icon is-left" ] [ i [ class "fas fa-search" ] [] ] , span [ class "icon is-left" ] [ i [ class "fas fa-search" ] [] ]
] ]
] ]
@@ -433,58 +444,101 @@ viewItemTableRow isSelected canSelect rowRenderer item =
] ]
] ]
-- Adding new loot -- Adding new loot
-- --
viewAddLoot : Model -> Html Msg viewAddLoot : Model -> Html Msg
viewAddLoot model = viewAddLoot model =
let let
showCompletionTips = True showCompletionTips =
newItem = Item 0 "New one #1" 2000 False
newItem =
Item 0 "New one #1" 2000
itemIsValid =
False
in in
div [ class "box is-primary container" ] div [ class "box is-primary" ]
[ div [ class "field is-horizontal" ] [ div [ class "field is-horizontal" ]
[ div [ class "field-label" ] [ div [ class "field-label is-medium" ] [ label [ class "label" ] [ text "Source du loot" ] ]
[ label [ class "label" ] [ text "Nouvel objet" ]] , div [ class "field-body" ]
, div [ class "field-body" ] [ div [ class "field" ]
[ div [ class "field" ] [ div [ class "control is-expanded" ]
[ div [ class "control is-expanded" ] [ input
[ input [ class "input", type_ "text" ] [] ] [ class "input"
, div [ class "dropdown" , type_ "text"
, classList [("is-active", showCompletionTips)] ] ]
[ div [ class "dropdown-menu" ] []
[ div [ class "dropdown-content" ]
[ a [ class "dropdown-item" ] [ text "item" ] ]
]
]
] ]
, div [ class "field is-expanded has-addons" ] , p [ class "help" ] [ text "Personnage, lieu ou événement d'où provient ce loot." ]
[ p [ class "control" ] [ a [class "button is-static"] [ text "PO" ] ] ]
, p [ class "control" ] ]
[ input [ type_ "text" ]
, class "input" , hr [] []
, classList [ ("is-danger", True) ]] , div [ class "field is-horizontal" ]
[] [ div [ class "field-label is-medium" ] [ label [ class "label" ] [ text "Nouvel objet" ] ]
, div [ class "field-body" ]
[ div [ class "field" ]
[ div [ class "control" ]
[ input
[ class "input"
, type_ "text"
, value newItem.name
]
[]
]
, div
[ class "dropdown"
, classList [ ( "is-active", showCompletionTips ) ]
]
[ div [ class "dropdown-menu" ]
[ div [ class "dropdown-content" ]
[ a [ class "dropdown-item" ] [ text "item" ] ]
] ]
] ]
, div [ class "field" ]
[ div [ class "control" ]
[ button [ class "button is-primary"
, disabled True
, onClick <| NewItemAdded newItem ]
[ text "Ajouter au coffre" ] ]
]
]
]
, div [ class "field is-horizontal" ]
[ div [ class "field-label" ] [ label [ class "label" ] [ text "ou" ] ]
, div [ class "field-body" ]
[ div [ class "control" ]
[ button [ class "button" ] [ text "Depuis une liste" ] ]
] ]
] , div [ class "field is-narrow" ]
[ div [ class "field has-addons" ]
[ p [ class "control" ] [ a [ class "button is-static" ] [ text "PO" ] ]
, p [ class "control" ]
[ input
[ type_ "number"
, class "input"
, value <| String.fromInt newItem.base_price
, classList [ ( "is-danger", True ) ]
]
[]
]
]
, p [ class "help has-text-danger" ] [ text "Vous devez renseigner le prix !" ]
]
, div [ class "field is-narrow" ]
[ div [ class "control" ]
[ button
[ class "button is-primary"
, disabled <| not itemIsValid
, onClick <| NewItemAdded newItem
]
[ text "Ajouter au coffre" ]
]
]
]
]
, div [ class "field is-horizontal" ]
[ div [ class "field-label is-medium" ] [ label [ class "label" ] [ text "ou" ] ]
, div [ class "field-body" ]
[ div [ class "control" ]
[ button [ class "button" ] [ text "Depuis une liste" ] ]
]
]
] ]
-- ACTION MODES -- ACTION MODES
-- --
@@ -555,9 +609,11 @@ update msg model =
case msg of case msg of
NewItemAdded item -> NewItemAdded item ->
let let
state = model.state state =
model.state
in in
( { model | state = { state | newLoot = item :: state.newLoot } }, Cmd.none ) ( { model | state = { state | newLoot = item :: state.newLoot } }, Cmd.none )
ApiMsg apiMsg -> ApiMsg apiMsg ->
case apiMsg of case apiMsg of
Api.GotActionResult response -> Api.GotActionResult response ->

2
src/Utils.elm
View File

@@ -11,7 +11,7 @@ renderIcon params =
actionButton msg t icon color = actionButton msg t icon color =
button button
[ class <| "button level-item is-" ++ color [ class <| "button is-medium level-item is-" ++ color
, onClick msg , onClick msg
] ]
[ span [ class "icon" ] [ i [ Svg.Attributes.class <| "fas fa-" ++ icon ] [] ] [ span [ class "icon" ] [ i [ Svg.Attributes.class <| "fas fa-" ++ icon ] [] ]