From a6727f104f808e533052f2bd83bc89cd6bfa0522 Mon Sep 17 00:00:00 2001 From: Joris Guyonvarch Date: Sun, 19 Jul 2015 00:45:42 +0200 Subject: Adding UI to sign in and sign out --- src/client/View/Icon.elm | 12 +++++++ src/client/View/Page.elm | 82 +++++++++++++++++++++++++++++++++--------------- 2 files changed, 68 insertions(+), 26 deletions(-) create mode 100644 src/client/View/Icon.elm (limited to 'src/client/View') diff --git a/src/client/View/Icon.elm b/src/client/View/Icon.elm new file mode 100644 index 0000000..f22c1a2 --- /dev/null +++ b/src/client/View/Icon.elm @@ -0,0 +1,12 @@ +module View.Icon + ( renderIcon + ) where + +import Html exposing (..) +import Html.Attributes exposing (..) + +renderIcon : String -> Html +renderIcon iconClass = + i + [ class <| "fa fa-fw fa-" ++ iconClass ] + [] diff --git a/src/client/View/Page.elm b/src/client/View/Page.elm index 777655c..1683cf3 100644 --- a/src/client/View/Page.elm +++ b/src/client/View/Page.elm @@ -15,50 +15,80 @@ import String exposing (append) import Model exposing (Model) import Model.Payment exposing (Payments, Payment) +import Model.View exposing (..) + +import Update exposing (..) + +import ServerCommunication as SC +import ServerCommunication exposing (serverCommunications) + +import View.Icon exposing (renderIcon) renderPage : Model -> Html renderPage model = div [] - [ renderHeader + [ renderHeader model , renderMain model ] -renderHeader : Html -renderHeader = +renderHeader : Model -> Html +renderHeader model = header [] [ h1 [] [ text "Payments" ] + , case model.view of + LoadingView -> + text "" + SignInView _ -> + text "" + PaymentView _ -> + button + [ class "signOut" + , onClick serverCommunications.address SC.SignOut + ] + [ renderIcon "power-off" ] ] renderMain : Model -> Html renderMain model = - if model.forbiddenAccess - then - forbiddenAccess - else - model.payments - |> Maybe.map paymentTable - |> Maybe.withDefault loadingTable - -forbiddenAccess : Html -forbiddenAccess = text "Forbidden access" - -loadingTable : Html -loadingTable = text "" - -paymentTable : Payments -> Html -paymentTable payments = + case model.view of + LoadingView -> + loadingView + SignInView login -> + signInView login + PaymentView payments -> + paymentsView payments + +loadingView : Html +loadingView = text "" + +signInView : String -> Html +signInView login = + H.form + [ class "signIn" ] + [ input + [ value login + , on "input" targetValue (Signal.message actions.address << UpdateLogin) + ] + [] + , button + [ onClick serverCommunications.address (SC.SignIn login) ] + [ renderIcon "sign-in" ] + ] + +paymentsView : Payments -> Html +paymentsView payments = table [] ([ tr [] - [ th [] [ text "Utilisateur" ] - , th [] [ text "Nom" ] - , th [] [ text "Prix" ] - , th [] [ text "Date" ] + [ th [] [ renderIcon "user" ] + , th [] [ renderIcon "shopping-cart" ] + , th [] [ renderIcon "euro" ] + , th [] [ renderIcon "calendar" ] ] ] ++ (paymentLines payments)) @@ -73,9 +103,9 @@ paymentLine : Payment -> Html paymentLine payment = tr [] - [ td [] [ text payment.name ] - , td [] [ text payment.userName ] - , td [] [ text (toString payment.cost) ] + [ td [] [ text payment.userName ] + , td [] [ text payment.name ] + , td [] [ text ((toString payment.cost) ++ " €") ] , td [] [ text (renderDate payment.creation) ] ] -- cgit v1.2.3