Support viewing different days

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

View file

@ -139,14 +139,45 @@ tailwind classes =
render : State.Model -> Html State.Msg render : State.Model -> Html State.Msg
render { dayOfWeek, completed } = render { today, visibleDayOfWeek, completed } =
case dayOfWeek of case visibleDayOfWeek of
Nothing -> Nothing ->
p [] [ text "Unable to display habits because we do not know what day of the week it is." ] p [] [ text "Unable to display habits because we do not know what day of the week it is." ]
Just weekday -> Just weekday ->
div [ class "font-mono py-6 px-6" ] div
[ h1 [ class "text-3xl text-center" ] [ text (weekdayName weekday) ] [ 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 [] , ul []
(weekday (weekday
|> habitsFor |> habitsFor
@ -156,11 +187,15 @@ render { dayOfWeek, completed } =
[ button [ button
[ class "py-5 px-3" [ class "py-5 px-3"
, tailwind , tailwind
[ ( "line-through" [ ( "line-through", today == visibleDayOfWeek && Set.member i completed )
, Set.member i completed
)
] ]
, onClick (State.ToggleHabit i) , onClick
(if today /= visibleDayOfWeek then
State.DoNothing
else
State.ToggleHabit i
)
] ]
[ text x ] [ text x ]
] ]

View file

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