101 lines
3.8 KiB
HTML
101 lines
3.8 KiB
HTML
{% extends 'schedule_base.html' %}
|
|
|
|
{% load commonmark %}
|
|
{% load staticfiles %}
|
|
|
|
{% block extra_head %}
|
|
<script src="{% static "channels/js/websocketbridge.js" %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block schedule_content %}
|
|
{% 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 %}
|
|
|
|
<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">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
|
|
<a class="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>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
<hr />
|
|
{% endfor %}
|
|
{% else %}
|
|
<h2>No scheduled events for {{ camp.title }} yet!</h2>
|
|
{% endif %}
|
|
|
|
<script>
|
|
const webSocketBridge = new channels.WebSocketBridge();
|
|
|
|
var event_elements = document.getElementsByClassName("event");
|
|
var modals = {};
|
|
var events = {};
|
|
|
|
webSocketBridge.connect('/schedule/');
|
|
webSocketBridge.socket.addEventListener('open', function() {
|
|
webSocketBridge.send({action: 'init', camp_slug: '{{ camp.slug }}'});
|
|
});
|
|
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 = modal.getElementsByClassName('modal-body')[0];
|
|
modal_body.innerHTML = payload['event_instance']['abstract'];
|
|
more_button = modal.getElementsByClassName('more-button')[0];
|
|
more_button.setAttribute('href', payload['event_instance']['url']);
|
|
}
|
|
});
|
|
|
|
function openModal(e) {
|
|
e.preventDefault();
|
|
event_instance_id = e.target.dataset['eventinstanceId'];
|
|
template = document.getElementById('event-template');
|
|
modal = template.cloneNode(true);
|
|
body = document.getElementsByTagName('body')[0];
|
|
body.appendChild(modal);
|
|
modal.setAttribute('id', 'event-modal-' + event_instance_id)
|
|
modals[event_instance_id] = modal;
|
|
$('#event-modal-' + event_instance_id).modal();
|
|
webSocketBridge.send({action: 'get_event_instance', event_instance_id: event_instance_id})
|
|
}
|
|
|
|
for (var event_id in event_elements) {
|
|
event_element = event_elements.item(event_id);
|
|
event_element.onclick = openModal
|
|
}
|
|
|
|
</script>
|
|
|
|
{% endblock schedule_content %}
|