Website/index.html

@@ -114,6 +114,18 @@
           </publication-information>
         </publication-viewer>
       </popup>
+      
+      <popup id="jobStatusView">
+        <blur-background id="blurBackgroundJobStatus" onclick="jobStatusView.style.display= 'none';"></blur-background>
+        <popup-window>
+          <div>
+            <div id="jobStatusRunning" style="border-right: 1px solid gray;"></div>
+          </div>
+          <div>
+            <div id="jobStatusWaiting" style="border-left: 1px solid gray;"></div>
+          </div>
+        </popup-window>
+      </popup>
     </viewport>
 	  
     <footer>

Website/interaction.js

@@ -1,4 +1,5 @@
-let jobs = [];
+let runningJobs = [];
+let waitingJobs = [];
 let notificationConnectorTypes = [];
 let libraryConnectorTypes = [];
 let selectedManga;
@@ -42,6 +43,9 @@ const newMangaResult = document.querySelector("#newMangaResult");
 const jobsRunningTag = document.querySelector("#jobsRunningTag");
 const jobsQueuedTag = document.querySelector("#jobsQueuedTag");
 const loaderdiv = document.querySelector('#loaderdiv');
+const jobStatusView = document.querySelector("#jobStatusView");
+const jobStatusRunning = document.querySelector("#jobStatusRunning");
+const jobStatusWaiting = document.querySelector("#jobStatusWaiting");
 
 function Setup(){
   Ping().then((ret) => {
@@ -124,7 +128,7 @@ function GetNewMangaItems(){
 //Returns a new "Publication" Item to display in the jobs section
 function CreateManga(manga, connector){
     var mangaElement = document.createElement('publication');
-    mangaElement.setAttribute("id", manga.internalId);
+    mangaElement.id = GetValidSelector(manga.internalId);
     var mangaImage = document.createElement('img');
     mangaImage.src = GetCoverUrl(manga.internalId);
     mangaElement.appendChild(mangaImage);
@@ -359,16 +363,120 @@ function UpdateJobs(){
       tasksContent.appendChild(mangaView);
     });
   });
+    
+  GetWaitingJobs().then((json) => {
+    jobsQueuedTag.innerText = json.length;
+    
+    var nowWaitingJobs = [];
+    
+    json.forEach(job => {
+      if(!waitingJobs.includes(GetValidSelector(job.id))){
+        var jobDom = createJob(job);
+        jobStatusWaiting.appendChild(jobDom);
+      }
+      nowWaitingJobs.push(GetValidSelector(job.id));
+    });
+    waitingJobs = nowWaitingJobs;
+  });
+  
+  jobStatusWaiting.childNodes.forEach(child => {
+    if(!waitingJobs.includes(child.id))
+      jobStatusWaiting.removeChild(child);
+  });
   
   GetRunningJobs().then((json) => {
-    console.log("Running");
-    console.log(json);
     jobsRunningTag.innerText = json.length;
+    
+    var nowRunningJobs = [];
+    
+    json.forEach(job => {
+      if(!runningJobs.includes(GetValidSelector(job.id))){
+        var jobDom = createJob(job);
+        jobStatusRunning.appendChild(jobDom);
+      }
+      nowRunningJobs.push(GetValidSelector(job.id));
+      UpdateJobProgress(job.id);
+    });
+    
+    runningJobs = nowRunningJobs;
   });
   
-  GetWaitingJobs().then((json) => {
-    console.log("Waiting");
-    console.log(json);
-    jobsQueuedTag.innerText = json.length;
+  jobStatusRunning.childNodes.forEach(child => {
+    if(!runningJobs.includes(child.id))
+      jobStatusRunning.removeChild(child);
   });
 }
+
+function createJob(jobjson){
+  var manga;
+  if(jobjson.chapter != null)
+    manga = jobjson.chapter.parentManga;
+  else if(jobjson.manga != null)
+    manga = jobjson.manga;
+  else return null;
+  
+  
+  var wrapper = document.createElement("div");
+  wrapper.className = "jobWrapper";
+  wrapper.id = GetValidSelector(jobjson.id);
+  
+  var image = document.createElement("img");
+  image.className = "jobImage";
+  image.src = GetCoverUrl(manga.internalId);
+  wrapper.appendChild(image);
+  
+  var title = document.createElement("span");
+  title.className = "jobTitle";
+  if(jobjson.chapter != null)
+    title.innerText = `${manga.sortName} - ${jobjson.chapter.fileName}`;
+  else if(jobjson.manga != null)
+    title.innerText = manga.sortName;
+  wrapper.appendChild(title);
+  
+  var progressBar = document.createElement("progress");
+  progressBar.className = "jobProgressBar";
+  progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
+  wrapper.appendChild(progressBar);
+  
+  var progressSpan = document.createElement("span");
+  progressSpan.className = "jobProgressSpan";
+  progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`;
+  progressSpan.innerText = "0% 00:00:00";
+  wrapper.appendChild(progressSpan);
+  
+  var cancelSpan = document.createElement("span");
+  cancelSpan.className = "jobCancel";
+  cancelSpan.innerText = "Cancel";
+  cancelSpan.addEventListener("click", () => CancelJob(jobjson.id));
+  wrapper.appendChild(cancelSpan);
+  
+  return wrapper;
+}
+
+function ShowJobQueue(){  
+  jobStatusView.style.display = "initial";
+}
+
+function UpdateJobProgress(jobId){
+  GetProgress(jobId).then((json) => {
+    var progressBar = document.querySelector(`#jobProgressBar${GetValidSelector(jobId)}`);
+    var progressSpan = document.querySelector(`#jobProgressSpan${GetValidSelector(jobId)}`);
+    if(progressBar != null && json.progress != 0){
+      progressBar.value = json.progress;
+    }
+    if(progressSpan != null){
+      var percentageStr = "0%";
+      var timeleftStr = "00:00:00";
+      if(json.progress != 0){
+        percentageStr = Intl.NumberFormat("en-US", { style: "percent"}).format(json.progress);
+        timeleftStr = json.timeRemaining.split('.')[0];
+      }
+      progressSpan.innerText = `${percentageStr} ${timeleftStr}`;
+    }
+  });
+}
+
+function GetValidSelector(str){
+    var clean = [...str.matchAll(/[a-zA-Z0-9]*-*_*/g)];
+    return clean.join('');
+}

Website/style.css

@@ -545,4 +545,85 @@ footer-tag-popup::before{
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
+}
+
+#jobStatusView {
+  z-index: 50;
+}
+
+#jobStatusView > popup-window {
+  top: 80px;
+  width: 50%;
+  max-height: calc(100% - 140px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  background-color: transparent;
+}
+
+#jobStatusView > popup-window > div {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 50%;
+  margin: 0;
+  max-height: 100%;
+}
+
+#jobStatusView > popup-window > div > div {
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 100%;
+  margin: 0;
+}
+
+.jobWrapper {
+  width: 90%;
+  margin: 2px 5%;
+  height: 100px;
+  position: relative;
+  flex-shrink: 0;
+  background-color: rgba(187,187,187,0.4);
+  border-radius: 3px;
+}
+
+.jobWrapper > .jobImage {
+  height: 90%;
+  width: 20%;
+  left: 5px;
+  object-fit: contain;
+  position: absolute;
+  top: 5%;
+}
+
+.jobWrapper > .jobTitle {
+  position: absolute;
+  left: calc(20% + 10px);
+  top: 5px;
+}
+
+.jobWrapper > .jobProgressBar {
+  position: absolute;
+  left: calc(20% + 10px);
+  bottom: calc(12pt + 10px);
+  width: calc(80% - 20px);
+  height: 10px;
+}
+
+.jobWrapper > .jobProgressSpan {
+  position: absolute;
+  right: 10px;
+  bottom: calc(12pt + 20px);
+  width: 60%;
+  text-align: right;
+}
+
+.jobWrapper > .jobCancel {
+  position: absolute;
+  right: 10px;
+  bottom: 5px;
+  font-size: 12pt;
+  color: var(--secondary-color);
+  cursor: pointer;
 }