Add Basic QueuePopup that opens when clicking in the footer.

Website/App.tsx

@@ -4,10 +4,12 @@ import Search from "./modules/Search";
 import Header from "./modules/Header";
 import MonitorJobsList from "./modules/MonitorJobsList";
 import './styles/index.css'
+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 [lastMangaListUpdate, setLastMangaListUpdate] = React.useState<Date>(new Date());
     const [lastJobListUpdate, setLastJobListUpdate] = React.useState<Date>(new Date());
 
@@ -29,7 +31,6 @@ export default function App(){
     }, []);
 
     const JobsChanged : EventHandler<any> = () => {
-        console.log("Updating Mangalist");
         setLastMangaListUpdate(new Date());
         setLastJobListUpdate(new Date());
     }
@@ -44,10 +45,14 @@ export default function App(){
                         <hr/>
                     </>
                     : <></>}
+                {showQueue
+                    ? <QueuePopUp closeQueue={() => setShowQueue(false)} />
+                    : <></>
+                }
                 <MonitorJobsList onStartSearch={() => setShowSearch(true)} onJobsChanged={JobsChanged} key={lastMangaListUpdate.getTime()}/>
             </>
             : <h1>No connection to backend</h1>}
-        <Footer key={lastJobListUpdate.getTime()} />
+        <Footer key={lastJobListUpdate.getTime()} showQueue={() => setShowQueue(true)}/>
     </div>)
 }
 

Website/modules/QueuePopUp.tsx

@@ -0,0 +1,84 @@
+import React, {ReactElement, useEffect} from 'react';
+import IJob, {JobTypeFromNumber} from "./interfaces/IJob";
+import '../styles/queuePopUp.css';
+import {Job} from "./Job";
+import IManga from "./interfaces/IManga";
+import {Manga} from "./Manga";
+
+export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
+
+    const [StandbyJobs, setStandbyJobs] = React.useState<IJob[]>([]);
+    const [StandbyJobsManga, setStandbyJobsManga] = React.useState<IManga[]>([]);
+    const [RunningJobs, setRunningJobs] = React.useState<IJob[]>([]);
+    const [RunningJobsManga, setRunningJobsManga] = React.useState<IManga[]>([]);
+
+    useEffect(() => {
+        Job.GetStandbyJobs()
+            .then(Job.GetJobs)
+            .then(setStandbyJobs)
+            .finally(() => console.debug(StandbyJobs));
+        Job.GetRunningJobs()
+            .then(Job.GetJobs)
+            .then(setRunningJobs)
+            .finally(() => console.debug(RunningJobs));
+    }, []);
+
+    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 : "");
+        console.debug(`Waiting mangaIds: ${mangaIds.join(",")}`);
+        Manga.GetMangaByIds(mangaIds)
+            .then(setStandbyJobsManga);
+    }, [StandbyJobs]);
+
+    useEffect(() => {
+        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 : "");
+        console.debug(`Running mangaIds: ${mangaIds.join(",")}`);
+        Manga.GetMangaByIds(mangaIds)
+            .then(setRunningJobsManga);
+    }, [RunningJobs]);
+
+    return (
+        <div id="QueuePopUp">
+            <div id="QueuePopUpHeader">
+                <p>Queue Status</p>
+                <img alt="Close Search" id="closeSearch" src="../media/close-x.svg" onClick={closeQueue}/>
+            </div>
+            <div id="QueuePopUpBody">
+                <div id="RunningJobQueue">
+                    <h1>Running</h1>
+                    <div className="JobQueue">
+                        {RunningJobs.map((job: IJob) => {
+                            const manga = RunningJobsManga.find(manga => manga.internalId == job.mangaInternalId || manga.internalId == job.chapter?.parentManga.internalId);
+                            if (manga === undefined || manga === null)
+                                return <div key={"QueueJob-" + job.id}>Error. Could not find matching manga for {job.id}</div>
+                            return <div className="QueueJob" key={"QueueJob-" + job.id}>
+                                <img src={Manga.GetMangaCoverUrl(manga.internalId)} />
+                                <p>{JobTypeFromNumber(job.jobType)}</p>
+                            </div>;
+                        })}
+                    </div>
+                </div>
+                <div id="WaitingJobQueue">
+                    <h1>Standby</h1>
+                    <div className="JobQueue">
+                        {StandbyJobs.map((job: IJob) => {
+                            const manga = StandbyJobsManga.find(manga => manga.internalId == job.mangaInternalId || manga.internalId == job.chapter?.parentManga.internalId);
+                            if (manga === undefined || manga === null)
+                                return <div key={"QueueJob-" + job.id}>Error. Could not find matching manga
+                                    for {job.id}</div>
+                            return <div className="QueueJob" key={"QueueJob-" + job.id}>
+                                <img src={Manga.GetMangaCoverUrl(manga.internalId)}/>
+                                <p>{JobTypeFromNumber(job.jobType)}</p>
+                            </div>;
+                        })}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

Website/styles/queuePopUp.css

@@ -0,0 +1,70 @@
+#QueuePopUp {
+    position: absolute;
+    left: 10%;
+    top: 7.5%;
+    width: 80%;
+    height: 80%;
+    margin: auto;
+    z-index: 100;
+    background-color: var(--second-background-color);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+#QueuePopUp #QueuePopUpHeader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 40px;
+    width: 100%;
+    background-color: var(--primary-color);
+    color: var(--accent-color);
+}
+
+#QueuePopUp #closeSearch {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+}
+
+#QueuePopUp #QueuePopUpBody {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 40px);
+    display: flex;
+}
+
+#QueuePopUp #QueuePopUpBody > * {
+    width: 50%;
+    padding: 20px;
+}
+
+#QueuePopUp #QueuePopUpBody h1 {
+    padding: 0;
+    margin: 0 0 5px 0;
+}
+
+#QueuePopUp #QueuePopUpBody > *:first-child {
+    border-right: 1px solid var(--primary-color);
+}
+
+#QueuePopUp #QueuePopUpBody .JobQueue {
+    display: flex;
+    flex-direction: column;
+}
+
+.QueueJob {
+    position: relative;
+    height: 200px;
+}
+
+.QueueJob img{
+    height: 100%;
+}
+
+.QueueJob {
+
+}