diff options
| -rw-r--r-- | scratch/habit-screens/client/src/Habits.elm | 51 | ||||
| -rw-r--r-- | scratch/habit-screens/client/src/State.elm | 85 |
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 + ) |