diff --git a/Website/App.tsx b/Website/App.tsx index 818893e..07c7658 100644 --- a/Website/App.tsx +++ b/Website/App.tsx @@ -2,6 +2,8 @@ import React, {ReactElement, useEffect} from 'react'; import Footer from "./modules/Footer"; import Search from "./modules/Search"; import Header from "./modules/Header"; +import MonitorJobsList from "./modules/MonitorJobsList"; +import './styles/Manga.css' export default function App(){ const [content, setContent] = React.useState(); @@ -13,7 +15,10 @@ export default function App(){ if(result === null){ setContent(

No connection to backend

); }else{ - setContent() + setContent(<> + + + ) } }) }, []); diff --git a/Website/modules/MonitorJobsList.tsx b/Website/modules/MonitorJobsList.tsx new file mode 100644 index 0000000..046c5f2 --- /dev/null +++ b/Website/modules/MonitorJobsList.tsx @@ -0,0 +1,57 @@ +import React, {MouseEventHandler, useEffect} from 'react'; +import {Job} from './Job'; +import '../styles/monitorMangaList.css'; +import IJob from "./interfaces/IJob"; +import IManga, {HTMLFromIManga} from "./interfaces/IManga"; +import {Manga} from './Manga'; + +export default function MonitorJobsList(){ + const [MonitoringJobs, setMonitoringJobs] = React.useState([]); + const [AllManga, setAllManga] = React.useState([]); + + function UpdateMonitoringJobsList(){ + Job.GetMonitoringJobs() + .then((jobs) => { + if(jobs.length > 0) + return Job.GetJobs(jobs) + return []; + }) + .then((jobs) => setMonitoringJobs(jobs)); + } + + useEffect(() => { + //Remove all Manga that are not associated with a Job + setAllManga(AllManga.filter(manga => MonitoringJobs.find(job => job.mangaInternalId == manga.internalId))); + //Fetch Manga that are missing (from Jobs) + if(MonitoringJobs === null) + return; + MonitoringJobs.forEach(job => { + if(AllManga.find(manga => manga.internalId == job.mangaInternalId)) + return; + Manga.GetMangaById(job.mangaInternalId).then((manga: IManga) => setAllManga([...AllManga, manga])); + }); + }, [MonitoringJobs]); + + useEffect(() => { + UpdateMonitoringJobsList(); + }, []); + + const DeleteJob:MouseEventHandler = (e) => { + const jobId = e.currentTarget.id; + Job.DeleteJob(jobId); + } + + return ( +
+ {AllManga.map((manga: IManga) => { + const job = MonitoringJobs.find(job => job.mangaInternalId == manga.internalId); + if(job === undefined || job == null) + return
Error. Could not find matching job for {manga.internalId}
+ return
+ {HTMLFromIManga(manga)} + {job.id} + +
; + })} +
) +} \ No newline at end of file diff --git a/Website/modules/Search.tsx b/Website/modules/Search.tsx index da280d7..64969ae 100644 --- a/Website/modules/Search.tsx +++ b/Website/modules/Search.tsx @@ -1,5 +1,6 @@ import React, { ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react'; import {MangaConnector} from "./MangaConnector"; +import {Job} from "./Job"; import IMangaConnector from "./interfaces/IMangaConnector"; import {isValidUri} from "../App"; import IManga, {HTMLFromIManga} from "./interfaces/IManga"; diff --git a/Website/styles/monitorMangaList.css b/Website/styles/monitorMangaList.css new file mode 100644 index 0000000..f4ccfb0 --- /dev/null +++ b/Website/styles/monitorMangaList.css @@ -0,0 +1,11 @@ +#MonitorMangaList { + position: relative; + display: flex; + flex-flow: row; + flex-wrap: nowrap; + flex-grow: 1; + height: 100%; + overflow-y: scroll; + scrollbar-color: var(--accent-color) var(--primary-color); + scrollbar-width: thin; +} \ No newline at end of file