[CHANGE] Switch to BS5 base template

allianceauth/optimer/templates/optimer/add.html

@@ -1,15 +1,23 @@
-{% extends "allianceauth/base.html" %}
+{% extends "allianceauth/base-bs5.html" %}
+
 {% load bootstrap %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 
-{% block page_title %}{% translate "Create Operation" %}{% endblock page_title %}
+{% block page_title %}
+    {% translate "Create Operation" %}
+{% endblock page_title %}
+
+{% block header_nav_brand %}
+    {% translate "Fleet Operation Timers" %}
+{% endblock header_nav_brand %}
+
 {% block extra_css %}
     {% include 'bundles/jquery-datetimepicker-css.html' %}
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="col-lg-12">
+    <div>
         <h1 class="page-header text-center">{% translate "Create Fleet Operation" %}</h1>
 
         <div class="container-fluid">

allianceauth/optimer/templates/optimer/management.html

@@ -1,49 +1,70 @@
-{% extends "allianceauth/base.html" %}
+{% extends "allianceauth/base-bs5.html" %}
+
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 
-{% block page_title %}{% translate "Fleet Operation Management" %}{% endblock page_title %}
+{% block page_title %}
-{% block extra_css %}{% endblock extra_css %}
+    {% translate "Fleet Operation Management" %}
+{% endblock page_title %}
+
+{% block header_nav_brand %}
+    {% translate "Fleet Operation Timers" %}
+{% endblock header_nav_brand %}
 
 {% block content %}
-    <div class="col-lg-12">
+    <div>
-        <h1 class="page-header text-center">{% translate "Fleet Operation Timers" %}
         <div class="text-end">
             {% if perms.auth.optimer_management %}
                 <a href="{% url 'optimer:add' %}" class="btn btn-success">{% translate "Create Operation" %}</a>
             {% endif %}
         </div>
-        </h1>
 
-        <div class="col-lg-12 text-center row">
+        <div class="text-center mb-3">
             <div class="badge bg-info text-start">
                 <b>{% translate "Current Eve Time:" %}</b>
+                <span id="current-time"></span>
             </div>
-            <strong class="badge bg-info text-start" id="current-time"></strong>
-            <br>
         </div>
 
-        <h4><b>{% translate "Next Fleet Operations" %}</b></h4>
+        <div class="card mb-3">
+            <div class="card-header">
+                <div class="card-title mb-0">
+                    {% translate "Next Fleet Operations" %}
+                </div>
+            </div>
+
+            <div class="card-body">
                 {% if future_timers %}
-            {% include "optimer/fleetoptable.html" with timers=future_timers %}
+                    {% include "optimer/fleetoptable.html" with timers=next_timers %}
                 {% else %}
                     <div class="alert alert-warning text-center">{% translate "No upcoming timers." %}</div>
                 {% endif %}
+            </div>
+        </div>
 
-        <h4><b>{% translate "Past Fleet Operations" %}</b></h4>
+        <div class="card mb-3">
+            <div class="card-header">
+                <div class="card-title mb-0">
+                    {% translate "Past Fleet Operations" %}
+                </div>
+            </div>
+
+            <div class="card-body">
                 {% if past_timers %}
                     {% include "optimer/fleetoptable.html" with timers=past_timers %}
                 {% else %}
                     <div class="alert alert-warning text-center">{% translate "No past timers." %}</div>
                 {% endif %}
             </div>
+        </div>
+    </div>
 
     {% include 'bundles/moment-js.html' with locale=True %}
     {% include 'bundles/timers-js.html' %}
 
     <script>
         // Data
-        let timers = [
+        const timers = [
             {% for op in optimer %}
                 {
                     'id': {{ op.id }},
@@ -57,9 +78,9 @@
          * Update a timer
          * @param timer Timer information
          */
-        let updateTimer = function (timer) {
+        const updateTimer = (timer) => {
             if (timer.start.isAfter(Date.now())) {
-                let duration = moment.duration(timer.start - moment(), 'milliseconds');
+                const duration = moment.duration(timer.start - moment(), 'milliseconds');
 
                 document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
             } else {
@@ -69,10 +90,13 @@
             }
         };
 
-        let updateAllTimers = function () {
+        /**
-            let l = timers.length;
+         * Update all timers
+         */
+        const updateAllTimers = () => {
+            const l = timers.length;
 
-            for (var i=0; i < l; ++i) {
+            for (let i=0; i < l; ++i) {
                 if (timers[i].expired) continue;
 
                 updateTimer(timers[i]);
@@ -83,26 +107,32 @@
          * Set the local time info for the timer
          * @param timer Timer information
          */
-        let setLocalTime = function (timer) {
+        const setLocalTime = (timer) => {
-            document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
+            document.getElementById(
+                "localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT")
+            ;
         };
 
         /**
          * Set all local time fields
          */
-        let setAllLocalTimes = function () {
+        const setAllLocalTimes = () => {
-            let l = timers.length;
+            const l = timers.length;
 
-            for (var i=0; i < l; ++i) {
+            for (let i=0; i < l; ++i) {
                 setLocalTime(timers[i]);
             }
         };
 
-        let updateClock = function () {
+        /**
+         * Get the current Eve time as a string
+         * @returns {string} Eve time string
+         */
+        const updateClock = () => {
             document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
         };
 
-        let timedUpdate = function () {
+        const timedUpdate = () => {
             updateClock();
             updateAllTimers();
         };

allianceauth/optimer/templates/optimer/update.html

@@ -1,18 +1,26 @@
-{% extends "allianceauth/base.html" %}
+{% extends "allianceauth/base-bs5.html" %}
+
 {% load bootstrap %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 
-{% block page_title %}{% translate "Update Fleet Operation" %}{% endblock page_title %}
+{% block page_title %}
+    {% translate "Update Fleet Operation" %}
+{% endblock page_title %}
+
+{% block header_nav_brand %}
+    {% translate "Fleet Operation Timers" %}
+{% endblock header_nav_brand %}
 
 {% block extra_css %}
     {% include 'bundles/jquery-datetimepicker-css.html' %}
 {% endblock extra_css %}
 
 {% block content %}
-
+    <div>
-    <div class="col-lg-12">
+        <h1 class="page-header text-center mb-3">
-        <h1 class="page-header text-center">{% translate "Update Fleet Operation" %}</h1>
+            {% translate "Update Fleet Operation" %}
+        </h1>
 
         <div class="container-fluid">
             <div class="col-md-4 col-md-offset-4">
@@ -33,25 +41,19 @@
         </div>
 
     </div>
-
 {% endblock content %}
 
 {% block extra_javascript %}
     {% include 'bundles/jquery-datetimepicker-js.html' %}
-{% endblock %}
-
-{% block extra_script %}
 
+    <script>
+        $(document).ready(() => {
             $('#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>
+{% endblock %}