From eef819d140d7bb8768326f7a3101a0d75bcec3c2 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Sun, 20 Oct 2024 02:28:26 +0200
Subject: [PATCH] Fixup Queue Popup

---
 Website/App.tsx                |  2 +-
 Website/modules/QueuePopUp.tsx | 32 ++++++++++++++++++++++++--------
 Website/styles/queuePopUp.css  | 32 ++++++++++++++++++++++++++++++--
 3 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/Website/App.tsx b/Website/App.tsx
index 01a8f59..9ce08a0 100644
--- a/Website/App.tsx
+++ b/Website/App.tsx
@@ -9,7 +9,7 @@ import QueuePopUp from "./modules/QueuePopUp";
 export default function App(){
     const [connected, setConnected] = React.useState(false);
     const [showSearch, setShowSearch] = React.useState(false);
-    const [showQueue, setShowQueue] = React.useState(true);
+    const [showQueue, setShowQueue] = React.useState(false);
     const [lastMangaListUpdate, setLastMangaListUpdate] = React.useState<Date>(new Date());
     const [lastJobListUpdate, setLastJobListUpdate] = React.useState<Date>(new Date());
 
diff --git a/Website/modules/QueuePopUp.tsx b/Website/modules/QueuePopUp.tsx
index c745860..1ea6276 100644
--- a/Website/modules/QueuePopUp.tsx
+++ b/Website/modules/QueuePopUp.tsx
@@ -14,19 +14,33 @@ export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
 
     useEffect(() => {
         Job.GetStandbyJobs()
-            .then(Job.GetJobs)
+            .then((jobs) => {
+                if(jobs.length > 0)
+                    return Job.GetJobs(jobs);
+                return [];
+            })
             .then(setStandbyJobs)
-            .finally(() => console.debug(StandbyJobs));
+            .finally(() => {
+                console.debug("Removing Metadata Jobs");
+                setStandbyJobs(StandbyJobs.filter(job => job.jobType <= 1));
+            });
         Job.GetRunningJobs()
-            .then(Job.GetJobs)
+            .then((jobs) => {
+                if(jobs.length > 0)
+                    return Job.GetJobs(jobs);
+                return [];
+            })
             .then(setRunningJobs)
-            .finally(() => console.debug(RunningJobs));
+            .finally(() =>{
+                console.debug("Removing Metadata Jobs");
+                setRunningJobs(RunningJobs.filter(job => job.jobType <= 1));
+            });
     }, []);
 
     useEffect(() => {
         if(StandbyJobs.length < 1)
             return;
-        const mangaIds = StandbyJobs.filter(job => job.jobType<=1).map((job) => job.mangaInternalId != undefined ? job.mangaInternalId : job.chapter != undefined ? job.chapter.parentManga.internalId : "");
+        const mangaIds = StandbyJobs.filter(job => job.jobType<=2).map((job) => job.mangaInternalId != undefined ? job.mangaInternalId : job.chapter != undefined ? job.chapter.parentManga.internalId : "");
         console.debug(`Waiting mangaIds: ${mangaIds.join(",")}`);
         Manga.GetMangaByIds(mangaIds)
             .then(setStandbyJobsManga);
@@ -36,7 +50,7 @@ export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
         if(RunningJobs.length < 1)
             return;
         console.log(RunningJobs);
-        const mangaIds = RunningJobs.filter(job => job.jobType<=1).map((job) => job.mangaInternalId != undefined ? job.mangaInternalId : job.chapter != undefined ? job.chapter.parentManga.internalId : "");
+        const mangaIds = RunningJobs.filter(job => job.jobType<=2).map((job) => job.mangaInternalId != undefined ? job.mangaInternalId : job.chapter != undefined ? job.chapter.parentManga.internalId : "");
         console.debug(`Running mangaIds: ${mangaIds.join(",")}`);
         Manga.GetMangaByIds(mangaIds)
             .then(setRunningJobsManga);
@@ -45,7 +59,7 @@ export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
     return (
         <div id="QueuePopUp">
             <div id="QueuePopUpHeader">
-                <p>Queue Status</p>
+                <h1>Queue Status</h1>
                 <img alt="Close Search" id="closeSearch" src="../media/close-x.svg" onClick={closeQueue}/>
             </div>
             <div id="QueuePopUpBody">
@@ -73,7 +87,9 @@ export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
                                     for {job.id}</div>
                             return <div className="QueueJob" key={"QueueJob-" + job.id}>
                                 <img src={Manga.GetMangaCoverUrl(manga.internalId)}/>
-                                <p>{JobTypeFromNumber(job.jobType)}</p>
+                                <p className="QueueJob-Name">{manga.sortName}</p>
+                                <p className="QueueJob-JobType">{JobTypeFromNumber(job.jobType)}</p>
+                                <p className="QueueJob-additional">{job.jobType == 0 ? `Vol.${job.chapter?.volumeNumber} Ch.${job.chapter?.chapterNumber}` : ""}</p>
                             </div>;
                         })}
                     </div>
diff --git a/Website/styles/queuePopUp.css b/Website/styles/queuePopUp.css
index 4cc1101..56877e5 100644
--- a/Website/styles/queuePopUp.css
+++ b/Website/styles/queuePopUp.css
@@ -21,6 +21,11 @@
     color: var(--accent-color);
 }
 
+#QueuePopUp #QueuePopUpHeader h1 {
+    margin: 4px 10px;
+    font-size: 20pt;
+}
+
 #QueuePopUp #closeSearch {
     position: absolute;
     top: 0;
@@ -38,8 +43,10 @@
 }
 
 #QueuePopUp #QueuePopUpBody > * {
-    width: 50%;
     padding: 20px;
+    width: calc(50% - 40px);
+    height: calc(100% - 40px);
+    overflow-y: scroll;
 }
 
 #QueuePopUp #QueuePopUpBody h1 {
@@ -57,14 +64,35 @@
 }
 
 .QueueJob {
+    color: black;
+    margin: 5px 0;
     position: relative;
     height: 200px;
+    display: grid;
+    grid-template-columns: 150px auto;
+    grid-template-rows: 20% 20% auto;
+    column-gap: 10px;
+    grid-template-areas:
+    "cover name"
+    "cover jobType"
+    "cover additional"
 }
 
 .QueueJob img{
+    grid-area: cover;
     height: 100%;
 }
 
-.QueueJob {
+.QueueJob .QueueJob-Name{
+    grid-area: name;
+    font-weight: bold;
+    font-size: 14pt;
+}
 
+.QueueJob .JobType{
+    grid-area: jobType;
+}
+
+.QueueJob .QueueJob-additional {
+    grid-area: additional;
 }
\ No newline at end of file