From e8ec5ede914f7cd803fdaadc91aeaf5df4939bb2 Mon Sep 17 00:00:00 2001
From: Dorian Lesbre <dorian.lesbre@gmail.com>
Date: Tue, 30 Mar 2021 10:51:15 +0200
Subject: [PATCH] Moved planning to separate file, include preview in admin
view
---
home/templates/_planning.html | 99 +++++++++++++++++++++++++++++++++
home/templates/activites.html | 100 +---------------------------------
home/templates/admin.html | 10 +++-
home/views.py | 26 +++++----
4 files changed, 125 insertions(+), 110 deletions(-)
create mode 100644 home/templates/_planning.html
diff --git a/home/templates/_planning.html b/home/templates/_planning.html
new file mode 100644
index 0000000..08baa1c
--- /dev/null
+++ b/home/templates/_planning.html
@@ -0,0 +1,99 @@
+<div id="planning"></div>
+<!--
+In order to limit the planning's width, we cheat using the timeline's groups
+I.E we set all dates to the first day (Friday) and set groups allowing vertical display:
+-->
+<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: "Ven.", order: 0},
+ {id: {{ saturday }}, content: "Sam.", order: 1},
+ {id: {{ sunday }}, content: "Dim.", order: 2},
+ ]);
+
+ // Items in the timeline
+ const items = new vis.DataSet([
+ {% for act in planning %}
+ {% if act.start|date:"d" == act.end|date:"d" %}
+ {
+ content: '<a class="hidden" href="#{{ act.slug }}"><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" }}'
+ },
+ {% else %} // activity spans multiple days
+ {
+ content: '<a class="hidden" href="#{{ act.slug }}"><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"}} 23:59:59'
+ },
+ {
+ content: '<a class="hidden" href="#{{ act.slug }}"><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"}} 00:00:00',
+ align: 'left',
+ group: {{ act.start|date:"d"|add:"1" }},
+ subgroup: '{{ act.room }}',
+ end:'{{ settings.date_start|date:"Y-m-d"}} {{ act.end|date:"H:i:s" }}'
+ },
+ {% endif %}
+ {% 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>
diff --git a/home/templates/activites.html b/home/templates/activites.html
index 496bba6..32c0478 100644
--- a/home/templates/activites.html
+++ b/home/templates/activites.html
@@ -10,105 +10,7 @@
{% block "content" %}
{% if settings.display_planning %}
<h2>Planning</h2>
- <div id="planning"></div>
-<!--
-In order to limit the planning's width, we cheat using the timeline's groups
-I.E we set all dates to the first day (Friday) and set groups allowing vertical display:
--->
- <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: "Ven.", order: 0},
- {id: {{ saturday }}, content: "Sam.", order: 1},
- {id: {{ sunday }}, content: "Dim.", order: 2},
- ]);
-
- // Items in the timeline
- const items = new vis.DataSet([
- {% for act in planning %}
- {% if act.start|date:"d" == act.end|date:"d" %}
- {
- content: '<a class="hidden" href="#{{ act.slug }}"><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" }}'
- },
- {% else %} // activity spans multiple days
- {
- content: '<a class="hidden" href="#{{ act.slug }}"><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"}} 23:59:59'
- },
- {
- content: '<a class="hidden" href="#{{ act.slug }}"><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"}} 00:00:00',
- align: 'left',
- group: {{ act.start|date:"d"|add:"1" }},
- subgroup: '{{ act.room }}',
- end:'{{ settings.date_start|date:"Y-m-d"}} {{ act.end|date:"H:i:s" }}'
- },
- {% endif %}
- {% 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>
+ {% include "_planning.html" %}
{% endif %}
<h2>Activités</h2>
diff --git a/home/templates/admin.html b/home/templates/admin.html
index 6335a12..4f7a73d 100644
--- a/home/templates/admin.html
+++ b/home/templates/admin.html
@@ -1,7 +1,11 @@
{% extends "base.html" %}
-
+{% load static %}
{% block nav_admin %}current{% endblock %}
+{% block head %}
+<script src="{% static 'js/vis-timeline.min.js' %}"></script>
+{% endblock %}
+
{% block "content" %}
<h2>Page d'administration</h2>
@@ -157,6 +161,10 @@
</li></ul>
{% endif %}
+ <h2>Prévisualisation du planning</h2>
+
+ {% include "_planning.html" %}
+
<h2>Répartition des activités</h2>
<p>La répartition se fait depuis la <a href="{% url 'admin:index' %}">page d'administration de django</a>,
diff --git a/home/views.py b/home/views.py
index 3facc96..e46f434 100644
--- a/home/views.py
+++ b/home/views.py
@@ -27,6 +27,20 @@ class HomeView(TemplateView):
"""Vue pour la page d'acceuil"""
template_name = "home.html"
+def get_planning_context():
+ """Returns the context dict needed to display the planning"""
+ settings = SiteSettings.load()
+ context = dict()
+ context['planning'] = InterludesActivity.objects.filter(on_planning=True).order_by("title")
+ if settings.date_start is not None:
+ context['friday'] = settings.date_start.day
+ context['saturday'] = (settings.date_start + timedelta(days=1)).day
+ context['sunday'] = (settings.date_start + timedelta(days=2)).day
+ else:
+ context['friday'] = 1
+ context['saturday'] = 2
+ context['sunday'] = 3
+ return context
class ActivityView(TemplateView):
"""Vue pour la liste des activités"""
@@ -35,17 +49,8 @@ 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")
- if settings.date_start is not None:
- context['friday'] = settings.date_start.day
- context['saturday'] = (settings.date_start + timedelta(days=1)).day
- context['sunday'] = (settings.date_start + timedelta(days=2)).day
- else:
- context['friday'] = 1
- context['saturday'] = 2
- context['sunday'] = 3
+ context.update(get_planning_context())
return context
@@ -278,6 +283,7 @@ class AdminView(SuperuserRequiredMixin, TemplateView):
def get_context_data(self, *args, **kwargs):
context = super().get_context_data(*args, **kwargs)
context["metrics"] = self.get_metrics()
+ context.update(get_planning_context())
context.update(self.validate_activity_allocation())
return context
--
GitLab