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(){
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());

32
Website/modules/QueuePopUp.tsx
View File

@ -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>

32
Website/styles/queuePopUp.css
View File

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