mdebray/tvl-depot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Support viewing different days

Browse source 
Allow users to browse the habits of the other days of the week.
This commit is contained in:
William Carroll 2020-10-10 18:10:40 +01:00
parent 487232d1aa
commit 19fbdad1c0
2 changed files with 124 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
scratch/habit-screens/client/src/Habits.elm
View file

@ -139,14 +139,45 @@ tailwind classes =
render : State.Model -> Html State.Msg
render { dayOfWeek, completed } =
case dayOfWeek of
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 "font-mono py-6 px-6" ]
[ h1 [ class "text-3xl text-center" ] [ text (weekdayName weekday) ]
div
[ class "font-sans 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" ]
, 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" ]
[ button
[ class "w-1/4 text-gray-500"
, onClick State.ViewPrevious
]
[ text "‹ previous" ]
, h1 [ class "font-bold text-gray-500 text-3xl text-center w-full" ]
[ text (weekdayName weekday) ]
, button
[ class "w-1/4 text-gray-500"
, onClick State.ViewNext
]
[ text "next ›" ]
]
]
, ul []
(weekday
|> habitsFor
@ -156,11 +187,15 @@ render { dayOfWeek, completed } =
[ button
[ class "py-5 px-3"
, tailwind
[ ( "line-through"
, Set.member i completed
)
[ ( "line-through", today == visibleDayOfWeek && Set.member i completed )
]
, onClick (State.ToggleHabit i)
, onClick
(if today /= visibleDayOfWeek then
State.DoNothing
else
State.ToggleHabit i
)
]
[ text x ]
]

85
scratch/habit-screens/client/src/State.elm
View file

@ -12,6 +12,9 @@ type Msg
| ReceiveDate Date.Date
| ToggleHabit Int
| MaybeAdjustWeekday
| ViewToday
| ViewPrevious
| ViewNext
type View
@ -31,19 +34,71 @@ type alias Habit =
type alias Model =
{ isLoading : Bool
, view : View
, dayOfWeek : Maybe Weekday
, today : Maybe Weekday
, completed : Set Int
, visibleDayOfWeek : Maybe Weekday
}
previousDay : Weekday -> Weekday
previousDay weekday =
case weekday of
Mon ->
Sun
Tue ->
Mon
Wed ->
Tue
Thu ->
Wed
Fri ->
Thu
Sat ->
Fri
Sun ->
Sat
nextDay : Weekday -> Weekday
nextDay weekday =
case weekday of
Mon ->
Tue
Tue ->
Wed
Wed ->
Thu
Thu ->
Fri
Fri ->
Sat
Sat ->
Sun
Sun ->
Mon
{-| The initial state for the application.
-}
init : ( Model, Cmd Msg )
init =
( { isLoading = False
, view = Habits
, dayOfWeek = Nothing
, today = Nothing
, completed = Set.empty
, visibleDayOfWeek = Nothing
}
, Date.today |> Task.perform ReceiveDate
)
@ -52,7 +107,7 @@ init =
{-| Now that we have state, we need a function to change the state.
-}
update : Msg -> Model -> ( Model, Cmd Msg )
update msg ({ completed } as model) =
update msg ({ today, visibleDayOfWeek, completed } as model) =
case msg of
DoNothing ->
( model, Cmd.none )
@ -66,7 +121,12 @@ update msg ({ completed } as model) =
)
ReceiveDate x ->
( { model | dayOfWeek = Just (Date.weekday x) }, Cmd.none )
( { model
| today = Just (Date.weekday x)
, visibleDayOfWeek = Just (Date.weekday x)
}
, Cmd.none
)
ToggleHabit i ->
( { model
@ -82,3 +142,20 @@ update msg ({ completed } as model) =
MaybeAdjustWeekday ->
( model, Date.today |> Task.perform ReceiveDate )
ViewToday ->
( { model | visibleDayOfWeek = today }, Cmd.none )
ViewPrevious ->
( { model
| visibleDayOfWeek = visibleDayOfWeek |> Maybe.map previousDay
}
, Cmd.none
)
ViewNext ->
( { model
| visibleDayOfWeek = visibleDayOfWeek |> Maybe.map nextDay
}
, Cmd.none
)