From 2c5972d0ab1d95e23f63f614836d68935d0e78ff Mon Sep 17 00:00:00 2001 From: Peter Pfeufer Date: Tue, 31 Oct 2023 21:45:52 +0100 Subject: [PATCH 1/3] [ADD] Refresh notification icon script Similar to what we have in AAv3 for the notification count --- .../js/refresh-notification-icon.js | 81 +++++++++++++++++++ .../templates/allianceauth/base-bs5.html | 9 ++- .../bundles/refresh-notification-icon-js.html | 3 + 3 files changed, 89 insertions(+), 4 deletions(-) create mode 100644 allianceauth/static/allianceauth/js/refresh-notification-icon.js create mode 100644 allianceauth/templates/bundles/refresh-notification-icon-js.html diff --git a/allianceauth/static/allianceauth/js/refresh-notification-icon.js b/allianceauth/static/allianceauth/js/refresh-notification-icon.js new file mode 100644 index 00000000..1dbb9eec --- /dev/null +++ b/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(); +}); diff --git a/allianceauth/templates/allianceauth/base-bs5.html b/allianceauth/templates/allianceauth/base-bs5.html index 20b0cb83..802f0512 100644 --- a/allianceauth/templates/allianceauth/base-bs5.html +++ b/allianceauth/templates/allianceauth/base-bs5.html @@ -122,13 +122,14 @@ {% theme_js %} {% if user.is_authenticated %} - + + {% include 'bundles/refresh-notification-icon-js.html' %} {% endif %} {% block extra_javascript %} diff --git a/allianceauth/templates/bundles/refresh-notification-icon-js.html b/allianceauth/templates/bundles/refresh-notification-icon-js.html new file mode 100644 index 00000000..88f3d16f --- /dev/null +++ b/allianceauth/templates/bundles/refresh-notification-icon-js.html @@ -0,0 +1,3 @@ +{% load static %} + + From 9e47d193378914ad00aab556b0dc422d0eb0516c Mon Sep 17 00:00:00 2001 From: Peter Pfeufer Date: Tue, 31 Oct 2023 21:48:18 +0100 Subject: [PATCH 2/3] [ADD] Missing semicolons --- .../static/allianceauth/js/timerboard.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/allianceauth/static/allianceauth/js/timerboard.js b/allianceauth/static/allianceauth/js/timerboard.js index 26ceb226..2e1ce5c5 100644 --- a/allianceauth/static/allianceauth/js/timerboard.js +++ b/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().prev('label').hide() + inputAbsoluteTime.parent().hide(); + inputAbsoluteTime.parent().prev('label').hide(); inputCountdown.prop('required', true); $('input#id_absolute_checkbox').change(function () { - if ($(this).prop("checked")) { + if ($(this).prop('checked')) { // check box enabled - inputAbsoluteTime.parent().show() - inputAbsoluteTime.parent().prev('label').show() - inputCountdown.parent().hide() - inputCountdown.parent().prev('label').hide() + inputAbsoluteTime.parent().show(); + inputAbsoluteTime.parent().prev('label').show(); + inputCountdown.parent().hide(); + inputCountdown.parent().prev('label').hide(); inputAbsoluteTime.prop('required', true); inputCountdown.prop('required', false); } else { // Checkbox is not checked - inputAbsoluteTime.parent().hide() - inputAbsoluteTime.parent().prev('label').hide() - inputCountdown.parent().show() - inputCountdown.parent().prev('label').show() + inputAbsoluteTime.parent().hide(); + inputAbsoluteTime.parent().prev('label').hide(); + inputCountdown.parent().show(); + inputCountdown.parent().prev('label').show(); inputAbsoluteTime.prop('required', false); inputCountdown.prop('required', true); } From 21f0a9642220f43e71021d2290500c85eb00b85e Mon Sep 17 00:00:00 2001 From: Peter Pfeufer Date: Tue, 31 Oct 2023 22:00:43 +0100 Subject: [PATCH 3/3] [CHANGE] Modernize and convert to ES6+ --- allianceauth/static/allianceauth/js/timerboard.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/allianceauth/static/allianceauth/js/timerboard.js b/allianceauth/static/allianceauth/js/timerboard.js index 2e1ce5c5..22ec0383 100644 --- a/allianceauth/static/allianceauth/js/timerboard.js +++ b/allianceauth/static/allianceauth/js/timerboard.js @@ -8,9 +8,9 @@ $(document).ready(() => { inputAbsoluteTime.parent().prev('label').hide(); inputCountdown.prop('required', true); - $('input#id_absolute_checkbox').change(function () { - if ($(this).prop('checked')) { - // check box enabled + $('input#id_absolute_checkbox').change((event) => { + if ($(event.target).prop('checked')) { + // Checkbox is checked inputAbsoluteTime.parent().show(); inputAbsoluteTime.parent().prev('label').show(); inputCountdown.parent().hide();