Add graphical control for autoreload of plan

This visualizes the state and allows to turn it on and off with a click

AKPlan/locale/de_DE/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-10-29 13:36+0000\n"
+"POT-Creation-Date: 2022-05-22 08:02+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -63,12 +63,12 @@ msgid "AK Wall"
 msgstr "AK-Wall"
 
 #: AKPlan/templates/AKPlan/plan_index.html:126
-#: AKPlan/templates/AKPlan/plan_wall.html:81
+#: AKPlan/templates/AKPlan/plan_wall.html:116
 msgid "Current AKs"
 msgstr "Aktuelle AKs"
 
 #: AKPlan/templates/AKPlan/plan_index.html:133
-#: AKPlan/templates/AKPlan/plan_wall.html:86
+#: AKPlan/templates/AKPlan/plan_wall.html:121
 msgid "Next AKs"
 msgstr "Nächste AKs"
 
@@ -99,6 +99,10 @@ msgstr "Eigenschaften"
 msgid "Track"
 msgstr "Track"
 
+#: AKPlan/templates/AKPlan/plan_wall.html:131
+msgid "Reload page automatically?"
+msgstr "Seite automatisch neu laden?"
+
 #: AKPlan/templates/AKPlan/slots_table.html:14
 msgid "No AKs"
 msgstr "Keine AKs"

AKPlan/templates/AKPlan/plan_wall.html

@@ -65,31 +65,47 @@
             plan.render();
 
             // Scroll to current time
-                if($(".fc-timeline-now-indicator-line").length) {
-                    $('.fc-scroller').scrollLeft($('.fc-timeline-now-indicator-line').position().left);
+            if($(".fc-timeline-now-indicator-line").length) {
+                $('.fc-scroller').scrollLeft($('.fc-timeline-now-indicator-line').position().left);
+            }
+
+            // == Auto Reload ==
+
+            // function from: https://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript/
+            function findGetParameter(parameterName) {
+                var result = null,
+                    tmp = [];
+                location.search
+                    .substr(1)
+                    .split("&")
+                    .forEach(function (item) {
+                    tmp = item.split("=");
+                    if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
+                    });
+                return result;
+            }
+
+            // Check whether an autoreload frequency was specified and treat it as full minutes
+            const autoreload_frequency = Math.ceil(findGetParameter("autoreload"));
+            const cbxAutoReload = $('#cbxAutoReload');
+
+            if(autoreload_frequency>0) {
+                window.setTimeout ( function() { window.location.reload();  }, autoreload_frequency * 60 * 1000);
+                console.log("Autoreload active");
+                cbxAutoReload.prop('checked', true);
+            }
+            else {
+                cbxAutoReload.prop('checked', false);
+            }
+
+            cbxAutoReload.change(function () {
+                let url = window.location.href.split('?')[0];
+                if(cbxAutoReload.prop('checked')) {
+                    url = url + "?autoreload=5";
                 }
+                window.location.replace(url);
+            });
         });
-
-        // function from: https://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript/
-        function findGetParameter(parameterName) {
-            var result = null,
-                tmp = [];
-            location.search
-                .substr(1)
-                .split("&")
-                .forEach(function (item) {
-                tmp = item.split("=");
-                if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
-                });
-            return result;
-        }
-
-        // Check whether an autoreload frequency was specified and treat it as minutes
-        var autoreload_frequency = findGetParameter("autoreload");
-        if(autoreload_frequency>0) {
-            window.setTimeout ( function() { window.location.reload(true);  }, autoreload_frequency * 60 * 1000);
-            console.log("Autoreload active");
-        }
     </script>
 </head>
 <body>
@@ -112,6 +128,9 @@
             <div id="planCalendar"></div>
         </div>
     </div>
+    <div style="position: absolute;bottom: 1vh;left:1vw;background-color: #FFFFFF;padding: 1vh;">
+        <input type="checkbox" name="autoreload" id="cbxAutoReload"> <label for="cbxAutoReload">{% trans "Reload page automatically?" %}</label>
+    </div>
 {% endtimezone %}
 
 </body>