diff --git a/schedule/Main.elm b/schedule/Main.elm index d3dcb8f6..0062bc98 100644 --- a/schedule/Main.elm +++ b/schedule/Main.elm @@ -7,6 +7,7 @@ import WebSocket exposing (listen) import Json.Decode exposing (int, string, float, list, bool, Decoder) import Json.Encode import Json.Decode.Pipeline exposing (decode, required, optional, hardcoded) +import Markdown main : Program Flags Model Msg @@ -36,6 +37,7 @@ type alias Model = , flags : Flags , activeDay : Day , filter : Filter + , activeEventInstance : Maybe EventInstance } @@ -108,7 +110,7 @@ allDaysDay = init : Flags -> ( Model, Cmd Msg ) init flags = - ( Model [] [] [] [] flags allDaysDay (Filter [] []), sendInitMessage flags.camp_slug ) + ( Model [] [] [] [] flags allDaysDay (Filter [] []) Nothing, sendInitMessage flags.camp_slug ) sendInitMessage : String -> Cmd Msg @@ -133,6 +135,8 @@ type Msg | MakeActiveday Day | ToggleEventTypeFilter EventType | ToggleEventLocationFilter EventLocation + | OpenEventInstanceDetail EventInstance + | CloseEventInstanceDetail update : Msg -> Model -> ( Model, Cmd Msg ) @@ -146,7 +150,7 @@ update msg model = newModel = case Json.Decode.decodeString initDataDecoder str of Ok m -> - m model.flags allDaysDay (Filter [] []) + m model.flags allDaysDay (Filter [] []) Nothing Err error -> model @@ -188,6 +192,12 @@ update msg model = in { model | filter = newFilter } ! [] + OpenEventInstanceDetail eventInstance -> + { model | activeEventInstance = Just eventInstance } ! [] + + CloseEventInstanceDetail -> + { model | activeEventInstance = Nothing } ! [] + -- SUBSCRIPTIONS @@ -255,7 +265,7 @@ eventTypeDecoder = |> required "light_text" bool -initDataDecoder : Decoder (Flags -> Day -> Filter -> Model) +initDataDecoder : Decoder (Flags -> Day -> Filter -> Maybe EventInstance -> Model) initDataDecoder = decode Model |> required "days" (list dayDecoder) @@ -290,28 +300,60 @@ view model = (List.map (\day -> dayButton day model.activeDay) (allDaysDay :: model.days)) ] , hr [] [] - , div [ class "row" ] - [ div - [ classList - [ ( "col-sm-3", True ) - , ( "col-sm-push-9", True ) - , ( "schedule-filter", True ) - ] + , 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 "Filter" ] - , div [ class "form-group" ] - [ filterView "Type" model.eventTypes model.filter.eventTypes ToggleEventTypeFilter - , filterView "Location" model.eventLocations model.filter.eventLocations ToggleEventLocationFilter - ] - ] - , div - [ classList - [ ( "col-sm-9", True ) - , ( "col-sm-pull-3", True ) - ] - ] - (List.map (\day -> dayRowView day model) model.days) + , 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 + [ classList + [ ( "col-sm-3", True ) + , ( "col-sm-push-9", True ) + , ( "schedule-sidebar", True ) + , ( "schedule-filter", True ) + ] + ] + [ h4 [] [ text "Filter" ] + , div [ class "form-group" ] + [ filterView "Type" model.eventTypes model.filter.eventTypes ToggleEventTypeFilter + , filterView "Location" model.eventLocations model.filter.eventLocations ToggleEventLocationFilter + ] + ] + , div + [ classList + [ ( "col-sm-9", True ) + , ( "col-sm-pull-3", True ) + ] + ] + (List.map (\day -> dayRowView day model) model.days) ] @@ -353,7 +395,14 @@ dayRowView day model = dayEventInstanceView : EventInstance -> Html Msg 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 [] [ text ((String.slice 11 16 eventInstance.from) ++ " - " ++ (String.slice 11 16 eventInstance.to)) ] , i [ classList [ ( "fa", True ), ( "fa-" ++ eventInstance.locationIcon, True ), ( "pull-right", True ) ] ] [] diff --git a/schedule/elm-package.json b/schedule/elm-package.json index d17058e1..1400efe5 100644 --- a/schedule/elm-package.json +++ b/schedule/elm-package.json @@ -11,7 +11,8 @@ "NoRedInk/elm-decode-pipeline": "3.0.0 <= v < 4.0.0", "elm-lang/core": "5.1.1 <= v < 6.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" } diff --git a/src/static_src/css/bornhack.css b/src/static_src/css/bornhack.css index 2132be61..105e0b59 100644 --- a/src/static_src/css/bornhack.css +++ b/src/static_src/css/bornhack.css @@ -1,6 +1,7 @@ body { margin-top: 85px; margin-bottom: 35px; + overflow: scroll; } * { @@ -215,7 +216,7 @@ footer { @media (min-width: 520px) { - .schedule-filter { + .schedule-sidebar { border-left: 1px solid #eee; } }