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 : 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 ]
|
||||||
]
|
]
|
||||||
|
|
|
@ -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
|
||||||
|
)
|
||||||
|
|
Loading…
Reference in a new issue