Added updated to running and waiting jobs

Website/apiConnector.js

@@ -177,3 +177,8 @@ function RemoveJob(jobId){
     var uri = `${apiUri}/Jobs?jobId=${jobId}`;
     DeleteData(uri);
 }
+
+function CancelJob(jobId){
+    var uri = `${apiUri}/Jobs/Cancel?jobId=${jobId}`;
+    PostData(uri);
+}

Website/index.html

@@ -27,8 +27,8 @@
         <publication onclick="ShowNewMangaSearch()">
           <img alt="cover" src="media/cover.jpg">
           <publication-information>
-            <connector-name class="pill">MangaDex</connector-name>
-            <publication-name>Tensei Pandemic</publication-name>
+            <connector-name class="pill">Sample</connector-name>
+            <publication-name>Best Manga there is</publication-name>
           </publication-information>
         </publication>
       </content>
@@ -93,19 +93,18 @@
         <publication-viewer>
           <img id="pubviewcover" src="media/cover.jpg" alt="cover">
           <publication-information>
-            <publication-name id="publicationViewerName">Tensei Pandemic</publication-name>
-            <publication-tags id="publicationViewerTags"></publication-tags>
-            <publication-author id="publicationViewerAuthor">Imamura Hinata</publication-author>
-            <publication-description id="publicationViewerDescription">Imamura Hinata is a high school boy with a cute appearance.
-              Since his trauma with the first love, he wanted to be more manly than anybody else. But one day he woke up to something different…
-              The total opposite of his ideal male body!
-              Pandemic love comedy!
+            <publication-name id="publicationViewerName">Best Manga there is</publication-name>
+            <publication-tags id="publicationViewerTags">A Manga</publication-tags>
+            <publication-author id="publicationViewerAuthor">Glax</publication-author>
+            <publication-description id="publicationViewerDescription">
+              An interesting description. The description is very intriguing, yet wholesome.
             </publication-description>
             <publication-interactions>
-              <publication-starttask>Start Task ▶️</publication-starttask>
-              <publication-delete>Delete Task ❌</publication-delete>
-              <publication-add id="createMonitorTaskButton">Monitor ➕</publication-add>
-              <publication-add id="createDownloadChapterTaskButton">Download Chapter ➕</publication-add>
+              <publication-starttask id="startJobButton">Start Job ▶️</publication-starttask>
+              <publication-canceltask id="cancelJobButton">Cancel Job ❌</publication-canceltask>
+              <publication-delete id="deleteJobButton">Delete Job 🗑️</publication-delete>
+              <publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
+              <publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
             </publication-interactions>
           </publication-information>
         </publication-viewer>
@@ -113,11 +112,11 @@
     </viewport>
 	  
     <footer>
-      <div onclick="ShowTasksQueue();">
-        <img src="media/running.svg" alt="running"><div id="tasksRunningTag">0</div>
+      <div onclick="ShowJobQueue();">
+        <img src="media/running.svg" alt="running"><div id="jobsRunningTag">0</div>
       </div>
-      <div onclick="ShowTasksQueue();">
-        <img src="media/queue.svg" alt="queue"><div id="tasksQueuedTag">0</div>
+      <div onclick="ShowJobQueue();">
+        <img src="media/queue.svg" alt="queue"><div id="jobsQueuedTag">0</div>
       </div>
       <p id="madeWith">Made with Blåhaj 🦈</p>
     </footer> 

Website/interaction.js

@@ -2,13 +2,17 @@
 let notificationConnectorTypes = [];
 let libraryConnectorTypes = [];
 let selectedManga;
+let selectedJob;
 
 const searchBox = document.querySelector("#searchbox");
 const settingsPopup = document.querySelector("#settingsPopup");
 const settingsCog = document.querySelector("#settingscog");
 const tasksContent = document.querySelector("content");
-const createMonitorTaskButton = document.querySelector("#createMonitorTaskButton");
-const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterTaskButton");
+const createMonitorTaskButton = document.querySelector("#createMonitoJobButton");
+const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterJobButton");
+const startJobButton = document.querySelector("#startJobButton");
+const cancelJobButton = document.querySelector("#cancelJobButton");
+const deleteJobButton = document.querySelector("#deleteJobButton");
 const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
 const mangaViewerWindow = document.querySelector("publication-viewer");
 const mangaViewerDescription = document.querySelector("#publicationViewerDescription");
@@ -16,8 +20,6 @@ const mangaViewerName = document.querySelector("#publicationViewerName");
 const mangaViewerTags = document.querySelector("#publicationViewerTags");
 const mangaViewerAuthor = document.querySelector("#publicationViewerAuthor");
 const mangaViewCover = document.querySelector("#pubviewcover");
