Replaced Task-Progress-Tracking Window with more fancy one

README.md

@@ -36,6 +36,7 @@
     <li>
       <a href="#getting-started">Getting Started</a>
       <ul>
+        <li><a href="#prerequisites">Usage</a></li>
         <li><a href="#prerequisites">Prerequisites</a></li>
       </ul>
     </li>
@@ -109,6 +110,28 @@ Download [docker-compose.yaml](https://git.bernloehr.eu/glax/Tranga/src/branch/m
 
 Wherever you are mounting `/usr/share/Tranga-API` you also need to mount that same path + `/imageCache` in the webserver container.
 
+### Usage
+
+There is two ways to download Mangas:
+- Downloading everything and monitor for new Chapters
+- Selecting specific Volumes/Chapters
+
+On the website you add new tasks, by selecting the blue '+' field. Next select the connector/site you want to use, and enter a search term.
+After pressing 'Search', the results will be presented below - this might, depending on the result-size, take a while.
+Next select the publication and a new popup will open with two options:
+- "Monitor" - Download all chapters and monitor for new ones
+- "Download Chapter" - Download specific chapters only
+
+When selecting `Monitor` you will be presented with a new window and the selection of the interval you want to check for new chapters.
+When selecting `Download Chapter` a list will open with all available chapters from which you can then select a range.
+
+The syntax for selecting chapters is as follows:
+- To download a single Chapter enter either the index number (the number at the very start of the line) or its absolute number like so: `c(h)(apter)[number]`, spaces are allowed.
+- To download a range of chapters enter either a range of index numbers (`3-6`) or chapters (`ch 12-23`).
+- For volumes the syntax is as follows: `v(ol)[number](-[number])`, again spaces allowed.
+
+Examples: `2-12`, `c1`, `ch 2`, `chapter 3`, `v 2`, `vol3-4`, `v2c4` (note: you can only specify a single chapter with this syntax).
+
 ### Prerequisites
 
 [.NET-Core 7.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0)

Tranga-API/Program.cs

@@ -119,21 +119,10 @@ app.MapPost("/Tasks/CreateDownloadChaptersTask", (string connectorName, string i
     if (publication is null)
         return;
     
-    Chapter[] availableChapters = connector.GetChapters((Publication)publication, language??"en");;
+    IEnumerable<Chapter> toDownload = connector.SearchChapters((Publication)publication, chapters, language ?? "en");
-    
+    foreach(Chapter chapter in toDownload)
-    if (chapters.Contains('-'))
-    {
-        int start = Convert.ToInt32(chapters.Split('-')[0]);
-        int end = Convert.ToInt32(chapters.Split('-')[1]) + 1;
-        foreach (Chapter chapter in availableChapters[start..end])
-        {
-            taskManager.AddTask(new DownloadChapterTask(TrangaTask.Task.DownloadChapter, connectorName,
-                (Publication)publication, chapter, "en"));
-        }
-    }
-    else
         taskManager.AddTask(new DownloadChapterTask(TrangaTask.Task.DownloadChapter, connectorName,
-            (Publication)publication, availableChapters[Convert.ToInt32(chapters)], "en"));
+            (Publication)publication, chapter, "en"));
 });
 
 app.MapDelete("/Tasks/Delete", (string taskType, string? connectorName, string? publicationId) =>
@@ -155,14 +144,24 @@ app.MapGet("/Tasks/Get", (string taskType, string? connectorName, string? search
     }
 });
 
