glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-07-13 18:16:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Created standardized Popup-Window

Browse Source 
Moved Update-functions for Queue-Status and Monitoring-list to their respective modules
This commit is contained in:
glax
2024-10-20 17:27:02 +02:00
parent 1304bc750a
commit fcc1ff392c
10 changed files with 166 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
Website/modules/QueuePopUp.tsx
View File

@ -1,16 +1,18 @@
import React, {ReactElement, useEffect} from 'react';
import React, {useEffect, useState} from 'react';
import IJob, {JobTypeFromNumber} from "./interfaces/IJob";
import '../styles/queuePopUp.css';
import '../styles/popup.css';
import {Job} from "./Job";
import IManga from "./interfaces/IManga";
import {Manga} from "./Manga";
export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
export default function QueuePopUp({children} : {children: JSX.Element[]}) {
const [StandbyJobs, setStandbyJobs] = React.useState<IJob[]>([]);
const [StandbyJobsManga, setStandbyJobsManga] = React.useState<IManga[]>([]);
const [RunningJobs, setRunningJobs] = React.useState<IJob[]>([]);
const [RunningJobsManga, setRunningJobsManga] = React.useState<IManga[]>([]);
const [showQueuePopup, setShowQueuePopup] = useState<boolean>(false);
useEffect(() => {
Job.GetStandbyJobs()
@ -56,45 +58,54 @@ export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
.then(setRunningJobsManga);
}, [RunningJobs]);
return (
<div id="QueuePopUp">
<div id="QueuePopUpHeader">
<h1>Queue Status</h1>
<img alt="Close Search" id="closeSearch" src="../media/close-x.svg" onClick={closeQueue}/>
return (<>
<div onClick={() => setShowQueuePopup(true)}>
{children}
</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>;
})}
{showQueuePopup
? <div className="popup" id="QueuePopUp">
<div className="popupHeader">
<h1>Queue Status {showQueuePopup ? "true" : "false"}</h1>
<img alt="Close Search" className="close" src="../media/close-x.svg"
onClick={() => setShowQueuePopup(false)}/>
</div>
<div id="QueuePopUpBody" className="popupBody">
<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 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>
</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 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>
</div>
: <></>
}
</>
);
}