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(new Date()); const [lastJobListUpdate, setLastJobListUpdate] = React.useState(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 (
-

Queue Status

+

Queue Status

Close Search
@@ -73,7 +87,9 @@ export default function QueuePopUp({closeQueue} : {closeQueue(): void}){ for {job.id}
return
-

{JobTypeFromNumber(job.jobType)}

+

{manga.sortName}

+

{JobTypeFromNumber(job.jobType)}

+

{job.jobType == 0 ? `Vol.${job.chapter?.volumeNumber} Ch.${job.chapter?.chapterNumber}` : ""}

; })}
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