reynir/bornhack-website
1
0
Fork 0
Code Issues Pull requests 1 Releases Wiki Activity

Revamping filtering big time!

Browse source
This commit is contained in:
Víðir Valberg Guðmundsson 2017-04-21 01:34:22 +02:00
parent 691c6533c3
commit 9071a9c524
6 changed files with 210 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/program/consumers.py
View file

@ -1,5 +1,6 @@
from channels.generic.websockets import JsonWebsocketConsumer
from camps.models import Camp
from .models import EventInstance, Favorite
@ -10,7 +11,17 @@ class ScheduleConsumer(JsonWebsocketConsumer):
return ['schedule_users']
def connect(self, message, **kwargs):
self.send({"accept": True})
camp_slug = message.http_session['campslug']
camp = Camp.objects.get(slug=camp_slug)
days = list(map(lambda x: {'repr': x.lower.strftime('%A %Y-%m-%d'), 'iso': x.lower.strftime('%Y-%m-%d')}, camp.get_days('camp')))
event_instances_query_set = EventInstance.objects.filter(event__camp=camp)
event_instances = list(map(lambda x: x.to_json(), event_instances_query_set))
self.send({
"accept": True,
"event_instances": event_instances,
"days": days,
"action": "init"
})
def raw_receive(self, message, **kwargs):
content = self.decode_json(message['text'])

9
src/program/models.py
View file

@ -460,13 +460,18 @@ class EventInstance(CampRelatedModel):
'event_slug': self.event.slug,
'abstract': abstract,
'from': self.when.lower.isoformat(),
'to': self.when.lower.isoformat(),
'to': self.when.upper.isoformat(),
'url': str(self.event.get_absolute_url()),
'id': self.id,
'speakers': [
{ 'name': speaker.name
, 'url': str(speaker.get_absolute_url())
} for speaker in self.event.speakers.all()]
} for speaker in self.event.speakers.all()
],
'bg-color': self.event.event_type.color,
'fg-color': '#fff' if self.event.event_type.light_text else '#000',
'event_type': self.event.event_type.slug,
'location': self.location.slug,
}
if user and user.is_authenticated:

112
src/program/static/js/event_instance_websocket.js
View file

