Timeline day grouping

home/static/css/style.css

@@ -233,14 +233,6 @@ span.helptext {
 	unicode-bidi: bidi-override;
 	direction: rtl;
 }
-.planning_title {
-	font-size: 1em;
-}
-.planning_room {
-	font-size: 1em;
-	color: #555;
-	font-style: italic;
-}
 
 .button, .button:link, .button:visited, input[type=submit] {
 	color: white;

home/templates/activites.html

@@ -10,38 +10,47 @@
 {% block "content" %}
 	{% if settings.display_planning %}
 		<h2>Planning</h2>
-		<div id="visualization"></div>
+		<div id="planning"></div>
 
 		<script type="text/javascript">
 			// https://visjs.org/
 			// DOM element where the Timeline will be attached
-			var container = document.getElementById('visualization');
+			const container = document.getElementById('planning');
 
-			// Create a DataSet (allows two way data-binding)
-			var items = new vis.DataSet([
+			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: '<strong>{{ act.title }}</strong><div class="planning_room">{{ act.room }}</div>',
-					start: '{{ act.start|date:"Y-m-d H:i:s" }}',
+					start: '{{ settings.date_start|date:"Y-m-d"}} {{ act.start|date:"H:i:s" }}',
 					align: 'left',
-					title: 'hello',
+					group: '{{ act.start|date:"d" }}',
 					subgroup: '{{ act.room }}',
-					//end:'{{ act.end|date:"Y-m-d H:i:s" }}'
+					end:'{{ settings.date_start|date:"Y-m-d"}} {{ act.end|date:"H:i:s" }}'
 				},
 				{% endfor %}
 			]);
 
 			// Configuration for the Timeline
-			var options = {
-				// showMajorLabels: false,
+			const options = {
+				showMajorLabels: false,
 				showCurrentTime: false,
 				locale: "fr-fr",
+				groupOrder: "order",
+				start: '{{ settings.date_start|date:"Y-m-d"}} 00:00:00',
+				end:  '{{ settings.date_start|date:"Y-m-d"}} 23:59:59',
 			};
 
 			// Create a Timeline
-			var timeline = new vis.Timeline(container, items, options);
-
+			const timeline = new vis.Timeline(container, items, options);
+			timeline.setGroups(groups);
 			// timeline.on('select', function (properties) {
 			// 	alert('selected items: ' + properties.items);
 			// });

home/views.py

+from datetime import timedelta
+
 from django.contrib import messages
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.contrib.sitemaps import Sitemap
@@ -30,8 +32,12 @@ class ActivityView(TemplateView):
 	def get_context_data(self, **kwargs):
 		"""ajoute la liste des activités au contexte"""
 		context = super(ActivityView, self).get_context_data(**kwargs)
+		settings = SiteSettings.load()
 		context['activities'] = InterludesActivity.objects.filter(display=True).order_by("title")
 		context['planning'] = InterludesActivity.objects.filter(on_planning=True).order_by("title")
+		context['friday'] = settings.date_start.day
+		context['saturday'] = (settings.date_start + timedelta(days=1)).day
+		context['sunday'] = (settings.date_start + timedelta(days=2)).day
 		return context