From 2440e5d2b2f6b7fdba281e45f87464010d2cb7c0 Mon Sep 17 00:00:00 2001
From: Peter Pfeufer <info@ppfeufer.de>
Date: Sat, 9 Dec 2023 18:13:51 +0100
Subject: [PATCH] [CHANGE] Switch to `django_bootstrap5` forms

---
 .../timerboard/dashboard.timers.html          | 62 ++++++++--------
 .../timerboard/templates/timerboard/form.html | 74 +++++++++++--------
 .../timerboard/timer_create_form.html         | 27 +++----
 .../timerboard/timer_update_form.html         | 31 ++++----
 4 files changed, 103 insertions(+), 91 deletions(-)

diff --git a/allianceauth/timerboard/templates/timerboard/dashboard.timers.html b/allianceauth/timerboard/templates/timerboard/dashboard.timers.html
index f01ecf14..cb5d944c 100644
--- a/allianceauth/timerboard/templates/timerboard/dashboard.timers.html
+++ b/allianceauth/timerboard/templates/timerboard/dashboard.timers.html
@@ -17,39 +17,39 @@
                                 <th class="text-center">{% translate "Eve Time" %}</th>
                             </tr>
                         </thead>
+
                         <tbody>
                             {% for timer in timers %}
-                            <tr>
-                                <td class="text-center">
-                                    {{ timer.details }}
-                                </td>
-                                <td class="text-center">
-                                    {{ timer.get_timer_type_display }}
-                                </td>
-                                <td class="text-center" nowrap>
-                                    {% if timer.objective == "Hostile" %}
-                                        <div class="badge bg-danger">
-                                            {% translate "Hostile" %}
-                                        </div>
-                                    {% endif %}
-                                    {% if timer.objective == "Friendly" %}
-                                        <div class="badge bg-primary">
-                                            {% translate "Friendly" %}
-                                        </div>
-                                    {% endif %}
-                                    {% if timer.objective == "Neutral" %}
-                                        <div class="badge bg-default">
-                                            {% translate "Neutral" %}
-                                        </div>
-                                    {% endif %}
-                                </td>
-                                <td class="text-center"><a href="{{ timer.system|dotlan_solar_system_url }}">
-                                    {{ timer.system }} {{ timer.planet_moon }}
-                                    </a>
-                                </td>
-                                <td class="text-center" nowrap>{{ timer.eve_time | date:"Y-m-d H:i" }}</td>
-
-                            </tr>
+                                <tr>
+                                    <td class="text-center">
+                                        {{ timer.details }}
+                                    </td>
+                                    <td class="text-center">
+                                        {{ timer.get_timer_type_display }}
+                                    </td>
+                                    <td class="text-center" nowrap>
+                                        {% if timer.objective == "Hostile" %}
+                                            <div class="badge bg-danger">
+                                                {% translate "Hostile" %}
+                                            </div>
+                                        {% endif %}
+                                        {% if timer.objective == "Friendly" %}
+                                            <div class="badge bg-primary">
+                                                {% translate "Friendly" %}
+                                            </div>
+                                        {% endif %}
+                                        {% if timer.objective == "Neutral" %}
+                                            <div class="badge bg-default">
+                                                {% translate "Neutral" %}
+                                            </div>
+                                        {% endif %}
+                                    </td>
+                                    <td class="text-center"><a href="{{ timer.system|dotlan_solar_system_url }}">
+                                        {{ timer.system }} {{ timer.planet_moon }}
+                                        </a>
+                                    </td>
+                                    <td class="text-center" nowrap>{{ timer.eve_time | date:"Y-m-d H:i" }}</td>
+                                </tr>
                             {% endfor %}
                         </tbody>
                     </table>
diff --git a/allianceauth/timerboard/templates/timerboard/form.html b/allianceauth/timerboard/templates/timerboard/form.html
index 2221294b..5273918b 100644
--- a/allianceauth/timerboard/templates/timerboard/form.html
+++ b/allianceauth/timerboard/templates/timerboard/form.html
@@ -1,29 +1,46 @@
 {% extends "allianceauth/base-bs5.html" %}
-{% load bootstrap %}
+
+{% load django_bootstrap5 %}
 {% load i18n %}
 
 {% block page_title %}
 {% endblock page_title %}
 
+{% block header_nav_brand %}
+    {% translate "Structure Timers" %}
+{% endblock header_nav_brand %}
+
 {% block content %}
-    <div class="col-lg-12">
-        <h1 class="page-header text-center">
+    <div>
+        <h1 class="page-header text-center mb-3">
             {% block page_header %}
             {% endblock page_header %}
             {% include "timerboard/index_button.html" %}
         </h1>
