Adding detail view for event intances.
This commit is contained in:
parent
9b36959057
commit
543347aaff
|
|
@ -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 ) ] ] []
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue