[CHANGE] Convert timerboard tables

allianceauth/timerboard/templates/timerboard/view.html

@@ -85,32 +85,37 @@
 {% endblock content %}
 
 {% block extra_css %}
-    {% include "bundles/datatables-css-bs5.html" %}
+    {% include "bundles/datatables-2-css-bs5.html" %}
 {% endblock extra_css %}
 
 {% block extra_javascript %}
     {% include "bundles/moment-js.html" with locale=True %}
     {% include "bundles/timers-js.html" %}
-    {% include "bundles/datatables-js-bs5.html" %}
+    {% include "bundles/datatables-2-js-bs5.html" %}
+    {% include "bundles/filterdropdown-js.html" %}
 
     {% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
 
     <script>
         $(document).ready(() => {
+            /* global DataTable, moment */
+
+            'use strict';
+
             const timers = [
                 {% for timer in timers %}
                     {
-                        'id': {{ timer.id }},
-                        'targetDate': moment("{{ timer.eve_time | date:"c" }}"),
-                        'expired': false
+                        id: {{ timer.id }},
+                        targetDate: moment('{{ timer.eve_time | date:"c" }}'),
+                        expired: false
                     },
                 {% endfor %}
 
                 {% for timer in corp_timers %}
                     {
-                        'id': {{ timer.id }},
-                        'targetDate': moment("{{ timer.eve_time | date:"c" }}"),
-                        'expired': false
+                        id: {{ timer.id }},
+                        targetDate: moment('{{ timer.eve_time | date:"c" }}'),
+                        expired: false
                     },
                 {% endfor %}
             ];
@@ -123,11 +128,11 @@
                 if (timer.targetDate.isAfter(Date.now())) {
                     const duration = moment.duration(timer.targetDate - moment(), 'milliseconds');
 
-                    document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
+                    document.getElementById(`countdown${timer.id}`).innerHTML = getDurationString(duration);
                 } else {
                     timer.expired = true;
 
-                    document.getElementById("countdown" + timer.id).innerHTML = "";
+                    document.getElementById(`countdown${timer.id}`).innerHTML = '';
                 }
             };
 
@@ -146,7 +151,7 @@
              * @param timer Timer information
              */
             const setLocalTime = (timer) => {
-                document.getElementById("localtime" + timer.id).innerHTML = timer.targetDate.format("ddd @ LT");
+                document.getElementById(`localtime${timer.id}`).innerHTML = timer.targetDate.format('ddd @ LT');
             };
 
             /**
@@ -161,7 +166,7 @@
             };
 
             const updateClock = () => {
-                document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
+                document.getElementById('current-time').innerHTML = getCurrentEveTimeString();
             };
 
             const timedUpdate = () => {
@@ -186,14 +191,15 @@
             {% if perms.auth.timer_management %}
                 dtOptions['columnDefs'] = [
                     {
-                        "orderable": false,
-                        "targets": 7
+                        target: 7,
+                        orderable: false
                     }
                 ];
             {% endif %}
 
             $('.allianceauth-timerboard table').each((index, table) => {
-                $(table).DataTable(dtOptions);
+                console.log(dtOptions);
+                new DataTable($(table), dtOptions);
             });
         });
     </script>