Accomplished feature parity in filtering.

This commit is contained in:
Vidir Valberg Gudmundsson 2017-07-16 14:11:04 +02:00
parent a6470d2ec9
commit b49a0ad556
3 changed files with 87 additions and 9 deletions

View file

@ -1,7 +1,7 @@
module Main exposing (..) module Main exposing (..)
import Html exposing (Html, Attribute, div, input, text, li, ul, a, h4, label, i, span) import Html exposing (Html, Attribute, div, input, text, li, ul, a, h4, label, i, span, hr, small, p)
import Html.Attributes exposing (class, classList, id, type_, for) import Html.Attributes exposing (class, classList, id, type_, for, style)
import Html.Events exposing (onClick) import Html.Events exposing (onClick)
import WebSocket exposing (listen) import WebSocket exposing (listen)
import Json.Decode exposing (int, string, float, list, bool, Decoder) import Json.Decode exposing (int, string, float, list, bool, Decoder)
@ -101,6 +101,7 @@ type alias Flags =
} }
allDaysDay : Day
allDaysDay = allDaysDay =
Day "All Days" "" "" Day "All Days" "" ""
@ -288,11 +289,12 @@ view model =
[ div [ id "schedule-days", class "btn-group" ] [ div [ id "schedule-days", class "btn-group" ]
(List.map (\day -> dayButton day model.activeDay) (allDaysDay :: model.days)) (List.map (\day -> dayButton day model.activeDay) (allDaysDay :: model.days))
] ]
, hr [] []
, div [ class "row" ] , div [ class "row" ]
[ div [ div
[ classList [ classList
[ ( "col-sm-3", True ) [ ( "col-sm-3", True )
, ( "col-sm-9", True ) , ( "col-sm-push-9", True )
, ( "schedule-filter", True ) , ( "schedule-filter", True )
] ]
] ]
@ -302,11 +304,65 @@ view model =
, filterView "Location" model.eventLocations model.filter.eventLocations ToggleEventLocationFilter , filterView "Location" model.eventLocations model.filter.eventLocations ToggleEventLocationFilter
] ]
] ]
, div [] [] , div
[ classList
[ ( "col-sm-9", True )
, ( "col-sm-pull-3", True )
]
]
(List.map (\day -> dayRowView day model) model.days)
] ]
] ]
dayRowView : Day -> Model -> Html Msg
dayRowView day model =
let
types =
List.map (\eventType -> eventType.slug)
(if List.isEmpty model.filter.eventTypes then
model.eventTypes
else
model.filter.eventTypes
)
locations =
List.map (\eventLocation -> eventLocation.slug)
(if List.isEmpty model.filter.eventLocations then
model.eventLocations
else
model.filter.eventLocations
)
filteredEventInstances =
List.filter
(\eventInstance ->
((String.slice 0 10 eventInstance.from) == day.iso)
&& List.member eventInstance.location locations
&& List.member eventInstance.eventType types
)
model.eventInstances
in
div []
[ h4 []
[ text day.repr ]
, div [ class "schedule-day-row" ]
(List.map dayEventInstanceView filteredEventInstances)
]
dayEventInstanceView : EventInstance -> Html Msg
dayEventInstanceView eventInstance =
a [ class "event", 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 ) ] ] []
, p
[]
[ text eventInstance.title ]
]
filterView : filterView :
String String
-> List { a | name : String } -> List { a | name : String }
@ -348,8 +404,3 @@ filterChoiceView filter currentFilters action =
] ]
] ]
] ]
locationFilter : List EventLocation -> Html Msg
locationFilter eventLocations =
div [] [ text "Location:" ]

View file

@ -1,2 +1,5 @@
all: all:
elm-make Main.elm --output ../src/program/static/js/elm_based_schedule.js
debug:
elm-make Main.elm --debug --output ../src/program/static/js/elm_based_schedule.js elm-make Main.elm --debug --output ../src/program/static/js/elm_based_schedule.js

View file

@ -0,0 +1,24 @@
{% extends 'program_base.html' %}
{% load commonmark %}
{% load staticfiles %}
{% block program_content %}
<div id="schedule-container"></div>
<script src="{% static "js/elm_based_schedule.js" %}"></script>
<script>
var container = document.getElementById('schedule-container');
Elm.Main.embed(
container,
{ 'schedule_timeslot_length_minutes': Number('{{ schedule_timeslot_length_minutes }}')
, 'schedule_midnight_offset_hours': Number('{{ schedule_midnight_offset_hours }}')
, 'ics_button_href': "{% url 'ics_view' camp_slug=camp.slug %}"
, 'camp_slug': "{{ camp.slug }}"
}
);
</script>
{% endblock %}