update progress frontend to use api

tubearchivist/static/css/style.css

@@ -395,6 +395,10 @@ button:hover {
     position: relative; /* needed for modal */
 }
 
+#notifications {
+    position: relative;
+}
+
 .notifications {
     text-align: center;
     width: 80%;
@@ -473,7 +477,8 @@ video:-webkit-full-screen {
     align-items: center;
 }
 
-.video-progress-bar {
+.video-progress-bar,
+.notification-progress-bar {
     position: absolute;
     background-color: var(--accent-font-dark);
     height: 7px;
@@ -1044,6 +1049,7 @@ video:-webkit-full-screen {
 
 /* status message */
 .notification {
+    position: relative;
     background-color: var(--highlight-bg);
     text-align: center;
     padding: 30px 0 15px 0;

tubearchivist/static/progress.js

@@ -5,16 +5,9 @@
 
 'use strict';
 
-checkMessages();
+/* globals apiRequest animate */
 
-// page map to notification status
-const messageTypes = {
-  download: ['message:download', 'message:add', 'message:rescan', 'message:playlistscan'],
-  channel: ['message:subchannel'],
-  channel_id: ['message:playlistscan'],
-  playlist: ['message:subplaylist'],
-  setting: ['message:setting'],
-};
+checkMessages();
 
 // start to look for messages
 function checkMessages() {
@@ -25,82 +18,63 @@ function checkMessages() {
   }
 }
 
-// get messages for page on timer
 function getMessages(dataOrigin) {
-  fetch('/progress/')
-    .then(response => response.json())
-    .then(responseData => {
-      const messages = buildMessage(responseData, dataOrigin);
-      if (messages.length > 0) {
-        // restart itself
-        setTimeout(() => getMessages(dataOrigin), 500);
-      }
-    });
+  let apiEndpoint = '/api/notification/';
+  let responseData = apiRequest(apiEndpoint, 'GET');
+  let messages = buildMessage(responseData, dataOrigin);
+  if (messages.length > 0) {
+    // restart itself
+    setTimeout(() => getMessages(dataOrigin), 500);
+  }
 }
 
-// make div for all messages, return relevant
 function buildMessage(responseData, dataOrigin) {
-  // filter relevan messages
-  let allMessages = responseData['messages'];
-  let messages = allMessages.filter(function (value) {
-    return messageTypes[dataOrigin].includes(value['status']);
+  // filter relevant messages
+  let messages = responseData.filter(function (value) {
+    return value.status.startsWith(dataOrigin);
   }, dataOrigin);
-  // build divs
   let notificationDiv = document.getElementById('notifications');
   let nots = notificationDiv.childElementCount;
   notificationDiv.innerHTML = '';
+
   for (let i = 0; i < messages.length; i++) {
-    let messageData = messages[i];
-    let messageStatus = messageData['status'];
+    const messageData = messages[i];
     let messageBox = document.createElement('div');
-    let title = document.createElement('h3');
-    title.innerHTML = messageData['title'];
-    let message = document.createElement('p');
-    message.innerHTML = messageData['message'];
-    messageBox.appendChild(title);
-    messageBox.appendChild(message);
+    let progress = messageData?.progress * 100 || 0;
     messageBox.classList.add(messageData['level'], 'notification');
+    messageBox.innerHTML = `
+    <h3>${messageData.title}</h3>
+    <p>${messageData.messages.join('<br>')}</p>
+    <div class="notification-progress-bar" style="width: ${progress}%";></div>`;
     notificationDiv.appendChild(messageBox);
-    if (messageStatus === 'message:download') {
-      checkDownloadIcons();
+    if (messageData.status.startsWith('download:')) {
+      animateIcons(messageData.status);
     }
   }
-  // reload page when no more notifications
   if (nots > 0 && messages.length === 0) {
     location.reload();
   }
+
   return messages;
 }
 
-// check if download icons are needed
-function checkDownloadIcons() {
-  let iconBox = document.getElementById('downloadControl');
-  if (iconBox.childElementCount === 0) {
-    let downloadIcons = buildDownloadIcons();
-    iconBox.appendChild(downloadIcons);
+function animateIcons(status) {
+  let rescanIcon = document.getElementById('rescan-icon');
+  let dlIcon = document.getElementById('download-icon');
+  switch (status) {
+    case 'download:scan':
+      if (rescanIcon && !rescanIcon.classList.contains('rotate-img')) {
+        animate('rescan-icon', 'rotate-img');
+      }
+      break;
+
+    case 'download:run':
+      if (dlIcon && !dlIcon.classList.contains('bounce-img')) {
+        animate('download-icon', 'bounce-img');
+      }
+      break;
+
+    default:
+      break;
   }
 }
-
-// add dl control icons
-function buildDownloadIcons() {
-  let downloadIcons = document.createElement('div');
-  downloadIcons.classList = 'dl-control-icons';
-  // stop icon
-  let stopIcon = document.createElement('img');
-  stopIcon.setAttribute('id', 'stop-icon');
-  stopIcon.setAttribute('title', 'Stop Download Queue');
-  stopIcon.setAttribute('src', '/static/img/icon-stop.svg');
-  stopIcon.setAttribute('alt', 'stop icon');
-  stopIcon.setAttribute('onclick', 'stopQueue()');
-  // kill icon
-  let killIcon = document.createElement('img');
-  killIcon.setAttribute('id', 'kill-icon');
-  killIcon.setAttribute('title', 'Kill Download Queue');
-  killIcon.setAttribute('src', '/static/img/icon-close.svg');
-  killIcon.setAttribute('alt', 'kill icon');
-  killIcon.setAttribute('onclick', 'killQueue()');
-  // stich together
-  downloadIcons.appendChild(stopIcon);
-  downloadIcons.appendChild(killIcon);
-  return downloadIcons;
-}

tubearchivist/static/script.js

@@ -250,6 +250,10 @@ function manualImport() {
   let toReplace = document.getElementById('manual-import');
   toReplace.innerHTML = '';
   toReplace.appendChild(message);
+  setTimeout(function () {
+    location.replace('#notifications');
+    checkMessages();
+  }, 200);
 }
 
 function reEmbed() {
@@ -261,6 +265,10 @@ function reEmbed() {
   let toReplace = document.getElementById('re-embed');
   toReplace.innerHTML = '';
   toReplace.appendChild(message);
+  setTimeout(function () {
+    location.replace('#notifications');
+    checkMessages();
+  }, 200);
 }
 
 function dbBackup() {
@@ -272,6 +280,10 @@ function dbBackup() {
   let toReplace = document.getElementById('db-backup');
   toReplace.innerHTML = '';
   toReplace.appendChild(message);
+  setTimeout(function () {
+    location.replace('#notifications');
+    checkMessages();
+  }, 200);
 }
 
 function dbRestore(button) {
@@ -284,6 +296,10 @@ function dbRestore(button) {
   let toReplace = document.getElementById(fileName);
   toReplace.innerHTML = '';
   toReplace.appendChild(message);
+  setTimeout(function () {
+    location.replace('#notifications');
+    checkMessages();
+  }, 200);
 }
 
 function fsRescan() {
@@ -295,6 +311,10 @@ function fsRescan() {
   let toReplace = document.getElementById('fs-rescan');
   toReplace.innerHTML = '';
   toReplace.appendChild(message);
+  setTimeout(function () {
+    location.replace('#notifications');
+    checkMessages();
+  }, 200);
 }
 
 function resetToken() {