-app.MapGet("/Tasks/GetProgress", (string taskType, string? connectorName, string? publicationId) =>
+app.MapGet("/Tasks/GetProgress", (string taskType, string connectorName, string publicationId, string? chapterSortNumber) =>
 {
+    Connector? connector =
+        taskManager.GetAvailableConnectors().FirstOrDefault(con => con.Key == connectorName).Value;
+    if (connector is null)
+        return -1f;
     try
     {
+        TrangaTask? task = null;
         TrangaTask.Task pTask = Enum.Parse<TrangaTask.Task>(taskType);
-        TrangaTask? task = taskManager
+        if (pTask is TrangaTask.Task.DownloadNewChapters)
-            .GetTasksMatching(pTask, connectorName: connectorName, internalId: publicationId)?.First();
+        {
-
+            task = taskManager.GetTasksMatching(pTask, connectorName: connectorName, internalId: publicationId).FirstOrDefault();
+        }else if (pTask is TrangaTask.Task.DownloadChapter && chapterSortNumber is not null)
+        {
+            task = taskManager.GetTasksMatching(pTask, connectorName: connectorName, internalId: publicationId,
+                chapterSortNumber: chapterSortNumber).FirstOrDefault();
+        }
         if (task is null)
             return -1f;
 

Tranga-CLI/Tranga_Cli.cs

@@ -499,22 +499,7 @@ public static class Tranga_Cli
         while(selectedChapters is null || selectedChapters.Length < 1)
             selectedChapters = Console.ReadLine();
 
-        if (selectedChapters.Length == 1 && selectedChapters.ToLower() == "q")
+        return connector.SearchChapters(publication, selectedChapters);
-        {
-            Console.Clear();
-            Console.WriteLine("aborted.");
-            logger.WriteLine("Tranga_CLI", "aborted.");
-            return Array.Empty<Chapter>();
-        }
-        
-        if (selectedChapters.Contains('-'))
-        {
-            int start = Convert.ToInt32(selectedChapters.Split('-')[0]);
-            int end = Convert.ToInt32(selectedChapters.Split('-')[1]) + 1;
-            return availableChapters[start..end];
-        }
-        else
-            return new Chapter[] { availableChapters[Convert.ToInt32(selectedChapters)] };
     }
 
     private static Connector? SelectConnector(Connector[] connectors, Logger logger)

Tranga/Connector.cs

@@ -53,6 +53,72 @@ public abstract class Connector
     /// <param name="language">Language of the Chapters</param>
     /// <returns>Array of Chapters matching Publication and Language</returns>
     public abstract Chapter[] GetChapters(Publication publication, string language = "");
+
+    public Chapter[] SearchChapters(Publication publication, string searchTerm, string? language = null)
+    {
+        Chapter[] availableChapters = this.GetChapters(publication, language??"en");
+        Regex volumeRegex = new ("((v(ol)*(olume)*)+ *([0-9]+(-[0-9]+)?){1})", RegexOptions.IgnoreCase);
+        Regex chapterRegex = new ("((c(h)*(hapter)*)+ *([0-9]+(-[0-9]+)?){1})", RegexOptions.IgnoreCase);
+        Regex singleResultRegex = new("([0-9]+)", RegexOptions.IgnoreCase);
+        Regex rangeResultRegex = new("([0-9]+(-[0-9]+))", RegexOptions.IgnoreCase);
+        if (volumeRegex.IsMatch(searchTerm) && chapterRegex.IsMatch(searchTerm))
+        {
+            string volume = singleResultRegex.Match(volumeRegex.Match(searchTerm).Value).Value;
+            string chapter = singleResultRegex.Match(chapterRegex.Match(searchTerm).Value).Value;
+            return availableChapters.Where(aCh => aCh.volumeNumber is not null && aCh.chapterNumber is not null &&
+                aCh.volumeNumber.Equals(volume, StringComparison.InvariantCultureIgnoreCase) &&
+                aCh.chapterNumber.Equals(chapter, StringComparison.InvariantCultureIgnoreCase))
+                .ToArray();
+        }
+        else if (volumeRegex.IsMatch(searchTerm))
+        {
+            string volume = volumeRegex.Match(searchTerm).Value;
+            if (rangeResultRegex.IsMatch(volume))
+            {
+                string range = rangeResultRegex.Match(volume).Value;
+                int start = Convert.ToInt32(range.Split('-')[0]);
+                int end = Convert.ToInt32(range.Split('-')[1]);
+                return availableChapters.Where(aCh => aCh.volumeNumber is not null &&
+                                                      Convert.ToInt32(aCh.volumeNumber) >= start &&
+                                                      Convert.ToInt32(aCh.volumeNumber) <= end).ToArray();
+            }
+            else if(singleResultRegex.IsMatch(volume))
+                return availableChapters.Where(aCh =>
+                    aCh.volumeNumber is not null &&
+                    aCh.volumeNumber.Equals(volume, StringComparison.InvariantCultureIgnoreCase)).ToArray();
+
+        }
+        else if (chapterRegex.IsMatch(searchTerm))
+        {
+            string chapter = volumeRegex.Match(searchTerm).Value;
+            if (rangeResultRegex.IsMatch(chapter))
+            {
+                string range = rangeResultRegex.Match(chapter).Value;
+                int start = Convert.ToInt32(range.Split('-')[0]);
+                int end = Convert.ToInt32(range.Split('-')[1]);
+                return availableChapters.Where(aCh => aCh.chapterNumber is not null &&
+                                                      Convert.ToInt32(aCh.chapterNumber) >= start &&
+                                                      Convert.ToInt32(aCh.chapterNumber) <= end).ToArray();
+            }
+            else if(singleResultRegex.IsMatch(chapter))
+                return availableChapters.Where(aCh =>
+                    aCh.chapterNumber is not null &&
+                    aCh.chapterNumber.Equals(chapter, StringComparison.InvariantCultureIgnoreCase)).ToArray();
+        }
+        else
+        {
+            if (rangeResultRegex.IsMatch(searchTerm))
+            {
+                int start = Convert.ToInt32(searchTerm.Split('-')[0]);
+                int end = Convert.ToInt32(searchTerm.Split('-')[1]);
+                return availableChapters[start..(end + 1)];
+            }
+            else if(singleResultRegex.IsMatch(searchTerm))
+                return new [] { availableChapters[Convert.ToInt32(searchTerm)] };
+        }
+
+        return Array.Empty<Chapter>();
+    }
     
     /// <summary>
     /// Retrieves the Chapter (+Images) from the website.

Tranga/TaskManager.cs

@@ -127,7 +127,8 @@ public class TaskManager
                     DateTime.Now.Subtract(removeTask.Key.lastChange) > TimeSpan.FromMinutes(3))//3 Minutes since last update to task -> remove
                 {
                     logger?.WriteLine(this.GetType().ToString(), $"Disposing failed task {removeTask.Key}.");
-                    removeTask.Value.Dispose();;
+                    removeTask.Key.parentTask?.DecrementProgress(removeTask.Key.progress);
+                    //removeTask.Value.Dispose(); Currently not available, however since task is removed from _allTasks should work. Memory leak however...
                     toRemove.Add(removeTask.Key);
                 }
             }
@@ -270,7 +271,7 @@ public class TaskManager
         ExportDataAndSettings();
     }
 
