176 lines
4.4 KiB
Elm
176 lines
4.4 KiB
Elm
module Views.DayView exposing (dayView)
|
|
|
|
-- Local modules
|
|
|
|
import Messages exposing (Msg(..))
|
|
import Models exposing (Model, Day, EventInstance)
|
|
|
|
|
|
-- Core modules
|
|
|
|
import Date exposing (Date)
|
|
|
|
|
|
-- External modules
|
|
|
|
import Html exposing (Html, text, div, ul, li, span, i, h4, table, p, a)
|
|
import Html.Attributes exposing (classList, style, href)
|
|
import Date.Extra
|
|
|
|
|
|
blockHeight : Int
|
|
blockHeight =
|
|
15
|
|
|
|
|
|
headerHeight : Int
|
|
headerHeight =
|
|
50
|
|
|
|
|
|
px : Int -> String
|
|
px value =
|
|
(toString value) ++ "px"
|
|
|
|
|
|
dayView : Day -> Model -> Html Msg
|
|
dayView day model =
|
|
let
|
|
start =
|
|
Date.Extra.add Date.Extra.Hour model.flags.schedule_midnight_offset_hours day.date
|
|
|
|
lastHour =
|
|
Date.Extra.add Date.Extra.Day 1 start
|
|
|
|
minutes =
|
|
Date.Extra.range Date.Extra.Minute 15 start lastHour
|
|
|
|
filteredEventInstances =
|
|
List.filter (\x -> Date.Extra.equalBy Date.Extra.Day x.from day.date) model.eventInstances
|
|
in
|
|
div
|
|
[ classList [ ( "row", True ) ] ]
|
|
[ gutter minutes
|
|
, locationColumns minutes filteredEventInstances model.eventLocations
|
|
]
|
|
|
|
|
|
locationColumns minutes eventInstances eventLocations =
|
|
let
|
|
columnWidth =
|
|
100.0 / toFloat (List.length eventLocations)
|
|
in
|
|
div
|
|
[ style
|
|
[ ( "display", "flex" )
|
|
, ( "justify-content", "space-around" )
|
|
]
|
|
, classList
|
|
[ ( "col-sm-11", True )
|
|
]
|
|
]
|
|
(List.map (\x -> locationColumn columnWidth minutes eventInstances x) eventLocations)
|
|
|
|
|
|
locationColumn columnWidth minutes eventInstances location =
|
|
let
|
|
locationInstances =
|
|
List.filter (\x -> x.location == location.slug) eventInstances
|
|
in
|
|
div
|
|
[ style
|
|
[ ( "width", (toString columnWidth) ++ "%" )
|
|
]
|
|
, classList
|
|
[ ( "location-column", True ) ]
|
|
]
|
|
([ div
|
|
[ style
|
|
[ ( "height", px headerHeight )
|
|
]
|
|
, classList
|
|
[ ( "location-column-header", True )
|
|
]
|
|
]
|
|
[ text location.name ]
|
|
]
|
|
++ (List.map (\x -> hourBlock locationInstances x) minutes)
|
|
)
|
|
|
|
|
|
hourBlock eventInstances minutes =
|
|
let
|
|
filteredEventInstances =
|
|
List.filter (\x -> Date.Extra.equalBy Date.Extra.Minute minutes x.from) eventInstances
|
|
in
|
|
div
|
|
[ style
|
|
[ ( "display", "flex" )
|
|
, ( "height", px blockHeight )
|
|
]
|
|
, classList
|
|
[ ( "location-column-slot", True )
|
|
]
|
|
]
|
|
(List.map eventInstanceBlock filteredEventInstances)
|
|
|
|
|
|
eventInstanceBlock : EventInstance -> Html Msg
|
|
eventInstanceBlock eventInstance =
|
|
let
|
|
length =
|
|
(toFloat (Date.Extra.diff Date.Extra.Minute eventInstance.from eventInstance.to)) / 15
|
|
|
|
height =
|
|
(toString (length * toFloat blockHeight)) ++ "px"
|
|
in
|
|
a
|
|
[ classList
|
|
[ ( "event", True )
|
|
, ( "event-in-dayview", True )
|
|
]
|
|
, style
|
|
[ ( "height", height )
|
|
, ( "background-color", eventInstance.backgroundColor )
|
|
, ( "color", eventInstance.forgroundColor )
|
|
]
|
|
, href ("#event/" ++ eventInstance.eventSlug)
|
|
]
|
|
[ p [] [ text ((Date.Extra.toFormattedString "HH:mm" eventInstance.from) ++ " " ++ eventInstance.title) ]
|
|
]
|
|
|
|
|
|
gutter : List Date -> Html Msg
|
|
gutter hours =
|
|
div
|
|
[ classList
|
|
[ ( "col-sm-1", True )
|
|
, ( "day-view-gutter", True )
|
|
]
|
|
]
|
|
([ div [ style [ ( "height", px headerHeight ) ] ]
|
|
[ text ""
|
|
]
|
|
]
|
|
++ (List.map gutterHour hours)
|
|
)
|
|
|
|
|
|
gutterHour : Date -> Html Msg
|
|
gutterHour date =
|
|
let
|
|
textToShow =
|
|
case Date.minute date of
|
|
0 ->
|
|
(Date.Extra.toFormattedString "HH:mm" date)
|
|
|
|
30 ->
|
|
(Date.Extra.toFormattedString "HH:mm" date)
|
|
|
|
_ ->
|
|
""
|
|
in
|
|
div [ style [ ( "height", px blockHeight ) ] ]
|
|
[ text textToShow
|
|
]
|