glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-06-12 14:57:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Progressbar to jobs

Browse Source 
Add Cancel-Buttons to running jobs
Auto-update Queue
This commit is contained in:
glax
2024-10-20 21:20:18 +02:00
parent f3a091f09d
commit 7364a20d5d
7 changed files with 114 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Website/modules/Footer.tsx
View File

@ -10,7 +10,7 @@ export default function Footer({connectedToBackend, apiUri} : {connectedToBacken
const [AllJobsCount, setAllJobsCount] = React.useState(0);
const [RunningJobsCount, setRunningJobsCount] = React.useState(0);
const [StandbyJobsCount, setStandbyJobsCount] = React.useState(0);
const [countUpdateInterval, setcountUpdateInterval] = React.useState<number>();
const [countUpdateInterval, setCountUpdateInterval] = React.useState<number>();
function UpdateBackendState(){
Job.GetMonitoringJobs(apiUri).then((jobs) => setMonitoringJobsCount(jobs.length));
@ -22,19 +22,19 @@ export default function Footer({connectedToBackend, apiUri} : {connectedToBacken
useEffect(() => {
if(connectedToBackend){
UpdateBackendState();
setcountUpdateInterval(setInterval(() => {
setCountUpdateInterval(setInterval(() => {
UpdateBackendState();
}, 2000));
}else{
clearInterval(countUpdateInterval);
setcountUpdateInterval(undefined);
setCountUpdateInterval(undefined);
}
}, [connectedToBackend]);
return (
<footer>
<div className="statusBadge"><Icon path={mdiEyeCheck} size={1}/> <span>{MonitoringJobsCount}</span></div>
<QueuePopUp apiUri={apiUri}>
<QueuePopUp connectedToBackend={connectedToBackend} apiUri={apiUri}>
<div className="statusBadge hoverHand"><Icon path={mdiTrayFull} size={1}/> <span>{StandbyJobsCount}</span></div>
<div className="statusBadge hoverHand"><Icon path={mdiRun} size={1}/> <span>{RunningJobsCount}</span></div>
</QueuePopUp>

47
Website/modules/QueuePopUp.tsx
View File

@ -1,20 +1,39 @@
import React, {useEffect, useState} from 'react';
import IJob, {JobTypeFromNumber} from "./interfaces/IJob";
import IJob from "./interfaces/IJob";
import '../styles/queuePopUp.css';
import '../styles/popup.css';
import {Job} from "./Job";
import IManga from "./interfaces/IManga";
import IManga, {QueueItem} from "./interfaces/IManga";
import {Manga} from "./Manga";
export default function QueuePopUp({children, apiUri} : {children: JSX.Element[], apiUri: string}) {
export default function QueuePopUp({connectedToBackend, children, apiUri} : {connectedToBackend: boolean, children: JSX.Element[], apiUri: string}) {
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);
const [queueListInterval, setQueueListInterval] = React.useState<number>();
useEffect(() => {
if(!showQueuePopup)
return;
UpdateMonitoringJobsList();
}, [showQueuePopup]);
useEffect(() => {
if(connectedToBackend){
UpdateMonitoringJobsList();
setQueueListInterval(setInterval(() => {
UpdateMonitoringJobsList();
}, 2000));
}else{
clearInterval(queueListInterval);
setQueueListInterval(undefined);
}
}, [connectedToBackend]);
function UpdateMonitoringJobsList(){
Job.GetStandbyJobs(apiUri)
.then((jobs) => {
if(jobs.length > 0)
@ -37,7 +56,7 @@ export default function QueuePopUp({children, apiUri} : {children: JSX.Element[]
//console.debug("Removing Metadata Jobs");
setRunningJobs(jobs.filter(job => job.jobType <= 1));
});
}, []);
}
useEffect(() => {
if(StandbyJobs.length < 1)
@ -65,7 +84,7 @@ export default function QueuePopUp({children, apiUri} : {children: JSX.Element[]
{showQueuePopup
? <div className="popup" id="QueuePopUp">
<div className="popupHeader">
<h1>Queue Status {showQueuePopup ? "true" : "false"}</h1>
<h1>Queue Status</h1>
<img alt="Close Search" className="close" src="../media/close-x.svg"
onClick={() => setShowQueuePopup(false)}/>
</div>
@ -76,12 +95,8 @@ export default function QueuePopUp({children, apiUri} : {children: JSX.Element[]
{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(apiUri, manga.internalId)} alt="Manga Cover" />
<p>{JobTypeFromNumber(job.jobType)}</p>
</div>;
return <div key={"QueueJob-" + job.id}>Error. Could not find matching manga for {job.id}</div>
return QueueItem(apiUri, manga, job, UpdateMonitoringJobsList);
})}
</div>
</div>
@ -91,14 +106,8 @@ export default function QueuePopUp({children, apiUri} : {children: JSX.Element[]
{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(apiUri, manga.internalId)} alt="Manga Cover" />
<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>;
return <div key={"QueueJob-" + job.id}>Error. Could not find matching manga for {job.id}</div>
return QueueItem(apiUri, manga, job, UpdateMonitoringJobsList);
})}
</div>
</div>

32
Website/modules/interfaces/IManga.tsx
View File

@ -5,6 +5,9 @@ import React, {ReactElement} from "react";
import Icon from '@mdi/react';
import { mdiTagTextOutline, mdiAccountEdit } from '@mdi/js';
import MarkdownPreview from '@uiw/react-markdown-preview';
import IJob, {JobTypeFromNumber} from "./IJob";
import {Job} from "../Job";
import ProgressBar from "@ramonak/react-progress-bar";
export default interface IManga{
"sortName": string,
@ -68,4 +71,33 @@ export function SearchResult(apiUri: string, manga: IManga, createJob: (internal
}}>Monitor
</button>
</div>);
}
function ProgressbarStr(job: IJob): string {
return job.progressToken.timeRemaining.substring(0,job.progressToken.timeRemaining.indexOf(".")).concat(" ", ToPercentString(job.progressToken.progress));
}
function ToPercentString(n: number): string {
return n.toString().substring(2,4).concat("%");
}
export function QueueItem(apiUri: string, manga: IManga, job: IJob, triggerUpdate: () => void){
return (
<div className="QueueJob" key={"QueueJob-" + job.id}>
<img src={Manga.GetMangaCoverUrl(apiUri, manga.internalId)} alt="Manga Cover"/>
<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>
{job.progressToken.state === 0
? <ProgressBar labelColor={"#000"} height={"10px"} labelAlignment={"outside"} className="QueueJob-Progressbar" completed={job.progressToken.progress} maxCompleted={1} customLabel={ProgressbarStr(job)}/>
: <div className="QueueJob-Progressbar"></div>}
<div className="QueueJob-actions">
<button className="QueueJob-Cancel" onClick={() => Job.CancelJob(apiUri, job.id).then(triggerUpdate)}>Cancel</button>
{job.parentJobId != null
? <button className="QueueJob-Cancel" onClick={() => Job.CancelJob(apiUri, job.parentJobId!).then(triggerUpdate)}>Cancel all related</button>
: <></>
}
</div>
</div>
);
}

13
Website/modules/interfaces/IProgressToken.tsx
View File

@ -5,6 +5,17 @@ export default interface IProgressToken{
progress: number;
lastUpdate: Date;
executionStarted: Date;
timeRemaining: Date;
timeRemaining: string;
state: number;
}
export function GetProgressStateFromNumber(n: number): string {
switch (n){
case 0: return "Running";
case 1: return "Complete";
case 2: return "Standby";
case 3: return "Cancelled";
case 4: return "Waiting";
}
return "";
}