Add GetStandbyJobs call and display to footer.

Fix IJob to represent possible return values.

Website/modules/Footer.tsx

@@ -2,17 +2,19 @@ import React, {useEffect} from 'react';
 import '../styles/footer.css';
 import {Job} from './Job';
 import Icon from '@mdi/react';
-import { mdiRun, mdiCounter, mdiEyeCheck } from '@mdi/js';
+import { mdiRun, mdiCounter, mdiEyeCheck, mdiTrayFull } from '@mdi/js';
 
-export default function Footer(){
+export default function Footer({showQueue} : {showQueue(): void}){
     const [MonitoringJobsCount, setMonitoringJobsCount] = React.useState(0);
     const [AllJobsCount, setAllJobsCount] = React.useState(0);
     const [RunningJobsCount, setRunningJobsCount] = React.useState(0);
+    const [StandbyJobsCount, setStandbyJobsCount] = React.useState(0);
 
     function UpdateBackendState(){
         Job.GetMonitoringJobs().then((jobs) => setMonitoringJobsCount(jobs.length));
         Job.GetAllJobs().then((jobs) => setAllJobsCount(jobs.length));
         Job.GetRunningJobs().then((jobs) => setRunningJobsCount(jobs.length));
+        Job.GetStandbyJobs().then((jobs) => setStandbyJobsCount(jobs.length));
     }
 
     useEffect(() => {
@@ -22,7 +24,8 @@ export default function Footer(){
     return (
         <footer>
             <div><Icon path={mdiEyeCheck} size={1}/> <span>{MonitoringJobsCount}</span></div>
-        <div><Icon path={mdiRun} size={1} /> <span>{RunningJobsCount}</span></div>
+            <div onClick={showQueue} className="hoverHand"><Icon path={mdiTrayFull} size={1}/> <span>{StandbyJobsCount}</span></div>
+            <div onClick={showQueue} className="hoverHand"><Icon path={mdiRun} size={1}/> <span>{RunningJobsCount}</span></div>
             <div><Icon path={mdiCounter} size={1}/> <span>{AllJobsCount}</span></div>
             <p id="madeWith">Made with Blåhaj 🦈</p>
         </footer>)

Website/modules/Job.tsx

@@ -37,6 +37,17 @@ export class Job
             });
     }
 
+    static async GetStandbyJobs(): Promise<string[]> {
+        console.info("Getting all standby Jobs");
+        return getData("http://127.0.0.1:6531/v2/Jobs/Standby")
+            .then((json) => {
+                console.info("Got all standby Jobs");
+                const ret = json as string[];
+                console.debug(ret);
+                return (ret);
+            });
+    }
+
     static async GetMonitoringJobs(): Promise<string[]> {
         console.info("Getting all monitoring Jobs");
         return getData("http://127.0.0.1:6531/v2/Jobs/Monitoring")

Website/modules/MonitorJobsList.tsx

@@ -22,7 +22,8 @@ export default function MonitorJobsList({onStartSearch, onJobsChanged} : {onStar
         MonitoringJobs.forEach(job => {
             if(AllManga.find(manga => manga.internalId == job.mangaInternalId))
                 return;
-            Manga.GetMangaById(job.mangaInternalId).then((manga: IManga) => setAllManga([...AllManga, manga]));
+            Manga.GetMangaById(job.mangaInternalId != undefined ? job.mangaInternalId : job.chapter != undefined ? job.chapter.parentManga.internalId : "").
+            then((manga: IManga) => setAllManga([...AllManga, manga]));
         });
     }, [MonitoringJobs]);
 

Website/modules/interfaces/IJob.tsx

@@ -1,16 +1,28 @@
 import IMangaConnector from "./IMangaConnector";
 import IProgressToken from "./IProgressToken";
+import IChapter from "./IChapter";
 
 export default interface IJob{
-    jobType: number;
-    mangaInternalId: string;
-    translatedLanguage: string;
     progressToken: IProgressToken;
     recurring: boolean;
     recurrenceTime: string;
     lastExecution: Date;
     nextExecution: Date;
     id: string;
+    jobType: number;
     parentJobId: string | null;
     mangaConnector: IMangaConnector;
+    mangaInternalId: string | undefined; //only on DownloadNewChapters
+    translatedLanguage: string | undefined; //only on DownloadNewChapters
+    chapter: IChapter | undefined; //only on DownloadChapter
+}
+
+export function JobTypeFromNumber(n: number): string {
+    switch(n) {
+        case 0: return "Download Chapter";
+        case 1: return "Download New Chapters";
+        case 2: return "Update Metadata";
+        case 3: return "Monitor";
+    }
+    return "";
 }

Website/styles/footer.css

@@ -34,3 +34,7 @@ footer div > * {
     margin: 0 2px;
     padding: 3px 0;
 }
+
+footer .hoverHand {
+    cursor: pointer;
+}