Support creating Trips from the frontend

*sigh* ... spent way too much time encoding/decoding date types...

I need my database, server, client, and JSON need to agree on types.

TL;DR:
- Add CSS for elm/datepicker library
- Create Common.allErrors to display UI errors
- Prefer Data.Time.Calendar.Day instead of newtype Date wrapper around Text
This commit is contained in:
William Carroll 2020-08-01 23:04:06 +01:00
parent 54eb29eae0
commit 249e3113ff
10 changed files with 534 additions and 115 deletions

View file

@ -1,9 +1,12 @@
module User exposing (render)
import Common
import Date
import DatePicker
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Maybe.Extra
import Maybe.Extra as ME
import RemoteData
import State
import Tailwind
@ -11,6 +14,100 @@ import UI
import Utils
createTrip : State.Model -> Html State.Msg
createTrip model =
div []
[ UI.header 3 "Plan Upcoming Trip"
, UI.textField
{ pholder = "Where are you going?"
, inputId = "destination"
, handleInput = State.UpdateTripDestination
, inputValue = model.tripDestination
}
, div [ [ "flex" ] |> Tailwind.use |> class ]
[ UI.datePicker
{ mDate = model.tripStartDate
, prompt = "Set departure date"
, prefix = "Departure: "
, picker = model.startDatePicker
, onUpdate = State.UpdateTripStartDate
}
, UI.datePicker
{ mDate = model.tripEndDate
, prompt = "Set return date"
, prefix = "Return: "
, picker = model.endDatePicker
, onUpdate = State.UpdateTripEndDate
}
]
, UI.textField
{ pholder = "Comments?"
, inputId = "comment"
, handleInput = State.UpdateTripComment
, inputValue = model.tripComment
}
, UI.baseButton
{ enabled =
List.all
identity
[ String.length model.tripDestination > 0
, String.length model.tripComment > 0
, ME.isJust model.tripStartDate
, ME.isJust model.tripEndDate
]
, extraClasses = [ "my-4" ]
, handleClick =
case ( model.tripStartDate, model.tripEndDate ) of
( Nothing, _ ) ->
State.DoNothing
( _, Nothing ) ->
State.DoNothing
( Just startDate, Just endDate ) ->
State.AttemptCreateTrip startDate endDate
, label = "Schedule trip"
}
]
trips : State.Model -> Html msg
trips model =
div []
[ UI.header 3 "Upcoming Trips"
, case model.trips of
RemoteData.NotAsked ->
UI.paragraph "Somehow we've reached the user home page without requesting your trips data. Please report this to our engineering team at bugs@tripplaner.tld"
RemoteData.Loading ->
UI.paragraph "Loading your trips..."
RemoteData.Failure e ->
UI.paragraph ("Error: " ++ Utils.explainHttpError e)
RemoteData.Success xs ->
ul []
(xs
|> List.map
(\trip ->
li
[ [ "py-2" ]
|> Tailwind.use
|> class
]
[ text
(Date.toIsoString trip.startDate
++ " - "
++ Date.toIsoString trip.endDate
++ " -> "
++ trip.destination
)
]
)
)
]
render : State.Model -> Html State.Msg
render model =
div
@ -23,17 +120,11 @@ render model =
)
]
[ UI.header 2 ("Welcome, " ++ model.username ++ "!")
, UI.simpleButton
, createTrip model
, trips model
, UI.textButton
{ label = "Logout"
, handleClick = State.AttemptLogout
}
, case model.logoutError of
Nothing ->
text ""
Just e ->
UI.errorBanner
{ title = "Error logging out"
, body = Utils.explainHttpError e
}
, Common.allErrors model
]