add task stop and kill to frontend

tubearchivist/static/css/style.css

@@ -1022,13 +1022,13 @@ video:-webkit-full-screen {
     cursor: pointer;
 }
 
-.dl-control-icons {
+.task-control-icons {
     display: flex;
     justify-content: center;
     padding-bottom: 10px;
 }
 
-.dl-control-icons img {
+.task-control-icons img {
     width: 30px;
     cursor: pointer;
     margin: 5px;

tubearchivist/static/progress.js

@@ -31,7 +31,7 @@ function getMessages(dataOrigin) {
 function buildMessage(responseData, dataOrigin) {
   // filter relevant messages
   let messages = responseData.filter(function (value) {
-    return value.status.startsWith(dataOrigin);
+    return value.group.startsWith(dataOrigin);
   }, dataOrigin);
   let notificationDiv = document.getElementById('notifications');
   let nots = notificationDiv.childElementCount;
@@ -44,11 +44,22 @@ function buildMessage(responseData, dataOrigin) {
     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>`;
+    <p>${messageData.messages.join('<br>')}</p>`
+    let taskControlIcons = document.createElement('div');
+    taskControlIcons.classList = 'task-control-icons';
+    if ('api-stop' in messageData) {
+      taskControlIcons.appendChild(buildStopIcon(messageData.id));
+    }
+    if ('api-kill' in messageData) {
+      taskControlIcons.appendChild(buildKillIcon(messageData.id));
+    }
+    if (taskControlIcons.hasChildNodes()) {
+      messageBox.appendChild(taskControlIcons);
+    }
+    messageBox.innerHTML = `${messageBox.innerHTML}<div class="notification-progress-bar" style="width: ${progress}%";></div>`;
     notificationDiv.appendChild(messageBox);
-    if (messageData.status.startsWith('download:')) {
-      animateIcons(messageData.status);
+    if (messageData.group.startsWith('download:')) {
+      animateIcons(messageData.group);
     }
   }
   if (nots > 0 && messages.length === 0) {
@@ -58,10 +69,10 @@ function buildMessage(responseData, dataOrigin) {
   return messages;
 }
 
-function animateIcons(status) {
+function animateIcons(group) {
   let rescanIcon = document.getElementById('rescan-icon');
   let dlIcon = document.getElementById('download-icon');
-  switch (status) {
+  switch (group) {
     case 'download:scan':
       if (rescanIcon && !rescanIcon.classList.contains('rotate-img')) {
         animate('rescan-icon', 'rotate-img');
@@ -78,3 +89,25 @@ function animateIcons(status) {
       break;
   }
 }
+
+function buildStopIcon(taskId) {
+  let stopIcon = document.createElement('img');
+  stopIcon.setAttribute('id', 'stop-icon');
+  stopIcon.setAttribute('data', taskId);
+  stopIcon.setAttribute('title', 'Stop Task');
+  stopIcon.setAttribute('src', '/static/img/icon-stop.svg');
+  stopIcon.setAttribute('alt', 'stop icon');
+  stopIcon.setAttribute('onclick', 'stopTask(this)');
+  return stopIcon
+}
+
+function buildKillIcon(taskId) {
+  let killIcon = document.createElement('img');
+  killIcon.setAttribute('id', 'kill-icon');
+  stopIcon.setAttribute('data', taskId);
+  killIcon.setAttribute('title', 'Kill Task');
+  killIcon.setAttribute('src', '/static/img/icon-close.svg');
+  killIcon.setAttribute('alt', 'kill icon');
+  killIcon.setAttribute('onclick', 'killTask(this)');
+  return killIcon
+}

tubearchivist/static/script.js

@@ -228,15 +228,17 @@ function deleteQueue(button) {
   document.getElementById(button.id).replaceWith(message);
 }
 
-function stopQueue() {
-  let payload = JSON.stringify({ queue: 'stop' });
-  sendPost(payload);
+function stopTask(icon) {
+  let taskId = icon.getAttribute('data');
+  let apiEndpoint = `/api/task-id/${taskId}/`;
+  apiRequest(apiEndpoint, 'POST', { command: 'stop'});
   document.getElementById('stop-icon').remove();
 }
 
-function killQueue() {
-  let payload = JSON.stringify({ queue: 'kill' });
-  sendPost(payload);
+function killTask(icon) {
+  let taskId = icon.getAttribute('data');
+  let apiEndpoint = `/api/task-id/${taskId}/`;
+  apiRequest(apiEndpoint, 'POST', { command: 'kill'});
   document.getElementById('kill-icon').remove();
 }