Merge branch 'js-fixes' into 'v4.x'

JS Fixes

See merge request allianceauth/allianceauth!1556

allianceauth/static/allianceauth/js/refresh-notification-icon.js

@@ -0,0 +1,81 @@
+/* global notificationUpdateSettings */
+
+/**
+ * This script refreshed the notification icon in the top menu
+ * on a regular basis so to keep the user apprised about newly arrived
+ * notifications without having to reload the page.
+ *
+ * The refresh rate can be changes via the Django setting NOTIFICATIONS_REFRESH_TIME.
+ * See documentation for details.
+ */
+$(() => {
+    'use strict';
+
+    const notificationsRefreshTime = notificationUpdateSettings.refreshTime;
+    const userNotificationsCountViewUrl = notificationUpdateSettings.userNotificationsCountViewUrl;
+    const elementNotificationIcon = $('#menu_item_notifications .fa-bell');
+
+    /**
+     * Update the notification icon in the top menu
+     */
+    const updateNotificationIcon = () => {
+        fetch(userNotificationsCountViewUrl)
+            .then((response) => {
+                if (response.ok) {
+                    return response.json();
+                }
+
+                throw new Error('Something went wrong');
+            })
+            .then((responseJson) => {
+                const unreadCount = responseJson.unread_count;
+
+                if (unreadCount > 0) {
+                    elementNotificationIcon.addClass('text-danger');
+                } else {
+                    elementNotificationIcon.removeClass('text-danger');
+                }
+            })
+            .catch((error) => {
+                console.log(`Failed to load HTMl to render notifications item. Error: ${error.message}`);
+            });
+    };
+
+    let myInterval;
+
+    /**
+     * Activate automatic refresh every x seconds
+     */
+    const activateIconUpdate = () => {
+        if (notificationsRefreshTime > 0) {
+            myInterval = setInterval(
+                updateNotificationIcon, notificationsRefreshTime * 1000
+            );
+        }
+    };
+
+    /**
+     * Deactivate automatic refresh
+     */
+    const deactivateIconUpdate = () => {
+        if ((notificationsRefreshTime > 0) && (typeof myInterval !== 'undefined')) {
+            clearInterval(myInterval);
+        }
+    };
+
+    /**
+     * Refresh only on active browser tabs
+     */
+    $(window)
+        // Tab active
+        .focus(() => {
+            activateIconUpdate();
+        })
+        // Tab inactive
+        .blur(function() {
+            deactivateIconUpdate();
+        });
+
+    // Initial start of refreshing on script loading
+    activateIconUpdate();
+});

allianceauth/static/allianceauth/js/timerboard.js

@@ -1,28 +1,28 @@
 $(document).ready(() => {
     'use strict';
+
     const inputAbsoluteTime = $('input#id_absolute_time');
     const inputCountdown = $('#id_days_left, #id_hours_left, #id_minutes_left');
 
-    //inputAbsoluteTime.prop('disabled', true);
+    inputAbsoluteTime.parent().hide();
-    inputAbsoluteTime.parent().hide()
+    inputAbsoluteTime.parent().prev('label').hide();
-    inputAbsoluteTime.parent().prev('label').hide()
     inputCountdown.prop('required', true);
 
-    $('input#id_absolute_checkbox').change(function () {
+    $('input#id_absolute_checkbox').change((event) => {
-        if ($(this).prop("checked")) {
+        if ($(event.target).prop('checked')) {
-            // check box enabled
+            // Checkbox is checked
-            inputAbsoluteTime.parent().show()
+            inputAbsoluteTime.parent().show();
-            inputAbsoluteTime.parent().prev('label').show()
+            inputAbsoluteTime.parent().prev('label').show();
-            inputCountdown.parent().hide()
+            inputCountdown.parent().hide();
-            inputCountdown.parent().prev('label').hide()
+            inputCountdown.parent().prev('label').hide();
             inputAbsoluteTime.prop('required', true);
             inputCountdown.prop('required', false);
         } else {
             // Checkbox is not checked
-            inputAbsoluteTime.parent().hide()
+            inputAbsoluteTime.parent().hide();
-            inputAbsoluteTime.parent().prev('label').hide()
+            inputAbsoluteTime.parent().prev('label').hide();
-            inputCountdown.parent().show()
+            inputCountdown.parent().show();
-            inputCountdown.parent().prev('label').show()
+            inputCountdown.parent().prev('label').show();
             inputAbsoluteTime.prop('required', false);
             inputCountdown.prop('required', true);
         }

allianceauth/templates/allianceauth/base-bs5.html

@@ -122,13 +122,14 @@
         {% theme_js %}
 
         {% if user.is_authenticated %}
-            <script type="application/javascript">
+            <script>
-                let notificationUPdateSettings = {
+                const notificationUpdateSettings = {
-                    notificationsListViewUrl: "{% url 'notifications:list' %}",
+                    refreshTime: "{% notifications_refresh_time %}",
-                    notificationsRefreshTime: "{% notifications_refresh_time %}",
                     userNotificationsCountViewUrl: "{% url 'notifications:user_notifications_count' request.user.pk %}"
                 };
             </script>
+
+            {% include 'bundles/refresh-notification-icon-js.html' %}
         {% endif %}
 
         {% block extra_javascript %}

allianceauth/templates/bundles/refresh-notification-icon-js.html

@@ -0,0 +1,3 @@
+{% load static %}
+
+<script src="{% static 'allianceauth/js/refresh-notification-icon.js' %}"></script>