Website/apiConnector.js

@@ -177,8 +177,3 @@ 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">Sample</connector-name>
-            <publication-name>Best Manga there is</publication-name>
+            <connector-name class="pill">MangaDex</connector-name>
+            <publication-name>Tensei Pandemic</publication-name>
           </publication-information>
         </publication>
       </content>
@@ -93,18 +93,19 @@
         <publication-viewer>
           <img id="pubviewcover" src="media/cover.jpg" alt="cover">
           <publication-information>
-            <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-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-description>
             <publication-interactions>
-              <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-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-interactions>
           </publication-information>
         </publication-viewer>
@@ -112,11 +113,11 @@
     </viewport>
 	  
     <footer>
-      <div onclick="ShowJobQueue();">
-        <img src="media/running.svg" alt="running"><div id="jobsRunningTag">0</div>
+      <div onclick="ShowTasksQueue();">
+        <img src="media/running.svg" alt="running"><div id="tasksRunningTag">0</div>
       </div>
-      <div onclick="ShowJobQueue();">
-        <img src="media/queue.svg" alt="queue"><div id="jobsQueuedTag">0</div>
+      <div onclick="ShowTasksQueue();">
+        <img src="media/queue.svg" alt="queue"><div id="tasksQueuedTag">0</div>
       </div>
       <p id="madeWith">Made with Blåhaj 🦈</p>
     </footer> 

Website/interaction.js

@@ -2,17 +2,13 @@
 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("#createMonitoJobButton");
-const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterJobButton");
-const startJobButton = document.querySelector("#startJobButton");
-const cancelJobButton = document.querySelector("#cancelJobButton");
-const deleteJobButton = document.querySelector("#deleteJobButton");
+const createMonitorTaskButton = document.querySelector("#createMonitorTaskButton");
+const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterTaskButton");
 const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
 const mangaViewerWindow = document.querySelector("publication-viewer");
 const mangaViewerDescription = document.querySelector("#publicationViewerDescription");
@@ -20,6 +16,8 @@ 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");
@@ -39,8 +37,6 @@ 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) => {
@@ -103,7 +99,7 @@ function GetNewMangaItems(){
       var mangaElement = CreateManga(result, newMangaConnector.value)
       newMangaResult.appendChild(mangaElement);
       mangaElement.addEventListener("click", (event) => {
-        ShowMangaWindow(null, result, event, true);
+        ShowMangaWindow(result, event, true);
       });
     });
     
@@ -131,28 +127,17 @@ function CreateManga(manga, connector){
     return mangaElement;
 }
 
-createMonitorJobButton.addEventListener("click", () => {
+createMonitorTaskButton.addEventListener("click", () => {
+  NewMonitorJob();
+  mangaViewerPopup.style.display = "none";
+});
+function NewMonitorJob(){
   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(job, manga, event, add){
+function ShowMangaWindow(manga, event, add){
     selectedManga = manga;
-    selectedJob = job;
     //Show popup
     mangaViewerPopup.style.display = "block";
     
@@ -177,18 +162,16 @@ function ShowMangaWindow(job, manga, event, add){
     
     //Check what action should be listed
     if(add){
-        createMonitorJobButton.style.display = "initial";
-        createDownloadChapterJobButton.style.display = "initial";
-        cancelJobButton.style.display = "none";
-        startJobButton.style.display = "none";
-        deleteJobButton.style.display = "none";
+        createMonitorTaskButton.style.display = "initial";
+        createDownloadChapterTaskButton.style.display = "initial";
+        publicationDelete.style.display = "none";
+        publicationTaskStart.style.display = "none";
     }
     else{
-        createMonitorJobButton.style.display = "none";
-        createDownloadChapterJobButton.style.display = "none";
-        cancelJobButton.style.display = "initial";
-        startJobButton.style.display = "initial";
-        deleteJobButton.style.display = "initial";
+        createMonitorTaskButton.style.display = "none";
+        createDownloadChapterTaskButton.style.display = "none";
+        publicationDelete.style.display = "initial";
+        publicationTaskStart.style.display = "initial";
     }
 }
 
@@ -197,6 +180,7 @@ function HidePublicationPopup(){
 }
 
 searchBox.addEventListener("keyup", () => FilterResults());
+
 //Filter shown jobs
 function FilterResults(){
     if(searchBox.value.length > 0){
@@ -345,25 +329,13 @@ 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, job.manga, event, false);
+        ShowMangaWindow(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,10 +462,6 @@ 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;
 }