tvl-depot/scratch/habit-screens/client/src/Habits.elm
William Carroll 05d52e403c Tweak styles
- Change header to blue
- Change habit to gray when completed
- Prefer app font for footer instead of monospaced font
2020-10-11 10:24:11 +01:00

212 lines
5.5 KiB
Elm
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

module Habits exposing (render)
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Set
import State
import Time exposing (Weekday(..))
import UI
morning : List State.Habit
morning =
[ "Make bed"
, "Brush teeth"
, "Shower"
, "Do push-ups"
, "Meditate"
]
evening : List State.Habit
evening =
[ "Read (30 minutes)"
, "Record in State.Habit Journal"
]
monday : List State.Habit
monday =
[ "Bikram Yoga @ 17:00 (90 min)"
]
tuesday : List State.Habit
tuesday =
[ "Bikram Yoga @ 18:00 (90 min)"
]
wednesday : List State.Habit
wednesday =
[ "Shave"
, "Bikram Yoga @ 17:00 (90 min)"
]
thursday : List State.Habit
thursday =
[]
friday : List State.Habit
friday =
[ "Bikram Yoga @ 17:00 (60 min)"
, "Take-out trash"
, "Shop for groceries"
]
saturday : List State.Habit
saturday =
[ "Warm Yin Yoga @ 15:00 (60 min)"
]
sunday : List State.Habit
sunday =
[ "Shampoo"
, "Shave"
, "Trim nails"
, "Combine trash cans"
, "Mop tile and wood floors"
, "Laundry"
, "Vacuum bedroom"
, "Dust surfaces"
, "Clean mirrors"
, "Clean desk"
]
weekdayName : Weekday -> String
weekdayName weekday =
case weekday of
Mon ->
"Monday"
Tue ->
"Tuesday"
Wed ->
"Wednesday"
Thu ->
"Thursday"
Fri ->
"Friday"
Sat ->
"Saturday"
Sun ->
"Sunday"
habitsFor : Weekday -> List State.Habit
habitsFor weekday =
case weekday of
Mon ->
monday
Tue ->
tuesday
Wed ->
wednesday
Thu ->
thursday
Fri ->
friday
Sat ->
saturday
Sun ->
sunday
tailwind : List ( String, Bool ) -> Attribute msg
tailwind classes =
classes
|> List.filter (\( k, v ) -> v)
|> List.map (\( k, v ) -> k)
|> String.join " "
|> class
render : State.Model -> Html State.Msg
render { today, visibleDayOfWeek, completed } =
case visibleDayOfWeek of
Nothing ->
p [] [ text "Unable to display habits because we do not know what day of the week it is." ]
Just weekday ->
div
[ class "container mx-auto py-6 px-6"
, tailwind [ ( "pt-20", today /= visibleDayOfWeek ) ]
]
[ header []
[ if today /= visibleDayOfWeek then
div [ class "text-center w-full bg-blue-600 text-white fixed top-0 left-0 px-3 py-4" ]
[ p [ class "py-2 inline pr-5" ]
[ text "As you are not viewing today's habits, the UI is in read-only mode" ]
, UI.button
[ class "bg-blue-200 px-4 py-2 rounded text-blue-600 text-xs font-bold"
, onClick State.ViewToday
]
[ text "View Today's Habits" ]
]
else
text ""
, div [ class "flex center" ]
[ UI.button
[ class "w-1/4 text-gray-500"
, onClick State.ViewPrevious
]
[ text " previous" ]
, h1 [ class "font-bold text-blue-500 text-3xl text-center w-full" ]
[ text (weekdayName weekday) ]
, UI.button
[ class "w-1/4 text-gray-500"
, onClick State.ViewNext
]
[ text "next " ]
]
]
, ul [ class "pt-6" ]
(weekday
|> habitsFor
|> List.indexedMap
(\i x ->
li [ class "text-xl list-disc ml-6" ]
[ if today == visibleDayOfWeek then
UI.button
[ class "py-5 px-3"
, tailwind
[ ( "line-through", Set.member i completed )
, ( "text-gray-400", Set.member i completed )
]
, onClick (State.ToggleHabit i)
]
[ text x ]
else
UI.button
[ class "py-5 px-3 cursor-not-allowed"
, onClick State.DoNothing
]
[ text x ]
]
)
)
, footer [ class "text-sm text-center text-gray-500 fixed bottom-0 left-0 w-full py-4" ]
[ p [] [ text "This app is brought to you by William Carroll." ]
, p [] [ text "Client: Elm; Server: n/a" ]
]
]