Use AJAX for notifications table (#10961)

* Use AJAX for notifications table Signed-off-by: Andrew Thornton <art27@cantab.net> * move to separate js Signed-off-by: Andrew Thornton <art27@cantab.net> * placate golangci-lint Signed-off-by: Andrew Thornton <art27@cantab.net> * Add autoupdating notification count Signed-off-by: Andrew Thornton <art27@cantab.net> * Fix wipeall Signed-off-by: Andrew Thornton <art27@cantab.net> * placate tests Signed-off-by: Andrew Thornton <art27@cantab.net> * Try hidden Signed-off-by: Andrew Thornton <art27@cantab.net> * Try hide and hidden Signed-off-by: Andrew Thornton <art27@cantab.net> * More auto-update improvements Only run checker on pages that have a count Change starting checker to 10s with a back-off to 60s if there is no change Signed-off-by: Andrew Thornton <art27@cantab.net> * string comparison! Signed-off-by: Andrew Thornton <art27@cantab.net> * as per @silverwind Signed-off-by: Andrew Thornton <art27@cantab.net> * add configurability as per @6543 Signed-off-by: Andrew Thornton <art27@cantab.net> * Add documentation as per @6543 Signed-off-by: Andrew Thornton <art27@cantab.net> * Use CSRF header not query Signed-off-by: Andrew Thornton <art27@cantab.net> * Further JS improvements Fix @etzelia update notification table request Fix @silverwind comments Co-Authored-By: silverwind <me@silverwind.io> Signed-off-by: Andrew Thornton <art27@cantab.net> * Simplify the notification count fns Signed-off-by: Andrew Thornton <art27@cantab.net> Co-authored-by: silverwind <me@silverwind.io>
2020-04-24 04:57:38 +01:00 · 2020-04-24 04:57:38 +01:00 · b10c416f9e
commit b10c416f9e
parent e74c4e1be9
12 changed files with 331 additions and 140 deletions
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@ -0,0 +1,110 @@
+const {AppSubUrl, csrf, NotificationSettings} = window.config;
+
+export function initNotificationsTable() {
+  $('#notification_table .button').on('click', async function () {
+    const data = await updateNotification(
+      $(this).data('url'),
+      $(this).data('status'),
+      $(this).data('page'),
+      $(this).data('q'),
+      $(this).data('notification-id'),
+    );
+
+    $('#notification_div').replaceWith(data);
+    initNotificationsTable();
+    await updateNotificationCount();
+
+    return false;
+  });
+}
+
+export function initNotificationCount() {
+  if (NotificationSettings.MinTimeout <= 0) {
+    return;
+  }
+
+  const notificationCount = $('.notification_count');
+
+  if (notificationCount.length > 0) {
+    const fn = (timeout, lastCount) => {
+      setTimeout(async () => {
+        await updateNotificationCountWithCallback(fn, timeout, lastCount);
+      }, timeout);
+    };
+
+    fn(NotificationSettings.MinTimeout, notificationCount.text());
+  }
+}
+
+async function updateNotificationCountWithCallback(callback, timeout, lastCount) {
+  const currentCount = $('.notification_count').text();
+  if (lastCount !== currentCount) {
+    callback(NotificationSettings.MinTimeout, currentCount);
+    return;
+  }
+
+  const newCount = await updateNotificationCount();
+  let needsUpdate = false;
+
+  if (lastCount !== newCount) {
+    needsUpdate = true;
+    timeout = NotificationSettings.MinTimeout;
+  } else if (timeout < NotificationSettings.MaxTimeout) {
+    timeout += NotificationSettings.TimeoutStep;
+  }
+
+  callback(timeout, newCount);
+
+  const notificationDiv = $('#notification_div');
+  if (notificationDiv.length > 0 && needsUpdate) {
+    const data = await $.ajax({
+      type: 'GET',
+      url: `${AppSubUrl}/notifications?${notificationDiv.data('params')}`,
+      data: {
+        'div-only': true,
+      }
+    });
+    notificationDiv.replaceWith(data);
+    initNotificationsTable();
+  }
+}
+
+async function updateNotificationCount() {
+  const data = await $.ajax({
+    type: 'GET',
+    url: `${AppSubUrl}/api/v1/notifications/new`,
+    headers: {
+      'X-Csrf-Token': csrf,
+    },
+  });
+
+  const notificationCount = $('.notification_count');
+  if (data.new === 0) {
+    notificationCount.addClass('hidden');
+  } else {
+    notificationCount.removeClass('hidden');
+  }
+
+  notificationCount.text(`${data.new}`);
+
+  return `${data.new}`;
+}
+
+async function updateNotification(url, status, page, q, notificationID) {
+  if (status !== 'pinned') {
+    $(`#notification_${notificationID}`).remove();
+  }
+
+  return $.ajax({
+    type: 'POST',
+    url,
+    data: {
+      _csrf: csrf,
+      notification_id: notificationID,
+      status,
+      page,
+      q,
+      noredirect: true,
+    },
+  });
+}