school-timetracker/frontend/src/View/Components/Schedule.elm

76 lines
2 KiB
Elm

module View.Components.Schedule exposing (viewScheduleItemWithDay)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Types.Model exposing (Model, Schedule)
import Types.Msg exposing (Msg(..))
viewScheduleItemWithDay : Model -> Int -> Schedule -> Html Msg
viewScheduleItemWithDay model dayOfWeek schedule =
let
isSelected =
List.any (\e -> e.scheduleId == schedule.id && e.dayOfWeek == dayOfWeek) model.selectedEntries
isClickable =
(not model.hasEntriesForCurrentWeek || model.weekEditMode) && not model.isProcessing
boxClass =
if isSelected then
"box has-background-success-light"
else if isClickable then
"box has-background-white"
else
"box has-background-light"
typeText =
if schedule.scheduleType == "break" then
" (Pause)"
else
""
cursorStyle =
if isClickable then
"pointer"
else
"not-allowed"
opacity =
if isClickable || isSelected then
"1"
else
"0.6"
in
div
[ class boxClass
, onClick
(if isClickable then
ToggleScheduleSelection schedule.id dayOfWeek
else
FetchSchedules
)
, style "cursor" cursorStyle
, style "margin-bottom" "0.5rem"
, style "padding" "0.75rem"
, style "opacity" opacity
, style "transition" "all 0.2s ease"
, style "border"
(if isClickable && not isSelected then
"2px solid transparent"
else
"2px solid currentColor"
)
]
[ p [ class "has-text-weight-bold is-size-7" ]
[ text (schedule.startTime ++ " - " ++ schedule.endTime) ]
, p [ class "is-size-7" ]
[ text (schedule.title ++ typeText) ]
]