glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Fixup Queue Popup

Browse Source
This commit is contained in:
glax 2024-10-20 02:28:26 +02:00
parent d04e0f6374
commit eef819d140
3 changed files with 55 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Website/App.tsx
View File

@ -9,7 +9,7 @@ import QueuePopUp from "./modules/QueuePopUp";
export default function App(){ export default function App(){
const [connected, setConnected] = React.useState(false); const [connected, setConnected] = React.useState(false);
const [showSearch, setShowSearch] = 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 [lastMangaListUpdate, setLastMangaListUpdate] = React.useState<Date>(new Date());
const [lastJobListUpdate, setLastJobListUpdate] = React.useState<Date>(new Date()); const [lastJobListUpdate, setLastJobListUpdate] = React.useState<Date>(new Date());

32
Website/modules/QueuePopUp.tsx
View File

@ -14,19 +14,33 @@ export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
useEffect(() => { useEffect(() => {
Job.GetStandbyJobs() Job.GetStandbyJobs()
.then(Job.GetJobs) .then((jobs) => {
if(jobs.length > 0)
return Job.GetJobs(jobs);
return [];
})
.then(setStandbyJobs) .then(setStandbyJobs)
.finally(() => console.debug(StandbyJobs)); .finally(() => {
console.debug("Removing Metadata Jobs");
setStandbyJobs(StandbyJobs.filter(job => job.jobType <= 1));
});
Job.GetRunningJobs() Job.GetRunningJobs()
.then(Job.GetJobs) .then((jobs) => {
if(jobs.length > 0)
return Job.GetJobs(jobs);
return [];
})
.then(setRunningJobs) .then(setRunningJobs)
.finally(() => console.debug(RunningJobs)); .finally(() =>{
console.debug("Removing Metadata Jobs");
setRunningJobs(RunningJobs.filter(job => job.jobType <= 1));
});
}, []); }, []);
useEffect(() => { useEffect(() => {
if(StandbyJobs.length < 1) if(StandbyJobs.length < 1)
return; 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(",")}`); console.debug(`Waiting mangaIds: ${mangaIds.join(",")}`);
Manga.GetMangaByIds(mangaIds) Manga.GetMangaByIds(mangaIds)
.then(setStandbyJobsManga); .then(setStandbyJobsManga);
@ -36,7 +50,7 @@ export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
if(RunningJobs.length < 1) if(RunningJobs.length < 1)
return; return;
console.log(RunningJobs); 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(",")}`); console.debug(`Running mangaIds: ${mangaIds.join(",")}`);
Manga.GetMangaByIds(mangaIds) Manga.GetMangaByIds(mangaIds)
.then(setRunningJobsManga); .then(setRunningJobsManga);
@ -45,7 +59,7 @@ export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
return ( return (
<div id="QueuePopUp"> <div id="QueuePopUp">
<div id="QueuePopUpHeader"> <div id="QueuePopUpHeader">
<p>Queue Status</p> <h1>Queue Status</h1>
<img alt="Close Search" id="closeSearch" src="../media/close-x.svg" onClick={closeQueue}/> <img alt="Close Search" id="closeSearch" src="../media/close-x.svg" onClick={closeQueue}/>
</div> </div>
<div id="QueuePopUpBody"> <div id="QueuePopUpBody">
@ -73,7 +87,9 @@ export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
for {job.id}</div> for {job.id}</div>
return <div className="QueueJob" key={"QueueJob-" + job.id}> return <div className="QueueJob" key={"QueueJob-" + job.id}>
<img src={Manga.GetMangaCoverUrl(manga.internalId)}/> <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>;
})} })}
</div> </div>

32
Website/styles/queuePopUp.css
View File

@ -21,6 +21,11 @@
color: var(--accent-color); color: var(--accent-color);
} }
#QueuePopUp #QueuePopUpHeader h1 {
margin: 4px 10px;
font-size: 20pt;
}
#QueuePopUp #closeSearch { #QueuePopUp #closeSearch {
position: absolute; position: absolute;
top: 0; top: 0;
@ -38,8 +43,10 @@
} }
#QueuePopUp #QueuePopUpBody > * { #QueuePopUp #QueuePopUpBody > * {
width: 50%;
padding: 20px; padding: 20px;
width: calc(50% - 40px);
height: calc(100% - 40px);
overflow-y: scroll;
} }
#QueuePopUp #QueuePopUpBody h1 { #QueuePopUp #QueuePopUpBody h1 {
@ -57,14 +64,35 @@
} }
.QueueJob { .QueueJob {
color: black;
margin: 5px 0;
position: relative; position: relative;
height: 200px; 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{ .QueueJob img{
grid-area: cover;
height: 100%; 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;
} }