Added reordering of download queue (#233)

Author: Casvt

backend/base/custom_exceptions.py

@@ -328,6 +328,11 @@ def api_response(self):
         }
 
 
+class DownloadUnmovable(CustomException):
+    """The position of the download in the queue can not be changed"""
+    api_response = {'error': 'DownloadUnmovable', 'result': {}, 'code': 400}
+
+
 class ExternalClientNotFound(CustomException):
     """External client with given ID not found"""
     api_response = {

backend/features/download_queue.py

@@ -10,8 +10,10 @@
 from typing_extensions import assert_never
 
 from backend.base.custom_exceptions import (DownloadLimitReached,
-                                            DownloadNotFound, FailedGCPage,
-                                            IssueNotFound, LinkBroken)
+                                            DownloadNotFound,
+                                            DownloadUnmovable, FailedGCPage,
+                                            InvalidKeyValue, IssueNotFound,
+                                            LinkBroken)
 from backend.base.definitions import (BlocklistReason, Constants,
                                       Download, DownloadSource,
                                       DownloadState, ExternalDownload,
@@ -199,6 +201,34 @@ def _process_queue(self) -> None:
 
         return
 
+    def set_queue_location(
+        self,
+        download_id: int,
+        index: int
+    ) -> None:
+        """Set the location of a download in the queue.
+
+        Args:
+            download_id (int): The ID of the download to move.
+
+            index (int): The new index of the download.
+
+        Raises:
+            DownloadNotFound: The ID doesn't map to any download in the queue.
+            DownloadUnmovable: The download is not allowed to be moved.
+            InvalidKeyValue: The index is out of bounds.
+        """
+        download = self.get_one(download_id)
+        if download.state != DownloadState.QUEUED_STATE:
+            raise DownloadUnmovable
+
+        if index < 0 or index >= len(self.queue):
+            raise InvalidKeyValue('index', index)
+
+        self.queue.remove(download)
+        self.queue.insert(index, download)
+        return
+
     def __prepare_downloads_for_queue(
         self,
         downloads: List[Download],

frontend/api.py

@@ -165,7 +165,10 @@ def extract_key(request, key: str, check_existence: bool = True) -> Any:
             except KeyError:
                 raise InvalidKeyValue(key, value)
 
-        elif key in ('root_folder_id', 'root_folder', 'offset', 'limit'):
+        elif key in (
+            'root_folder_id', 'root_folder',
+            'offset', 'limit', 'index'
+        ):
             try:
                 value = int(value)
             except (ValueError, TypeError):
@@ -868,7 +871,10 @@ def api_downloads():
         return return_api({})
 
 
-@api.route('/activity/queue/<int:download_id>', methods=['GET', 'DELETE'])
+@api.route(
+    '/activity/queue/<int:download_id>',
+    methods=['GET', 'PUT', 'DELETE']
+)
 @error_handler
 @auth
 def api_delete_download(download_id: int):
@@ -878,6 +884,11 @@ def api_delete_download(download_id: int):
         result = download_handler.get_one(download_id).todict()
         return return_api(result)
 
+    elif request.method == 'PUT':
+        index: int = extract_key(request, 'index')
+        download_handler.set_queue_location(download_id, index)
+        return return_api({})
+
     elif request.method == 'DELETE':
         data: Dict[str, Any] = request.get_json(silent=True) or {}
         blocklist = data.get('blocklist', False)

frontend/static/css/queue.css

@@ -28,6 +28,24 @@ th, td {
 	border-top: 1px solid var(--border-color);
 }
 
+.queue-entry:nth-child(1 of .queue-entry[data-status="queued"]) .move-up-dl,
+.queue-entry:nth-last-child(1 of .queue-entry[data-status="queued"]) .move-down-dl,
+.queue-entry[data-status="downloading"] :where(.move-up-dl, .move-down-dl) {
+	display: none;
+}
+
+.queue-entry:nth-child(1 of .queue-entry[data-status="queued"]) .move-down-dl {
+	margin-left: calc(20px + .75rem);
+}
+
+.queue-entry:nth-last-child(1 of .queue-entry[data-status="queued"]) .move-up-dl {
+	margin-right: calc(20px + 1.25rem);
+}
+
+.queue-entry[data-status="downloading"] .remove-dl {
+	margin-left: calc(20px + 2.75rem);
+}
+
 .status-column {
 	width: clamp(7.5rem, 11vw, 10rem);
 }
@@ -37,11 +55,11 @@ th, td {
 }
 
 .option-column {
-	width: 4.5rem;
+	width: 9rem;
 }
 
-.option-column button:nth-of-type(2) {
-    margin-left: .5rem;
+.option-column button:not(:last-child) {
+    margin-right: .5rem;
 }
 
 .option-column button img {
@@ -52,4 +70,4 @@ th, td {
     main {
         width: calc(100vw - var(--nav-width));
     }
-}
+}

frontend/static/img/arrow_down.svg

@@ -26,6 +26,13 @@ function addQueueEntry(api_key, obj) {
     if (obj.web_sub_title !== null)
         source.title += `\n\nSub Section:\n${obj.web_sub_title}`;
 
+	const index = [...QEls.queue.children].indexOf(entry);
+	entry.querySelector('.move-up-dl').onclick = e => moveEntry(
+		obj.id, index - 1, api_key
+	);
+	entry.querySelector('.move-down-dl').onclick = e => moveEntry(
+		obj.id, index + 1, api_key
+	);
 	entry.querySelector('.remove-dl').onclick = e => deleteEntry(
         obj.id, api_key
     );
@@ -40,6 +47,7 @@ function addQueueEntry(api_key, obj) {
 
 function updateQueueEntry(obj) {
 	const tr = document.querySelector(`#queue > tr[data-id="${obj.id}"]`);
+	tr.dataset.status = obj.status;
 	tr.querySelector('td:nth-child(1)').innerText =
 		obj.status.charAt(0).toUpperCase() + obj.status.slice(1);
 	tr.querySelector('td:nth-child(4)').innerText =
@@ -71,6 +79,18 @@ function deleteAll(api_key) {
    sendAPI('DELETE', '/activity/queue', api_key);
 };
 
+function moveEntry(id, index, api_key) {
+	sendAPI('PUT', `/activity/queue/${id}`, api_key, {
+		index: index
+	}, {})
+	.then(response => {
+		if (!response.ok)
+			return;
+
+		fillQueue(api_key);
+	});
+}
+
 function deleteEntry(id, api_key, blocklist=false) {
 	sendAPI('DELETE', `/activity/queue/${id}`, api_key, {}, {
         blocklist: blocklist

frontend/static/img/arrow_up.svg

@@ -21,6 +21,12 @@
 	<td class="number-column"></td>
 	<td class="number-column"></td>
 	<td class="option-column">
+        <button title="Move download up" class="move-up-dl">
+			<img src="{{ url_for('static', filename='img/arrow_up.svg') }}">
+        </button>
+        <button title="Move download down" class="move-down-dl">
+			<img src="{{ url_for('static', filename='img/arrow_down.svg') }}">
+        </button>
 		<button title="Remove download" class="remove-dl">
 			<img src="{{ url_for('static', filename='img/delete.svg') }}">
 		</button>
@@ -53,7 +59,7 @@
                     <th class="number-column">Size</th>
                     <th class="number-column">Speed</th>
                     <th class="number-column">Progress</th>
-                    <th class="option-column">Delete</th>
+                    <th class="option-column">Actions</th>
                 </tr>
             </thead>
             <tbody id="queue"></tbody>