translate the notifications too

InvenTree/templates/account/base.html

@@ -91,7 +91,7 @@
 
 <!-- general InvenTree -->
 <script type='text/javascript' src="{% static 'script/inventree/inventree.js' %}"></script>
-<script type='text/javascript' src="{% static 'script/inventree/notification.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'notification.js' %}"></script>
 
 <!-- fontawesome -->
 <script type='text/javascript' src="{% static 'fontawesome/js/solid.js' %}"></script>

InvenTree/templates/base.html

@@ -162,7 +162,6 @@
 <script type='text/javascript' src="{% static 'script/randomColor.min.js' %}"></script>
 
 <!-- general InvenTree -->
-<script type='text/javascript' src="{% static 'script/inventree/notification.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/inventree/inventree.js' %}"></script>
 
 <!-- dynamic javascript templates -->
@@ -190,6 +189,7 @@
 <script type='text/javascript' src="{% i18n_static 'plugin.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'tables.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'table_filters.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'notification.js' %}"></script>
 
 <script type='text/javascript' src="{% static 'fontawesome/js/solid.min.js' %}"></script>
 <script type='text/javascript' src="{% static 'fontawesome/js/regular.min.js' %}"></script>

InvenTree/templates/js/translated/notification.js

@@ -0,0 +1,305 @@
+{% load i18n %}
+{% load inventree_extras %}
+
+/*
+ * Add a cached alert message to sesion storage
+ */
+function addCachedAlert(message, options={}) {
+
+    var alerts = sessionStorage.getItem('inventree-alerts');
+
+    if (alerts) {
+        alerts = JSON.parse(alerts);
+    } else {
+        alerts = [];
+    }
+
+    alerts.push({
+        message: message,
+        style: options.style || 'success',
+        icon: options.icon,
+    });
+
+    sessionStorage.setItem('inventree-alerts', JSON.stringify(alerts));
+}
+
+
+/*
+ * Remove all cached alert messages
+ */
+function clearCachedAlerts() {
+    sessionStorage.removeItem('inventree-alerts');
+}
+
+
+/*
+ * Display an alert, or cache to display on reload
+ */
+function showAlertOrCache(message, cache, options={}) {
+
+    if (cache) {
+        addCachedAlert(message, options);
+    } else {
+        showMessage(message, options);
+    }
+}
+
+
+/*
+ * Display cached alert messages when loading a page
+ */
+function showCachedAlerts() {
+
+    var alerts = JSON.parse(sessionStorage.getItem('inventree-alerts')) || [];
+
+    alerts.forEach(function(alert) {
+        showMessage(
+            alert.message,
+            {
+                style: alert.style || 'success',
+                icon: alert.icon,
+            }
+        );
+    });
+
+    clearCachedAlerts();
+}
+
+
+/* 
+ * Display an alert message at the top of the screen.
+ * The message will contain a "close" button,
+ * and also dismiss automatically after a certain amount of time.
+ * 
+ * arguments:
+ * - message: Text / HTML content to display
+ * 
+ * options:
+ * - style: alert style e.g. 'success' / 'warning'
+ * - timeout: Time (in milliseconds) after which the message will be dismissed
+ */
+function showMessage(message, options={}) {
+
+    var style = options.style || 'info';
+
+    var timeout = options.timeout || 5000;
+
+    var target = options.target || $('#alerts');
+
+    var details = '';
+
+    if (options.details) {
+        details = `<p><small>${options.details}</p></small>`;
+    }
+
+    // Hacky function to get the next available ID
+    var id = 1;
+
+    while ($(`#alert-${id}`).exists()) {
+        id++;
+    }
+
+    var icon = '';
+
+    if (options.icon) {
+        icon = `<span class='${options.icon}'></span>`;
+    }
+
+    // Construct the alert
+    var html = `
+    <div id='alert-${id}' class='alert alert-${style} alert-dismissible fade show' role='alert'>
+        ${icon}
+        <b>${message}</b>
+        ${details}
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>  
+    </div>
+    `;
+
+    target.append(html);
+
+    // Remove the alert automatically after a specified period of time
+    $(`#alert-${id}`).delay(timeout).slideUp(200, function() {
+        $(this).alert(close);
+    });
+}
+
+var notificationWatcher = null;  // reference for the notificationWatcher
+/**
+ * start the regular notification checks
+ **/
+function startNotificationWatcher() {
+    notificationCheck(force=true);
+    notificationWatcher = setInterval(notificationCheck, 1000);
+}
+
+/**
+ * stop the regular notification checks
+ **/
+function stopNotificationWatcher() {
+    clearInterval(notificationWatcher);
+}
+
+
+var notificationUpdateTic = 0;
+/**
+ * The notification checker is initiated when the document is loaded. It checks if there are unread notifications
+ * if unread messages exist the notification indicator is updated
+ * 
+ * options:
+ * - force: set true to force an update now (if you got in focus for example)
+ **/
+function notificationCheck(force = false) {
+    notificationUpdateTic = notificationUpdateTic + 1;
+
+    // refresh if forced or
+    // if in focus and was not refreshed in the last 5 seconds
+    if (force || (document.hasFocus() && notificationUpdateTic >= 5)) {
+        notificationUpdateTic = 0;
+        inventreeGet(
+            '/api/notifications/',
+            {
+                read: false,
+            },
+            {
+                success: function(response) {
+                    updateNotificationIndicator(response.length);
+                }
+            }
+        );
+    }
+}
+
+/**
+ * handles read / unread buttons and UI rebuilding
+ * 
+ * arguments:
+ * - btn: element that got clicked / fired the event -> must contain pk and target as attributes
+ * 
+ * options:
+ * - panel_caller: this button was clicked in the notification panel
+ **/
+function updateNotificationReadState(btn, panel_caller=false) {
+    var url = `/api/notifications/${btn.attr('pk')}/${btn.attr('target')}/`;
+
+    inventreePut(url, {}, {
+    method: 'POST',
+    success: function() {
+        // update the notification tables if they were declared
+        if (window.updateNotifications) {
+            window.updateNotifications();
+        }
+
+        // update current notification count
+        var count = parseInt($("#notification-counter").html());
+        if (btn.attr('target') == 'read') {
+            count = count - 1;
+        } else {
+            count = count + 1;
+        }
+        // update notification indicator now
+        updateNotificationIndicator(count);
+
+        // remove notification if called from notification panel
+        if (panel_caller) {
+            btn.parent().parent().remove()
+        }
+    }
+    });
+};
+
+/**
+ * Returns the html for a read / unread button
+ * 
+ * arguments:
+ * - pk: primary key of the notification
+ * - state: current state of the notification (read / unread) -> just pass what you were handed by the api
+ * - small: should the button be small
+ **/
+function getReadEditButton(pk, state, small=false) {
+    if (state) {
+        var bReadText = '{% trans "Mark as unread" %}';
+        var bReadIcon = 'fas fa-bookmark icon-red';
+        var bReadTarget = 'unread';
+    } else {
+        var bReadText = '{% trans "Mark as read" %}';
+        var bReadIcon = 'far fa-bookmark icon-green';
+        var bReadTarget = 'read';
+    }
+
+    var style = (small) ? 'btn-sm ' : '';
+    return `<button title='${bReadText}' class='notification-read btn ${style}btn-outline-secondary' type='button' pk='${pk}' target='${bReadTarget}'><span class='${bReadIcon}'></span></button>`;
+}
+
+/**
+ * fills the notification panel when opened
+ **/
+function openNotificationPanel() {
+    var html = '';
+    var center_ref = '#notification-center';
+
+    inventreeGet(
+        '/api/notifications/',
+        {
+            read: false,
+        },
+        {
+            success: function(response) {
+                if (response.length == 0) {
+                    html = `<p class='text-muted'>{% trans "No unread notifications" %}</p>`;
+                } else {
+                    // build up items
+                    response.forEach(function(item, index) {
+                        html += '<li class="list-group-item">';
+                        // d-flex justify-content-between align-items-start
+                        html += '<div>';
+                        html += `<span class="badge rounded-pill bg-primary">${item.category}</span><span class="ms-2">${item.name}</span>`;
+                        html += '</div>';
+                        if (item.target) {
+                            var link_text = `${item.target.model}: ${item.target.name}`;
+                            if (item.target.link) {
+                                link_text = `<a href='${item.target.link}'>${link_text}</a>`;
+                            }
+                            html += link_text
+                        }
+                        html += '<div>';
+                        html += `<span class="text-muted">${item.age_human}</span>`;
+                        html += getReadEditButton(item.pk, item.read, true);
+                        html += "</div></li>";
+                    });
+
+                    // package up
+                    html = `<ul class="list-group">${html}</ul>`
+                }
+
+                // set html
+                $(center_ref).html(html);
+            }
+        }
+    );
+
+    $(center_ref).on('click', '.notification-read', function() {
+        updateNotificationReadState($(this), true);
+    });
+}
+
+/**
+ * clears the notification panel when closed
+ **/
+function closeNotificationPanel() {
+    $('#notification-center').html(`<p class='text-muted'>{% trans "Notifications will load here" %}</p>`);
+}
+
+/**
+ * updates the notification counter
+ **/
+function updateNotificationIndicator(count) {
+    // reset update Ticker -> safe some API bandwidth
+    notificationUpdateTic = 0;
+
+    if (count == 0) {
+        $("#notification-alert").addClass("d-none");
+    } else {
+        $("#notification-alert").removeClass("d-none");
+    }
+    $("#notification-counter").html(count);
+}

InvenTree/templates/skeleton.html

@@ -77,7 +77,7 @@
 
 <!-- general InvenTree -->
 <script type='text/javascript' src="{% static 'script/inventree/inventree.js' %}"></script>
-<script type='text/javascript' src="{% static 'script/inventree/notification.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'notification.js' %}"></script>
 {% block body_scripts_inventree %}
 {% endblock %}