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 Loader-Spinner

Browse Source 
Style Settings, re-add api-url-field
This commit is contained in:
glax
2025-03-19 02:37:36 +01:00
parent 0b0abb3801
commit 1d8dd7381d
26 changed files with 1041 additions and 629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Website/modules/Footer.tsx
View File

@ -6,12 +6,12 @@ import {mdiCounter, mdiEyeCheck, mdiRun, mdiTrayFull} from '@mdi/js';
import QueuePopUp from "./QueuePopUp";
import {JobState, JobType} from "./interfaces/Jobs/IJob";
export default function Footer({connectedToBackend, apiUri} : {connectedToBackend: boolean, apiUri: string}) {
export default function Footer({connectedToBackend, apiUri, checkConnectedInterval} : {connectedToBackend: boolean, apiUri: string, checkConnectedInterval: number}) {
const [MonitoringJobsCount, setMonitoringJobsCount] = React.useState(0);
const [AllJobsCount, setAllJobsCount] = React.useState(0);
const [RunningJobsCount, setRunningJobsCount] = React.useState(0);
const [WaitingJobsCount, setWaitingJobs] = React.useState(0);
const [countUpdateInterval, setCountUpdateInterval] = React.useState<number>();
const [countUpdateInterval, setCountUpdateInterval] = React.useState<number | undefined>(undefined);
function UpdateBackendState(){
JobFunctions.GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jobs) => setMonitoringJobsCount(jobs.length));
@ -23,9 +23,11 @@ export default function Footer({connectedToBackend, apiUri} : {connectedToBacken
useEffect(() => {
if(connectedToBackend){
UpdateBackendState();
setCountUpdateInterval(setInterval(() => {
UpdateBackendState();
}, 2000));
if(countUpdateInterval === undefined){
setCountUpdateInterval(setInterval(() => {
UpdateBackendState();
}, checkConnectedInterval));
}
}else{
clearInterval(countUpdateInterval);
setCountUpdateInterval(undefined);
@ -36,7 +38,7 @@ export default function Footer({connectedToBackend, apiUri} : {connectedToBacken
<footer>
<div className="statusBadge" ><Icon path={mdiEyeCheck} size={1}/> <span>{MonitoringJobsCount}</span></div>
<span>+</span>
<QueuePopUp connectedToBackend={connectedToBackend} apiUri={apiUri}>
<QueuePopUp connectedToBackend={connectedToBackend} apiUri={apiUri} checkConnectedInterval={checkConnectedInterval}>
<div className="statusBadge hoverHand"><Icon path={mdiRun} size={1}/> <span>{RunningJobsCount}</span>
</div>
<span>+</span>

4
Website/modules/Header.tsx
View File

@ -3,13 +3,13 @@ import '../styles/header.css'
import IFrontendSettings from "./interfaces/IFrontendSettings";
import Settings from "./Settings";
export default function Header({backendConnected, apiUri, settings} : {backendConnected: boolean, apiUri: string, settings: IFrontendSettings}){
export default function Header({backendConnected, apiUri, settings, setFrontendSettings} : {backendConnected: boolean, apiUri: string, settings: IFrontendSettings, setFrontendSettings: (settings: IFrontendSettings) => void}){
return (
<header>
<div id="titlebox">
<img alt="website image is Blahaj" src="../media/blahaj.png"/>
<span>Tranga</span>
</div>
<Settings backendConnected={backendConnected} apiUri={apiUri} settings={settings} />
<Settings backendConnected={backendConnected} apiUri={apiUri} frontendSettings={settings} setFrontendSettings={setFrontendSettings} />
</header>)
}

6
Website/modules/Loader.tsx Normal file
View File

@ -0,0 +1,6 @@
import "../styles/loader.css";
import {CSSProperties} from "react";
export default function Loader({loading, style} : {loading: boolean, style?:CSSProperties|null}) {
return <span is-loading={loading ? "loading" : "done"} style={style ? style : undefined}></span>
}

1
Website/modules/LocalLibraryFunctions.tsx
View File

@ -8,7 +8,6 @@ export default class LocalLibraryFunctions
return getData(`${apiUri}/v2/LocalLibraries`)
.then((json) => {
const ret = json as ILocalLibrary[];
console.debug(ret);
return (ret);
});
}

2
Website/modules/MangaFunctions.tsx
View File

@ -139,7 +139,7 @@ export default class MangaFunctions
console.error(`chapterThreshold was not provided`);
return Promise.reject();
}
return patchData(`${apiUri}/v2/Manga/${mangaId}/IgnoreChaptersBefore`, {chapterThreshold});
return patchData(`${apiUri}/v2/Manga/${mangaId}/IgnoreChaptersBefore`, chapterThreshold);
}
static async MoveFolder(apiUri: string, mangaId: string, newPath: string): Promise<object> {

31
Website/modules/MonitorJobsList.tsx
View File

@ -7,40 +7,45 @@ import IDownloadAvailableChaptersJob from "./interfaces/Jobs/IDownloadAvailableC
import {MangaItem} from "./interfaces/IManga";
import MangaFunctions from "./MangaFunctions";
export default function MonitorJobsList({onStartSearch, onJobsChanged, connectedToBackend, apiUri, updateList} : {onStartSearch() : void, onJobsChanged: EventHandler<any>, connectedToBackend: boolean, apiUri: string, updateList: Date}) {
export default function MonitorJobsList({onStartSearch, connectedToBackend, apiUri, checkConnectedInterval} : {onStartSearch() : void, connectedToBackend: boolean, apiUri: string, checkConnectedInterval: number}) {
const [MonitoringJobs, setMonitoringJobs] = useState<IDownloadAvailableChaptersJob[]>([]);
const [joblistUpdateInterval, setJoblistUpdateInterval] = React.useState<number>();
const [joblistUpdateInterval, setJoblistUpdateInterval] = React.useState<number | undefined>(undefined);
useEffect(() => {
if(connectedToBackend){
if(connectedToBackend) {
UpdateMonitoringJobsList();
setJoblistUpdateInterval(setInterval(() => {
UpdateMonitoringJobsList();
}, 1000));
if(joblistUpdateInterval === undefined){
setJoblistUpdateInterval(setInterval(() => {
UpdateMonitoringJobsList();
}, checkConnectedInterval));
}
}else{
clearInterval(joblistUpdateInterval);
setJoblistUpdateInterval(undefined);
}
}, [connectedToBackend]);
useEffect(() => {
UpdateMonitoringJobsList();
}, [updateList]);
function UpdateMonitoringJobsList(){
if(!connectedToBackend)
return;
//console.debug("Updating MonitoringJobsList");
JobFunctions.GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob)
.then((jobs) => setMonitoringJobs(jobs as IDownloadAvailableChaptersJob[]));
.then((jobs) => jobs as IDownloadAvailableChaptersJob[])
.then((jobs) => {
if(jobs.length != MonitoringJobs.length ||
MonitoringJobs.filter(j => jobs.find(nj => nj.jobId == j.jobId)).length > 1 ||
jobs.filter(nj => MonitoringJobs.find(j => nj.jobId == j.jobId)).length > 1){
setMonitoringJobs(jobs);
}
});
}
function StartSearchMangaEntry() : ReactElement {
return (<div key="monitorMangaEntry.StartSearch" className="startSearchEntry MangaItem" onClick={onStartSearch}>
<img className="MangaItem-Cover" src="../media/blahaj.png" alt="Blahaj"></img>
<div>
<p style={{textAlign: "center", width: "100%"}} className="MangaItem-Name">Add new Manga</p>
<p style={{fontSize: "42pt", textAlign: "center"}}>+</p>
<div style={{margin: "30px auto", color: "black", textShadow: "1px 2px #f5a9b8"}} className="MangaItem-Name">Add new Manga</div>
<div style={{fontSize: "42pt", textAlign: "center", textShadow: "1px 2px #5bcefa"}}>+</div>
</div>
</div>);
}

22
Website/modules/QueuePopUp.tsx
View File

@ -1,4 +1,4 @@
import React, {useEffect, useState} from 'react';
import React, {ReactElement, useEffect, useState} from 'react';
import IJob, {JobState, JobType} from "./interfaces/Jobs/IJob";
import '../styles/queuePopUp.css';
import '../styles/popup.css';
@ -6,25 +6,21 @@ import JobFunctions from "./JobFunctions";
import IDownloadSingleChapterJob from "./interfaces/Jobs/IDownloadSingleChapterJob";
import {ChapterItem} from "./interfaces/IChapter";
export default function QueuePopUp({connectedToBackend, children, apiUri} : {connectedToBackend: boolean, children: JSX.Element[], apiUri: string}) {
export default function QueuePopUp({connectedToBackend, children, apiUri, checkConnectedInterval} : {connectedToBackend: boolean, children: ReactElement[], apiUri: string, checkConnectedInterval: number}) {
const [WaitingJobs, setWaitingJobs] = React.useState<IJob[]>([]);
const [RunningJobs, setRunningJobs] = React.useState<IJob[]>([]);
const [showQueuePopup, setShowQueuePopup] = useState<boolean>(false);
const [queueListInterval, setQueueListInterval] = React.useState<number>();
const [queueListInterval, setQueueListInterval] = React.useState<number | undefined>(undefined);
useEffect(() => {
if(!showQueuePopup)
return;
UpdateMonitoringJobsList();
}, [showQueuePopup]);
useEffect(() => {
if(connectedToBackend){
if(connectedToBackend) {
UpdateMonitoringJobsList();
setQueueListInterval(setInterval(() => {
UpdateMonitoringJobsList();
}, 2000));
if(queueListInterval === undefined){
setQueueListInterval(setInterval(() => {
UpdateMonitoringJobsList();
}, checkConnectedInterval));
}
}else{
clearInterval(queueListInterval);
setQueueListInterval(undefined);

37
Website/modules/Search.tsx
View File

@ -8,8 +8,9 @@ import SearchFunctions from "./SearchFunctions";
import JobFunctions from "./JobFunctions";
import ILocalLibrary from "./interfaces/ILocalLibrary";
import LocalLibraryFunctions from "./LocalLibraryFunctions";
import Loader from "./Loader";
export default function Search({apiUri, jobInterval, onJobsChanged, closeSearch} : {apiUri: string, jobInterval: Date, onJobsChanged: (internalId: string) => void, closeSearch(): void}) {
export default function Search({apiUri, jobInterval, closeSearch} : {apiUri: string, jobInterval: Date, closeSearch(): void}) {
const [mangaConnectors, setConnectors] = useState<IMangaConnector[]>();
const [selectedConnector, setSelectedConnector] = useState<IMangaConnector>();
const [selectedLanguage, setSelectedLanguage] = useState<string>();
@ -19,11 +20,8 @@ export default function Search({apiUri, jobInterval, onJobsChanged, closeSearch}
const pattern = /https:\/\/([a-z0-9.]+\.[a-z0-9]{2,})(?:\/.*)?/i
useEffect(() => {
if(mangaConnectors === undefined) {
MangaConnectorFunctions.GetAllConnectors(apiUri).then(setConnectors)
return;
}
}, [mangaConnectors]);
MangaConnectorFunctions.GetAllConnectors(apiUri).then(setConnectors).then(() => setLoading(false));
}, []);
const selectedConnectorChanged : ChangeEventHandler<HTMLSelectElement> = (event) => {
event.preventDefault();
@ -73,22 +71,26 @@ export default function Search({apiUri, jobInterval, onJobsChanged, closeSearch}
console.error("URL in Searchbox detected, but does not match selected connector.");
return;
}
setLoading(true);
if(!isValidUri(searchBoxValue)){
SearchFunctions.SearchNameOnConnector(apiUri, selectedConnector.name, searchBoxValue)
.then((mangas: IManga[]) => {
setSearchResults(mangas);
});
})
.finally(()=>setLoading(false));
}else{
SearchFunctions.SearchUrl(apiUri, searchBoxValue)
.then((manga: IManga) => {
setSearchResults([manga]);
});
})
.finally(()=>setLoading(false));
}
}
const changeSelectedLanguage : ChangeEventHandler<HTMLSelectElement> = (event) => setSelectedLanguage(event.target.value);
let [selectedLibrary, setSelectedLibrary] = useState<ILocalLibrary | null>(null);
let [libraries, setLibraries] = useState<ILocalLibrary[] | null>(null);
let [loading, setLoading] = useState<boolean>(true);
useEffect(() => {
LocalLibraryFunctions.GetLibraries(apiUri).then(setLibraries);
}, []);
@ -111,36 +113,37 @@ export default function Search({apiUri, jobInterval, onJobsChanged, closeSearch}
return (<div id="Search">
<div id="SearchBox">
<input type="text" placeholder="Manganame" id="Searchbox-Manganame" onKeyDown={(e) => {if(e.key == "Enter") ExecuteSearch(null);}} onChange={searchBoxValueChanged}></input>
<select id="Searchbox-Connector" value={selectedConnector === undefined ? "" : selectedConnector.name} onChange={selectedConnectorChanged}>
<input type="text" placeholder="Manganame" id="Searchbox-Manganame" onKeyDown={(e) => {if(e.key == "Enter") ExecuteSearch(null);}} onChange={searchBoxValueChanged} disabled={loading} />
<select id="Searchbox-Connector" value={selectedConnector === undefined ? "" : selectedConnector.name} onChange={selectedConnectorChanged} disabled={loading}>
{mangaConnectors === undefined ? <option value="Loading">Loading</option> : <option value="" disabled hidden>Select</option>}
{mangaConnectors === undefined
? null
: mangaConnectors.map(con => <option value={con.name} key={con.name}>{con.name}</option>)}
</select>
<select id="Searchbox-language" onChange={changeSelectedLanguage} value={selectedLanguage === null ? "" : selectedLanguage}>
<select id="Searchbox-language" onChange={changeSelectedLanguage} value={selectedLanguage === null ? "" : selectedLanguage} disabled={loading}>
{mangaConnectors === undefined ? <option value="Loading">Loading</option> : <option value="" disabled hidden>Select Connector</option>}
{selectedConnector === undefined
? null
: selectedConnector.supportedLanguages.map(language => <option value={language} key={language}>{language}</option>)}
</select>
<button id="Searchbox-button" type="submit" onClick={ExecuteSearch}>Search</button>
<button id="Searchbox-button" type="submit" onClick={ExecuteSearch} disabled={loading}>Search</button>
<Loader loading={loading} style={{width:"40px", height:"40px"}}/>
</div>
<img alt="Close Search" id="closeSearch" src="../media/close-x.svg" onClick={closeSearch} />
<div id="SearchResults">
{searchResults === undefined
? <p></p>
: searchResults.map(result =>
<MangaItem apiUri={apiUri} mangaId={result.mangaId}>
? null
: searchResults.map(result => {
return <MangaItem apiUri={apiUri} mangaId={result.mangaId} >
<select defaultValue={selectedLibrary === null ? "" : selectedLibrary.localLibraryId} onChange={selectedLibraryChanged}>
{selectedLibrary === null || libraries === null ? <option value="">Loading</option>
: libraries.map(library => <option key={library.localLibraryId} value={library.localLibraryId}>{library.libraryName} ({library.basePath})</option>)}
</select>
<button className="Manga-AddButton" onClick={() => {
JobFunctions.CreateDownloadAvailableChaptersJob(apiUri, result.mangaId, {recurrenceTimeMs: jobInterval.getTime(), localLibraryId: selectedLibrary!.localLibraryId}).then(() => onJobsChanged(result.mangaId));
JobFunctions.CreateDownloadAvailableChaptersJob(apiUri, result.mangaId, {recurrenceTimeMs: jobInterval.getTime(), localLibraryId: selectedLibrary!.localLibraryId});
}}>Monitor</button>
</MangaItem>
)
})
}
</div>
</div>);

20
Website/modules/Settings.tsx
View File

@ -5,7 +5,7 @@ import React, {useEffect, useState} from "react";
import INotificationConnector, {NotificationConnectorItem} from "./interfaces/INotificationConnector";
import NotificationConnectorFunctions from "./NotificationConnectorFunctions";
export default function Settings({backendConnected, apiUri, settings} : {backendConnected: boolean, apiUri: string, settings: IFrontendSettings}) {
export default function Settings({backendConnected, apiUri, frontendSettings, setFrontendSettings} : {backendConnected: boolean, apiUri: string, frontendSettings: IFrontendSettings, setFrontendSettings: (settings: IFrontendSettings) => void}) {
let [showSettings, setShowSettings] = useState<boolean>(false);
let [notificationConnectors, setNotificationConnectors] = useState<INotificationConnector[]>([]);
@ -15,6 +15,7 @@ export default function Settings({backendConnected, apiUri, settings} : {backend
NotificationConnectorFunctions.GetNotificationConnectors(apiUri).then(setNotificationConnectors);
}, []);
return (
<div id="Settings">
<div onClick={() => setShowSettings(true)}>
@ -27,6 +28,23 @@ export default function Settings({backendConnected, apiUri, settings} : {backend
<img alt="Close Settings" className="close" src="../media/close-x.svg" onClick={() => setShowSettings(false)}/>
</div>
<div id="SettingsPopUpBody" className="popupBody">
<div className="settings-apiuri">
<label>ApiUri</label>
<input type="url" defaultValue={frontendSettings.apiUri} onChange={(e) => {
let newSettings = frontendSettings;
newSettings.apiUri = e.currentTarget.value;
setFrontendSettings(newSettings);
}} id="ApiUri" />
</div>
<div className="settings-apiuri">
<label>Default Job-Interval</label>
<input type="time" defaultValue={new Date(frontendSettings.jobInterval).getTime()} onChange={(e) => {
let newSettings = frontendSettings;
newSettings.jobInterval = e.currentTarget.valueAsDate ?? frontendSettings.jobInterval;
setFrontendSettings(newSettings);
console.log(frontendSettings);
}}/>
</div>
{notificationConnectors.map(c => <NotificationConnectorItem apiUri={apiUri} notificationConnector={c} />)}
<NotificationConnectorItem apiUri={apiUri} notificationConnector={null} />
</div>

11
Website/modules/interfaces/IAuthor.tsx
View File

@ -7,18 +7,17 @@ export default interface IAuthor {
}
export function AuthorElement({apiUri, authorId} : {apiUri: string, authorId: string | null}) : ReactElement{
if(authorId === null)
return (<p className="Manga-Author-Name">Author</p>);
let [name, setName] = React.useState<string>(authorId);
let [author, setAuthor] = React.useState<IAuthor | null>(null);
useEffect(()=> {
if(authorId === null)
return;
getData(`${apiUri}/v2/Query/Author/${authorId}`)
.then((json) => {
let ret = json as IAuthor;
setName(ret.authorName);
setAuthor(ret);
});
}, [])
return (<p className="Manga-Author-Name">{name}</p>);
return (<span className="Manga-Author-Name">{author ? author.authorName : authorId}</span>);
}

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

@ -8,20 +8,17 @@ export default interface ILink {
}
export function LinkElement({apiUri, linkId} : {apiUri: string, linkId: string | null}) : ReactElement{
if(linkId === null)
return (<a className="Manga-Link-Value" href="#">Link</a>);
let [provider, setProvider] = React.useState<string>(linkId);
let [linkUrl, setLinkUrl] = React.useState<string>("");
let [link, setLink] = React.useState<ILink | null>(null);
useEffect(()=> {
if(linkId === null)
return;
getData(`${apiUri}/v2/Query/Link/${linkId}`)
.then((json) => {
let ret = json as ILink;
setProvider(ret.linkProvider);
setLinkUrl(ret.linkUrl);
setLink(ret);
});
}, [])
return (<a className="Manga-Link-Value" href={linkUrl}>{provider}</a>);
return (<a className="Manga-Link-Value" href={link ? link.linkUrl : "#"}>{link ? link.linkProvider : linkId}</a>);
}

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

@ -5,6 +5,8 @@ import { mdiTagTextOutline, mdiAccountEdit, mdiLinkVariant } from '@mdi/js';
import MarkdownPreview from '@uiw/react-markdown-preview';
import {AuthorElement} from "./IAuthor";
import {LinkElement} from "./ILink";
import IChapter from "./IChapter";
import Loader from "../Loader";
export default interface IManga{
mangaId: string;
@ -40,56 +42,87 @@ export function MangaItem({apiUri, mangaId, children} : {apiUri: string, mangaId
let [manga, setManga] = useState<IManga | null>(null);
let [clicked, setClicked] = useState<boolean>(false);
let [latestChapterDownloaded, setLatestChapterDownloaded] = useState<IChapter | null>(null);
let [latestChapterAvailable, setLatestChapterAvailable] = useState<IChapter | null>(null);
let [loadingChapterStats, setLoadingChapterStats] = useState<boolean>(true);
let [settingThreshold, setSettingThreshold] = useState<boolean>(false);
const invalidTargets = ["input", "textarea", "button", "select", "a"];
useEffect(() => {
MangaFunctions.GetMangaById(apiUri, mangaId).then(setManga);
MangaFunctions.GetLatestChapterDownloaded(apiUri, mangaId)
.then(setLatestChapterDownloaded)
.finally(() => {
if(latestChapterDownloaded && latestChapterAvailable)
setLoadingChapterStats(false);
});
MangaFunctions.GetLatestChapterAvailable(apiUri, mangaId)
.then(setLatestChapterAvailable)
.finally(() => {
if(latestChapterDownloaded && latestChapterAvailable)
setLoadingChapterStats(false);
});
}, []);
return (<div className="MangaItem" key={mangaId} is-clicked={clicked ? "clicked" : "not-clicked"} onClick={()=>setClicked(!clicked)}>
<img className="MangaItem-Cover" src={MangaFunctions.GetMangaCoverImageUrl(apiUri, mangaId, undefined)} alt="MangaFunctions Cover" onLoad={LoadMangaCover} onResize={LoadMangaCover}></img>
<p className="MangaItem-Connector">{manga ? manga.mangaConnectorId : "Connector"}</p>
<p className="MangaItem-Status" release-status={manga?.releaseStatus}></p>
<p className="MangaItem-Name">{manga ? manga.name : "Name"}</p>
return (<div className="MangaItem" key={mangaId} is-clicked={clicked ? "clicked" : "not-clicked"} onClick={(e)=> {
e.preventDefault();
const target = e.target as HTMLElement;
if(invalidTargets.find(x => x == target.localName) === undefined )
setClicked(!clicked)
}}>
<img className="MangaItem-Cover" src="../../media/blahaj.png" alt="MangaFunctions Cover" onLoad={LoadMangaCover} onResize={LoadMangaCover}></img>
<div className="MangaItem-Connector">{manga ? manga.mangaConnectorId : "Connector"}</div>
<div className="MangaItem-Status" release-status={manga?.releaseStatus}></div>
<div className="MangaItem-Name">{manga ? manga.name : "Name"}</div>
<a className="MangaItem-Website" href={manga ? manga.websiteUrl : "#"}><img src="../../media/link.svg" alt="Link"/></a>
<div className="MangaItem-Tags">
{manga ? manga.authorIds.map(authorId =>
<p className="MangaItem-Author" key={authorId} >
<div className="MangaItem-Author" key={authorId} >
<Icon path={mdiAccountEdit} size={0.5} />
<AuthorElement apiUri={apiUri} authorId={authorId}></AuthorElement>
</p>)
</div>)
:
<p className="MangaItem-Author">
<div className="MangaItem-Author" key="null-Author">
<Icon path={mdiAccountEdit} size={0.5} />
<AuthorElement apiUri={apiUri} authorId={null}></AuthorElement>
</p>}
</div>}
{manga ? manga.tags.map(tag =>
<p className="MangaItem-Tag" key={tag}>
<div className="MangaItem-Tag" key={tag}>
<Icon path={mdiTagTextOutline} size={0.5}/>
<p className="MangaItem-Tag-Value">{tag}</p>
</p>)
<span className="MangaItem-Tag-Value">{tag}</span>
</div>)
:
<p className="MangaItem-Tag">
<div className="MangaItem-Tag" key="null-Tag">
<Icon path={mdiTagTextOutline} size={0.5}/>
<p className="MangaItem-Tag-Value">Tag</p>
</p>
<span className="MangaItem-Tag-Value">Tag</span>
</div>
}
{manga ? manga.linkIds.map(linkId =>
<p className="MangaItem-Link" key={linkId}>
<div className="MangaItem-Link" key={linkId}>
<Icon path={mdiLinkVariant} size={0.5}/>
<LinkElement apiUri={apiUri} linkId={linkId} />
</p>)
</div>)
:
<p className="MangaItem-Link">
<div className="MangaItem-Link" key="null-Link">
<Icon path={mdiLinkVariant} size={0.5}/>
<LinkElement apiUri={apiUri} linkId={null} />
</p>}
</div>}
</div>
<MarkdownPreview className="MangaItem-Description" source={manga ? manga.description : "# Description"} />
<div className="MangaItem-Props">
<div className="MangaItem-Props-Threshold">
Start at Chapter
<input type="text" defaultValue={latestChapterDownloaded ? latestChapterDownloaded.chapterNumber : ""} disabled={settingThreshold} onChange={(e) => {
setSettingThreshold(true);
MangaFunctions.SetIgnoreThreshold(apiUri, mangaId, e.currentTarget.valueAsNumber).finally(()=>setSettingThreshold(false));
}} />
<Loader loading={settingThreshold} />
out of <span className="MangaItem-Props-Threshold-Available">{latestChapterAvailable ? latestChapterAvailable.chapterNumber : <Loader loading={loadingChapterStats}/>}</span>
</div>
{children ? children.map(c => {
if(c instanceof Element)
return c as ReactElement;
else
return <span>{c}</span>
return c
}) : null}
</div>
</div>)

5
Website/modules/interfaces/IMangaAltTitle.ts
View File

@ -1,5 +0,0 @@
export default interface IMangaAltTitle {
altTitleId: string;
language: string;
title: string;
}

25
Website/modules/interfaces/IMangaAltTitle.tsx Normal file
View File

@ -0,0 +1,25 @@
import React, {ReactElement, useEffect} from "react";
import {getData} from "../../App";
import IAuthor from "./IAuthor";
export default interface IMangaAltTitle {
altTitleId: string;
language: string;
title: string;
}
export function AltTitleElement({apiUri, altTitleId} : {apiUri: string, altTitleId: string | null}) : ReactElement{
let [altTitle, setAltTitle] = React.useState<IMangaAltTitle | null>(null);
useEffect(()=> {
if(altTitleId === null)
return;
getData(`${apiUri}/v2/Query/AltTitle/${altTitleId}`)
.then((json) => {
let ret = json as IMangaAltTitle;
setAltTitle(ret);
});
}, [])
return (<span className="Manga-AltTitle">{altTitle ? altTitle.title : altTitleId}</span>);
}

71
Website/modules/interfaces/INotificationConnector.tsx
View File

@ -1,4 +1,7 @@
import {ReactElement, ReactEventHandler, useState} from "react";
import "../../styles/notificationConnector.css";
import Loader from "../Loader";
import NotificationConnectorFunctions from "../NotificationConnectorFunctions";
export default interface INotificationConnector {
name: string;
@ -9,49 +12,77 @@ export default interface INotificationConnector {
}
export function NotificationConnectorItem({apiUri, notificationConnector} : {apiUri: string, notificationConnector: INotificationConnector | null}) : ReactElement {
const Save : ReactEventHandler<HTMLButtonElement> = (e) => {
}
const AddHeader : ReactEventHandler<HTMLButtonElement> = (e) => {
const div = e.currentTarget.parentElement as HTMLDivElement;
setHeaderElements([...headerElements, <HeaderElement record={null} />])
let header : Record<string, string> = {};
let x = info;
x.headers = [header, ...x.headers];
setInfo(x);
setHeaderElements([...headerElements, <HeaderElement record={header} />])
}
const [headerElements, setHeaderElements] = useState<ReactElement[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [info, setInfo] = useState<INotificationConnector>({
name: "",
url: "",
headers: [],
httpMethod: "",
body: ""
});
return (<div className="NotificationConnectorItem" key={notificationConnector ? notificationConnector.name : "new"}>
<p className="NotificationConnectorItem-Name">{notificationConnector ? notificationConnector.name : "New Notification Connector"}</p>
<select className="NotificationConnectorItem-RequestMethod" defaultValue={notificationConnector ? notificationConnector.httpMethod : ""} disabled={notificationConnector != null}>
<option value="" disabled hidden>Request Method</option>
<option value="GET">GET</option>
<option value="POST">POST</option>
</select>
<input type="url" className="NotificationConnectorItem-Url" placeholder="URL" value={notificationConnector ? notificationConnector.url : ""} disabled={notificationConnector != null} />
<textarea className="NotificationConnectorItem-Body" placeholder="Request-Body" value={notificationConnector ? notificationConnector.body : ""} disabled={notificationConnector != null} />
<div className="NotificationConnectorItem-Url">
<select className="NotificationConnectorItem-RequestMethod" defaultValue={notificationConnector ? notificationConnector.httpMethod : ""} disabled={notificationConnector != null} onChange={(e) => {
let x = info;
x.httpMethod = e.currentTarget.value;
setInfo(x);
}}>
<option value="" disabled hidden>Request Method</option>
<option value="GET">GET</option>
<option value="POST">POST</option>
</select>
<input type="url" className="NotificationConnectorItem-RequestUrl" placeholder="URL" defaultValue={notificationConnector ? notificationConnector.url : ""} disabled={notificationConnector != null} onChange={(e) => {
let x = info;
x.url = e.currentTarget.value;
setInfo(x);
}} />
</div>
<textarea className="NotificationConnectorItem-Body" placeholder="Request-Body" defaultValue={notificationConnector ? notificationConnector.body : ""} disabled={notificationConnector != null} onChange={(e) => {
let x = info;
x.body = e.currentTarget.value;
setInfo(x);
}} />
{notificationConnector != null ? null :
(
<p className="NotificationConnectorItem-Explanation">Explanation Text</p>
)}
<div className="NotificationConnectorItem-Headers">
{headerElements}
{notificationConnector
? notificationConnector.headers.map((h: Record<string, string>) =>
(<HeaderElement record={h} />)
(<HeaderElement record={h} disabled={notificationConnector != null}/>)
) :
(
<button className="NotificationConnectorItem-AddHeader" onClick={AddHeader}>Add Header</button>
)
}
{headerElements}
</div>
{notificationConnector != null ? null : (
<button className="NotificationConnectorItem-Save" onClick={Save}>Save</button>
<>
<button className="NotificationConnectorItem-Save" onClick={(e) => {
setLoading(true);
NotificationConnectorFunctions.CreateNotificationConnector(apiUri, info)
.finally(() => setLoading(false));
}}>Add</button>
<Loader loading={loading} style={{width:"40px",height:"40px",margin:"calc(sin(70)*(50% - 40px))"}}/>
</>
)}
</div>);
}
function HeaderElement({record} : {record: Record<string, string> | null}) : ReactElement {
return <div className="NotificationConnectorItem-Header" key={"newHeader"}>
<input type="text" className="NotificationConnectorItem-Header-Key" placeholder="Header-Key" value={record ? record.name : ""} disabled={record != null} />
<input type="text" className="NotificationConnectorItem-Header-Value" placeholder="Header-Value" value={record ? record.value : ""} disabled={record != null} />
function HeaderElement({record, disabled} : {record: Record<string, string>, disabled?: boolean | null}) : ReactElement {
return <div className="NotificationConnectorItem-Header" key={record.name}>
<input type="text" className="NotificationConnectorItem-Header-Key" placeholder="Header-Key" defaultValue={record.name} disabled={disabled?disabled:false} onChange={(e) => record.name = e.currentTarget.value}/>
<input type="text" className="NotificationConnectorItem-Header-Value" placeholder="Header-Value" defaultValue={record.value} disabled={disabled?disabled:false} onChange={(e) => record.value = e.currentTarget.value} />
</div>;
}