Support viewing different days
Allow users to browse the habits of the other days of the week.
This commit is contained in:
parent
487232d1aa
commit
19fbdad1c0
2 changed files with 124 additions and 12 deletions
|
@ -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 ]
|
||||
]
|
||||
|
|
|
@ -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
|
||||
)
|
||||
|
|
Loading…
Reference in a new issue