-const publicationDelete = document.querySelector("publication-delete");
-const publicationTaskStart = document.querySelector("publication-starttask");
 const settingDownloadLocation = document.querySelector("#downloadLocation");
 const settingKomgaUrl = document.querySelector("#komgaUrl");
 const settingKomgaUser = document.querySelector("#komgaUsername");
@@ -37,6 +39,8 @@ const newMangaPopup = document.querySelector("#newMangaPopup");
 const newMangaConnector = document.querySelector("#newMangaConnector");
 const newMangaTitle = document.querySelector("#newMangaTitle");
 const newMangaResult = document.querySelector("#newMangaResult");
+const jobsRunningTag = document.querySelector("#jobsRunningTag");
+const jobsQueuedTag = document.querySelector("#jobsQueuedTag");
 
 function Setup(){
   GetAvailableNotificationConnectors().then((json) => {
@@ -99,7 +103,7 @@ function GetNewMangaItems(){
       var mangaElement = CreateManga(result, newMangaConnector.value)
       newMangaResult.appendChild(mangaElement);
       mangaElement.addEventListener("click", (event) => {
-        ShowMangaWindow(result, event, true);
+        ShowMangaWindow(null, result, event, true);
       });
     });
     
@@ -127,17 +131,28 @@ function CreateManga(manga, connector){
     return mangaElement;
 }
 
-createMonitorTaskButton.addEventListener("click", () => {
-  NewMonitorJob();
-  mangaViewerPopup.style.display = "none";
-});
-function NewMonitorJob(){
+createMonitorJobButton.addEventListener("click", () => {
   CreateMonitorJob(newMangaConnector.value, selectedManga.internalId);
   UpdateJobs();
-}
+  mangaViewerPopup.style.display = "none";
+});
+startJobButton.addEventListener("click", () => {
+  StartJob(selectedJob.id);
+  mangaViewerPopup.style.display = "none";
+});
+cancelJobButton.addEventListener("click", () => {
+  CancelJob(selectedJob.id);
+  mangaViewerPopup.style.display = "none";
+});
+deleteJobButton.addEventListener("click", () => {
+  RemoveJob(selectedJob.id);
+  UpdateJobs();
+  mangaViewerPopup.style.display = "none";
+});
 
-function ShowMangaWindow(manga, event, add){
+function ShowMangaWindow(job, manga, event, add){
     selectedManga = manga;
+    selectedJob = job;
     //Show popup
     mangaViewerPopup.style.display = "block";
     
@@ -162,16 +177,18 @@ function ShowMangaWindow(manga, event, add){
     
     //Check what action should be listed
     if(add){
-        createMonitorTaskButton.style.display = "initial";
-        createDownloadChapterTaskButton.style.display = "initial";
-        publicationDelete.style.display = "none";
-        publicationTaskStart.style.display = "none";
+        createMonitorJobButton.style.display = "initial";
+        createDownloadChapterJobButton.style.display = "initial";
+        cancelJobButton.style.display = "none";
+        startJobButton.style.display = "none";
+        deleteJobButton.style.display = "none";
     }
     else{
-        createMonitorTaskButton.style.display = "none";
-        createDownloadChapterTaskButton.style.display = "none";
-        publicationDelete.style.display = "initial";
-        publicationTaskStart.style.display = "initial";
+        createMonitorJobButton.style.display = "none";
+        createDownloadChapterJobButton.style.display = "none";
+        cancelJobButton.style.display = "initial";
+        startJobButton.style.display = "initial";
+        deleteJobButton.style.display = "initial";
     }
 }
 
@@ -180,7 +197,6 @@ function HidePublicationPopup(){
 }
 
 searchBox.addEventListener("keyup", () => FilterResults());
-
 //Filter shown jobs
 function FilterResults(){
     if(searchBox.value.length > 0){
@@ -329,13 +345,25 @@ setInterval(() => {
 function UpdateJobs(){
   GetMonitorJobs().then((json) => {
     ResetContent();
-    console.log(json);
+    //console.log(json);
     json.forEach(job => {
       var mangaView = CreateManga(job.manga, job.mangaConnector.name);
       mangaView.addEventListener("click", (event) => {
-        ShowMangaWindow(job.manga, event, false);
+        ShowMangaWindow(job, job.manga, event, false);
       });
       tasksContent.appendChild(mangaView);
     });
   });
+  
+  GetRunningJobs().then((json) => {
+    console.log("Running");
+    console.log(json);
+    jobsRunningTag.innerText = json.length;
+  });
+  
+  GetWaitingJobs().then((json) => {
+    console.log("Waiting");
+    console.log(json);
+    jobsQueuedTag.innerText = json.length;
+  });
 }

Website/style.css

@@ -462,6 +462,10 @@ publication-viewer publication-information publication-interactions publication-
     color: red;
 }
 
+publication-view publication-information publication-interactions publication-canceltask {
+  color: yellow;
+}
+
 publication-viewer publication-information publication-interactions publication-add {
     color: limegreen;
 }