bornhack-website/src/program/templates/schedule_overview.html

141 lines
5.4 KiB
HTML
Raw Normal View History

{% 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 %}
2016-08-07 13:49:30 +00:00
<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 }}"
>
2017-03-15 20:54:57 +00:00
<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>
2016-08-07 12:36:43 +00:00
<br />
{{ eventinstance.event.title }}
2016-08-08 22:48:56 +00:00
<br />
2016-08-07 13:49:30 +00:00
</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">&times;</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>
2017-04-16 00:10:24 +00:00
<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>
{% endfor %}
</div>
<hr />
{% endfor %}
{% else %}
2017-04-09 15:52:41 +00:00
<h2>No scheduled events for {{ camp.title }} yet!</h2>
{% endif %}
<script>
const webSocketBridge = new channels.WebSocketBridge();
var event_elements = document.getElementsByClassName("event");
var modals = {};
2017-04-16 00:10:24 +00:00
function toggleFavoriteButton(button) {
if(button.getAttribute('data-state') == 'true') {
favorite_button.classList.remove('btn-success');
favorite_button.classList.add('btn-danger');
favorite_button.innerHTML = '<i class="fa fa-minus"></i> Remove favorite';
favorite_button.onclick = function(e) {
button.setAttribute('data-state', 'false')
webSocketBridge.send({action: 'unfavorite', event_instance_id: event_instance_id});
toggleFavoriteButton(button)
}
} else {
favorite_button.classList.remove('btn-danger');
favorite_button.classList.add('btn-success');
favorite_button.innerHTML = '<i class="fa fa-star"></i> Favorite';
favorite_button.onclick = function(e) {
button.setAttribute('data-state', 'true')
webSocketBridge.send({action: 'favorite', event_instance_id: event_instance_id});
toggleFavoriteButton(button)
}
}
}
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']);
2017-04-16 00:10:24 +00:00
favorite_button = modal.getElementsByClassName('favorite-button')[0];
favorite_button.setAttribute('data-state', payload['event_instance']['is_favorited'])
toggleFavoriteButton(favorite_button)
}
});
function openModal(e) {
e.preventDefault();
2017-04-16 00:10:24 +00:00
// Avoid that clicking the text in the event will bring up an empty modal
target = e.target;
if (e.target !== this) {
target = e.target.parentElement
}
event_instance_id = target.dataset['eventinstanceId'];
modal = modals[event_instance_id];
if(modal == undefined) {
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 %}