activites.html

{% extends "base.html" %}
{% load static %}

{% block head %}
<script src="{% static 'js/vis-timeline.min.js' %}"></script>
{% endblock %}

{% block nav_activite %}current{% endblock %}

{% block "content" %}
	{% if settings.display_planning %}
		<h2>Planning</h2>
		<div id="planning"></div>

		<script type="text/javascript">
			// https://visjs.org/
			// DOM element where the Timeline will be attached
			const container = document.getElementById('planning');

			const groups = new vis.DataSet([
				{id: {{ friday }}, content: "Vendredi", order: 0},
				{id: {{ saturday }}, content: "Samedi", order: 1},
				{id: {{ sunday }}, content: "Dimanche", order: 2},
			]);

			// Items in the timeline
			const items = new vis.DataSet([
				{% for act in planning %}
				{
					id: {{ act.id }},
					content: '<a class="hidden" href="#act-{{act.id}}"><div><strong>{{ act.title }}</strong><br>{{ act.room }}</div></a>',
					title: '<strong>{{ act.title }}</strong><br>{{ act.room }}',
					start: '{{ settings.date_start|date:"Y-m-d"}} {{ act.start|date:"H:i:s" }}',
					align: 'left',
					group: '{{ act.start|date:"d" }}',
					subgroup: '{{ act.room }}',
					end:'{{ settings.date_start|date:"Y-m-d"}} {{ act.end|date:"H:i:s" }}'
				},
				{% endfor %}
			]);

			// Configuration for the Timeline
			const start = '{{ settings.date_start|date:"Y-m-d"}} 00:00:00';
			const end = '{{ settings.date_start|date:"Y-m-d"}} 23:59:59';
			const options = {
				showMajorLabels: false,
				showCurrentTime: false,
				locale: "fr",
				groupOrder: "order",
				start: start,
				min: start,
				end: end,
				max: end,
				selectable: false,
			};

			// Create a Timeline
			const timeline = new vis.Timeline(container, items, options);
			timeline.setGroups(groups);
			// timeline.on('select', function (properties) {
			// 	alert('selected items: ' + properties.items);
			// });
		</script>

		<style>
			.vis-item {
				background-color: var(--color_bg_1);
				color: white;
			}
			.vis-item-content {
				width: 100%;
			}
			.vis-item a, .vis-item a:link, .vis-item a:visited {
				text-decoration: none;
				color: white;
				width: 100%
			}
			.vis-item a div {
				width: 100%;
			}
			.vis-item:hover {
				background-color: var(--color_bg_2);
			}
			.vis-time-axis .grid.vis-odd {
    background: #444;
  }

		</style>
	{% endif %}

	<h2>Activités</h2>
	<p>Durant tout l'événement, des jeux seront en libre-service et des tables disponibles pour jouer.
		Certaines activités ne pourront se faire qu'avec inscription au vue d'un nombre de places limité.
	</p>
	{% if settings.activity_submission_form %}
	<p>Vous pouver proposer une activité en remplissant <a href="{{ settings.activity_submission_form }}">ce formulaire</a>.</p>
	{% endif %}

	{% for activity in activities %}
		<h3 id="act-{{ activity.id }}"">{{ activity.title }}</h3>
		{{ activity.html_display }}
		<dl>
			<dt>Durée :</dt><dd>{{ activity.pretty_duration }}</dd>
			<dt>Orga :</dt><dd>{{ activity.host_name }}</dd>
			<dt>Type :</dt><dd>{{ activity.pretty_type }}</dd>
			<dt>Places :</dt><dd>{{ activity.nb_participants }}</dd>
			<dt>Description :</dt><dd>{{ activity.description|linebreaksbr }}</dd>
		</dl>
	{% endfor %}
{% endblock %}