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

Now with support for days!

Browse source
This commit is contained in:
Víðir Valberg Guðmundsson 2017-04-27 00:23:03 +02:00
parent 698698a96b
commit c845dca950
7 changed files with 329 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/program/consumers.py
View file

@ -13,7 +13,14 @@ class ScheduleConsumer(JsonWebsocketConsumer):
def connect(self, message, **kwargs):
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')))
days = list(map(
lambda day:
{ 'repr': day.lower.strftime('%A %Y-%m-%d')
, 'iso': day.lower.strftime('%Y-%m-%d')
, 'day_name': day.lower.strftime('%A')
},
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({

1
src/program/models.py
View file

@ -472,6 +472,7 @@ class EventInstance(CampRelatedModel):
'fg-color': '#fff' if self.event.event_type.light_text else '#000',
'event_type': self.event.event_type.slug,
'location': self.location.slug,
'timeslots': self.timeslots,
}
if user and user.is_authenticated:

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

@ -1,6 +1,6 @@
const webSocketBridge = new channels.WebSocketBridge();
var modals = {};
var EVENT_INSTANCES, DAYS;
var EVENT_INSTANCES = [], DAYS = [], CONFIG = {};
function toggleFavoriteButton(button) {
if(button.getAttribute('data-state') == 'true') {
@ -27,65 +27,199 @@ function toggleFavoriteButton(button) {
}
}
webSocketBridge.connect('/schedule/');
webSocketBridge.listen(function(payload, stream) {
if(payload['action'] == 'event_instance') {
event_instance_id = payload['event_instance']['id'];
modal = modals[event_instance_id];
modal_title = modal.getElementsByClassName('modal-title')[0];
modal_title.innerHTML = payload['event_instance']['title']
modal_body_content = modal.getElementsByClassName('modal-body-content')[0];
modal_body_content.innerHTML = payload['event_instance']['abstract'];
more_button = modal.getElementsByClassName('more-button')[0];
more_button.setAttribute('href', payload['event_instance']['url']);
favorite_button = modal.getElementsByClassName('favorite-button')[0];
if(payload['event_instance']['is_favorited'] !== undefined) {
favorite_button.setAttribute('data-state', payload['event_instance']['is_favorited'])
toggleFavoriteButton(favorite_button);
} else {
favorite_button.remove();
}
function setup_websocket() {
webSocketBridge.connect('/schedule/');
webSocketBridge.listen(function(payload, stream) {
if(payload['action'] == 'event_instance') {
event_instance_id = payload['event_instance']['id'];
modal = modals[event_instance_id];
modal_title = modal.getElementsByClassName('modal-title')[0];
modal_title.innerHTML = payload['event_instance']['title']
modal_body_content = modal.getElementsByClassName('modal-body-content')[0];
modal_body_content.innerHTML = payload['event_instance']['abstract'];
more_button = modal.getElementsByClassName('more-button')[0];
more_button.setAttribute('href', payload['event_instance']['url']);
favorite_button = modal.getElementsByClassName('favorite-button')[0];
if(payload['event_instance']['is_favorited'] !== undefined) {
favorite_button.setAttribute('data-state', payload['event_instance']['is_favorited'])
toggleFavoriteButton(favorite_button);
} else {
favorite_button.remove();
}
speakers_div = modal.getElementsByClassName('speakers')[0];
speakers = payload['event_instance']['speakers'];
for(speaker_id in speakers) {
var speaker = speakers[speaker_id];
var speaker_li = document.createElement('li');
var speaker_a = document.createElement('a');
speaker_a.setAttribute('href', speaker['url']);
speaker_a.appendChild(document.createTextNode(speaker['name']));
speaker_li.appendChild(speaker_a);
speakers_div.appendChild(speaker_li);
}
}
if(payload['action'] == 'init') {
EVENT_INSTANCES = payload['event_instances'];
DAYS = payload['days'];
function findGetParameter(parameterName) {
var result = null,
tmp = [];
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) {
result = decodeURIComponent(tmp[1]);
}
});
return result;
speakers_div = modal.getElementsByClassName('speakers')[0];
speakers = payload['event_instance']['speakers'];
for(speaker_id in speakers) {
var speaker = speakers[speaker_id];
var speaker_li = document.createElement('li');
var speaker_a = document.createElement('a');
speaker_a.setAttribute('href', speaker['url']);
speaker_a.appendChild(document.createTextNode(speaker['name']));
speaker_li.appendChild(speaker_a);
speakers_div.appendChild(speaker_li);
}
}
if(payload['action'] == 'init') {
EVENT_INSTANCES = payload['event_instances'];
DAYS = payload['days'];
render();
}
});
}
var type_parameter = findGetParameter('type');
var types = type_parameter != null ? type_parameter.split(',') : [];
var location_parameter = findGetParameter('location')
var locations = location_parameter != null ? location_parameter.split(',') : [];
function init(config) {
CONFIG = config;
setup_websocket();
render();
}
toggleFilterBoxes(types, locations);
render_schedule(types, locations);
function findGetParameter(parameterName) {
var result = null,
tmp = [];
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) {
result = decodeURIComponent(tmp[1]);
}
});
return result;
}
function get_parameters() {
var day_parameter = findGetParameter('day');
var filter_day = day_parameter != null ? day_parameter.split(',') : [];
var type_parameter = findGetParameter('type');
var filter_types = type_parameter != null ? type_parameter.split(',') : [];
var location_parameter = findGetParameter('location')
var filter_locations = location_parameter != null ? location_parameter.split(',') : [];
return {
'day': filter_day[0],
'types': filter_types,
'locations': filter_locations
}
});
}
function render() {
parameters = get_parameters();
toggleFilterBoxes(parameters['types'], parameters['locations']);
render_day_menu(parameters['day']);
if(parameters['day'] != null) {
render_day(parameters['types'], parameters['locations'], parameters['day']);
} else {
render_schedule(parameters['types'], parameters['locations']);
}
}
function render_day_menu(active_iso) {
var container = document.getElementById('schedule-days');
container.innerHTML = '';
function set_btn_type(classList, primary) {
if(primary == true) {
classList.add('btn-primary');
} else {
classList.add('btn-default');
}
}
var all_days = document.createElement('a');
all_days.classList.add('btn');
set_btn_type(all_days.classList, active_iso == null);
all_days.innerHTML = 'All days';
all_days.addEventListener('click', function(e) {
setHistoryState({'day': 'all-days'});
render();
});
container.appendChild(all_days);
for(var day_id in DAYS) {
var day_link = document.createElement('a');
day_link.classList.add('btn');
set_btn_type(day_link.classList, DAYS[day_id]['iso'] == active_iso);
day_link.dataset.iso = DAYS[day_id]['iso'];
day_link.innerHTML = DAYS[day_id]['day_name'];
day_link.addEventListener('click', function(e) {
setHistoryState({
'day': this.dataset.iso
});
render();
});
container.appendChild(day_link);
}
}
function render_day(types, locations, day) {
function hoursTohhmm(hours){
var hour = Math.floor(Math.abs(hours));
var minutes = Math.floor((Math.abs(hours) * 60) % 60);
if(hour > 24) {
hour = hour - 24;
}
return (hour < 10 ? "0" : "") + hour + ":" + (minutes < 10 ? "0" : "") + minutes;
}
var event_instances = get_instances(types, locations, day);
var schedule_container = document.getElementById('schedule-container');
schedule_container.innerHTML = '';
var day_table = document.createElement('table');
schedule_container.appendChild(day_table);
day_table.classList.add('table');
day_table.classList.add('day-table');
day_table_body = document.createElement('tbody');
day_table.appendChild(day_table_body);
var array_length = (24*60)/CONFIG['schedule_timeslot_length_minutes'];
var timeslots_ = Array(array_length);
var timeslots = [];
for(var i=0; i<timeslots_.length; i++) {
timeslots.push(
{ 'offset': i * CONFIG['schedule_timeslot_length_minutes']
, 'minutes_since_midnight': (CONFIG['schedule_midnight_offset_hours'] * 60) + (i * CONFIG['schedule_timeslot_length_minutes'])
}
);
}
var timeslot_trs = {};
for(var timeslots_index in timeslots) {
var timeslot_tr = document.createElement('tr');
day_table_body.appendChild(timeslot_tr);
var timeslot_td = document.createElement('td');
timeslot_tr.appendChild(timeslot_td);
var minutes_since_midnight = timeslots[timeslots_index]['minutes_since_midnight'];
if(minutes_since_midnight / 60 % 1 == 0) {
timeslot_td.innerHTML = hoursTohhmm(minutes_since_midnight / 60);
}
timeslot_trs[hoursTohhmm(minutes_since_midnight / 60)] = timeslot_tr;
}
for(var event_instances_index in event_instances) {
var event_instance = event_instances[event_instances_index];
var event_instance_td = document.createElement('td');
event_instance_td.innerHTML = event_instance['title'];
event_instance_td.setAttribute('rowspan', event_instance['timeslots']);
event_instance_td.classList.add('event-td');
event_instance_td.setAttribute(
'style',
'background-color: ' + event_instance['bg-color'] +
'; color: ' + event_instance['fg-color']);
event_instance_td.onclick = openModal
event_instance_td.dataset.eventInstanceId = event_instance['id'];
var timeslot_tr = timeslot_trs[event_instance.from.slice(11, 16)];
timeslot_tr.appendChild(event_instance_td);
}
}
function render_schedule(types, locations) {
var event_instances = get_instances(types, locations);
@ -101,7 +235,7 @@ function render_schedule(types, locations) {
return event_day == day['iso'];
}
);
return render_day(day, day_event_instances);
return render_schedule_day(day, day_event_instances);
});
for(day_id in rendered_days) {
@ -110,7 +244,7 @@ function render_schedule(types, locations) {
}
}
function render_day(day, event_instances) {
function render_schedule_day(day, event_instances) {
var element = document.createElement('div');
element.classList.add('schedule-day-row');
var day_label = document.createElement('h4');
@ -146,8 +280,15 @@ function render_event_instance(event_instance) {
return element
}
function get_instances(types, locations) {
function get_instances(types, locations, day) {
var event_instances = EVENT_INSTANCES.slice(0);
if(day != undefined && day != null) {
event_instances = event_instances.filter(
function(event_instance) {
return event_instance.from.slice(0, 10) == day;
}
);
}
if(locations.length != 0) {
event_instances = event_instances.filter(
function(event_instance) {
@ -179,8 +320,75 @@ function openModal(e) {
modal = modals[event_instance_id];
if(modal == undefined) {
template = document.getElementById('event-template');
modal = template.cloneNode(true);
modal = document.createElement('div');
modal.classList.add('modal');
modal.setAttribute('tabindex', '-1');
modal.setAttribute('role', 'dialog');
modal_dialog = document.createElement('div');
modal_dialog.classList.add('modal-dialog');
modal.setAttribute('role', 'document');
modal.appendChild(modal_dialog);
modal_content = document.createElement('div');
modal_content.classList.add('modal-content');
modal_dialog.appendChild(modal_content);
modal_header = document.createElement('div');
modal_header.classList.add('modal-header');
modal_content.appendChild(modal_header);
modal_close_button = document.createElement('button');
modal_close_button.setAttribute('type', 'button');
modal_close_button.setAttribute('aria-label', 'Close');
modal_close_button.dataset.dismiss = 'modal';
modal_close_button.classList.add('close');
modal_close_button.innerHTML = '<span aria-hidden="true">&times;</span></button>';
modal_title = document.createElement('h4');
modal_title.classList.add('modal-title')
modal_header.appendChild(modal_close_button);
modal_header.appendChild(modal_title);
modal_body_content = document.createElement('div');
modal_body_content.classList.add('modal-body');
modal_body_content.classList.add('modal-body-content');
modal_content.appendChild(modal_body_content);
modal_body = document.createElement('div');
modal_body.classList.add('modal-body');
modal_content.appendChild(modal_body);
modal_body.innerHTML = '<h4>Speaker(s):</h4><ul class="speakers"></ul>';
modal_footer = document.createElement('div');
modal_footer.classList.add('modal-footer');
modal_content.appendChild(modal_footer);
close_button = document.createElement('button');
close_button.setAttribute('type', 'button');
close_button.classList.add('btn');
close_button.classList.add('btn-default');
close_button.classList.add('pull-left');
close_button.dataset.dismiss = "modal";
close_button.innerHTML = "Close";
modal_footer.appendChild(close_button);
favorite_button = document.createElement('a');
favorite_button.classList.add('btn');
favorite_button.classList.add('btn-success');
favorite_button.classList.add('favorite-button');
favorite_button.innerHTML = '<i class="fa fa-star"></i> Favorite</a>';
modal_footer.appendChild(favorite_button);
more_button = document.createElement('a');
more_button.classList.add('btn');
more_button.classList.add('btn-info');
more_button.classList.add('more-button');
more_button.innerHTML = '<i class="fa fa-info"></i> More</a>';
modal_footer.appendChild(more_button);
body = document.getElementsByTagName('body')[0];
body.appendChild(modal);
modal.setAttribute('id', 'event-modal-' + event_instance_id)
@ -209,30 +417,60 @@ filter.addEventListener('change', function(e) {
return box.value
})
var location_input = Array.prototype.slice.call(document.querySelectorAll('.location-checkbox:checked'));
var event_locations = location_input.map(function(box) {
var locations = location_input.map(function(box) {
return box.value
})
var type_part = (types.length == 0) ? [] : ['type='] + types.join(',');
var location_part = (event_locations.length == 0) ? [] : ['location='] + event_locations.join(',');
history.pushState({}, '', "?" + type_part + "&" + location_part);
render_schedule(types, event_locations);
toggleFilterBoxes(types, locations);
setHistoryState({
'types': types,
'locations': locations
});
render();
});
function setHistoryState(parts) {
var day = parts['day'];
var types = parts['types'];
var locations = parts['locations'];
var query = '?';
day = day == undefined ? findGetParameter('day') : day;
if(day != null && day != 'all-days') {
query = query + "day=" + day + "&";
}
types = types == undefined ? findGetParameter('type') : types.join(',');
if(types != null && types.length > 0) {
var type_part = 'type=' + types;
query = query + type_part + "&";
}
locations = locations == undefined ? findGetParameter('location') : locations.join(',');
if(locations != null && locations.length > 0) {
var location_part = 'location=' + locations;
query = query + location_part;
}
history.replaceState({}, '', query);
}
function toggleFilterBoxes(types, locations) {
var type_input = Array.prototype.slice.call(document.querySelectorAll('.event-type-checkbox'));
type_input.map(function(box) {
if(types.includes(box.value)) {
box.checked = !box.checked;
box.checked = true;
}
return box;
});
var location_input = Array.prototype.slice.call(document.querySelectorAll('.location-checkbox'));
location_input.map(function(box) {
if(locations.includes(box.value)) {
box.checked = !box.checked;
box.checked = true;
}
return box;
});

22
src/program/templates/event_modal.html
View file

@ -1,22 +0,0 @@
<div class="modal" id="event-template" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body modal-body-content">
</div>
<div class="modal-body">
<h4>Speaker(s):</h4>
<ul class="speakers">
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<a class="favorite-button btn btn-success"><i class="fa fa-star"></i> Favorite</a>
<a class="more-button btn btn-info" href=""><i class="fa fa-info"></i> More</a>
</div>
</div>
</div>
</div>

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

@ -4,18 +4,8 @@
{% block program_content %}
<div class="row">
<div class="schedule-days btn-group">
<a href="{% url 'schedule_index' camp_slug=camp.slug %}" class="btn btn-{% if request.resolver_match.url_name == 'schedule_index' %}primary{% else %}default{% endif %}">
<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" %}
<a href="{% url 'schedule_day' camp_slug=camp.slug year=day.lower.date.year month=month_padded day=day_padded %}" 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" }}
</a>
{% endwith %}
{% endfor %}
</div>
<div id="schedule-days" class="btn-group schedule-days">
</div>
</div>
<hr />

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

@ -7,36 +7,15 @@
<div id="schedule-container"></div>
{% comment %}
{% if eventinstances %}
{% for day in camp.camp_days %}
{{ day.lower.date|date:"D d/m" }} <br />
<div style="display: flex; flex-wrap: wrap;">
{% for eventinstance in eventinstances %}
{% if eventinstance.schedule_date == day.lower.date %}
<a class="event"
href="{% url 'event_detail' camp_slug=camp.slug slug=eventinstance.event.slug %}"
style="background-color: {{ eventinstance.event.event_type.color }}; color: {% if eventinstance.event.event_type.light_text %}white{% else %}black{% endif %};"
data-eventinstance-id="{{ eventinstance.id }}"
>
<small>{{ eventinstance.when.lower|date:"H:i" }} - {{ eventinstance.when.upper|date:"H:i" }}</small>
<span class="pull-right" style="font-family: 'FontAwesome';">&#x{{ eventinstance.location.icon }};</span>
<br />
{{ eventinstance.event.title }}
<br />
</a>
{% endif %}
{% endfor %}
</div>
<hr />
{% endfor %}
{% 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(
{ 'schedule_timeslot_length_minutes': Number('{{ schedule_timeslot_length_minutes }}')
, 'schedule_midnight_offset_hours': Number('{{ schedule_midnight_offset_hours }}')
}
);
</script>
{% endblock schedule_content %}

3
src/program/views.py
View file

@ -274,6 +274,9 @@ class ScheduleView(CampViewMixin, TemplateView):
context['urlmonth'] = self.kwargs['month']
context['urlday'] = self.kwargs['day']
context['schedule_timeslot_length_minutes'] = settings.SCHEDULE_TIMESLOT_LENGTH_MINUTES;
context['schedule_midnight_offset_hours'] = settings.SCHEDULE_MIDNIGHT_OFFSET_HOURS;
return context