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/static/allianceauth/js/timerboard.js b/allianceauth/static/allianceauth/js/timerboard.js index 26ceb226..22ec0383 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")) { - // check box enabled - inputAbsoluteTime.parent().show() - inputAbsoluteTime.parent().prev('label').show() - inputCountdown.parent().hide() - inputCountdown.parent().prev('label').hide() + $('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(); + 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); } 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 %} + +