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

Add Basic QueuePopup that opens when clicking in the footer.

Browse Source
This commit is contained in:
glax 2024-10-20 02:09:30 +02:00
parent ca3aa2e8e8
commit d04e0f6374
3 changed files with 161 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Website/App.tsx
View File

@ -4,10 +4,12 @@ import Search from "./modules/Search";
import Header from "./modules/Header";
import MonitorJobsList from "./modules/MonitorJobsList";
import './styles/index.css'
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 [lastMangaListUpdate, setLastMangaListUpdate] = React.useState<Date>(new Date());
const [lastJobListUpdate, setLastJobListUpdate] = React.useState<Date>(new Date());
@ -29,7 +31,6 @@ export default function App(){
}, []);
const JobsChanged : EventHandler<any> = () => {
console.log("Updating Mangalist");
setLastMangaListUpdate(new Date());
setLastJobListUpdate(new Date());
}
@ -44,10 +45,14 @@ export default function App(){
<hr/>
</>
: <></>}
{showQueue
? <QueuePopUp closeQueue={() => setShowQueue(false)} />
: <></>
}
<MonitorJobsList onStartSearch={() => setShowSearch(true)} onJobsChanged={JobsChanged} key={lastMangaListUpdate.getTime()}/>
</>
: <h1>No connection to backend</h1>}
<Footer key={lastJobListUpdate.getTime()} />
<Footer key={lastJobListUpdate.getTime()} showQueue={() => setShowQueue(true)}/>
</div>)
}

84
Website/modules/QueuePopUp.tsx Normal file
View File

@ -0,0 +1,84 @@
import React, {ReactElement, useEffect} from 'react';
import IJob, {JobTypeFromNumber} from "./interfaces/IJob";
import '../styles/queuePopUp.css';
import {Job} from "./Job";
import IManga from "./interfaces/IManga";
import {Manga} from "./Manga";
export default function QueuePopUp({closeQueue} : {closeQueue(): void}){
const [StandbyJobs, setStandbyJobs] = React.useState<IJob[]>([]);
const [StandbyJobsManga, setStandbyJobsManga] = React.useState<IManga[]>([]);
const [RunningJobs, setRunningJobs] = React.useState<IJob[]>([]);
const [RunningJobsManga, setRunningJobsManga] = React.useState<IManga[]>([]);
useEffect(() => {
Job.GetStandbyJobs()
.then(Job.GetJobs)
.then(setStandbyJobs)
.finally(() => console.debug(StandbyJobs));
Job.GetRunningJobs()
.then(Job.GetJobs)
.then(setRunningJobs)
.finally(() => console.debug(RunningJobs));
}, []);
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 : "");
console.debug(`Waiting mangaIds: ${mangaIds.join(",")}`);
Manga.GetMangaByIds(mangaIds)
.then(setStandbyJobsManga);
}, [StandbyJobs]);
useEffect(() => {
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 : "");
console.debug(`Running mangaIds: ${mangaIds.join(",")}`);
Manga.GetMangaByIds(mangaIds)
.then(setRunningJobsManga);
}, [RunningJobs]);
return (
<div id="QueuePopUp">
<div id="QueuePopUpHeader">
<p>Queue Status</p>
<img alt="Close Search" id="closeSearch" src="../media/close-x.svg" onClick={closeQueue}/>
</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>;
})}
</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>{JobTypeFromNumber(job.jobType)}</p>
</div>;
})}
</div>
</div>
</div>
</div>
);
}

70
Website/styles/queuePopUp.css Normal file
View File

@ -0,0 +1,70 @@
#QueuePopUp {
position: absolute;
left: 10%;
top: 7.5%;
width: 80%;
height: 80%;
margin: auto;
z-index: 100;
background-color: var(--second-background-color);
border-radius: 10px;
overflow: hidden;
}
#QueuePopUp #QueuePopUpHeader {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 100%;
background-color: var(--primary-color);
color: var(--accent-color);
}
#QueuePopUp #closeSearch {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
#QueuePopUp #QueuePopUpBody {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: calc(100% - 40px);
display: flex;
}
#QueuePopUp #QueuePopUpBody > * {
width: 50%;
padding: 20px;
}
#QueuePopUp #QueuePopUpBody h1 {
padding: 0;
margin: 0 0 5px 0;
}
#QueuePopUp #QueuePopUpBody > *:first-child {
border-right: 1px solid var(--primary-color);
}
#QueuePopUp #QueuePopUpBody .JobQueue {
display: flex;
flex-direction: column;
}
.QueueJob {
position: relative;
height: 200px;
}
.QueueJob img{
height: 100%;
}
.QueueJob {
}