@ -1,5 +1,6 @@
const webSocketBridge = new channels.WebSocketBridge();
var modals = {};
var EVENT_INSTANCES, DAYS;
function toggleFavoriteButton(button) {
if(button.getAttribute('data-state') == 'true') {
@ -27,9 +28,8 @@ function toggleFavoriteButton(button) {
}
webSocketBridge.connect('/schedule/');
webSocketBridge.socket.addEventListener('open', function() {
webSocketBridge.send({action: 'init', camp_slug: '{{ camp.slug }}'});
});
//webSocketBridge.socket.addEventListener('open', function() {
//});
webSocketBridge.listen(function(payload, stream) {
if(payload['action'] == 'event_instance') {
event_instance_id = payload['event_instance']['id'];
@ -60,8 +60,95 @@ webSocketBridge.listen(function(payload, stream) {
speakers_div.appendChild(speaker_li);
}
}
if(payload['action'] == 'init') {
EVENT_INSTANCES = payload['event_instances'];
console.log(EVENT_INSTANCES);
DAYS = payload['days'];
render_schedule([], []);
}
});
function render_schedule(types, locations) {
var event_instances = get_instances(types, locations);
var schedule_container = document.getElementById('schedule-container');
schedule_container.innerHTML = "";
var cloned_days = DAYS.slice(0);
var rendered_days = cloned_days.map(function(day) {
day_event_instances = event_instances.slice(0).filter(
function(event_instance) {
var event_day = event_instance['from'].slice(0, 10);
return event_day == day['iso'];
}
);
return render_day(day, day_event_instances);
});
for(day_id in rendered_days) {
schedule_container.appendChild(rendered_days[day_id]['label']);
schedule_container.appendChild(rendered_days[day_id]['element']);
}
}
function render_day(day, event_instances) {
var element = document.createElement('div');
element.classList.add('schedule-day-row');
var day_label = document.createElement('h4');
day_label.innerHTML = day['repr'];
element.appendChild(day_label);
for(event_instance_id in event_instances) {
var event_instance = event_instances[event_instance_id];
var rendered_event_instance = render_event_instance(event_instance);
element.appendChild(rendered_event_instance);
}
return {"label": day_label, "element": element};
}
function render_event_instance(event_instance) {
var element = document.createElement('a');
element.setAttribute(
'style',
'background-color: ' + event_instance['bg-color'] +
'; color: ' + event_instance['fg-color']);
element.classList.add('event');
element.dataset.eventInstanceId = event_instance['id'];
time_element = document.createElement('small');
time_element.innerHTML = event_instance.from.slice(11, 16) + " - " + event_instance.to.slice(11, 16);
title_element = document.createElement('p');
title_element.innerHTML = event_instance['title'];
element.appendChild(time_element);
element.appendChild(title_element);
element.onclick = openModal
return element
}
function get_instances(types, locations) {
var event_instances = EVENT_INSTANCES.slice(0);
if(locations.length != 0) {
event_instances = event_instances.filter(
function(event_instance) {
return locations.includes(event_instance['location']);
}
);
}
if(types.length != 0) {
event_instances = event_instances.filter(
function(event_instance) {
console.log(event_instance['event_type']);
console.log(types);
console.log(event_instance['event_type'] in types);
return types.includes(event_instance['event_type']);
}
);
}
return event_instances
}
function openModal(e) {
e.preventDefault();
@ -71,7 +158,7 @@ function openModal(e) {
target = e.target.parentElement
}
event_instance_id = target.dataset['eventinstanceId'];
event_instance_id = target.dataset.eventInstanceId;
modal = modals[event_instance_id];
@ -88,12 +175,27 @@ function openModal(e) {
webSocketBridge.send({action: 'get_event_instance', event_instance_id: event_instance_id})
}
function init_modals(event_class_name) {
var event_elements = document.getElementsByClassName(event_class_name);
for (var event_id in event_elements) {
event_element = event_elements.item(event_id);
if(event_element != null) {
event_element.onclick = openModal
}
}
}
var filter = document.getElementById('filter')
filter.addEventListener('change', function(e) {
var type_input = Array.prototype.slice.call(document.querySelectorAll('.event-type-checkbox:checked'));
var types = type_input.map(function(box) {
return box.value
})
var location_input = Array.prototype.slice.call(document.querySelectorAll('.location-checkbox:checked'));
var event_locations = location_input.map(function(box) {
return box.value
})
render_schedule(types, event_locations);
});

69
src/program/templates/schedule_base.html
View file

@ -4,37 +4,53 @@
{% block program_content %}
<div class="row">
<div class="col-sm-12">
<form method="get" id="filter" class="form-inline">
<div class="form-group">
<select id="day" name="day" class="form-control filter-control">
<option value="">All Days</option>
<div class="schedule-days btn-group">
<a href="{% url 'schedule_index' camp_slug=camp.slug %}" class="btn btn-default">
<li>All days</li>
</a>
{% for day in camp.camp_days %}
{% with month_padded=day.lower.date|date:"m" day_padded=day.lower.date|date:"d" %}
<option
value="{{ day.lower.date|date:"Y-m-d" }}"
{% if urlyear and urlyear|add:"0" == day.lower.date.year and urlmonth == month_padded and urlday == day_padded %}
selected
{% endif %}>
<a href="{% url 'schedule_day' camp_slug=camp.slug year=day.lower.date.year month=day.lower.date|date:'m' day=day.lower.date|date:'d' %}" class="btn btn-{% if urlyear and urlyear|add:"0" == day.lower.date.year and urlmonth == month_padded and urlday == day_padded %}primary{% else %}default{% endif %}">
{{ day.lower.date|date:"l" }}
</option>
</a>
{% endwith %}
{% endfor %}
</select>
</div>
</div>
<select id="event_type" name="event_type" class="form-control filter-control">
<option value="">All Types</option>
<hr />
<div class="row">
<div class="col-sm-3 col-sm-push-9 schedule-filter">
<form id="filter" class="form-inline">
<div class="form-group">
<div>
<h4>Type:</h4>
<ul>
{% for type in camp.event_types %}
<option value="{{ type.slug }}"{% if eventtype and eventtype == type %}selected{% endif %}>{{ type.name }}</option>
<li>
<input type="checkbox"
name="event_type"
value="{{ type.slug }}"
class="form-control event-type-checkbox"/> {{ type.name }}
</li>
{% endfor %}
</select>
</ul>
</div>
<select id="location" name="location" class="fa-select form-control filter-control">
<option value="">&#xf0ac; All Locations</option>
{% for loc in camp.event_locations %}
<option value="{{ loc.slug }}" {% if location and location == loc %}selected{% endif %}>&#x{{ loc.icon }}; {{ loc.name }}</option>
<div>
<h4>Location:</h4>
<ul>
{% for location in camp.event_locations %}
<li>
<input type="checkbox"
name="locations"
value="{{ location.slug }}"
class="form-control location-checkbox"/> {{ location.name }}
</li>
{% endfor %}
</select>
</ul>
</div>
<a href="{% url 'ics_view' camp_slug=camp.slug %}{{ get_string }}" class="btn btn-default form-control filter-control">
<i class="fa fa-calendar"></i> ICS
@ -42,26 +58,23 @@
</div>
</form>
</div>
<div class="col-sm-9 col-sm-pull-3">
{% block schedule_content %}
{% endblock schedule_content %}
</div>
</div>
<hr />
{% block schedule_content %}
{% endblock schedule_content %}
{% url 'schedule_index' camp_slug=camp.slug as baseurl %}
<script>
$('.filter-control').on('change', function() {
var day = $('#day').val();
var type = $('#event_type').val();
var loc = $('#location').val();
var url = "{{baseurl}}";
if(day) {
url = url + day + '/';
}
if(type != '' || loc != '') {
url = url + '?';
if(type != '') {

9
src/program/templates/schedule_overview.html
View file

@ -4,6 +4,10 @@
{% load staticfiles %}
{% block schedule_content %}
<div id="schedule-container"></div>
{% comment %}
{% if eventinstances %}
{% for day in camp.camp_days %}
{{ day.lower.date|date:"D d/m" }} <br />
@ -29,13 +33,10 @@
{% else %}
<h2>No scheduled events for {{ camp.title }} yet!</h2>
{% endif %}
{% endcomment %}
{% include "event_modal.html" %}
<script src="{% static "channels/js/websocketbridge.js" %}"></script>
<script src="{% static "js/event_instance_websocket.js" %}"></script>
<script>
init_modals('event');
</script>
{% endblock schedule_content %}

33
src/static_src/css/bornhack.css
View file

@ -89,10 +89,6 @@ a, a:active, a:focus {
/* btn-group */
.btn-group .btn {
border-right: 0;
}
.btn-group .btn:last-of-type {
border-right: 1px solid #ccc;
}
@ -161,6 +157,7 @@ footer {
min-height: 100px;
flex-grow: 1;
border: 1px solid black;
cursor: pointer;
}
.event-td {
@ -207,3 +204,31 @@ footer {
padding: 5px !important;
border: 0 !important;
}
.schedule-filter ul {
list-style: none;
padding: 0;
}
@media (min-width: 520px) {
.schedule-filter {
border-left: 1px solid #eee;
}
}
.schedule-days {
list-style: none;
padding: 0;
display: flex;
}
.schedule-days a {
display: inline;
flex-grow: 1;
}
.schedule-day-row {
display: flex;
flex-wrap: wrap;
}