From 92c2af9975c9b6ca9f8bfba705368ffd8ddb0fb9 Mon Sep 17 00:00:00 2001
From: Peter Pfeufer <info@ppfeufer.de>
Date: Sun, 12 Jan 2025 17:12:23 +0100
Subject: [PATCH] [CHANGE] Timertables to Datatables

---
 .../templates/timerboard/timertable.html      | 146 +++++++++---------
 .../timerboard/templates/timerboard/view.html |  27 +++-
 2 files changed, 98 insertions(+), 75 deletions(-)

diff --git a/allianceauth/timerboard/templates/timerboard/timertable.html b/allianceauth/timerboard/templates/timerboard/timertable.html
index 014b01e8..13690dc2 100644
--- a/allianceauth/timerboard/templates/timerboard/timertable.html
+++ b/allianceauth/timerboard/templates/timerboard/timertable.html
@@ -2,80 +2,84 @@
 {% load i18n %}
 
 <div class="table-responsive">
-    <table class="table">
-        <tr>
-            <th class="text-center">{% translate "Details" %}</th>
-            <th class="text-center">{% translate "Objective" %}</th>
-            <th class="text-center">{% translate "System" %}</th>
-            <th class="text-center">{% translate "Structure" %}</th>
-            <th class="text-center">{% translate "Eve Time" %}</th>
-            <th class="text-center">{% translate "Local Time" %}</th>
-            <th class="text-center">{% translate "Creator" %}</th>
-
-            {% if perms.auth.timer_management %}
-                <th class="text-center">{% translate "Action" %}</th>
-            {% endif %}
-        </tr>
-
-        {% for timer in timers %}
-            <tr class="{% if timer.important == True %}bg-danger bg-opacity-25{% else %}bg-info bg-opacity-25{% endif %}">
-                <td style="width: 150px;" class="text-center">
-                    {{ timer.details }}
-
-                    {% if timer.timer_type != 'UNSPECIFIED' %}
-                        <br />
-                        ({{ timer.get_timer_type_display }})
-                    {% endif %}
-                </td>
-
-                <td class="text-center">
-                    {% comment %} Objective: Hostile (BG: Danger) {% endcomment %}
-                    {% if timer.objective == "Hostile" %}
-                        <div class="badge bg-danger">
-
-                    {% comment %} Objective: Friendly (BG: Primare) {% endcomment %}
-                    {% elif timer.objective == "Friendly" %}
-                        <div class="badge bg-primary">
-
-                    {% comment %} Objective: Neutral (BG: Secondary) {% endcomment %}
-                    {% elif timer.objective == "Neutral" %}
-                        <div class="badge bg-secondary">
-                    {% endif %}
-
-                        {{ timer.get_objective_display }}
-                    </div>
-                </td>
-
-                <td class="text-center">
-                    <a href="{{ timer.system|dotlan_solar_system_url }}">{{ timer.system }} {{ timer.planet_moon }}</a>
-                </td>
-
-                <td class="text-center">
-                    <div class="badge bg-{{ timer.bg_modifier }}">
-                        {{ timer.get_structure_display }}
-                    </div>
-                </td>
-
-                <td class="text-center" nowrap>{{ timer.eve_time | date:"Y-m-d H:i" }}</td>
-
-                <td class="text-center" nowrap>
-                    <div id="localtime{{ timer.id }}"></div>
-                    <div id="countdown{{ timer.id }}"></div>
-                </td>
-
-                <td class="text-center">{{ timer.eve_character.character_name }}</td>
+    <table class="table" id="{{ id }}">
+        <thead>
+            <tr>
+                <th class="text-center">{% translate "Details" %}</th>
+                <th class="text-center">{% translate "Objective" %}</th>
+                <th class="text-center">{% translate "System" %}</th>
+                <th class="text-center">{% translate "Structure" %}</th>
+                <th class="text-center">{% translate "Eve Time" %}</th>
+                <th class="text-center">{% translate "Local Time" %}</th>
+                <th class="text-center">{% translate "Creator" %}</th>
 
                 {% if perms.auth.timer_management %}
-                    <td class="text-center">
-                        <a href="{% url 'timerboard:delete' timer.id %}" class="btn btn-danger">
-                            <i class="fa-solid fa-trash-can fa-fw"></i>
-                        </a>
-                        <a href="{% url 'timerboard:edit' timer.id %}" class="btn btn-info">
-                            <i class="fa-solid fa-pen-to-square fa-fw"></i>
-                        </a>
-                    </td>
+                    <th class="text-center">{% translate "Action" %}</th>
                 {% endif %}
             </tr>
-        {% endfor %}
+        </thead>
+
+        <tbody>
+            {% for timer in timers %}
+                <tr class="{% if timer.important == True %}bg-danger bg-opacity-25{% else %}bg-info bg-opacity-25{% endif %}">
+                    <td style="width: 150px;" class="text-center">
+                        {{ timer.details }}
+
+                        {% if timer.timer_type != 'UNSPECIFIED' %}
+                            <br />
+                            ({{ timer.get_timer_type_display }})
+                        {% endif %}
+                    </td>
+
+                    <td class="text-center">
+                        {% comment %} Objective: Hostile (BG: Danger) {% endcomment %}
+                        {% if timer.objective == "Hostile" %}
+                            <div class="badge bg-danger">
+
+                        {% comment %} Objective: Friendly (BG: Primare) {% endcomment %}
+                        {% elif timer.objective == "Friendly" %}
+                            <div class="badge bg-primary">
+
+                        {% comment %} Objective: Neutral (BG: Secondary) {% endcomment %}
+                        {% elif timer.objective == "Neutral" %}
+                            <div class="badge bg-secondary">
+                        {% endif %}
+
+                            {{ timer.get_objective_display }}
+                        </div>
+                    </td>
+
+                    <td class="text-center">
+                        <a href="{{ timer.system|dotlan_solar_system_url }}">{{ timer.system }} {{ timer.planet_moon }}</a>
+                    </td>
+
+                    <td class="text-center">
+                        <div class="badge bg-{{ timer.bg_modifier }}">
+                            {{ timer.get_structure_display }}
+                        </div>
+                    </td>
+
+                    <td class="text-center" nowrap>{{ timer.eve_time | date:"Y-m-d H:i" }}</td>
+
+                    <td class="text-center" nowrap>
+                        <div id="localtime{{ timer.id }}"></div>
+                        <div id="countdown{{ timer.id }}"></div>
+                    </td>
+
+                    <td class="text-center">{{ timer.eve_character.character_name }}</td>
+
+                    {% if perms.auth.timer_management %}
+                        <td class="text-center">
+                            <a href="{% url 'timerboard:delete' timer.id %}" class="btn btn-danger">
+                                <i class="fa-solid fa-trash-can fa-fw"></i>
+                            </a>
+                            <a href="{% url 'timerboard:edit' timer.id %}" class="btn btn-info">
+                                <i class="fa-solid fa-pen-to-square fa-fw"></i>
+                            </a>
+                        </td>
+                    {% endif %}
+                </tr>
+            {% endfor %}
+        </tbody>
     </table>
 </div>
diff --git a/allianceauth/timerboard/templates/timerboard/view.html b/allianceauth/timerboard/templates/timerboard/view.html
index 85948f20..a39fc027 100644
--- a/allianceauth/timerboard/templates/timerboard/view.html
+++ b/allianceauth/timerboard/templates/timerboard/view.html
@@ -25,7 +25,7 @@
 {% endblock header_nav_collapse_right %}
 
 {% block content %}
-    <div>
+    <div class="allianceauth-timerboard">
         <div class="col-lg-12 text-center mb-3">
             <div class="badge bg-primary text-start">
                 <span>{% translate "Current Eve Time:" %}</span>
@@ -42,7 +42,7 @@
                 </div>
 
                 <div class="card-body">
-                    {% include "timerboard/timertable.html" with timers=corp_timers %}
+                    {% include "timerboard/timertable.html" with id="corp-timers" timers=corp_timers %}
                 </div>
             </div>
         {% endif %}
@@ -56,7 +56,7 @@
 
             <div class="card-body">
                 {% if future_timers %}
-                    {% include "timerboard/timertable.html" with timers=future_timers %}
+                    {% include "timerboard/timertable.html" with id="future-timers" timers=future_timers %}
                 {% else %}
                     <div class="alert alert-warning text-center">
                         {% translate "No upcoming timers." %}
@@ -74,7 +74,7 @@
 
             <div class="card-body">
                 {% if past_timers %}
-                    {% include "timerboard/timertable.html" with timers=past_timers %}
+                    {% include "timerboard/timertable.html" with id="past-timers" timers=past_timers %}
                 {% else %}
                     <div class="alert alert-warning text-center">
                         {% translate "No past timers." %}
@@ -85,9 +85,14 @@
     </div>
 {% endblock content %}
 
+{% block extra_css %}
+    {% include "bundles/datatables-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" %}
 
     <script>
         const timers = [
@@ -168,5 +173,19 @@
 
         // Start timed updates
         setInterval(timedUpdate, 1000);
+
+        $(document).ready(() => {
+            const dtOptions = {};
+
+            {% if perms.auth.timer_management %}
+                dtOptions['columnDefs'] = [
+                    { "orderable": false, "targets": 7 }
+                ];
+            {% endif %}
+
+            $('.allianceauth-timerboard table').each((index, table) => {
+                $(table).DataTable(dtOptions);
+            });
+        });
     </script>
 {% endblock extra_javascript %}