-        <div class="container-fluid">
-            <div class="col-md-4 col-md-offset-4">
-                <div class="row">
-                    <form id="add-timer-form" class="form-signin" role="form" action="" method="POST">
-                        {% csrf_token %}
-                        {{ form|bootstrap }}
-                        <br>
-                        <button class="btn btn-lg btn-primary btn-block" type="submit">
-                            {% block submit_button_text %}
-                            {% endblock submit_button_text %}
-                        </button>
-                    </form>
+
+        <div class="card card-primary border-0">
+            <div class="card-header">
+                <div class="card-title mb-0">
+                    {% translate "Structure Timer Details" %}
+                </div>
+            </div>
+
+            <div class="card-body">
+                <div class="row justify-content-center">
+                    <div class="col-md-6">
+                        <form class="form-signin" role="form" action="" method="POST">
+                            {% csrf_token %}
+
+                            {% bootstrap_form form %}
+
+                            <div class="form-group mt-3 clearfix">
+                                <button class="btn btn-primary" type="submit">
+                                    {% block submit_button_text %}
+                                    {% endblock submit_button_text %}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
@@ -32,19 +49,16 @@
 {% endblock content %}
 
 {% block extra_javascript %}
-{% include 'bundles/jquery-datetimepicker-js.html' %}
-{% endblock %}
+    {% include 'bundles/jquery-datetimepicker-js.html' %}
 
-{% 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
-});
-{% endblock extra_script %}
+    <script>
+        $(document).ready(() => {
+            $('#id_start').datetimepicker({
+                setlocale: '{{ LANGUAGE_CODE }}',
+                mask: true,
+                format: 'Y-m-d H:i',
+                minDate: 0
+            });
+        });
+    </script>
+{% endblock %}
diff --git a/allianceauth/timerboard/templates/timerboard/timer_create_form.html b/allianceauth/timerboard/templates/timerboard/timer_create_form.html
index c8d2d0d1..0d03eb31 100644
--- a/allianceauth/timerboard/templates/timerboard/timer_create_form.html
+++ b/allianceauth/timerboard/templates/timerboard/timer_create_form.html
@@ -14,17 +14,18 @@
 {% endblock %}
 
 {% block extra_javascript %}
-{% include 'bundles/timerboard-js.html' %}
-{% include 'bundles/jquery-datetimepicker-js.html' %}
-{% include 'bundles/jquery-datetimepicker-css.html' %}
-{% endblock %}
+    {% include 'bundles/timerboard-js.html' %}
+    {% include 'bundles/jquery-datetimepicker-js.html' %}
+    {% include 'bundles/jquery-datetimepicker-css.html' %}
 
-{% block extra_script %}
-$('input#id_absolute_time').datetimepicker({
-    setlocale: '{{ LANGUAGE_CODE }}',
-    theme: {% if NIGHT_MODE %}'dark'{% else %}'default'{% endif %},
-    format: 'Y-m-d H:i',
-    minDate: 0,
-    defaultDate: null
-});
-{% endblock extra_script %}
+    <script>
+        $(document).ready(() => {
+            $('input#id_absolute_time').datetimepicker({
+                setlocale: '{{ LANGUAGE_CODE }}',
+                format: 'Y-m-d H:i',
+                minDate: 0,
+                defaultDate: null
+            });
+        });
+    </script>
+{% endblock %}
diff --git a/allianceauth/timerboard/templates/timerboard/timer_update_form.html b/allianceauth/timerboard/templates/timerboard/timer_update_form.html
index b668ae3e..f91a923a 100644
--- a/allianceauth/timerboard/templates/timerboard/timer_update_form.html
+++ b/allianceauth/timerboard/templates/timerboard/timer_update_form.html
@@ -14,21 +14,18 @@
 {% endblock %}
 
 {% block extra_javascript %}
-{% include 'bundles/timerboard-js.html' %}
-{% include 'bundles/jquery-datetimepicker-js.html' %}
-{% include 'bundles/jquery-datetimepicker-css.html' %}
-{% endblock %}
+    {% include 'bundles/timerboard-js.html' %}
+    {% include 'bundles/jquery-datetimepicker-js.html' %}
+    {% include 'bundles/jquery-datetimepicker-css.html' %}
 
-{% block extra_script %}
-$('input#id_absolute_time').datetimepicker({
-    setlocale: '{{ LANGUAGE_CODE }}',
-    {% if NIGHT_MODE %}
-        theme: 'dark',
-    {% else %}
-        theme: 'default',
-    {% endif %}
-    mask: true,
-    format: 'Y-m-d H:i',
-    defaultDate: null
-});
-{% endblock extra_script %}
+    <script>
+        $(document).ready(() => {
+            $('input#id_absolute_time').datetimepicker({
+                setlocale: '{{ LANGUAGE_CODE }}',
+                mask: true,
+                format: 'Y-m-d H:i',
+                defaultDate: null
+            });
+        });
+    </script>
+{% endblock %}