Cleanup and modernize JS

allianceauth/optimer/templates/optimer/add.html

@@ -34,17 +34,15 @@
 {% endblock %}
 
 {% block extra_script %}
-
     $('#id_start').datetimepicker({
-    setlocale: '{{ LANGUAGE_CODE }}',
-    {% if NIGHT_MODE %}
-        theme: 'dark',
-    {% else %}
-        theme: 'default',
-    {% endif %}
-    mask: true,
-    format: 'Y-m-d H:i',
-    minDate: 0
+        setlocale: '{{ LANGUAGE_CODE }}',
+        {% if NIGHT_MODE %}
+            theme: 'dark',
+        {% else %}
+            theme: 'default',
+        {% endif %}
+        mask: true,
+        format: 'Y-m-d H:i',
+        minDate: 0
     });
-
 {% endblock extra_script %}

allianceauth/optimer/templates/optimer/management.html

@@ -41,9 +41,10 @@
 
     {% include 'bundles/moment-js.html' with locale=True %}
     <script src="{% static 'js/timers.js' %}"></script>
+
     <script type="application/javascript">
         // Data
-        var timers = [
+        let timers = [
         {% for op in optimer %}
             {
                 'id': {{ op.id }},
@@ -52,67 +53,66 @@
             },
         {% endfor %}
         ];
-    </script>
-    <script type="application/javascript">
-
-        timedUpdate();
-        setAllLocalTimes();
-
-        // Start timed updates
-        setInterval(timedUpdate, 1000);
-
-        function timedUpdate() {
-            updateClock();
-            updateAllTimers();
-        }
-
-        function updateAllTimers () {
-            var l = timers.length;
-            for (var i=0; i < l; ++i) {
-                if (timers[i].expired) continue;
-                updateTimer(timers[i]);
-            }
-        }
 
         /**
          * Update a timer
          * @param timer Timer information
-         * @param timer.start Date of the timer
-         * @param timer.id Id number of the timer
-         * @param timer.expired
          */
-        function updateTimer(timer) {
+        let updateTimer = function (timer) {
             if (timer.start.isAfter(Date.now())) {
-                var duration = moment.duration(timer.start - moment(), 'milliseconds');
+                let duration = moment.duration(timer.start - moment(), 'milliseconds');
+
                 document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
             } else {
                 timer.expired = true;
+
                 document.getElementById("countdown" + timer.id).innerHTML = "";
             }
-        }
+        };
+
+        let updateAllTimers = function () {
+            let l = timers.length;
 
-        /**
-         * Set all local time fields
-         */
-        function setAllLocalTimes() {
-            var l = timers.length;
             for (var i=0; i < l; ++i) {
-                setLocalTime(timers[i]);
+                if (timers[i].expired) continue;
+
+                updateTimer(timers[i]);
             }
-        }
+        };
 
         /**
          * Set the local time info for the timer
          * @param timer Timer information
-         * @param timer.start Date of the timer
-         * @param timer.id Id number of the timer
          */
-        function setLocalTime(timer) {
+        let setLocalTime = function (timer) {
             document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
-        }
+        };
 
-        function updateClock() {
+        /**
+         * Set all local time fields
+         */
+        let setAllLocalTimes = function () {
+            let l = timers.length;
+
+            for (var i=0; i < l; ++i) {
+                setLocalTime(timers[i]);
+            }
+        };
+
+        let updateClock = function () {
             document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
-        }
+        };
+
+        let timedUpdate = function () {
+            updateClock();
+            updateAllTimers();
+        };
+
+        // Set initial values
+        setAllLocalTimes();
+        timedUpdate();
+
+        // Start timed updates
+        setInterval(timedUpdate, 1000);
     </script>
 {% endblock content %}