Now with support for days!
This commit is contained in:
parent
698698a96b
commit
c845dca950
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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,8 +27,9 @@ function toggleFavoriteButton(button) {
|
|||
}
|
||||
}
|
||||
|
||||
webSocketBridge.connect('/schedule/');
|
||||
webSocketBridge.listen(function(payload, stream) {
|
||||
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];
|
||||
|
|
@ -61,8 +62,18 @@ webSocketBridge.listen(function(payload, stream) {
|
|||
if(payload['action'] == 'init') {
|
||||
EVENT_INSTANCES = payload['event_instances'];
|
||||
DAYS = payload['days'];
|
||||
render();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function findGetParameter(parameterName) {
|
||||
function init(config) {
|
||||
CONFIG = config;
|
||||
setup_websocket();
|
||||
render();
|
||||
}
|
||||
|
||||
function findGetParameter(parameterName) {
|
||||
var result = null,
|
||||
tmp = [];
|
||||
location.search
|
||||
|
|
@ -75,17 +86,140 @@ webSocketBridge.listen(function(payload, stream) {
|
|||
}
|
||||
});
|
||||
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 types = type_parameter != null ? type_parameter.split(',') : [];
|
||||
var filter_types = type_parameter != null ? type_parameter.split(',') : [];
|
||||
var location_parameter = findGetParameter('location')
|
||||
var locations = location_parameter != null ? location_parameter.split(',') : [];
|
||||
var filter_locations = location_parameter != null ? location_parameter.split(',') : [];
|
||||
|
||||
toggleFilterBoxes(types, locations);
|
||||
render_schedule(types, locations);
|
||||
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">×</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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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">×</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>
|
||||
|
|
@ -4,17 +4,7 @@
|
|||
{% 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 id="schedule-days" class="btn-group schedule-days">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue