Adding detail view for event intances.

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" ]
+        , case model.activeEventInstance of
-            [ div
+            Just eventInstance ->
-                [ classList
+                eventInstanceDetailView eventInstance
-                    [ ( "col-sm-3", True )
+
-                    , ( "col-sm-push-9", True )
+            Nothing ->
-                    , ( "schedule-filter", True )
+                scheduleOverviewView model
-                    ]
+        ]
+
+
+eventInstanceDetailView : EventInstance -> Html Msg
+eventInstanceDetailView eventInstance =
+    div [ class "row" ]
+        [ div [ class "col-sm-9" ]
+            [ div [ onClick CloseEventInstanceDetail ]
+                [ text "Back"
                 ]
-                [ h4 [] [ text "Filter" ]
+            , h4 [] [ text eventInstance.title ]
-                , div [ class "form-group" ]
+            , p [] [ Markdown.toHtml [] eventInstance.abstract ]
-                    [ 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)
             ]
+        , 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 ) ] ] []

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"
 }

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;
   }
 }