From 9accca0ad293cdaa8e61659649c9dc8dcddddfb1 Mon Sep 17 00:00:00 2001
From: db-2001 <adityabhatnagar2001@gmail.com>
Date: Sat, 10 Feb 2024 13:49:51 -0500
Subject: [PATCH] Applied new popup style to Jobs view and fixed manga library
 populating twice sometimes

---
 Website/index.html      |  39 +++++++++++----
 Website/interaction.js  |  29 +++++------
 Website/styles/base.css | 107 +++++++++++++++++-----------------------
 3 files changed, 88 insertions(+), 87 deletions(-)

diff --git a/Website/index.html b/Website/index.html
index eb1ed30..3d8acc3 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -240,18 +240,39 @@
           </publication-details>
         </publication-viewer>
       </popup>
-      
+
       <popup id="jobStatusView">
-        <blur-background id="blurBackgroundJobStatus" onclick="jobStatusView.style.display= 'none';"></blur-background>
+        <blur-background id="blurBackgroundSettingsPopup" 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>
+          <border-bar>
+            <popup-title>Jobs</popup-title>
+            <popup-close onclick="jobStatusView.style.display = 'none'">&times</popup-close>
+          </border-bar>
+          <popup-content>
+
+            <div class="popup-section">
+              RUNNING JOBS
+              <div class="section-content" id="jobStatusRunning">
+                
+              </div>
+            </div>
+
+            <div class="popup-section">
+              QUEUED JOBS
+              <div class="section-content" id="jobStatusWaiting">
+                
+              </div>
+            </div>
+
+          </popup-content>
+
+          <border-bar>
+            <!-- <div class="button-container">
+              <border-bar-button class="primary" onclick="UpdateSettings()">Apply Settings</border-bar-button>
+            </div> -->
+          </border-bar>
+
         </popup-window>
-      </popup>
     </viewport>
 	  
     <footer>
diff --git a/Website/interaction.js b/Website/interaction.js
index f7e5a15..59fd3aa 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -360,7 +360,6 @@ createMonitorJobButton.addEventListener("click", () => {
   CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
   UpdateJobs();
   mangaViewerPopup.style.display = "none";
-  ResetContent();
 });
 startJobButton.addEventListener("click", () => {
   StartJob(selectedJob.id);
@@ -374,7 +373,6 @@ deleteJobButton.addEventListener("click", () => {
   RemoveJob(selectedJob.id);
   UpdateJobs();
   mangaViewerPopup.style.display = "none";
-  ResetContent();
 });
 
 function ShowMangaWindow(job, manga, event, add){
@@ -764,14 +762,6 @@ function UpdateJobs(){
   GetMonitorJobs().then((json) => {
     if(monitoringJobsCount != json.length){
       ResetContent();
-      //console.log(json);
-      json.forEach(job => {
-        var mangaView = CreateManga(job.manga, job.mangaConnector.name);
-        mangaView.addEventListener("click", (event) => {
-          ShowMangaWindow(job, job.manga, event, false);
-        });
-        tasksContent.appendChild(mangaView);
-      });
       monitoringJobsCount = json.length;
     }
   });
@@ -831,39 +821,44 @@ function createJob(jobjson){
   
   
   var wrapper = document.createElement("div");
-  wrapper.className = "jobWrapper";
+  wrapper.className = "section-item";
   wrapper.id = GetValidSelector(jobjson.id);
   
   var image = document.createElement("img");
   image.className = "jobImage";
   image.src = GetCoverUrl(manga.internalId);
   wrapper.appendChild(image);
-  
+
+  var details = document.createElement("div");
+  details.className = 'jobDetails';
+
   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);
+  details.appendChild(title);
   
   var progressBar = document.createElement("progress");
   progressBar.className = "jobProgressBar";
   progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
-  wrapper.appendChild(progressBar);
+  details.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);
+  progressSpan.innerText = "Pending...";
+  details.appendChild(progressSpan);
   
   var cancelSpan = document.createElement("span");
   cancelSpan.className = "jobCancel";
   cancelSpan.innerText = "Cancel";
   cancelSpan.addEventListener("click", () => CancelJob(jobjson.id));
-  wrapper.appendChild(cancelSpan);
+  details.appendChild(cancelSpan);
   
+  wrapper.appendChild(details);
+
   return wrapper;
 }
 
diff --git a/Website/styles/base.css b/Website/styles/base.css
index 96f4564..79a2098 100644
--- a/Website/styles/base.css
+++ b/Website/styles/base.css
@@ -420,6 +420,13 @@ popup popup-window {
     overflow: hidden;
 }
 
+popup#jobStatusView popup-window {
+    left: 20%;
+    top: 20%;
+    height: 60%;
+    width: 60%;
+}
+
 popup-content{
     display: flex;
     flex-direction: column;
@@ -894,82 +901,60 @@ footer-tag-popup::before{
   100% { transform: rotate(360deg); }
 }
 
-#jobStatusView {
-  z-index: 50;
+#jobStatusRunning > .section-item {
+    flex-direction: row;
+    height: 150px;
+    padding: 0;
+    overflow: hidden;
 }
 
-#jobStatusView > popup-window {
-  top: 80px;
-  width: 50%;
-  max-height: calc(100% - 140px);
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  background-color: transparent;
+#jobStatusWaiting > .section-item {
+    flex-direction: row;
+    height: 150px;
+    padding: 0;
+    overflow: hidden;
 }
 
-#jobStatusView > popup-window > div {
-  overflow-y: scroll;
-  overflow-x: hidden;
-  width: 50%;
-  margin: 0;
-  max-height: 100%;
+.section-item > .jobImage {
+  height: 100%;
+  width: auto;
+  left: 0;
+  top: 0;
+  border-radius: 10px;
 }
 
-#jobStatusView > popup-window > div > div {
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  width: 100%;
-  margin: 0;
+.jobDetails {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
 }
 
-.jobWrapper {
-  width: 90%;
-  margin: 2px 5%;
-  height: 100px;
-  position: relative;
-  flex-shrink: 0;
-  background-color: rgba(187,187,187,0.4);
-  border-radius: 3px;
+.section-item > .jobDetails > .jobTitle {
+  margin: 5px;
+  font-size: 11pt;
+  font-weight: bold;
+  text-wrap: wrap;
 }
 
-.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);
+.section-item > .jobDetails > .jobProgressBar {
+  margin: 5px;
   height: 10px;
+  border-radius: 5px;
+  overflow: hidden;
 }
 
-.jobWrapper > .jobProgressSpan {
-  position: absolute;
-  right: 10px;
-  bottom: calc(12pt + 20px);
-  width: 60%;
-  text-align: right;
+.section-item > .jobDetails > .jobProgressSpan {
+    margin: 5px;
+    margin-left: auto;
+    margin-right: 5px;
 }
 
-.jobWrapper > .jobCancel {
-  position: absolute;
-  right: 10px;
-  bottom: 5px;
+.section-item > .jobDetails > .jobCancel {
+  margin-top: auto;
+  margin-bottom: 5px;
+  margin-left: auto;
+  margin-right: 5px;
   font-size: 12pt;
   color: var(--secondary-color);
   cursor: pointer;