Adding detail view for event intances.

This commit is contained in:
Vidir Valberg Gudmundsson 2017-07-16 17:32:26 +02:00
parent 9b36959057
commit 543347aaff
3 changed files with 77 additions and 26 deletions

View file

@ -7,6 +7,7 @@ import WebSocket exposing (listen)
import Json.Decode exposing (int, string, float, list, bool, Decoder) import Json.Decode exposing (int, string, float, list, bool, Decoder)
import Json.Encode import Json.Encode
import Json.Decode.Pipeline exposing (decode, required, optional, hardcoded) import Json.Decode.Pipeline exposing (decode, required, optional, hardcoded)
import Markdown
main : Program Flags Model Msg main : Program Flags Model Msg
@ -36,6 +37,7 @@ type alias Model =
, flags : Flags , flags : Flags
, activeDay : Day , activeDay : Day
, filter : Filter , filter : Filter
, activeEventInstance : Maybe EventInstance
} }
@ -108,7 +110,7 @@ allDaysDay =
init : Flags -> ( Model, Cmd Msg ) init : Flags -> ( Model, Cmd Msg )
init flags = init flags =
( Model [] [] [] [] flags allDaysDay (Filter [] []), sendInitMessage flags.camp_slug ) ( Model [] [] [] [] flags allDaysDay (Filter [] []) Nothing, sendInitMessage flags.camp_slug )
sendInitMessage : String -> Cmd Msg sendInitMessage : String -> Cmd Msg
@ -133,6 +135,8 @@ type Msg
| MakeActiveday Day | MakeActiveday Day
| ToggleEventTypeFilter EventType | ToggleEventTypeFilter EventType
| ToggleEventLocationFilter EventLocation | ToggleEventLocationFilter EventLocation
| OpenEventInstanceDetail EventInstance
| CloseEventInstanceDetail
update : Msg -> Model -> ( Model, Cmd Msg ) update : Msg -> Model -> ( Model, Cmd Msg )
@ -146,7 +150,7 @@ update msg model =
newModel = newModel =
case Json.Decode.decodeString initDataDecoder str of case Json.Decode.decodeString initDataDecoder str of
Ok m -> Ok m ->
m model.flags allDaysDay (Filter [] []) m model.flags allDaysDay (Filter [] []) Nothing
Err error -> Err error ->
model model
@ -188,6 +192,12 @@ update msg model =
in in
{ model | filter = newFilter } ! [] { model | filter = newFilter } ! []
OpenEventInstanceDetail eventInstance ->
{ model | activeEventInstance = Just eventInstance } ! []
CloseEventInstanceDetail ->
{ model | activeEventInstance = Nothing } ! []
-- SUBSCRIPTIONS -- SUBSCRIPTIONS
@ -255,7 +265,7 @@ eventTypeDecoder =
|> required "light_text" bool |> required "light_text" bool
initDataDecoder : Decoder (Flags -> Day -> Filter -> Model) initDataDecoder : Decoder (Flags -> Day -> Filter -> Maybe EventInstance -> Model)
initDataDecoder = initDataDecoder =
decode Model decode Model
|> required "days" (list dayDecoder) |> required "days" (list dayDecoder)
@ -290,11 +300,44 @@ view model =
(List.map (\day -> dayButton day model.activeDay) (allDaysDay :: model.days)) (List.map (\day -> dayButton day model.activeDay) (allDaysDay :: model.days))
] ]
, hr [] [] , hr [] []
, div [ class "row" ] , case model.activeEventInstance of
Just eventInstance ->
eventInstanceDetailView eventInstance
Nothing ->
scheduleOverviewView model
]
eventInstanceDetailView : EventInstance -> Html Msg
eventInstanceDetailView eventInstance =
div [ class "row" ]
[ div [ class "col-sm-9" ]
[ div [ onClick CloseEventInstanceDetail ]
[ text "Back"
]
, h4 [] [ text eventInstance.title ]
, p [] [ Markdown.toHtml [] eventInstance.abstract ]
]
, div
[ classList
[ ( "col-sm-3", True )
, ( "schedule-sidebar", True )
]
]
[ h4 [] [ text "Speakers" ]
]
]
scheduleOverviewView : Model -> Html Msg
scheduleOverviewView model =
div [ class "row" ]
[ div [ div
[ classList [ classList
[ ( "col-sm-3", True ) [ ( "col-sm-3", True )
, ( "col-sm-push-9", True ) , ( "col-sm-push-9", True )
, ( "schedule-sidebar", True )
, ( "schedule-filter", True ) , ( "schedule-filter", True )
] ]
] ]
@ -312,7 +355,6 @@ view model =
] ]
(List.map (\day -> dayRowView day model) model.days) (List.map (\day -> dayRowView day model) model.days)
] ]
]
dayRowView : Day -> Model -> Html Msg dayRowView : Day -> Model -> Html Msg
@ -353,7 +395,14 @@ dayRowView day model =
dayEventInstanceView : EventInstance -> Html Msg dayEventInstanceView : EventInstance -> Html Msg
dayEventInstanceView eventInstance = dayEventInstanceView eventInstance =
a [ class "event", style [ ( "background-color", eventInstance.backgroundColor ), ( "color", eventInstance.forgroundColor ) ] ] a
[ class "event"
, onClick (OpenEventInstanceDetail eventInstance)
, style
[ ( "background-color", eventInstance.backgroundColor )
, ( "color", eventInstance.forgroundColor )
]
]
[ small [] [ small []
[ text ((String.slice 11 16 eventInstance.from) ++ " - " ++ (String.slice 11 16 eventInstance.to)) ] [ text ((String.slice 11 16 eventInstance.from) ++ " - " ++ (String.slice 11 16 eventInstance.to)) ]
, i [ classList [ ( "fa", True ), ( "fa-" ++ eventInstance.locationIcon, True ), ( "pull-right", True ) ] ] [] , i [ classList [ ( "fa", True ), ( "fa-" ++ eventInstance.locationIcon, True ), ( "pull-right", True ) ] ] []

View file

@ -11,7 +11,8 @@
"NoRedInk/elm-decode-pipeline": "3.0.0 <= v < 4.0.0", "NoRedInk/elm-decode-pipeline": "3.0.0 <= v < 4.0.0",
"elm-lang/core": "5.1.1 <= v < 6.0.0", "elm-lang/core": "5.1.1 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0", "elm-lang/html": "2.0.0 <= v < 3.0.0",
"elm-lang/websocket": "1.0.2 <= v < 2.0.0" "elm-lang/websocket": "1.0.2 <= v < 2.0.0",
"evancz/elm-markdown": "3.0.2 <= v < 4.0.0"
}, },
"elm-version": "0.18.0 <= v < 0.19.0" "elm-version": "0.18.0 <= v < 0.19.0"
} }

View file

@ -1,6 +1,7 @@
body { body {
margin-top: 85px; margin-top: 85px;
margin-bottom: 35px; margin-bottom: 35px;
overflow: scroll;
} }
* { * {
@ -215,7 +216,7 @@ footer {
@media (min-width: 520px) { @media (min-width: 520px) {
.schedule-filter { .schedule-sidebar {
border-left: 1px solid #eee; border-left: 1px solid #eee;
} }
} }