From ef711397e6064a33c75b164a03eb5e54acc3fbe1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laur=C3=A9line=20Gu=C3=A9rin?= <zebuline@entrouvert.com>
Date: Fri, 28 Feb 2020 11:52:29 +0100
Subject: [PATCH] event: refresh event list every 30s (#40021)

---
 .../static/js/chrono_events.manager.js        | 30 ++++++++++++
 .../chrono/manager_event_detail.html          | 49 +++----------------
 .../chrono/manager_event_detail_fragment.html | 41 ++++++++++++++++
 chrono/manager/views.py                       |  6 ++-
 4 files changed, 84 insertions(+), 42 deletions(-)
 create mode 100644 chrono/manager/static/js/chrono_events.manager.js
 create mode 100644 chrono/manager/templates/chrono/manager_event_detail_fragment.html

diff --git a/chrono/manager/static/js/chrono_events.manager.js b/chrono/manager/static/js/chrono_events.manager.js
new file mode 100644
index 0000000..15cab08
--- /dev/null
+++ b/chrono/manager/static/js/chrono_events.manager.js
@@ -0,0 +1,30 @@
+function autorefresh() {
+  var pathname = window.location.pathname.replace(/^\/+/, '/');
+  $.ajax({
+    url: pathname + '?ajax=true',
+    success: function(html) {
+      $('#event_details').html(html);
+    },
+  });
+}
+
+$(function() {
+   /* refresh every 30 seconds (idle_id) after any user activity
+  * on inactivity for more than 5 minutes (longidle_id), stop refreshing (clear idle_id)
+  */
+  var idle_id = null;
+  var longidle_id = null;
+  $(window).on('mousemove keydown mousedown touchstart', function() {
+    /* if refresh timer exists, clear it */
+    if (idle_id) window.clearInterval(idle_id);
+    /* if stop refreshing timer exists, clear it */
+    if (longidle_id) window.clearTimeout(longidle_id);
+    /* launch timer to refresh every 30 seconds */
+    idle_id = setInterval(autorefresh, 30000);
+    /* launch timer to stop refreshing after 5 minutes idle */
+    longidle_id = setTimeout(function () {
+        if (idle_id) idle_id = window.clearInterval(idle_id);
+        longidle_id = undefined;
+    }, 300 * 1000);
+  });
+});
diff --git a/chrono/manager/templates/chrono/manager_event_detail.html b/chrono/manager/templates/chrono/manager_event_detail.html
index c2fff7c..d589d66 100644
--- a/chrono/manager/templates/chrono/manager_event_detail.html
+++ b/chrono/manager/templates/chrono/manager_event_detail.html
@@ -1,5 +1,10 @@
 {% extends "chrono/manager_home.html" %}
-{% load i18n %}
+{% load staticfiles i18n %}
+
+{% block extrascripts %}
+{{ block.super }}
+<script src="{% static 'js/chrono_events.manager.js' %}"></script>
+{% endblock %}
 
 {% block page-title-extra-label %}
 - {% firstof agenda.label object.label %}
@@ -24,46 +29,8 @@
 {% endblock %}
 
 {% block content %}
-
-{% if object.description or object.pricing or object.url %}
-<div class="section">
-<div>
- {% if object.description %}<p>{{ object.description }}</p>{% endif %}
- {% if object.pricing %}<p>{% trans "Pricing:" %} {{ object.pricing }}</p>{% endif %}
- {% if object.url %}<p><a href="{{ object.url }}">{{ object.url|truncatechars:100 }}</a>{% endif %}
+<div id="event_details">
+  {% include "chrono/manager_event_detail_fragment.html" %}
 </div>
-</div>
-{% endif %}
-
-<div class="section">
-<h3>{% trans "Bookings" %} ({{booked|length}}/{{object.places}})</h3>
-<div>
-
-  {% if event.booked_places > event.places %}
-  <div class="errornotice"><p>{% trans "This event is overbooked." %}</p></div>
-  {% endif %}
-
-  <ul class="objects-list single-links">
-    {% for booking in booked %}
-    <li><a {% if booking.backoffice_url %}href="{{ booking.backoffice_url }}"{% endif %}>{% if booking.user_name %}{{ booking.user_name }}{% else %}{% trans "Unknown" %}{% endif %},
-    {{ booking.creation_datetime|date:"DATETIME_FORMAT" }}</a></li>
-    {% endfor %}
-  </ul>
-</div>
-</div>
-
-{% if object.waiting_list_places %}
-<div class="section">
-<h3>{% trans "Waiting List" %} ({{waiting|length}}/{{object.waiting_list_places}})</h3>
-<div>
-  <ul class="objects-list single-links">
-    {% for booking in waiting %}
-    <li><a {% if booking.backoffice_url %}href="{{ booking.backoffice_url }}"{% endif %}>{% if booking.user_name %}{{ booking.user_name }}{% else %}{% trans "Unknown" %}{% endif %},
-    {{ booking.creation_datetime|date:"DATETIME_FORMAT" }}</a></li>
-    {% endfor %}
-  </ul>
-</div>
-</div>
-{% endif %}
 
 {% endblock %}
diff --git a/chrono/manager/templates/chrono/manager_event_detail_fragment.html b/chrono/manager/templates/chrono/manager_event_detail_fragment.html
new file mode 100644
index 0000000..98c7ab4
--- /dev/null
+++ b/chrono/manager/templates/chrono/manager_event_detail_fragment.html
@@ -0,0 +1,41 @@
+{% load i18n %}
+{% if object.description or object.pricing or object.url %}
+<div class="section">
+<div>
+ {% if object.description %}<p>{{ object.description }}</p>{% endif %}
+ {% if object.pricing %}<p>{% trans "Pricing:" %} {{ object.pricing }}</p>{% endif %}
+ {% if object.url %}<p><a href="{{ object.url }}">{{ object.url|truncatechars:100 }}</a>{% endif %}
+</div>
+</div>
+{% endif %}
+
+<div class="section">
+<h3>{% trans "Bookings" %} ({{booked|length}}/{{object.places}})</h3>
+<div>
+
+  {% if event.booked_places > event.places %}
+  <div class="errornotice"><p>{% trans "This event is overbooked." %}</p></div>
+  {% endif %}
+
+  <ul class="objects-list single-links">
+    {% for booking in booked %}
+    <li><a {% if booking.backoffice_url %}href="{{ booking.backoffice_url }}"{% endif %}>{% if booking.user_name %}{{ booking.user_name }}{% else %}{% trans "Unknown" %}{% endif %},
+    {{ booking.creation_datetime|date:"DATETIME_FORMAT" }}</a></li>
+    {% endfor %}
+  </ul>
+</div>
+</div>
+
+{% if object.waiting_list_places %}
+<div class="section">
+<h3>{% trans "Waiting List" %} ({{waiting|length}}/{{object.waiting_list_places}})</h3>
+<div>
+  <ul class="objects-list single-links">
+    {% for booking in waiting %}
+    <li><a {% if booking.backoffice_url %}href="{{ booking.backoffice_url }}"{% endif %}>{% if booking.user_name %}{{ booking.user_name }}{% else %}{% trans "Unknown" %}{% endif %},
+    {{ booking.creation_datetime|date:"DATETIME_FORMAT" }}</a></li>
+    {% endfor %}
+  </ul>
+</div>
+</div>
+{% endif %}
diff --git a/chrono/manager/views.py b/chrono/manager/views.py
index fdc00c3..40bf23e 100644
--- a/chrono/manager/views.py
+++ b/chrono/manager/views.py
@@ -704,10 +704,14 @@ agenda_import_events = AgendaImportEventsView.as_view()
 
 
 class EventDetailView(ViewableAgendaMixin, DetailView):
-    template_name = 'chrono/manager_event_detail.html'
     model = Event
     pk_url_kwarg = 'event_pk'
 
+    def get_template_names(self):
+        if self.request.is_ajax():
+            return ['chrono/manager_event_detail_fragment.html']
+        return ['chrono/manager_event_detail.html']
+
     def get_context_data(self, **kwargs):
         context = super(EventDetailView, self).get_context_data(**kwargs)
         context['user_can_manage'] = self.agenda.can_be_managed(self.request.user)
-- 
2.20.1

