add stop queue button to frontend

tubearchivist/home/templates/home/downloads.html

@@ -5,6 +5,7 @@
     <h1>Downloads</h1>
 </div>
 <div id="downloadMessage"></div>
+<div id="downloadControl"></div>
 <div class="info-box info-box-3 padding-box">
     <div class="icon-text">
         <img id="rescan-icon" onclick="rescanPending()" src="{% static 'img/icon-rescan.svg' %}" alt="rescan-icon">

tubearchivist/home/views.py

@@ -480,6 +480,7 @@ class PostData:
             "rescan_pending": self.rescan_pending,
             "ignore": self.ignore,
             "dl_pending": self.dl_pending,
+            "queue": self.queue_handler,
             "unsubscribe": self.unsubscribe,
             "sort_order": self.sort_order,
             "hide_watched": self.hide_watched,
@@ -522,6 +523,15 @@ class PostData:
         download_pending.delay()
         return {"success": True}
 
+    def queue_handler(self):
+        """queue controls from frontend"""
+        to_execute = self.exec_val
+        if to_execute == "stop":
+            print("stopping download queue")
+            RedisQueue("dl_queue").clear()
+
+        return {"success": True}
+
     def unsubscribe(self):
         """unsubscribe from channel"""
         channel_id_unsub = self.exec_val

tubearchivist/static/css/style.css

@@ -458,10 +458,21 @@ button:hover {
 }
 
 .dl-desc {
-    padding-left: 15px;
+    padding: 0 15px;
     width: 75%;
 }
 
+.dl-control-icons {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+}
+
+.dl-control-icons img {
+    width: 30px;
+    filter: var(--img-filter);
+    cursor: pointer;
+}
 
 /* status message */
 .download-progress {

tubearchivist/static/img/icon-stop.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Icons_stop.svg">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.0105705"
+     inkscape:cx="43.182711"
+     inkscape:cy="168.09972"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       id="rect836"
+       width="118.86465"
+       height="118.86465"
+       x="6.7136617"
+       y="171.42116"
+       rx="10.00003"
+       ry="10.00003" />
+  </g>
+</svg>

tubearchivist/static/progress.js

@@ -18,6 +18,7 @@ function checkMessage() {
         if (dlProgress['status']) {
             buildDownloadMessage(dlProgress);
             handleInterval();
+            buildDownloadIcons();
         };
     };
     req.send();
@@ -71,3 +72,20 @@ function buildDownloadMessage(dlProgress) {
     message.appendChild(messageText);
     box.appendChild(message);
 };
+
+
+// add dl control icons
+function buildDownloadIcons() {
+    var box = document.getElementById('downloadControl');
+    var iconBox = document.createElement('div');
+    iconBox.classList = 'dl-control-icons';
+    var 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()');
+    // stich together
+    iconBox.appendChild(stopIcon);
+    box.appendChild(iconBox);
+}

tubearchivist/static/script.js

@@ -79,6 +79,13 @@ function downloadNow(button) {
     }, 500);
 }
 
+function stopQueue() {
+    var payload = JSON.stringify({'queue': 'stop'});
+    sendPost(payload);
+    document.getElementById('stop-icon').remove();
+}
+
+
 // settings page buttons
 function manualImport() {
     var payload = JSON.stringify({'manual-import': true});