-    public IEnumerable<TrangaTask> GetTasksMatching(TrangaTask.Task taskType, string? connectorName = null, string? searchString = null, string? internalId = null)
+    public IEnumerable<TrangaTask> GetTasksMatching(TrangaTask.Task taskType, string? connectorName = null, string? searchString = null, string? internalId = null, string? chapterSortNumber = null)
     {
         switch (taskType)
         {
@@ -309,11 +310,12 @@ public class TaskManager
                         ((DownloadChapterTask)mTask).connectorName == connectorName &&
                         ((DownloadChapterTask)mTask).ToString().Contains(searchString, StringComparison.InvariantCultureIgnoreCase));
                 }
-                else if (internalId is not null)
+                else if (internalId is not null && chapterSortNumber is not null)
                 {
                     return matchingdc.Where(mTask =>
                         ((DownloadChapterTask)mTask).connectorName == connectorName &&
-                        ((DownloadChapterTask)mTask).publication.publicationId == internalId);
+                        ((DownloadChapterTask)mTask).publication.publicationId == internalId &&
+                        ((DownloadChapterTask)mTask).chapter.sortNumber == chapterSortNumber);
                 }
                 else
                     return _allTasks.Where(tTask =>

Tranga/TrangaTask.cs

@@ -49,7 +49,7 @@ public abstract class TrangaTask
         this.task = task;
         this.progress = 0f;
         this.executionStarted = DateTime.Now;
-        this.lastChange = DateTime.Now;
+        this.lastChange = DateTime.MaxValue;
     }
 
     public float IncrementProgress(float amount)
