Support viewing different days

Allow users to browse the habits of the other days of the week.

2 files changed, 124 insertions, 12 deletions

diff --git a/scratch/habit-screens/client/src/Habits.elm b/scratch/habit-screens/client/src/Habits.elm
index bf9e594cb003..f605ba7a3474 100644
--- a/scratch/habit-screens/client/src/Habits.elm
+++ b/scratch/habit-screens/client/src/Habits.elm
@@ -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 ]
                                     ]
diff --git a/scratch/habit-screens/client/src/State.elm b/scratch/habit-screens/client/src/State.elm
index 5bfa5c92802b..3369d843ffbe 100644
--- a/scratch/habit-screens/client/src/State.elm
+++ b/scratch/habit-screens/client/src/State.elm
@@ -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
+            )