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

Update JobsList when adding/removing Jobs

Browse Source
This commit is contained in:
glax 2024-10-20 21:29:07 +02:00
parent 7364a20d5d
commit a383ded819
4 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Website/App.tsx
View File

@ -4,7 +4,6 @@ import Search from "./modules/Search";
import Header from "./modules/Header";
import MonitorJobsList from "./modules/MonitorJobsList";
import './styles/index.css'
import {Job} from "./modules/Job";
import IFrontendSettings, {FrontendSettingsWith} from "./modules/interfaces/IFrontendSettings";
import {useCookies} from "react-cookie";
@ -14,6 +13,7 @@ export default function App(){
const [showSearch, setShowSearch] = React.useState(false);
const [frontendSettings, setFrontendSettings] = useState<IFrontendSettings>(FrontendSettingsWith(undefined, undefined, undefined));
const [updateInterval, setUpdateInterval] = React.useState<number>();
const [updateMonitorList, setUpdateMonitorList] = React.useState<Date>(new Date());
const apiUri = frontendSettings.apiUri;
@ -35,9 +35,7 @@ export default function App(){
setCookie('jobInterval', settings.jobInterval);
}
function CreateJob(internalId: string, jobType: string){
Job.CreateJobDateInterval(apiUri, internalId, jobType, frontendSettings.jobInterval);
}
const UpdateList = () => {setUpdateMonitorList(new Date())}
return(<div>
<Header apiUri={apiUri} backendConnected={connected} settings={frontendSettings} changeSettings={ChangeSettings}/>
@ -45,11 +43,11 @@ export default function App(){
? <>
{showSearch
? <>
<Search apiUri={apiUri} createJob={CreateJob} closeSearch={() => setShowSearch(false)} />
<Search apiUri={apiUri} jobInterval={frontendSettings.jobInterval} onJobsChanged={UpdateList} closeSearch={() => setShowSearch(false)} />
<hr/>
</>
: <></>}
<MonitorJobsList apiUri={apiUri} onStartSearch={() => setShowSearch(true)} onJobsChanged={() => console.debug("jobsChanged")} connectedToBackend={connected} />
<MonitorJobsList updateList={updateMonitorList} apiUri={apiUri} onStartSearch={() => setShowSearch(true)} onJobsChanged={UpdateList} connectedToBackend={connected} />
</>
: <h1>No connection to backend</h1>}
<Footer apiUri={apiUri} connectedToBackend={connected} />

8
Website/modules/MonitorJobsList.tsx
View File

@ -8,7 +8,7 @@ import '../styles/MangaCoverCard.css'
import Icon from '@mdi/react';
import { mdiTrashCanOutline, mdiPlayBoxOutline } from '@mdi/js';
export default function MonitorJobsList({onStartSearch, onJobsChanged, connectedToBackend, apiUri} : {onStartSearch() : void, onJobsChanged: EventHandler<any>, connectedToBackend: boolean, apiUri: string}) {
export default function MonitorJobsList({onStartSearch, onJobsChanged, connectedToBackend, apiUri, updateList} : {onStartSearch() : void, onJobsChanged: EventHandler<any>, connectedToBackend: boolean, apiUri: string, updateList: Date}) {
const [MonitoringJobs, setMonitoringJobs] = useState<IJob[]>([]);
const [AllManga, setAllManga] = useState<IManga[]>([]);
const [joblistUpdateInterval, setJoblistUpdateInterval] = React.useState<number>();
@ -40,7 +40,13 @@ export default function MonitorJobsList({onStartSearch, onJobsChanged, connected
}
}, [connectedToBackend]);
useEffect(() => {
UpdateMonitoringJobsList();
}, [updateList]);
function UpdateMonitoringJobsList(){
if(!connectedToBackend)
return;
//console.debug("Updating MonitoringJobsList");
Job.GetMonitoringJobs(apiUri)
.then((jobs) => {

5
Website/modules/Search.tsx
View File

@ -6,14 +6,13 @@ import IManga, {SearchResult} from "./interfaces/IManga";
import '../styles/search.css';
import '../styles/MangaSearchResult.css'
export default function Search({apiUri, createJob, closeSearch} : {apiUri: string, createJob: (internalId: string, type: string) => void, closeSearch(): void}) {
export default function Search({apiUri, jobInterval, onJobsChanged, closeSearch} : {apiUri: string, jobInterval: Date, onJobsChanged: (internalId: string) => void, closeSearch(): void}) {
const [mangaConnectors, setConnectors] = useState<IMangaConnector[]>();
const [selectedConnector, setSelectedConnector] = useState<IMangaConnector>();
const [selectedLanguage, setSelectedLanguage] = useState<string>();
const [searchBoxValue, setSearchBoxValue] = useState("");
const [searchResults, setSearchResults] = useState<IManga[]>();
const pattern = /https:\/\/([a-z0-9.]+\.[a-z0-9]{2,})(?:\/.*)?/i
useEffect(() => {
@ -106,7 +105,7 @@ export default function Search({apiUri, createJob, closeSearch} : {apiUri: strin
<div id="SearchResults">
{searchResults === undefined
? <p></p>
: searchResults.map(result => SearchResult(apiUri, result, createJob))}
: searchResults.map(result => SearchResult(apiUri, result, jobInterval, onJobsChanged))}
</div>
</div>)
}

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

@ -54,7 +54,7 @@ export function CoverCard(apiUri: string, manga: IManga) : ReactElement {
</div>);
}
export function SearchResult(apiUri: string, manga: IManga, createJob: (internalId: string, type: string) => void) : ReactElement {
export function SearchResult(apiUri: string, manga: IManga, interval: Date, onJobsChanged: (internalId: string) => void) : ReactElement {
return(
<div className="SearchResult" key={manga.internalId}>
<img src={Manga.GetMangaCoverUrl(apiUri, manga.internalId)} alt="Manga Cover"></img>
@ -67,7 +67,7 @@ export function SearchResult(apiUri: string, manga: IManga, createJob: (internal
</div>
<MarkdownPreview className="Manga-description" source={manga.description} style={{ backgroundColor: "transparent", color: "black" }} />
<button className="Manga-AddButton" onClick={() => {
createJob(manga.internalId, "MonitorManga")
Job.CreateJobDateInterval(apiUri, manga.internalId, "MonitorManga", interval).then(()=> onJobsChanged(manga.internalId));
}}>Monitor
</button>
</div>);