@@ -58,6 +58,13 @@ public abstract class TrangaTask
         this.lastChange = DateTime.Now;
         return this.progress;
     }
+
+    public float DecrementProgress(float amount)
+    {
+        this.progress -= amount;
+        this.lastChange = DateTime.Now;
+        return this.progress;
+    }
     
     /// <summary>
     /// BL for concrete Tasks
@@ -76,6 +83,7 @@ public abstract class TrangaTask
         logger?.WriteLine(this.GetType().ToString(), $"Executing Task {this}");
         this.state = ExecutionState.Running;
         this.executionStarted = DateTime.Now;
+        this.lastChange = DateTime.Now;
         ExecuteTask(taskManager, logger);
         this.lastExecuted = DateTime.Now;
         this.state = ExecutionState.Waiting;

Tranga/TrangaTasks/DownloadNewChaptersTask.cs

@@ -24,6 +24,13 @@ public class DownloadNewChaptersTask : TrangaTask
         this.lastChange = DateTime.Now;
         return this.progress;
     }
+    
+    public new float DecrementProgress(float amount)
+    {
+        this.progress -= amount / this.childTaskAmount;
+        this.lastChange = DateTime.Now;
+        return this.progress;
+    }
 
     protected override void ExecuteTask(TaskManager taskManager, Logger? logger)
     {

Website/index.html

@@ -59,9 +59,9 @@
           <popup-title>Create Task: Monitor Publication</popup-title>
           <popup-content>
             <div>
-              <p>Every</p>
+              <span>Run every</span>
-              <label for="hours">Hours: </label><input id="hours" type="number" value="3" min="0" max="23">
+              <label for="hours"></label><input id="hours" type="number" value="3" min="0" max="23"><span>hours</span>
-              <label for="minutes">Minutes: </label><input id="minutes" type="number" value="0" min="0" max="59">
+              <label for="minutes"></label><input id="minutes" type="number" value="0" min="0" max="59"><span>minutes</span>
               <input type="submit" value="Create" onclick="AddMonitorTask()">
             </div>
           </popup-content>
@@ -140,25 +140,27 @@
           </popup-content>
         </popup-window>
       </popup>
+      
+      <popup id="downloadTasksPopup">
+        <blur-background id="blurBackgroundTasksQueuePopup"></blur-background>
+        <popup-window>
+          <popup-title>Task Progress</popup-title>
+          <popup-content>
+            
+          </popup-content>
+        </popup-window>
+      </popup>
     </viewport>
     <footer>
-      <div>
+      <div onclick="ShowTasksQueue();">
         <img src="media/running.svg" alt="running"><div id="tasksRunningTag">0</div>
       </div>
-      <div>
+      <div onclick="ShowTasksQueue();">
         <img src="media/queue.svg" alt="queue"><div id="tasksQueuedTag">0</div>
       </div>
-      <div>
-        <img src="media/tasks.svg" alt="queue"><div id="totalTasksTag">0</div>
-      </div>
       <p id="madeWith">Made with Blåhaj 🦈</p>
     </footer> 
   </wrapper>
-  <footer-tag-popup>
-    <footer-tag-content>
-      <footer-tag-task-name>Test</footer-tag-task-name>
-    </footer-tag-content>
-  </footer-tag-popup>
   
   <script src="apiConnector.js"></script>
   <script src="interaction.js"></script>

Website/interaction.js

@@ -39,9 +39,7 @@ const settingKavitaConfigured = document.querySelector("#kavitaConfigured");
 const settingApiUri = document.querySelector("#settingApiUri");
 const tagTasksRunning = document.querySelector("#tasksRunningTag");
 const tagTasksQueued = document.querySelector("#tasksQueuedTag");
-const tagTasksTotal = document.querySelector("#totalTasksTag");
+const downloadTasksPopup = document.querySelector("#downloadTasksPopup");
-const tagTaskPopup = document.querySelector("footer-tag-popup");
-const tagTasksPopupContent = document.querySelector("footer-tag-content");
 
 searchbox.addEventListener("keyup", (event) => FilterResults());
 settingsCog.addEventListener("click", () => OpenSettings());
@@ -50,6 +48,7 @@ document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", ()
 document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
 document.querySelector("#blurBackgroundCreateMonitorTaskPopup").addEventListener("click", () => createMonitorTaskPopup.style.display = "none");
 document.querySelector("#blurBackgroundCreateDownloadChaptersTask").addEventListener("click", () => createDownloadChaptersTask.style.display = "none");
+document.querySelector("#blurBackgroundTasksQueuePopup").addEventListener("click", () => downloadTasksPopup.style.display = "none");
 selectedChapters.addEventListener("keypress", (event) => {
     if(event.key === "Enter"){
         DownloadChapterTaskClick();
@@ -63,7 +62,7 @@ createMonitorTaskButton.addEventListener("click", () => {
 createDownloadChapterTaskButton.addEventListener("click", () => {
     HidePublicationPopup();
     OpenDownloadChapterTaskPopup();
-})
+});
 publicationTaskStart.addEventListener("click", () => StartTaskClick());
 settingApiUri.addEventListener("keypress", (event) => {
     if(event.key === "Enter"){
@@ -77,12 +76,7 @@ searchPublicationQuery.addEventListener("keypress", (event) => {
         NewSearch();
     }
 });
-tagTasksRunning.addEventListener("mouseover", (event) => ShowRunningTasks(event));
+
-tagTasksRunning.addEventListener("mouseout", () => CloseTasksPopup());
-tagTasksQueued.addEventListener("mouseover", (event) => ShowQueuedTasks(event));
-tagTasksQueued.addEventListener("mouseout", () => CloseTasksPopup());
-tagTasksTotal.addEventListener("mouseover", (event) => ShowAllTasks(event));
-tagTasksTotal.addEventListener("mouseout", () => CloseTasksPopup());
 
 let availableConnectors;
 GetAvailableControllers()
@@ -156,6 +150,8 @@ function AddMonitorTask(){
 }
 
 function OpenDownloadChapterTaskPopup(){
+    selectedChapters.value = "";
+    chapterOutput.replaceChildren();
     createDownloadChaptersTask.style.display = "block";
     GetChapters(toEditId, connectorSelect.value, "en").then((json) => {
         var i = 0;
@@ -261,6 +257,7 @@ function HidePublicationPopup(){
 
 function ShowNewTaskWindow(){
     selectPublication.replaceChildren();
+    searchPublicationQuery.value = "";
     selectPublicationPopup.style.display = "flex";
 }
 
@@ -281,7 +278,6 @@ function OpenSettings(){
     settingsPopup.style.display = "flex";
 }
 
-
 function GetSettingsClick(){
     settingApiUri.value = "";
     settingKomgaUrl.value = "";
@@ -340,66 +336,6 @@ function utf8_to_b64( str ) {
     return window.btoa(unescape(encodeURIComponent( str )));
 }
 
-
-function ShowRunningTasks(event){
-    GetRunningTasks()
-        .then(json => {
-            tagTasksPopupContent.replaceChildren();
-            json.forEach(task => {
-                if(task.publication != null){
-                    var taskname = document.createElement("footer-tag-task-name");
-                    if(task.task == 2)
-                        taskname.innerText = `${task.publication.sortName} - ${task.progress.toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2})}`;
-                    else if(task.task == 4)
-                        taskname.innerText = `${task.publication.sortName} Vol.${task.chapter.volumeNumber} Ch.${task.chapter.chapterNumber} - ${task.progress.toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2})}`;
-                    tagTasksPopupContent.appendChild(taskname);
-                }
-            });
-            if(tagTasksPopupContent.children.length > 0){
-                tagTaskPopup.style.display = "block";
-                tagTaskPopup.style.left = `${tagTasksRunning.offsetLeft - 20}px`;
-            }
-        });
-}
-
-function ShowQueuedTasks(event){
-    GetQueue()
-        .then(json => {
-            tagTasksPopupContent.replaceChildren();
-            json.forEach(task => {
-                var taskname = document.createElement("footer-tag-task-name");
-                if(task.task == 2)
-                    taskname.innerText = `${task.publication.sortName}`;
-                else if(task.task == 4)
-                    taskname.innerText = `${task.publication.sortName} Vol.${task.chapter.volumeNumber} Ch.${task.chapter.chapterNumber}`;
-                tagTasksPopupContent.appendChild(taskname);
-            });
-            if(json.length > 0){
-                tagTaskPopup.style.display = "block";
-                tagTaskPopup.style.left = `${tagTasksQueued.offsetLeft- 20}px`;
-            }
-        });
-}
-function ShowAllTasks(event){
-    GetDownloadTasks()
-        .then(json => {
-            tagTasksPopupContent.replaceChildren();
-            json.forEach(task => {
-                var taskname = document.createElement("footer-tag-task-name");
-                taskname.innerText = task.publication.sortName;
-                tagTasksPopupContent.appendChild(taskname);
-            });
-            if(json.length > 0){
-                tagTaskPopup.style.display = "block";
-                tagTaskPopup.style.left = `${tagTasksTotal.offsetLeft - 20}px`;
-            }
-        });
-}
-
-function CloseTasksPopup(){
-    tagTaskPopup.style.display = "none";
-}
-
 function FilterResults(){
     if(searchBox.value.length > 0){
         tasksContent.childNodes.forEach(publication => {
@@ -420,8 +356,80 @@ function FilterResults(){
     }else{
         tasksContent.childNodes.forEach(publication => publication.style.display = "initial");
     }
+}
+
+function ShowTasksQueue(){
+    downloadTasksPopup.style.display = "flex";
+    var outputDom = downloadTasksPopup.querySelector("popup-content");
+    outputDom.replaceChildren();
+    GetRunningTasks().then((taskJson) => {
+       console.log(taskJson);
+       taskJson.forEach(task => {
+          outputDom.appendChild(CreateProgressChild(task)); 
+       });
+    });
+    GetQueue().then((taskJson) => {
+        taskJson.forEach(task => {
+            outputDom.appendChild(CreateProgressChild(task));
+        });
+    });
+
+    setInterval(() => {
+        GetRunningTasks().then((json) => {
+           json.forEach(task => {
+               if(task.chapter != undefined){
+                   document.querySelector(`#progress${task.publication.internalId}-${task.chapter.sortNumber}`).value = task.progress;
+                   document.querySelector(`#progressStr${task.publication.internalId}-${task.chapter.sortNumber}`).innerText = task.progress.toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2});
+               }else{
+                   document.querySelector(`#progress${task.publication.internalId}`).value = task.progress;
+                   document.querySelector(`#progressStr${task.publication.internalId}`).innerText = task.progress.toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2});
+               }
+           });
+        });
+    },500);
+}
+
+function CreateProgressChild(task){
+    var child = document.createElement("div");
+    var img = document.createElement('img');
+    img.src = `imageCache/${task.publication.coverFileNameInCache}`;
+    child.appendChild(img);
+    
+    var name = document.createElement("span");
+    name.innerText = task.publication.sortName;
+    name.className = "pubTitle";
+    child.appendChild(name);
+
+
+    var progress = document.createElement("progress");
+    progress.value = 0;
+    child.appendChild(progress);
+    
+    var progressStr = document.createElement("span");
+    progressStr.innerText = "00.00%";
+    progressStr.className = "progressStr";
+    child.appendChild(progressStr);
+    
+    if(task.chapter != undefined){
+        var chapterNumber = document.createElement("span");
+        chapterNumber.className = "chapterNumber";
+        chapterNumber.innerText = `Vol.${task.chapter.volumeNumber} Ch.${task.chapter.chapterNumber}`;
+        child.appendChild(chapterNumber);
+        
+        var chapterName = document.createElement("span");
+        chapterName.className = "chapterName";
+        chapterName.innerText = task.chapter.name;
+        child.appendChild(chapterName);
+
+        progress.id = `progress${task.publication.internalId}-${task.chapter.sortNumber}`;
+        progressStr.id = `progressStr${task.publication.internalId}-${task.chapter.sortNumber}`;
+    }else{
+        progress.id = `progress${task.publication.internalId}`;
+        progressStr.id = `progressStr${task.publication.internalId}`;
+    }
     
     
+    return child;
 }
 
 //Resets the tasks shown
@@ -440,11 +448,6 @@ GetRunningTasks()
         tagTasksRunning.innerText = json.length;
     });
 
-GetDownloadTasks()
-    .then(json => {
-        tagTasksTotal.innerText = json.length;
-    });
-
 GetQueue()
     .then(json => {
         tagTasksQueued.innerText = json.length;
@@ -476,11 +479,6 @@ setInterval(() => {
         .then(json => {
            tagTasksRunning.innerText = json.length;
         });
-
-    GetDownloadTasks()
-        .then(json => {
-            tagTasksTotal.innerText = json.length;
-        });
     
     GetQueue()
         .then(json => {

Website/style.css

@@ -323,12 +323,15 @@ popup popup-window popup-content input, select {
     z-index: 9;
 }
 
+#createMonitorTaskPopup input[type="number"] {
+    width: 40px;
+}
+
 #createDownloadChaptersTask popup-content {
     flex-direction: column;
     align-items: start;
 }
 
-
 #createDownloadChaptersTask popup-content > * {
     margin: 3px 0;
 }
@@ -365,6 +368,77 @@ popup popup-window popup-content input, select {
     width: 60px;
 }
 
+#downloadTasksPopup popup-window {
+    left: 0;
+    top: 80px;
+    margin: 0 0 0 10px;
+    height: calc(100vh - 140px);
+    width: 400px;
+    max-width: 50vw;
+    overflow-y: scroll;
+}
+
+#downloadTasksPopup popup-content {
+    flex-direction: column;
+    align-items: start;
+    margin: 5px;
+}
+
+#downloadTasksPopup popup-content > div {
+    display: block;
+    height: 80px;
+    position: relative;
+    margin: 5px 0;
+}
+
+#downloadTasksPopup popup-content > div > img {
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 60px;
+    left: 0;
+    top: 0;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+#downloadTasksPopup popup-content > div > span {
+    display: block;
+    position: absolute;
+    width: max-content;
+}
+
+#downloadTasksPopup popup-content > div > .pubTitle {
+    left: 70px;
+    top: 0;
+}
+
+#downloadTasksPopup popup-content > div > .chapterName {
+    left: 70px;
+    top: 28pt;
+}
+
+#downloadTasksPopup popup-content > div > .chapterNumber {
+    left: 70px;
+    top: 14pt;
+}
+
+#downloadTasksPopup popup-content > div > progress {
+    display: block;
+    position: absolute;
+    left: 150px;
+    bottom: 0;
+    width: 200px;
+}
+
+#downloadTasksPopup popup-content > div > .progressStr {
+    display: block;
+    position: absolute;
+    left: 70px;
+    bottom: 0;
+    width: 70px;
+}
+
 blur-background {
     width: 100%;
     height: 100%;