@mui/joy

README.md

@@ -4,7 +4,7 @@
 <h3 align="center">Tranga-Website</h3>
 
   <p align="center">
-    Automatic MangaFunctions and Metadata downloader 
+    Automatic Manga and Metadata downloader 
   </p>
   <p align="center">
     This is the Website for <a href="https://github.com/C9Glax/tranga">Tranga</a> (API)  

Website/App.tsx

@@ -4,9 +4,10 @@ import Search from "./modules/Search";
 import Header from "./modules/Header";
 import MonitorJobsList from "./modules/MonitorJobsList";
 import './styles/index.css'
-import IFrontendSettings, {LoadFrontendSettings} from "./modules/interfaces/IFrontendSettings";
 import {useCookies} from "react-cookie";
 import Loader from "./modules/Loader";
+import IFrontendSettings from "./modules/types/IFrontendSettings";
+import {LoadFrontendSettings} from "./modules/api/FrontendSettings";
 
 export default function App(){
     const [, setCookie] = useCookies(['apiUri', 'jobInterval']);

Website/modules/Elements/Author.tsx

@@ -1,18 +1,14 @@
 import React, {ReactElement, useEffect} from "react";
 import {getData} from "../../App";
+import IAuthor from "../types/IAuthor";
 
-export default interface IAuthor {
+export default function AuthorElement({apiUri, authorId} : {apiUri: string, authorId: string | null}) : ReactElement{
-    authorId: string;
-    authorName: string;
-}
-
-export function AuthorElement({apiUri, authorId} : {apiUri: string, authorId: string | null}) : ReactElement{
     let [author, setAuthor] = React.useState<IAuthor | null>(null);
 
     useEffect(()=> {
         if(authorId === null)
             return;
-        getData(`${apiUri}/v2/Query/Author/${authorId}`)
+        getData(`${apiUri}/v2/Query/AuthorTag/${authorId}`)
             .then((json) => {
                 let ret = json as IAuthor;
                 setAuthor(ret);

Website/modules/Elements/Chapter.tsx

@@ -1,20 +1,10 @@
 import React, {ReactElement, ReactEventHandler, useEffect, useState} from "react";
-import MangaFunctions from "../MangaFunctions";
+import Manga from "../api/Manga";
-import IManga from "./IManga";
+import Chapter from "../api/Chapter";
-import ChapterFunctions from "../ChapterFunctions";
+import IChapter from "../types/IChapter";
+import IManga from "../types/IManga";
 
-export default interface IChapter{
+export default function ChapterItem({apiUri, chapterId} : {apiUri: string, chapterId: string}) : ReactElement {
-    chapterId: string;
-    volumeNumber: number;
-    chapterNumber: string;
-    url: string;
-    title: string | undefined;
-    archiveFileName: string;
-    downloaded: boolean;
-    parentMangaId: string;
-}
-
-export function ChapterItem({apiUri, chapterId} : {apiUri: string, chapterId: string}) : ReactElement {
     const setCoverItem : ReactEventHandler<HTMLImageElement> = (e) => {
         setMangaCoverHtmlImageItem(e.currentTarget);
     }
@@ -24,25 +14,25 @@ export function ChapterItem({apiUri, chapterId} : {apiUri: string, chapterId: st
     let [mangaCoverUrl, setMangaCoverUrl] = useState<string>("../../media/blahaj.png");
     let [mangaCoverHtmlImageItem, setMangaCoverHtmlImageItem] = useState<HTMLImageElement | null>(null);
     useEffect(() => {
-        ChapterFunctions.GetChapterFromId(apiUri, chapterId).then(setChapter);
+        Chapter.GetChapterFromId(apiUri, chapterId).then(setChapter);
     }, []);
     useEffect(() => {
         if(chapter === null)
             manga = null;
         else
-            MangaFunctions.GetMangaById(apiUri, chapter.parentMangaId).then(setManga);
+            Manga.GetMangaById(apiUri, chapter.parentMangaId).then(setManga);
     }, [chapter]);
     useEffect(() => {
         if(chapter != null && mangaCoverHtmlImageItem != null)
-            setMangaCoverUrl(MangaFunctions.GetMangaCoverImageUrl(apiUri, chapter.parentMangaId, mangaCoverHtmlImageItem));
+            setMangaCoverUrl(Manga.GetMangaCoverImageUrl(apiUri, chapter.parentMangaId, mangaCoverHtmlImageItem));
     }, [chapter, mangaCoverHtmlImageItem]);
 
     let [clicked, setClicked] = useState<boolean>(false);
 
     return (<div className="ChapterItem" key={chapterId} is-clicked={clicked ? "clicked" : "not-clicked"} onClick={() => setClicked(!clicked)}>
-        <img className="ChapterItem-Cover" src={mangaCoverUrl} alt="MangaFunctions Cover" onLoad={setCoverItem} onResize={setCoverItem}></img>
+        <img className="ChapterItem-Cover" src={mangaCoverUrl} alt="Manga Cover" onLoad={setCoverItem} onResize={setCoverItem}></img>
-        <p className="ChapterItem-MangaName">{manga ? manga.name : "MangaFunctions-Name"}</p>
+        <p className="ChapterItem-MangaName">{manga ? manga.name : "Manga-Name"}</p>
-        <p className="ChapterItem-ChapterName">{chapter ? chapter.title : "ChapterFunctions-Title"}</p>
+        <p className="ChapterItem-ChapterName">{chapter ? chapter.title : "Chapter-Title"}</p>
         <p className="ChapterItem-Volume">Vol.{chapter ? chapter.volumeNumber : "VolNum"}</p>
         <p className="ChapterItem-Chapter">Ch.{chapter ? chapter.chapterNumber : "ChNum"}</p>
         <p className="ChapterItem-VolumeChapter">Vol.{chapter ? chapter.volumeNumber : "VolNum"} Ch.{chapter ? chapter.chapterNumber : "ChNum"}</p>

Website/modules/Elements/Gotify.tsx

@@ -1,24 +1,8 @@
 import {ReactElement, useState} from "react";
-import NotificationConnectorFunctions from "../../NotificationConnectorFunctions";
+import NotificationConnector from "../api/NotificationConnector";
-import Loader from "../../Loader";
+import Loader from "../Loader";
-import "../../../styles/notificationConnector.css";
+import IGotifyRecord from "../types/records/IGotifyRecord";
-import {isValidUri} from "../../../App";
+import {isValidUri} from "../../App";
-
-export default interface IGotifyRecord {
-    endpoint: string;
-    appToken: string;
-    priority: number;
-}
-
-function Validate(record: IGotifyRecord) : boolean {
-    if(!isValidUri(record.endpoint))
-        return false;
-    if(record.appToken.length < 1)
-        return false;
-    if(record.priority < 1 || record.priority > 5)
-        return false;
-    return true;
-}
 
 export function GotifyItem ({apiUri} : {apiUri: string}) : ReactElement{
     const [record, setRecord] = useState<IGotifyRecord>({
@@ -42,10 +26,20 @@ export function GotifyItem ({apiUri} : {apiUri: string}) : ReactElement{
                 if(record === null || Validate(record) === false)
                     return;
                 setLoading(true);
-                NotificationConnectorFunctions.CreateGotify(apiUri, record)
+                NotificationConnector.CreateGotify(apiUri, record)
                     .finally(() => setLoading(false));
             }}>Add</button>
             <Loader loading={loading} style={{width:"40px",height:"40px"}}/>
         </>
     </div>;
+}
+
+function Validate(record: IGotifyRecord) : boolean {
+    if(!isValidUri(record.endpoint))
+        return false;
+    if(record.appToken.length < 1)
+        return false;
+    if(record.priority < 1 || record.priority > 5)
+        return false;
+    return true;
 }

Website/modules/Elements/Link.tsx

@@ -1,13 +1,8 @@
 import React, {ReactElement, useEffect} from "react";
 import {getData} from "../../App";
+import ILink from "../types/ILink";
 
-export default interface ILink {
+export default function LinkElement({apiUri, linkId} : {apiUri: string, linkId: string | null}) : ReactElement{
-    linkId: string;
-    linkProvider: string;
-    linkUrl: string;
-}
-
-export function LinkElement({apiUri, linkId} : {apiUri: string, linkId: string | null}) : ReactElement{
     let [link, setLink] = React.useState<ILink | null>(null);
 
     useEffect(()=> {

Website/modules/Elements/LocalLibrary.tsx

@@ -1,16 +1,11 @@
 import {ReactElement, useState} from "react";
-import INewLibraryRecord, {Validate} from "./records/INewLibraryRecord";
+import INewLibraryRecord, {Validate} from "../types/records/INewLibraryRecord";
 import Loader from "../Loader";
-import LocalLibraryFunctions from "../LocalLibraryFunctions";
+import LocalLibrary from "../api/LocalLibrary";
 import "../../styles/localLibrary.css";
+import ILocalLibrary from "../types/ILocalLibrary";
 
-export default interface ILocalLibrary {
+export default function LocalLibraryItem({apiUri, library} : {apiUri: string, library: ILocalLibrary | null}) : ReactElement {
-    localLibraryId: string;
-    basePath: string;
-    libraryName: string;
-}
-
-export function LocalLibraryItem({apiUri, library} : {apiUri: string, library: ILocalLibrary | null}) : ReactElement {
     const [loading, setLoading] = useState<boolean>(false);
     const [record, setRecord] = useState<INewLibraryRecord>({
        path: library?.basePath ?? "",
@@ -29,14 +24,14 @@ export function LocalLibraryItem({apiUri, library} : {apiUri: string, library: I
                 if(record === null || Validate(record) === false)
                     return;
                 setLoading(true);
-                LocalLibraryFunctions.UpdateLibrary(apiUri, library.localLibraryId, record)
+                LocalLibrary.UpdateLibrary(apiUri, library.localLibraryId, record)
                     .finally(() => setLoading(false));
             }}>Edit</button>
         : <button className="LocalLibraryFunctions-Action" onClick={() => {
                 if(record === null || Validate(record) === false)
                     return;
                 setLoading(true);
-                LocalLibraryFunctions.CreateLibrary(apiUri, record)
+                LocalLibrary.CreateLibrary(apiUri, record)
                     .finally(() => setLoading(false));
             }}>Add</button>
         }

Website/modules/Elements/Lunasea.tsx

@@ -1,16 +1,7 @@
 import {ReactElement, useState} from "react";
-import NotificationConnectorFunctions from "../../NotificationConnectorFunctions";
+import NotificationConnector from "../api/NotificationConnector";
-import Loader from "../../Loader";
+import Loader from "../Loader";
-import "../../../styles/notificationConnector.css";
+import ILunaseaRecord from "../types/records/ILunaseaRecord";
-
-export default interface ILunaseaRecord {
-    id: string;
-}
-
-const regex = new RegExp("(?:device|user)\/[0-9a-zA-Z\-]+");
-function Validate(record: ILunaseaRecord) : boolean {
-    return regex.test(record.id);
-}
 
 export function LunaseaItem ({apiUri} : {apiUri: string}) : ReactElement{
     const [record, setRecord] = useState<ILunaseaRecord>({
@@ -27,10 +18,15 @@ export function LunaseaItem ({apiUri} : {apiUri: string}) : ReactElement{
                 if(record === null || Validate(record) === false)
                     return;
                 setLoading(true);
-                NotificationConnectorFunctions.CreateLunasea(apiUri, record)
+                NotificationConnector.CreateLunasea(apiUri, record)
                     .finally(() => setLoading(false));
             }}>Add</button>
             <Loader loading={loading} style={{width:"40px",height:"40px",margin:"25vh calc(sin(70)*(50% - 40px))"}}/>
         </>
     </div>;
+}
+
+const regex = new RegExp("(?:device|user)\/[0-9a-zA-Z\-]+");
+function Validate(record: ILunaseaRecord) : boolean {
+    return regex.test(record.id);
 }

Website/modules/Elements/Manga.tsx

@@ -1,43 +1,18 @@
-import MangaFunctions from "../MangaFunctions";
+import Manga from "../api/Manga";
 import React, {Children, ReactElement, ReactEventHandler, useEffect, useState} from "react";
 import Icon from '@mdi/react';
 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";
+import IManga from "../types/IManga";
+import IChapter from "../types/IChapter";
+import AuthorElement from "./Author";
+import LinkElement from "./Link";
 
-export default interface IManga{
+export default function MangaItem({apiUri, mangaId, children} : {apiUri: string, mangaId: string, children?: (string | ReactElement)[]}) : ReactElement {
-    mangaId: string;
-    idOnConnectorSite: string;
-    name: string;
-    description: string;
-    websiteUrl: string;
-    year: number;
-    originalLanguage: string;
-    releaseStatus: MangaReleaseStatus;
-    folderName: string;
-    ignoreChapterBefore: number;
-    mangaConnectorId: string;
-    authorIds: string[];
-    tags: string[];
-    linkIds: string[];
-    altTitleIds: string[];
-}
-
-export enum MangaReleaseStatus {
-    Continuing = "Continuing",
-    Completed = "Completed",
-    OnHiatus = "OnHiatus",
-    Cancelled = "Cancelled",
-    Unreleased = "Unreleased",
-}
-
-export function MangaItem({apiUri, mangaId, children} : {apiUri: string, mangaId: string, children?: (string | ReactElement)[]}) : ReactElement {
     const LoadMangaCover : ReactEventHandler<HTMLImageElement> = (e) => {
-        if(e.currentTarget.src != MangaFunctions.GetMangaCoverImageUrl(apiUri, mangaId, e.currentTarget))
+        if(e.currentTarget.src != Manga.GetMangaCoverImageUrl(apiUri, mangaId, e.currentTarget))
-            e.currentTarget.src = MangaFunctions.GetMangaCoverImageUrl(apiUri, mangaId, e.currentTarget);
+            e.currentTarget.src = Manga.GetMangaCoverImageUrl(apiUri, mangaId, e.currentTarget);
     }
 
     let [manga, setManga] = useState<IManga | null>(null);
@@ -48,14 +23,14 @@ export function MangaItem({apiUri, mangaId, children} : {apiUri: string, mangaId
     let [settingThreshold, setSettingThreshold] = useState<boolean>(false);
     const invalidTargets = ["input", "textarea", "button", "select", "a"];
     useEffect(() => {
-        MangaFunctions.GetMangaById(apiUri, mangaId).then(setManga);
+        Manga.GetMangaById(apiUri, mangaId).then(setManga);
-        MangaFunctions.GetLatestChapterDownloaded(apiUri, mangaId)
+        Manga.GetLatestChapterDownloaded(apiUri, mangaId)
             .then(setLatestChapterDownloaded)
             .finally(() => {
                 if(latestChapterDownloaded && latestChapterAvailable)
                     setLoadingChapterStats(false);
             });
-        MangaFunctions.GetLatestChapterAvailable(apiUri, mangaId)
+        Manga.GetLatestChapterAvailable(apiUri, mangaId)
             .then(setLatestChapterAvailable)
             .finally(() => {
                 if(latestChapterDownloaded && latestChapterAvailable)
@@ -69,7 +44,7 @@ export function MangaItem({apiUri, mangaId, children} : {apiUri: string, mangaId
         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>
+        <img className="MangaItem-Cover" src="../../media/blahaj.png" alt="Manga 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>
@@ -81,7 +56,7 @@ export function MangaItem({apiUri, mangaId, children} : {apiUri: string, mangaId
                     <AuthorElement apiUri={apiUri} authorId={authorId}></AuthorElement>
                 </div>)
                 :
-                <div className="MangaItem-Author" key="null-Author">
+                <div className="MangaItem-Author" key="null-AuthorTag">
                     <Icon path={mdiAccountEdit} size={0.5} />
                     <AuthorElement apiUri={apiUri} authorId={null}></AuthorElement>
                 </div>}
@@ -113,7 +88,7 @@ export function MangaItem({apiUri, mangaId, children} : {apiUri: string, mangaId
                 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));
+                    Manga.SetIgnoreThreshold(apiUri, mangaId, e.currentTarget.valueAsNumber).finally(()=>setSettingThreshold(false));
                 }} />
                 <Loader loading={settingThreshold} style={{margin: "-10px -45px"}}/>
                 out of <span className="MangaItem-Props-Threshold-Available">{latestChapterAvailable ? latestChapterAvailable.chapterNumber : <Loader loading={loadingChapterStats} style={{margin: "-10px -35px"}} />}</span>

Website/modules/Elements/MangaAltTitle.tsx

@@ -1,14 +1,8 @@
 import React, {ReactElement, useEffect} from "react";
 import {getData} from "../../App";
-import IAuthor from "./IAuthor";
+import IMangaAltTitle from "../types/IMangaAltTitle";
 
-export default interface IMangaAltTitle {
+export default function AltTitleElement({apiUri, altTitleId} : {apiUri: string, altTitleId: string | null}) : ReactElement{
-    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(()=> {

Website/modules/Elements/NotificationConnector.tsx

@@ -1,21 +1,14 @@
 import {ReactElement, ReactEventHandler, useState} from "react";
 import "../../styles/notificationConnector.css";
 import Loader from "../Loader";
-import NotificationConnectorFunctions from "../NotificationConnectorFunctions";
+import NotificationConnector from "../api/NotificationConnector";
-import {LunaseaItem} from "./records/ILunaseaRecord";
+import INotificationConnector from "../types/INotificationConnector";
-import {GotifyItem} from "./records/IGotifyRecord";
+import {GotifyItem} from "./Gotify";
-import {NtfyItem} from "./records/INtfyRecord";
+import {NtfyItem} from "./Ntfy";
-import {PushoverItem} from "./records/IPushoverRecord";
+import {LunaseaItem} from "./Lunasea";
+import {PushoverItem} from "./Pushover";
 
-export default interface INotificationConnector {
+export default function NotificationConnectorItem({apiUri, notificationConnector} : {apiUri: string, notificationConnector: INotificationConnector | null}) : ReactElement {
-    name: string;
-    url: string;
-    headers: Record<string, string>[];
-    httpMethod: string;
-    body: string;
-}
-
-export function NotificationConnectorItem({apiUri, notificationConnector} : {apiUri: string, notificationConnector: INotificationConnector | null}) : ReactElement {
     if(notificationConnector != null)
         return <DefaultItem apiUri={apiUri} notificationConnector={notificationConnector} />
 
@@ -93,7 +86,7 @@ function DefaultItem({apiUri, notificationConnector}:{apiUri: string, notificati
         <>
             <button className="NotificationConnectorItem-Save" onClick={(e) => {
                 setLoading(true);
-                NotificationConnectorFunctions.CreateNotificationConnector(apiUri, info)
+                NotificationConnector.CreateNotificationConnector(apiUri, info)
                     .finally(() => setLoading(false));
             }}>Add</button>
             <Loader loading={loading} style={{width:"40px",height:"40px",margin:"25vh calc(sin(70)*(50% - 40px))"}}/>

Website/modules/Elements/Ntfy.tsx

@@ -1,30 +1,8 @@
+import {isValidUri} from "../../App";
 import {ReactElement, useState} from "react";
-import NotificationConnectorFunctions from "../../NotificationConnectorFunctions";
+import NotificationConnector from "../api/NotificationConnector";
-import Loader from "../../Loader";
+import Loader from "../Loader";
-import "../../../styles/notificationConnector.css";
+import INtfyRecord from "../types/records/INtfyRecord";
-import {isValidUri} from "../../../App";
-
-export default interface INtfyRecord {
-    endpoint: string;
-    username: string;
-    password: string;
-    topic: string;
-    priority: number;
-}
-
-function Validate(record: INtfyRecord) : boolean {
-    if(!isValidUri(record.endpoint))
-        return false;
-    if(record.username.length < 1)
-        return false;
-    if(record.password.length < 1)
-        return false;
-    if(record.topic.length < 1)
-        return false;
-    if(record.priority < 1 || record.priority > 5)
-        return false;
-    return true;
-}
 
 export function NtfyItem ({apiUri} : {apiUri: string}) : ReactElement{
     const [info, setInfo] = useState<INtfyRecord>({
@@ -49,14 +27,28 @@ export function NtfyItem ({apiUri} : {apiUri: string}) : ReactElement{
             <label htmlFor="NotificationConnectorItem-Priority">Priority</label>
             <input id="NotificationConnectorItem-Priority-Value" type="number" className="NotificationConnectorItem-Priority-Value" min={1} max={5} defaultValue={3} onChange={(e) => setInfo({...info, priority: e.currentTarget.valueAsNumber})} />
         </div><>
-            <button className="NotificationConnectorItem-Save" onClick={(e) => {
+        <button className="NotificationConnectorItem-Save" onClick={(e) => {
-                if(info === null || Validate(info) === false)
+            if(info === null || Validate(info) === false)
-                    return;
+                return;
-                setLoading(true);
+            setLoading(true);
-                NotificationConnectorFunctions.CreateNtfy(apiUri, info)
+            NotificationConnector.CreateNtfy(apiUri, info)
-                    .finally(() => setLoading(false));
+                .finally(() => setLoading(false));
-            }}>Add</button>
+        }}>Add</button>
-            <Loader loading={loading} style={{width:"40px",height:"40px",margin:"25vh calc(sin(70)*(50% - 40px))"}}/>
+        <Loader loading={loading} style={{width:"40px",height:"40px",margin:"25vh calc(sin(70)*(50% - 40px))"}}/>
-        </>
+    </>
     </div>;
+}
+
+function Validate(record: INtfyRecord) : boolean {
+    if(!isValidUri(record.endpoint))
+        return false;
+    if(record.username.length < 1)
+        return false;
+    if(record.password.length < 1)
+        return false;
+    if(record.topic.length < 1)
+        return false;
+    if(record.priority < 1 || record.priority > 5)
+        return false;
+    return true;
 }

Website/modules/Elements/Pushover.tsx

@@ -1,21 +1,7 @@
 import {ReactElement, useState} from "react";
-import NotificationConnectorFunctions from "../../NotificationConnectorFunctions";
+import NotificationConnector from "../api/NotificationConnector";
-import Loader from "../../Loader";
+import Loader from "../Loader";
-import "../../../styles/notificationConnector.css";
+import IPushoverRecord from "../types/records/IPushoverRecord";
-import {isValidUri} from "../../../App";
-
-export default interface IPushoverRecord {
-    apptoken: string;
-    user: string;
-}
-
-function Validate(record: IPushoverRecord) : boolean {
-    if(record.apptoken.length < 1)
-        return false;
-    if(record.user.length < 1)
-        return false;
-    return true;
-}
 
 export function PushoverItem ({apiUri} : {apiUri: string}) : ReactElement{
     const [info, setInfo] = useState<IPushoverRecord>({
@@ -34,10 +20,18 @@ export function PushoverItem ({apiUri} : {apiUri: string}) : ReactElement{
                 if(info === null || Validate(info) === false)
                     return;
                 setLoading(true);
-                NotificationConnectorFunctions.CreatePushover(apiUri, info)
+                NotificationConnector.CreatePushover(apiUri, info)
                     .finally(() => setLoading(false));
             }}>Add</button>
             <Loader loading={loading} style={{width:"40px",height:"40px",margin:"25vh calc(sin(70)*(50% - 40px))"}}/>
         </>
     </div>;
+}
+
+function Validate(record: IPushoverRecord) : boolean {
+    if(record.apptoken.length < 1)
+        return false;
+    if(record.user.length < 1)
+        return false;
+    return true;
 }

Website/modules/Footer.tsx

@@ -1,10 +1,10 @@
 import React, {useEffect} from 'react';
 import '../styles/footer.css';
-import JobFunctions from './JobFunctions';
+import Job from './api/Job';
 import Icon from '@mdi/react';
 import {mdiCounter, mdiEyeCheck, mdiRun, mdiTrayFull} from '@mdi/js';
 import QueuePopUp from "./QueuePopUp";
-import {JobState, JobType} from "./interfaces/Jobs/IJob";
+import {JobState, JobType} from "./types/Jobs/IJob";
 
 export default function Footer({connectedToBackend, apiUri, checkConnectedInterval} : {connectedToBackend: boolean, apiUri: string, checkConnectedInterval: number}) {
     const [MonitoringJobsCount, setMonitoringJobsCount] = React.useState(0);
@@ -14,10 +14,10 @@ export default function Footer({connectedToBackend, apiUri, checkConnectedInterv
     const [countUpdateInterval, setCountUpdateInterval] = React.useState<number | undefined>(undefined);
 
     function UpdateBackendState(){
-        JobFunctions.GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jobs) => setMonitoringJobsCount(jobs.length));
+        Job.GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jobs) => setMonitoringJobsCount(jobs.length));
-        JobFunctions.GetAllJobs(apiUri).then((jobs) => setAllJobsCount(jobs.length));
+        Job.GetAllJobs(apiUri).then((jobs) => setAllJobsCount(jobs.length));
-        JobFunctions.GetJobsInState(apiUri, JobState.Running).then((jobs) => setRunningJobsCount(jobs.length));
+        Job.GetJobsInState(apiUri, JobState.Running).then((jobs) => setRunningJobsCount(jobs.length));
-        JobFunctions.GetJobsInState(apiUri, JobState.Waiting).then((jobs) => setWaitingJobs(jobs.length));
+        Job.GetJobsInState(apiUri, JobState.Waiting).then((jobs) => setWaitingJobs(jobs.length));
     }
 
     useEffect(() => {

Website/modules/Header.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import '../styles/header.css'
-import IFrontendSettings from "./interfaces/IFrontendSettings";
 import Settings from "./Settings";
+import IFrontendSettings from "./types/IFrontendSettings";
 
 export default function Header({backendConnected, apiUri, settings, setFrontendSettings} : {backendConnected: boolean, apiUri: string, settings: IFrontendSettings, setFrontendSettings: (settings: IFrontendSettings) => void}){
     return (

Website/modules/MonitorJobsList.tsx

@@ -1,11 +1,11 @@
 import React, {ReactElement, useEffect, useState} from 'react';
-import JobFunctions from './JobFunctions';
+import Job from './api/Job';
 import '../styles/monitorMangaList.css';
-import {JobType} from "./interfaces/Jobs/IJob";
+import {JobType} from "./types/Jobs/IJob";
 import '../styles/mangaCover.css'
-import IDownloadAvailableChaptersJob from "./interfaces/Jobs/IDownloadAvailableChaptersJob";
+import IDownloadAvailableChaptersJob from "./types/Jobs/IDownloadAvailableChaptersJob";
-import {MangaItem} from "./interfaces/IManga";
+import Manga from "./api/Manga";
-import MangaFunctions from "./MangaFunctions";
+import MangaItem from "./Elements/Manga";
 
 export default function MonitorJobsList({onStartSearch, connectedToBackend, apiUri, checkConnectedInterval} : {onStartSearch() : void, connectedToBackend: boolean, apiUri: string, checkConnectedInterval: number}) {
     const [MonitoringJobs, setMonitoringJobs] = useState<IDownloadAvailableChaptersJob[]>([]);
@@ -29,7 +29,7 @@ export default function MonitorJobsList({onStartSearch, connectedToBackend, apiU
         if(!connectedToBackend)
             return;
         //console.debug("Updating MonitoringJobsList");
-        JobFunctions.GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob)
+        Job.GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob)
             .then((jobs) => jobs as IDownloadAvailableChaptersJob[])
             .then((jobs) => {
                 if(jobs.length != MonitoringJobs.length ||
@@ -57,7 +57,7 @@ export default function MonitorJobsList({onStartSearch, connectedToBackend, apiU
                 <MangaItem apiUri={apiUri} mangaId={MonitoringJob.mangaId} key={MonitoringJob.mangaId}>
                     <></>
                     <button className="Manga-DeleteButton" onClick={() => {
-                        MangaFunctions.DeleteManga(apiUri, MonitoringJob.mangaId);
+                        Manga.DeleteManga(apiUri, MonitoringJob.mangaId);
                     }}>Delete</button>
                 </MangaItem>
             )}

Website/modules/QueuePopUp.tsx

@@ -1,10 +1,10 @@
 import React, {ReactElement, useEffect, useState} from 'react';
-import IJob, {JobState, JobType} from "./interfaces/Jobs/IJob";
+import IJob, {JobState, JobType} from "./types/Jobs/IJob";
 import '../styles/queuePopUp.css';
 import '../styles/popup.css';
-import JobFunctions from "./JobFunctions";
+import Job from "./api/Job";
-import IDownloadSingleChapterJob from "./interfaces/Jobs/IDownloadSingleChapterJob";
+import IDownloadSingleChapterJob from "./types/Jobs/IDownloadSingleChapterJob";
-import {ChapterItem} from "./interfaces/IChapter";
+import ChapterItem from "./Elements/Chapter";
 
 export default function QueuePopUp({connectedToBackend, children, apiUri, checkConnectedInterval} : {connectedToBackend: boolean, children: ReactElement[], apiUri: string, checkConnectedInterval: number}) {
 
@@ -28,13 +28,13 @@ export default function QueuePopUp({connectedToBackend, children, apiUri, checkC
     }, [connectedToBackend, showQueuePopup]);
 
     function UpdateMonitoringJobsList(){
-        JobFunctions.GetJobsInState(apiUri, JobState.Waiting)
+        Job.GetJobsInState(apiUri, JobState.Waiting)
             .then((jobs: IJob[]) => {
                 //console.log(jobs);
                 return jobs;
             })
             .then(setWaitingJobs);
-        JobFunctions.GetJobsInState(apiUri, JobState.Running)
+        Job.GetJobsInState(apiUri, JobState.Running)
             .then((jobs: IJob[]) => {
                 //console.log(jobs);
                 return jobs;

Website/modules/Search.tsx

@@ -1,14 +1,15 @@
 import React, {ChangeEventHandler, EventHandler, useEffect, useState} from 'react';
-import {MangaConnectorFunctions} from "./MangaConnectorFunctions";
+import {MangaConnector} from "./api/MangaConnector";
-import IMangaConnector from "./interfaces/IMangaConnector";
+import IMangaConnector from "./types/IMangaConnector";
 import {isValidUri} from "../App";
-import IManga, {MangaItem} from "./interfaces/IManga";
 import '../styles/search.css';
-import SearchFunctions from "./SearchFunctions";
+import Job from "./api/Job";
-import JobFunctions from "./JobFunctions";
+import LocalLibrary from "./api/LocalLibrary";
-import ILocalLibrary from "./interfaces/ILocalLibrary";
-import LocalLibraryFunctions from "./LocalLibraryFunctions";
 import Loader from "./Loader";
+import IManga from "./types/IManga";
+import SearchFunctions from "./api/Search";
+import ILocalLibrary from "./types/ILocalLibrary";
+import MangaItem from "./Elements/Manga";
 
 export default function Search({apiUri, jobInterval, closeSearch} : {apiUri: string, jobInterval: Date, closeSearch(): void}) {
     let [loading, setLoading] = useState<boolean>(true);
@@ -21,7 +22,7 @@ export default function Search({apiUri, jobInterval, closeSearch} : {apiUri: str
     const pattern = /https:\/\/([a-z0-9.]+\.[a-z0-9]{2,})(?:\/.*)?/i
 
     useEffect(() => {
-        MangaConnectorFunctions.GetAllConnectors(apiUri).then((connectors)=> {
+        MangaConnector.GetAllConnectors(apiUri).then((connectors)=> {
             return connectors.filter(c => c.enabled);
         }).then(setConnectors).then(() => setLoading(false));
     }, []);
@@ -99,7 +100,7 @@ export default function Search({apiUri, jobInterval, closeSearch} : {apiUri: str
     let [selectedLibrary, setSelectedLibrary] = useState<ILocalLibrary | null>(null);
     let [libraries, setLibraries] = useState<ILocalLibrary[] | null>(null);
     useEffect(() => {
-        LocalLibraryFunctions.GetLibraries(apiUri).then(setLibraries);
+        LocalLibrary.GetLibraries(apiUri).then(setLibraries);
     }, []);
     useEffect(() => {
         if(libraries === null || libraries.length < 1)
@@ -147,7 +148,7 @@ export default function Search({apiUri, jobInterval, closeSearch} : {apiUri: str
                                 : 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: new Date(jobInterval).getTime(), localLibraryId: selectedLibrary!.localLibraryId});
+                            Job.CreateDownloadAvailableChaptersJob(apiUri, result.mangaId, {recurrenceTimeMs: new Date(jobInterval).getTime(), localLibraryId: selectedLibrary!.localLibraryId});
                         }}>Monitor</button>
                     </MangaItem>
                 })

Website/modules/Settings.tsx

@@ -1,18 +1,20 @@
-import IFrontendSettings from "./interfaces/IFrontendSettings";
 import '../styles/settings.css';
 import '../styles/react-toggle.css';
 import React, {useEffect, useRef, useState} from "react";
-import INotificationConnector, {NotificationConnectorItem} from "./interfaces/INotificationConnector";
+import NotificationConnector from "./api/NotificationConnector";
-import NotificationConnectorFunctions from "./NotificationConnectorFunctions";
+import IBackendSettings from "./types/IBackendSettings";
-import ILocalLibrary, {LocalLibraryItem} from "./interfaces/ILocalLibrary";
+import BackendSettings from "./api/BackendSettings";
-import LocalLibraryFunctions from "./LocalLibraryFunctions";
-import IBackendSettings from "./interfaces/IBackendSettings";
-import BackendSettings from "./BackendSettingsFunctions";
 import Toggle from "react-toggle";
 import Loader from "./Loader";
-import {RequestType} from "./interfaces/IRequestLimits";
+import IMangaConnector from "./types/IMangaConnector";
-import IMangaConnector from "./interfaces/IMangaConnector";
+import {MangaConnector} from "./api/MangaConnector";
-import {MangaConnectorFunctions} from "./MangaConnectorFunctions";
+import IFrontendSettings from "./types/IFrontendSettings";
+import INotificationConnector from "./types/INotificationConnector";
+import ILocalLibrary from "./types/ILocalLibrary";
+import LocalLibrary from "./api/LocalLibrary";
+import {RequestLimitType} from "./types/EnumRequestLimitType";
+import NotificationConnectorItem from "./Elements/NotificationConnector";
+import LocalLibraryItem from "./Elements/LocalLibrary";
 
 export default function Settings({ backendConnected, apiUri, frontendSettings, setFrontendSettings } : {
     backendConnected: boolean,
@@ -31,10 +33,10 @@ export default function Settings({ backendConnected, apiUri, frontendSettings, s
     useEffect(() => {
         if(!backendConnected)
             return;
-        NotificationConnectorFunctions.GetNotificationConnectors(apiUri).then(setNotificationConnectors);
+        NotificationConnector.GetNotificationConnectors(apiUri).then(setNotificationConnectors);
-        LocalLibraryFunctions.GetLibraries(apiUri).then(setLocalLibraries);
+        LocalLibrary.GetLibraries(apiUri).then(setLocalLibraries);
         BackendSettings.GetSettings(apiUri).then(setBackendSettings);
-        MangaConnectorFunctions.GetAllConnectors(apiUri).then(setMangaConnectors);
+        MangaConnector.GetAllConnectors(apiUri).then(setMangaConnectors);
     }, [backendConnected, showSettings]);
 
     const dateToStr = (x: Date) => {
@@ -44,7 +46,7 @@ export default function Settings({ backendConnected, apiUri, frontendSettings, s
         return ret;
     }
 
-    const ChangeRequestLimit = (requestType: RequestType, limit: number) => {
+    const ChangeRequestLimit = (requestType: RequestLimitType, limit: number) => {
         if(backendSettings === null)
             return;
         setLoadingBackend(true);
@@ -150,22 +152,22 @@ export default function Settings({ backendConnected, apiUri, frontendSettings, s
                             <h3>Request Limits:</h3>
                             <label htmlFor="Default">Default</label>
                             <input id="Default" type="number" defaultValue={backendSettings ? backendSettings.requestLimits.Default : 0} disabled={backendSettings ? false : !loadingBackend}
-                                onChange={(e) => ChangeRequestLimit(RequestType.Default, e.currentTarget.valueAsNumber)} />
+                                onChange={(e) => ChangeRequestLimit(RequestLimitType.Default, e.currentTarget.valueAsNumber)} />
                             <label htmlFor="MangaInfo">MangaInfo</label>
                             <input id="MangaInfo" type="number" defaultValue={backendSettings ? backendSettings.requestLimits.MangaInfo : 0} disabled={backendSettings ? false : !loadingBackend}
-                                   onChange={(e) => ChangeRequestLimit(RequestType.MangaInfo, e.currentTarget.valueAsNumber)} />
+                                   onChange={(e) => ChangeRequestLimit(RequestLimitType.MangaInfo, e.currentTarget.valueAsNumber)} />
                             <label htmlFor="MangaDexFeed">MangaDexFeed</label>
                             <input id="MangaDexFeed" type="number" defaultValue={backendSettings ? backendSettings.requestLimits.MangaDexFeed : 0} disabled={backendSettings ? false : !loadingBackend}
-                                   onChange={(e) => ChangeRequestLimit(RequestType.MangaDexFeed, e.currentTarget.valueAsNumber)} />
+                                   onChange={(e) => ChangeRequestLimit(RequestLimitType.MangaDexFeed, e.currentTarget.valueAsNumber)} />
                             <label htmlFor="MangaDexImage">MangaDexImage</label>
                             <input id="MangaDexImage" type="number" defaultValue={backendSettings ? backendSettings.requestLimits.MangaDexImage : 0} disabled={backendSettings ? false : !loadingBackend}
-                                   onChange={(e) => ChangeRequestLimit(RequestType.MangaDexImage, e.currentTarget.valueAsNumber)} />
+                                   onChange={(e) => ChangeRequestLimit(RequestLimitType.MangaDexImage, e.currentTarget.valueAsNumber)} />
                             <label htmlFor="MangaImage">MangaImage</label>
                             <input id="MangaImage" type="number" defaultValue={backendSettings ? backendSettings.requestLimits.MangaImage : 0} disabled={backendSettings ? false : !loadingBackend}
-                                   onChange={(e) => ChangeRequestLimit(RequestType.MangaImage, e.currentTarget.valueAsNumber)} />
+                                   onChange={(e) => ChangeRequestLimit(RequestLimitType.MangaImage, e.currentTarget.valueAsNumber)} />
                             <label htmlFor="MangaCover">MangaCover</label>
                             <input id="MangaCover" type="number" defaultValue={backendSettings ? backendSettings.requestLimits.MangaCover : 0} disabled={backendSettings ? false : !loadingBackend}
-                                   onChange={(e) => ChangeRequestLimit(RequestType.MangaCover, e.currentTarget.valueAsNumber)} />
+                                   onChange={(e) => ChangeRequestLimit(RequestLimitType.MangaCover, e.currentTarget.valueAsNumber)} />
                         </div>
                         <div className={"settings-mangaConnectors"}>
                             {mangaConnectors.map(mc => {
@@ -173,7 +175,7 @@ export default function Settings({ backendConnected, apiUri, frontendSettings, s
                                     <div key={mc.name}>
                                         <span>{mc.name}</span>
                                         <Toggle defaultChecked={mc.enabled} onChange={(e) => {
-                                                    MangaConnectorFunctions.SetConnectorEnabled(apiUri, mc.name, e.currentTarget.checked);
+                                                    MangaConnector.SetConnectorEnabled(apiUri, mc.name, e.currentTarget.checked);
                                                 }} />
                                     </div>);
                             })}

Website/modules/api/BackendSettings.tsx

@@ -1,6 +1,7 @@
-import {deleteData, getData, patchData} from "../App";
+import {deleteData, getData, patchData} from "../../App";
-import IRequestLimits, {RequestType} from "./interfaces/IRequestLimits";
+import IRequestLimits from "../types/IRequestLimits";
-import IBackendSettings from "./interfaces/IBackendSettings";
+import IBackendSettings from "../types/IBackendSettings";
+import {RequestLimitType} from "../types/EnumRequestLimitType";
 
 export default class BackendSettings {
     static async GetSettings(apiUri: string) : Promise<IBackendSettings> {
@@ -27,11 +28,11 @@ export default class BackendSettings {
         return deleteData(`${apiUri}/v2/Settings/RequestLimits`);
     }
 
-    static async UpdateRequestLimit(apiUri: string, requestType: RequestType, value: number) {
+    static async UpdateRequestLimit(apiUri: string, requestType: RequestLimitType, value: number) {
         return patchData(`${apiUri}/v2/Settings/RequestLimits/${requestType}`, value);
     }
 
-    static async ResetRequestLimit(apiUri: string, requestType: RequestType) {
+    static async ResetRequestLimit(apiUri: string, requestType: RequestLimitType) {
         return deleteData(`${apiUri}/v2/Settings/RequestLimits/${requestType}`);
     }
 

Website/modules/api/Chapter.tsx

@@ -1,7 +1,7 @@
-import {getData} from "../App";
+import {getData} from "../../App";
-import IChapter from "./interfaces/IChapter";
+import IChapter from "../types/IChapter";
 
-export default class ChapterFunctions {
+export default class Chapter {
 
     static async GetChapterFromId(apiUri: string, chapterId: string): Promise<IChapter> {
         if(chapterId === undefined || chapterId === null) {
@@ -10,7 +10,7 @@ export default class ChapterFunctions {
         }
         return getData(`${apiUri}/v2/Query/Chapter/${chapterId}`)
             .then((json) => {
-                //console.info("Got all MangaFunctions");
+                //console.info("Got all Manga");
                 const ret = json as IChapter;
                 //console.debug(ret);
                 return (ret);

Website/modules/api/FrontendSettings.tsx

@@ -1,9 +1,5 @@
 import {Cookies} from "react-cookie";
-
+import IFrontendSettings from "../types/IFrontendSettings";
-export default interface IFrontendSettings {
-    jobInterval: Date;
-    apiUri: string;
-}
 
 export function LoadFrontendSettings(): IFrontendSettings {
     const cookies = new Cookies();

Website/modules/api/Job.tsx

@@ -1,9 +1,9 @@
-import {deleteData, getData, patchData, postData, putData} from '../App';
+import {deleteData, getData, patchData, postData, putData} from '../../App';
-import IJob, {JobState, JobType} from "./interfaces/Jobs/IJob";
+import IJob, {JobState, JobType} from "../types/Jobs/IJob";
-import IModifyJobRecord from "./interfaces/records/IModifyJobRecord";
+import IModifyJobRecord from "../types/records/IModifyJobRecord";
-import IDownloadAvailableJobsRecord from "./interfaces/records/IDownloadAvailableJobsRecord";
+import IDownloadAvailableJobsRecord from "../types/records/IDownloadAvailableJobsRecord";
 
-export default class JobFunctions
+export default class Job
 {
     static IntervalStringFromDate(date: Date) : string {
         let x = new Date(date);
@@ -82,10 +82,10 @@ export default class JobFunctions
             console.error(`JobId was not provided`);
             return Promise.reject();
         }
-        //console.info(`Getting JobFunctions ${jobId}`);
+        //console.info(`Getting Job ${jobId}`);
         return getData(`${apiUri}/v2/Job/${jobId}`)
             .then((json) => {
-                //console.info(`Got JobFunctions ${jobId}`);
+                //console.info(`Got Job ${jobId}`);
                 const ret = json as IJob;
                 //console.debug(ret);
                 return (ret);
@@ -111,7 +111,7 @@ export default class JobFunctions
         }
         return patchData(`${apiUri}/v2/Job/${jobId}`, modifyData)
             .then((json) => {
-                //console.info(`Got JobFunctions ${jobId}`);
+                //console.info(`Got Job ${jobId}`);
                 const ret = json as IJob;
                 //console.debug(ret);
                 return (ret);
@@ -129,7 +129,7 @@ export default class JobFunctions
         }
         return putData(`${apiUri}/v2/Job/DownloadAvailableChaptersJob/${mangaId}`, data)
             .then((json) => {
-                //console.info(`Got JobFunctions ${jobId}`);
+                //console.info(`Got Job ${jobId}`);
                 const ret = json as string[];
                 //console.debug(ret);
                 return (ret);
@@ -143,7 +143,7 @@ export default class JobFunctions
         }
         return putData(`${apiUri}/v2/Job/DownloadSingleChapterJob/${chapterId}`, {})
             .then((json) => {
-                //console.info(`Got JobFunctions ${jobId}`);
+                //console.info(`Got Job ${jobId}`);
                 const ret = json as string[];
                 //console.debug(ret);
                 return (ret);
@@ -157,7 +157,7 @@ export default class JobFunctions
         }
         return putData(`${apiUri}/v2/Job/UpdateFilesJob/${mangaId}`, {})
             .then((json) => {
-                //console.info(`Got JobFunctions ${jobId}`);
+                //console.info(`Got Job ${jobId}`);
                 const ret = json as string[];
                 //console.debug(ret);
                 return (ret);
@@ -167,7 +167,7 @@ export default class JobFunctions
     static async CreateUpdateAllFilesJob(apiUri: string): Promise<string[]> {
         return putData(`${apiUri}/v2/Job/UpdateAllFilesJob`, {})
             .then((json) => {
-                //console.info(`Got JobFunctions ${jobId}`);
+                //console.info(`Got Job ${jobId}`);
                 const ret = json as string[];
                 //console.debug(ret);
                 return (ret);
@@ -181,7 +181,7 @@ export default class JobFunctions
         }
         return putData(`${apiUri}/v2/Job/UpdateMetadataJob/${mangaId}`, {})
             .then((json) => {
-                //console.info(`Got JobFunctions ${jobId}`);
+                //console.info(`Got Job ${jobId}`);
                 const ret = json as string[];
                 //console.debug(ret);
                 return (ret);
@@ -191,7 +191,7 @@ export default class JobFunctions
     static async CreateUpdateAllMetadataJob(apiUri: string): Promise<string[]> {
         return putData(`${apiUri}/v2/Job/UpdateAllMetadataJob`, {})
             .then((json) => {
-                //console.info(`Got JobFunctions ${jobId}`);
+                //console.info(`Got Job ${jobId}`);
                 const ret = json as string[];
                 //console.debug(ret);
                 return (ret);

Website/modules/api/LocalLibrary.tsx

@@ -1,8 +1,8 @@
-import ILocalLibrary from "./interfaces/ILocalLibrary";
+import {deleteData, getData, patchData, putData} from "../../App";
-import {deleteData, getData, patchData, putData} from "../App";
+import INewLibraryRecord from "../types/records/INewLibraryRecord";
-import INewLibraryRecord from "./interfaces/records/INewLibraryRecord";
+import ILocalLibrary from "../types/ILocalLibrary";
 
-export default class LocalLibraryFunctions
+export default class LocalLibrary
 {
     static async GetLibraries(apiUri: string): Promise<ILocalLibrary[]> {
         return getData(`${apiUri}/v2/LocalLibraries`)

Website/modules/api/Manga.tsx

@@ -1,14 +1,14 @@
-import IManga from './interfaces/IManga';
+import {deleteData, getData, patchData, postData} from '../../App';
-import {deleteData, getData, patchData, postData} from '../App';
+import IManga from "../types/IManga";
-import IChapter from "./interfaces/IChapter";
+import IChapter from "../types/IChapter";
 
-export default class MangaFunctions
+export default class Manga
 {
     static async GetAllManga(apiUri: string): Promise<IManga[]> {
-        //console.info("Getting all MangaFunctions");
+        //console.info("Getting all Manga");
         return getData(`${apiUri}/v2/Manga`)
             .then((json) => {
-                //console.info("Got all MangaFunctions");
+                //console.info("Got all Manga");
                 const ret = json as IManga[];
                 //console.debug(ret);
                 return (ret);
@@ -23,7 +23,7 @@ export default class MangaFunctions
         //console.debug(`Getting Mangas ${internalIds.join(",")}`);
         return await postData(`${apiUri}/v2/Manga/WithIds`, mangaIds)
             .then((json) => {
-                //console.debug(`Got MangaFunctions ${internalIds.join(",")}`);
+                //console.debug(`Got Manga ${internalIds.join(",")}`);
                 const ret = json as IManga[];
                 //console.debug(ret);
                 return (ret);
@@ -35,10 +35,10 @@ export default class MangaFunctions
             console.error(`mangaId was not provided`);
             return Promise.reject();
         }
-        //console.info(`Getting MangaFunctions ${internalId}`);
+        //console.info(`Getting Manga ${internalId}`);
         return await getData(`${apiUri}/v2/Manga/${mangaId}`)
             .then((json) => {
-                //console.info(`Got MangaFunctions ${internalId}`);
+                //console.info(`Got Manga ${internalId}`);
                 const ret = json as IManga;
                 //console.debug(ret);
                 return (ret);
@@ -54,7 +54,7 @@ export default class MangaFunctions
     }
 
     static GetMangaCoverImageUrl(apiUri: string, mangaId: string, ref: HTMLImageElement | undefined): string {
-        //console.debug(`Getting MangaFunctions Cover-Url ${internalId}`);
+        //console.debug(`Getting Manga Cover-Url ${internalId}`);
         if(ref == null || ref == undefined)
             return `${apiUri}/v2/Manga/${mangaId}/Cover?width=64&height=64`;
         return `${apiUri}/v2/Manga/${mangaId}/Cover?width=${ref.clientWidth}&height=${ref.clientHeight}`;
@@ -67,7 +67,7 @@ export default class MangaFunctions
         }
         return getData(`${apiUri}/v2/Manga/${mangaId}/Chapters`)
             .then((json) => {
-                //console.info(`Got MangaFunctions ${internalId}`);
+                //console.info(`Got Manga ${internalId}`);
                 const ret = json as IChapter[];
                 //console.debug(ret);
                 return (ret);
@@ -81,7 +81,7 @@ export default class MangaFunctions
         }
         return getData(`${apiUri}/v2/Manga/${mangaId}/Chapters/Downloaded`)
             .then((json) => {
-                //console.info(`Got MangaFunctions ${internalId}`);
+                //console.info(`Got Manga ${internalId}`);
                 const ret = json as IChapter[];
                 //console.debug(ret);
                 return (ret);
@@ -95,7 +95,7 @@ export default class MangaFunctions
         }
         return getData(`${apiUri}/v2/Manga/${mangaId}/Chapters/NotDownloaded`)
             .then((json) => {
-                //console.info(`Got MangaFunctions ${internalId}`);
+                //console.info(`Got Manga ${internalId}`);
                 const ret = json as IChapter[];
                 //console.debug(ret);
                 return (ret);
@@ -109,7 +109,7 @@ export default class MangaFunctions
         }
         return getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestAvailable`)
             .then((json) => {
-                //console.info(`Got MangaFunctions ${internalId}`);
+                //console.info(`Got Manga ${internalId}`);
                 const ret = json as IChapter;
                 //console.debug(ret);
                 return (ret);
@@ -123,7 +123,7 @@ export default class MangaFunctions
         }
         return getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestDownloaded`)
             .then((json) => {
-                //console.info(`Got MangaFunctions ${internalId}`);
+                //console.info(`Got Manga ${internalId}`);
                 const ret = json as IChapter;
                 //console.debug(ret);
                 return (ret);

Website/modules/api/MangaConnector.tsx

@@ -1,7 +1,7 @@
-import IMangaConnector from './interfaces/IMangaConnector';
+import IMangaConnector from '../types/IMangaConnector';
-import {getData, patchData} from '../App';
+import {getData, patchData} from '../../App';
 
-export class MangaConnectorFunctions
+export class MangaConnector
 {
     static async GetAllConnectors(apiUri: string): Promise<IMangaConnector[]> {
         //console.info("Getting all MangaConnectors");

Website/modules/api/NotificationConnector.tsx

@@ -1,11 +1,11 @@
-import INotificationConnector from "./interfaces/INotificationConnector";
+import {deleteData, getData, putData} from "../../App";
-import {deleteData, getData, putData} from "../App";
+import IGotifyRecord from "../types/records/IGotifyRecord";
-import IGotifyRecord from "./interfaces/records/IGotifyRecord";
+import INtfyRecord from "../types/records/INtfyRecord";
-import INtfyRecord from "./interfaces/records/INtfyRecord";
+import ILunaseaRecord from "../types/records/ILunaseaRecord";
-import ILunaseaRecord from "./interfaces/records/ILunaseaRecord";
+import IPushoverRecord from "../types/records/IPushoverRecord";
-import IPushoverRecord from "./interfaces/records/IPushoverRecord";
+import INotificationConnector from "../types/INotificationConnector";
 
-export default class NotificationConnectorFunctions {
+export default class NotificationConnector {
 
     static async GetNotificationConnectors(apiUri: string) : Promise<INotificationConnector[]> {
         //console.info("Getting Notification Connectors");

Website/modules/api/Search.tsx

@@ -1,5 +1,5 @@
-import IManga from "./interfaces/IManga";
+import {postData} from "../../App";
-import {postData} from "../App";
+import IManga from "../types/IManga";
 
 export default class SearchFunctions {
 

Website/modules/interfaces/IRequestLimits.ts

@@ -1,17 +0,0 @@
-export default interface IRequestLimits {
-    Default: number;
-    MangaDexFeed: number;
-    MangaImage: number;
-    MangaCover: number;
-    MangaDexImage: number;
-    MangaInfo: number;
-}
-
-export enum RequestType {
-    Default = "Default",
-    MangaDexFeed = "MangaDexFeed",
-    MangaImage = "MangaImage",
-    MangaCover = "MangaCover",
-    MangaDexImage = "MangaDexImage",
-    MangaInfo = "MangaInfo"
-}

Website/modules/types/EnumLibraryType.ts

@@ -0,0 +1,4 @@
+export enum LibraryType {
+    Komga = "Komga",
+    Kavita = "Kavita"
+}

Website/modules/types/EnumMangaReleaseStatus.ts

@@ -0,0 +1,7 @@
+export enum MangaReleaseStatus {
+    Continuing = "Continuing",
+    Completed = "Completed",
+    OnHiatus = "OnHiatus",
+    Cancelled = "Cancelled",
+    Unreleased = "Unreleased",
+}

Website/modules/types/EnumRequestLimitType.ts

@@ -0,0 +1,8 @@
+export enum RequestLimitType {
+    Default = "Default",
+    MangaDexFeed = "MangaDexFeed",
+    MangaImage = "MangaImage",
+    MangaCover = "MangaCover",
+    MangaDexImage = "MangaDexImage",
+    MangaInfo = "MangaInfo"
+}

Website/modules/types/IAuthor.ts

@@ -0,0 +1,4 @@
+export default interface IAuthor {
+    authorId: string;
+    authorName: string;
+}

Website/modules/types/IChapter.ts

@@ -0,0 +1,10 @@
+export default interface IChapter{
+    chapterId: string;
+    volumeNumber: number;
+    chapterNumber: string;
+    url: string;
+    title: string | undefined;
+    archiveFileName: string;
+    downloaded: boolean;
+    parentMangaId: string;
+}

Website/modules/types/IFrontendSettings.ts

@@ -0,0 +1,4 @@
+export default interface IFrontendSettings {
+    jobInterval: Date;
+    apiUri: string;
+}

Website/modules/types/ILibraryConnector.ts

@@ -1,11 +1,8 @@
+import {LibraryType} from "./EnumLibraryType";
+
 export default interface ILibraryConnector {
     libraryConnectorId: string;
     libraryType: LibraryType;
     baseUrl: string;
     auth: string;
-}
-
-export enum LibraryType {
-    Komga = "Komga",
-    Kavita = "Kavita"
 }

Website/modules/types/ILink.ts

@@ -0,0 +1,5 @@
+export default interface ILink {
+    linkId: string;
+    linkProvider: string;
+    linkUrl: string;
+}

Website/modules/types/ILocalLibrary.ts

@@ -0,0 +1,5 @@
+export default interface ILocalLibrary {
+    localLibraryId: string;
+    basePath: string;
+    libraryName: string;
+}

Website/modules/types/IManga.ts

@@ -0,0 +1,19 @@
+import {MangaReleaseStatus} from "./EnumMangaReleaseStatus";
+
+export default interface IManga{
+    mangaId: string;
+    idOnConnectorSite: string;
+    name: string;
+    description: string;
+    websiteUrl: string;
+    year: number;
+    originalLanguage: string;
+    releaseStatus: MangaReleaseStatus;
+    folderName: string;
+    ignoreChapterBefore: number;
+    mangaConnectorId: string;
+    authorIds: string[];
+    tags: string[];
+    linkIds: string[];
+    altTitleIds: string[];
+}

Website/modules/types/IMangaAltTitle.ts

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

Website/modules/types/INotificationConnector.ts

@@ -0,0 +1,7 @@
+export default interface INotificationConnector {
+    name: string;
+    url: string;
+    headers: Record<string, string>[];
+    httpMethod: string;
+    body: string;
+}

Website/modules/types/IRequestLimits.ts

@@ -0,0 +1,8 @@
+export default interface IRequestLimits {
+    Default: number;
+    MangaDexFeed: number;
+    MangaImage: number;
+    MangaCover: number;
+    MangaDexImage: number;
+    MangaInfo: number;
+}

Website/modules/types/records/IGotifyRecord.ts

@@ -0,0 +1,8 @@
+import "../../../styles/notificationConnector.css";
+import {isValidUri} from "../../../App";
+
+export default interface IGotifyRecord {
+    endpoint: string;
+    appToken: string;
+    priority: number;
+}

Website/modules/types/records/ILunaseaRecord.ts

@@ -0,0 +1,8 @@
+import {ReactElement, useState} from "react";
+import NotificationConnector from "../../api/NotificationConnector";
+import Loader from "../../Loader";
+import "../../../styles/notificationConnector.css";
+
+export default interface ILunaseaRecord {
+    id: string;
+}

Website/modules/types/records/INtfyRecord.ts

@@ -0,0 +1,9 @@
+import "../../../styles/notificationConnector.css";
+
+export default interface INtfyRecord {
+    endpoint: string;
+    username: string;
+    password: string;
+    topic: string;
+    priority: number;
+}

Website/modules/types/records/IPushoverRecord.tsx

@@ -0,0 +1,6 @@
+import "../../../styles/notificationConnector.css";
+
+export default interface IPushoverRecord {
+    apptoken: string;
+    user: string;
+}

tranga-website/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

tranga-website/README.md

@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

tranga-website/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

tranga-website/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

tranga-website/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "tranga-website",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/inter": "^5.2.5",
+    "@mui/icons-material": "^7.0.1",
+    "@mui/joy": "^5.0.0-beta.52",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}

tranga-website/src/App.css

@@ -0,0 +1,15 @@
+.app {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  width: 100%;
+  left: 0;
+}
+
+.app-content {
+  position: absolute;
+  height: calc(100% - 60px);
+  top: 60px;
+  width: 100%;
+  left: 0;
+}

tranga-website/src/App.tsx

@@ -0,0 +1,31 @@
+import Sheet from '@mui/joy/Sheet';
+import './App.css'
+import Settings from "./Settings.tsx";
+import Header from "./Header.tsx";
+import {Button} from "@mui/joy";
+import {useState} from "react";
+import {ApiUriContext} from "./api/fetchApi.tsx";
+import Search from './Components/Search.tsx';
+
+export default function App () {
+
+    const [showSettings, setShowSettings] = useState<boolean>(false);
+    const [showSearch, setShowSearch] = useState<boolean>(false);
+
+    const [apiUri, setApiUri] = useState<string>(window.location.href.substring(0, window.location.href.lastIndexOf("/")));
+
+    return (
+        <ApiUriContext.Provider value={apiUri}>
+            <Sheet className={"app"}>
+                <Header>
+                    <Button onClick={() => setShowSettings(true)}>Settings</Button>
+                    <Button onClick={() => setShowSearch(true)}>Search</Button>
+                </Header>
+                <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri}/>
+                <Sheet className={"app-content"}>
+                    <Search open={showSearch} setOpen={setShowSearch} />
+                </Sheet>
+            </Sheet>
+        </ApiUriContext.Provider>
+    );
+}

tranga-website/src/Components/AuthorTag.tsx

@@ -0,0 +1,23 @@
+import {Chip, ColorPaletteProp, Skeleton} from "@mui/joy";
+import {useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import IAuthor from "../api/types/IAuthor.ts";
+import {GetAuthor} from "../api/Query.tsx";
+
+export default function AuthorTag({authorId, color} : { authorId: string | undefined, color?: ColorPaletteProp }) {
+    const useAuthor = authorId ?? "AuthorId";
+    const apiUri = useContext(ApiUriContext);
+
+    const [author, setAuthor] = useState<IAuthor>();
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        GetAuthor(apiUri, useAuthor).then(setAuthor).finally(() => setLoading(false));
+    }, [authorId]);
+
+    return (
+        <Chip variant={"outlined"} size={"md"} color={color??"primary"}>
+            <Skeleton variant={"text"} loading={loading}>{author?.authorName ?? "Load Failed"}</Skeleton>
+        </Chip>
+    );
+}

tranga-website/src/Components/LinkTag.tsx

@@ -0,0 +1,25 @@
+import {Chip, Skeleton, Link, ColorPaletteProp} from "@mui/joy";
+import {useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import {GetLink} from "../api/Query.tsx";
+import ILink from "../api/types/ILink.ts";
+
+export default function LinkTag({linkId, color} : { linkId: string | undefined, color?: ColorPaletteProp }) {
+    const useLink = linkId ?? "LinkId";
+    const apiUri = useContext(ApiUriContext);
+
+    const [link, setLink] = useState<ILink>();
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        GetLink(apiUri, useLink).then(setLink).finally(() => setLoading(false));
+    }, [linkId]);
+
+    return (
+        <Chip variant={"outlined"} size={"md"} color={color??"primary"}>
+            <Skeleton variant={"text"} loading={loading}>
+                <Link href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
+            </Skeleton>
+        </Chip>
+    );
+}

tranga-website/src/Components/Manga.tsx

@@ -0,0 +1,132 @@
+import {
+    Badge,
+    Box,
+    Card,
+    CardActions,
+    CardContent, CardCover,
+    Chip, CircularProgress,
+    Input,
+    Link,
+    Skeleton,
+    Stack,
+    Typography
+} from "@mui/joy";
+import IManga, {DefaultManga} from "../api/types/IManga.ts";
+import {ReactElement, useCallback, useContext, useEffect, useState} from "react";
+import {GetLatestChapterAvailable, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import AuthorTag from "./AuthorTag.tsx";
+import LinkTag from "./LinkTag.tsx";
+import {ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
+import IChapter from "../api/types/IChapter.ts";
+import MarkdownPreview from "@uiw/react-markdown-preview";
+import {SxProps} from "@mui/joy/styles/types";
+
+export function Manga({manga, children} : { manga: IManga | undefined, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }) {
+    const useManga = manga ?? DefaultManga;
+
+    const apiUri = useContext(ApiUriContext);
+
+    const [expanded, setExpanded] = useState(false);
+
+    const [mangaMaxChapter, setMangaMaxChapter] = useState<IChapter>();
+    const [maxChapterLoading, setMaxChapterLoading] = useState<boolean>(true);
+    const loadMaxChapter = useCallback(() => {
+        setMaxChapterLoading(true);
+        GetLatestChapterAvailable(apiUri, useManga.mangaId)
+            .then(setMangaMaxChapter)
+            .finally(() => setMaxChapterLoading(false));
+    }, [useManga, apiUri]);
+
+    const [updatingThreshold, setUpdatingThreshold] = useState<boolean>(false);
+    const updateIgnoreThreshhold = useCallback((value: number) => {
+        setUpdatingThreshold(true);
+        SetIgnoreThreshold(apiUri, useManga.mangaId, value).finally(() => setUpdatingThreshold(false));
+    },[useManga, apiUri])
+
+    useEffect(() => {
+        loadMaxChapter();
+    }, []);
+
+    const LoadMangaCover = useCallback((e : EventTarget & HTMLImageElement) => {
+        if(e.src != GetMangaCoverImageUrl(apiUri, useManga.mangaId, e))
+            e.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, e);
+    }, [useManga, apiUri])
+
+    const sideSx : SxProps = {
+        height: "400px",
+        width: "300px",
+        position: "relative",
+    }
+
+    const interactiveElements = ["button", "input", "textarea", "a"];
+
+    return (
+        <Badge badgeContent={useManga.mangaConnectorId} color={ReleaseStatusToPalette(useManga.releaseStatus)} size={"lg"}>
+            <Card sx={{height:"fit-content",width:"fit-content"}} onClick={(e) => {
+                const target = e.target as HTMLElement;
+                if(interactiveElements.find(x => x == target.localName) == undefined)
+                    setExpanded(!expanded)}
+            }>
+                <CardCover sx={{margin: "var(--Card-padding)"}}>
+                    <img style={{maxHeight:"100%",height:"400px",width:"300px"}} src="/blahaj.png" alt="Manga Cover"
+                         onLoad={(e) => LoadMangaCover(e.currentTarget)}
+                         onResize={(e) => LoadMangaCover(e.currentTarget)}/>
+                </CardCover>
+                <CardCover sx={{
+                    background:
+                        'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
+                }}/>
+                <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
+                    <Box sx={sideSx}>
+                        <Link href={useManga.websiteUrl} level={"h1"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
+                            {useManga.name}
+                        </Link>
+                    </Box>
+                    {
+                        expanded ?
+                            <Box sx={sideSx}>
+                                <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5}>
+                                    {useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)}
+                                    {useManga.tags.map(tag => <Chip key={tag} variant={"outlined"} size={"md"} color={"primary"}>{tag}</Chip>)}
+                                    {useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"danger"} />)}
+                                </Stack>
+                                <MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black"}} />
+                            </Box>
+                            : null
+                    }
+                </CardContent>
+                {
+                    expanded ?
+                        <CardActions sx={{justifyContent:"space-between"}}>
+                            <Input
+                                type={"number"}
+                                placeholder={"0.0"}
+                                startDecorator={
+                                <>
+                                    {
+                                        updatingThreshold ?
+                                            <CircularProgress color={"primary"} size={"sm"} />
+                                            : <Typography>Ch.</Typography>
+                                    }
+                                </>
+                                }
+                                endDecorator={
+                                    <Typography>
+                                        <Skeleton loading={maxChapterLoading}>
+                                            /{mangaMaxChapter?.chapterNumber??"Load Failed"}
+                                        </Skeleton>
+                                    </Typography>
+                                }
+                                sx={{width:"min-content"}}
+                                size={"md"}
+                                onChange={(e) => updateIgnoreThreshhold(e.currentTarget.valueAsNumber)}
+                            />
+                            {children}
+                        </CardActions>
+                        : null
+                }
+            </Card>
+        </Badge>
+    );
+}

tranga-website/src/Components/Search.tsx

@@ -0,0 +1,142 @@
+import {
+    Avatar, Button, Chip,
+    Drawer,
+    Input,
+    ListItemDecorator,
+    Option,
+    Select,
+    SelectOption,
+    Skeleton, Stack,
+    Step,
+    StepIndicator,
+    Stepper, Typography
+} from "@mui/joy";
+import ModalClose from "@mui/joy/ModalClose";
+import IMangaConnector from "../api/types/IMangaConnector";
+import {useCallback, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import {GetAllConnectors} from "../api/MangaConnector.tsx";
+import IManga from "../api/types/IManga.ts";
+import {SearchNameOnConnector} from "../api/Search.tsx";
+import {Manga} from "./Manga.tsx";
+import Add from "@mui/icons-material/Add";
+import React from "react";
+import {CreateDownloadAvailableChaptersJob} from "../api/Job.tsx";
+
+export default function Search({open, setOpen}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>}){
+
+    const [step, setStep] = useState<number>(1);
+
+    const apiUri = useContext(ApiUriContext);
+    const [mangaConnectors, setMangaConnectors] = useState<IMangaConnector[]>([]);
+    const [mangaConnectorsLoading, setMangaConnectorsLoading] = useState<boolean>(true);
+    const [selectedMangaConnector, setSelectedMangaConnector] = useState<IMangaConnector>();
+
+    useEffect(() => {
+        setMangaConnectorsLoading(true);
+        GetAllConnectors(apiUri).then(setMangaConnectors).finally(() => setMangaConnectorsLoading(false));
+    },[apiUri])
+
+    const [results, setResults] = useState<IManga[]>([]);
+    const [resultsLoading, setResultsLoading] = useState<boolean>(false);
+
+    const StartSearch = useCallback((mangaConnector : IMangaConnector | undefined, value: string)=>{
+        if(mangaConnector === undefined)
+            return;
+        setResults([]);
+        setResultsLoading(true);
+        SearchNameOnConnector(apiUri, mangaConnector.name, value).then(setResults).finally(() => setResultsLoading(false));
+    },[apiUri])
+
+    function renderValue(option: SelectOption<string> | null) {
+        if (!option) {
+            return null;
+        }
+
+        return (
+            <React.Fragment>
+                <ListItemDecorator>
+                    <Avatar size="sm" src={mangaConnectors.find((o) => o.name === option.value)?.iconUrl} />
+                </ListItemDecorator>
+                {option.label}
+            </React.Fragment>
+        );
+    }
+
+    return (
+        <Drawer size={"lg"} anchor={"right"} open={open} onClose={() => {
+            setStep(2);
+            setResults([]);
+            setOpen(false);
+        }}>
+            <ModalClose />
+            <Stepper orientation={"vertical"} sx={{ height: '100%', width: "calc(100% - 80px)", margin:"40px"}}>
+                <Step indicator={
+                    <StepIndicator variant="solid" color="primary">
+                        1
+                    </StepIndicator>}>
+                    <Skeleton loading={mangaConnectorsLoading}>
+                        <Select
+                            disabled={mangaConnectorsLoading || resultsLoading}
+                            placeholder={"Select Connector"}
+                            slotProps={{
+                                    listbox: {
+                                        sx: {
+                                            '--ListItemDecorator-size': '44px',
+                                        },
+                                    },
+                                }}
+                            sx={{ '--ListItemDecorator-size': '44px', minWidth: 240 }}
+                            renderValue={renderValue}
+                            onChange={(_e, newValue) => {
+                                setStep(2);
+                                setSelectedMangaConnector(mangaConnectors.find((o) => o.name === newValue));
+                            }}
+                            endDecorator={<Chip size={"sm"} color={"primary"}>{mangaConnectors.length}</Chip>}>
+                            {mangaConnectors?.map((connector: IMangaConnector) => ConnectorOption(connector))}
+                        </Select>
+                    </Skeleton>
+                </Step>
+                <Step indicator={
+                    <StepIndicator variant="solid" color="primary">
+                        2
+                    </StepIndicator>}>
+                    <Input disabled={step < 2 || resultsLoading} placeholder={"Name or Url " + (selectedMangaConnector ? selectedMangaConnector.baseUris[0] : "")} onKeyDown={(e) => {
+                        setStep(2);
+                        setResults([]);
+                        if(e.key === "Enter") {
+                            StartSearch(selectedMangaConnector, e.currentTarget.value);
+                        }
+                    }}/>
+                </Step>
+                <Step indicator={
+                    <StepIndicator variant="solid" color="primary">
+                        3
+                    </StepIndicator>}>
+                    <Typography>Results</Typography>
+                    <Skeleton loading={resultsLoading}>
+                        <Stack direction={"row"} spacing={1}>
+                            {results.map((result) =>
+                                <Manga key={result.mangaId} manga={result}>
+                                    <Button onClick={() => {
+                                        CreateDownloadAvailableChaptersJob(apiUri, result.mangaId, {localLibraryId: "",recurrenceTimeMs: 1000 * 60 * 60 * 3})
+                                    }} endDecorator={<Add />}>Watch</Button>
+                                </Manga>)}
+                        </Stack>
+                    </Skeleton>
+                </Step>
+            </Stepper>
+        </Drawer>
+    );
+}
+
+function ConnectorOption(connector: IMangaConnector){
+    return (
+        <Option key={connector.name} value={connector.name} sx={{position: "relative"}}>
+            <ListItemDecorator>
+                <Avatar size="sm" src={connector.iconUrl} />
+            </ListItemDecorator>
+            {connector.name}
+        </Option>
+    );
+}

tranga-website/src/Header.css

@@ -0,0 +1,10 @@
+.header {
+    position: static !important;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    padding: 10px;
+    display: flex;
+    flex-flow: row nowrap;
+}

tranga-website/src/Header.tsx

@@ -0,0 +1,20 @@
+import Sheet from "@mui/joy/Sheet";
+import {Stack, Typography} from "@mui/joy";
+import {ReactElement} from "react";
+import './Header.css';
+
+export default function Header({children} : {children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) : ReactElement {
+    return (
+        <Sheet className={"header"}>
+            <Stack direction={"row"}
+                   spacing={4}
+                   sx={{
+                       justifyContent: "flex-start",
+                       alignItems: "center",
+                   }}>
+                <Typography level={"h2"}>Tranga</Typography>
+                {children}
+            </Stack>
+        </Sheet>
+    );
+}

tranga-website/src/Settings.tsx

@@ -0,0 +1,93 @@
+import Drawer from '@mui/joy/Drawer';
+import ModalClose from '@mui/joy/ModalClose';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionGroup,
+    AccordionSummary, CircularProgress, ColorPaletteProp,
+    DialogContent,
+    DialogTitle, Input
+} from "@mui/joy";
+import './Settings.css';
+import * as React from "react";
+import {useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "./api/fetchApi.tsx";
+
+const checkConnection  = async (apiUri: string): Promise<boolean> =>{
+    return fetch(`${apiUri}/swagger/v2/swagger.json`,
+        {
+            method: 'GET',
+        })
+        .then((response) => {
+            if(!(response.ok && response.status == 200))
+                return false;
+            return response.json().then((json) => (json as {openapi:string}).openapi.match("[0-9]+(?:\.[0-9]+)+")?true:false).catch(() => false);
+        })
+        .catch(() => {
+            return false;
+        });
+}
+
+export default function Settings({open, setOpen, setApiUri}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, setApiUri:React.Dispatch<React.SetStateAction<string>>}) {
+
+    const apiUri = useContext(ApiUriContext);
+
+    const [apiUriColor, setApiUriColor] = useState<ColorPaletteProp>("neutral");
+    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    const [apiUriAccordionOpen, setApiUriAccordionOpen] = React.useState(true);
+    const [checking, setChecking] = useState(false);
+    useEffect(() => {
+        OnCheckConnection(apiUri);
+    }, []);
+
+    const apiUriChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
+        clearTimeout(timerRef.current);
+        setApiUriColor("warning");
+        timerRef.current = setTimeout(() => {
+            OnCheckConnection(e.target.value);
+        }, 1000);
+    }
+
+    const OnCheckConnection = (uri: string) => {
+        setChecking(true);
+        checkConnection(uri)
+            .then((result) => {
+                setApiUriAccordionOpen(!result);
+                setApiUriColor(result ? "success" : "danger");
+                if(result)
+                    setApiUri(uri);
+            })
+            .finally(() => setChecking(false));
+    }
+
+    return (
+        <Drawer size={"md"} open={open} onClose={() => setOpen(false)}>
+            <ModalClose />
+            <DialogTitle>Settings</DialogTitle>
+            <DialogContent>
+                <AccordionGroup>
+                    <Accordion expanded={apiUriAccordionOpen} onChange={(_e, expanded) => setApiUriAccordionOpen(expanded)}>
+                        <AccordionSummary>ApiUri</AccordionSummary>
+                        <AccordionDetails>
+                            <Input
+                                disabled={checking}
+                                color={apiUriColor}
+                                placeholder={"http(s)://"}
+                                type={"url"}
+                                defaultValue={apiUri}
+                                onChange={apiUriChanged}
+                                onKeyDown={(e) => {
+                                    if(e.key === "Enter") {
+                                        clearTimeout(timerRef.current);
+                                        OnCheckConnection(e.currentTarget.value);
+                                    }
+                                }}
+                                endDecorator={(checking ? <CircularProgress color={apiUriColor} size={"sm"} /> : null)} />
+                        </AccordionDetails>
+                    </Accordion>
+                </AccordionGroup>
+            </DialogContent>
+        </Drawer>
+    );
+}

tranga-website/src/api/BackendSettings.tsx

@@ -0,0 +1,80 @@
+import {deleteData, getData, patchData} from './fetchApi.tsx';
+import IBackendSettings from "./types/IBackendSettings.ts";
+import IRequestLimits from "./types/IRequestLimits.ts";
+import {RequestLimitType} from "./types/EnumRequestLimitType.ts";
+
+export const GetSettings = async (apiUri: string) : Promise<IBackendSettings> => {
+    return await getData(`${apiUri}/v2/Settings`) as Promise<IBackendSettings>;
+}
+
+export const GetUserAgent = async (apiUri: string) : Promise<string> => {
+    return await getData(`${apiUri}/v2/Settings/UserAgent`) as Promise<string>;
+}
+
+export const UpdateUserAgent = async (apiUri: string, userAgent: string)=>  {
+    if(userAgent === undefined || userAgent === null)
+        return Promise.reject(`userAgent was not provided`);
+    return patchData(`${apiUri}/v2/Settings/UserAgent`, userAgent);
+}
+
+export const ResetUserAgent = async (apiUri: string) => {
+    return deleteData(`${apiUri}/v2/Settings/UserAgent`);
+}
+
+export const GetRequestLimits = async(apiUri: string) : Promise<IRequestLimits> => {
+    return await getData(`${apiUri}/v2/Settings/RequestLimits`) as Promise<IRequestLimits>;
+}
+
+export const ResetRequestLimits = async (apiUri: string) => {
+    return deleteData(`${apiUri}/v2/Settings/RequestLimits`);
+}
+
+export const UpdateRequestLimit = async (apiUri: string, requestType: RequestLimitType, value: number) => {
+    if(requestType === undefined || requestType === null || value === undefined || value === null)
+        return Promise.reject();
+    return patchData(`${apiUri}/v2/Settings/RequestLimits/${requestType}`, value);
+}
+
+export const ResetRequestLimit = async (apiUri: string, requestType: RequestLimitType) => {
+    if(requestType === undefined || requestType === null)
+        return Promise.reject("requestType was not provided");
+    return deleteData(`${apiUri}/v2/Settings/RequestLimits/${requestType}`);
+}
+
+export const GetImageCompressionValue = async (apiUri: string) : Promise<number> => {
+    return await getData(`${apiUri}/v2/Settings/ImageCompression`) as Promise<number>;
+}
+
+export const UpdateImageCompressionValue = async (apiUri: string, value: number) => {
+    if(value === undefined || value === null)
+        return Promise.reject("value was not provided");
+    return patchData(`${apiUri}/v2/Settings/ImageCompression`, value);
+}
+
+export const GetBWImageToggle = async (apiUri: string) : Promise<boolean> => {
+    return await getData(`${apiUri}/v2/Settings/BWImages`) as Promise<boolean>;
+}
+
+export const UpdateBWImageToggle = async (apiUri: string, value: boolean) => {
+    if(value === undefined || value === null)
+        return Promise.reject("value was not provided");
+    return patchData(`${apiUri}/v2/Settings/BWImages`, value);
+}
+
+export const GetAprilFoolsToggle = async (apiUri: string) : Promise<boolean> => {
+    return await getData(`${apiUri}/v2/Settings/AprilFoolsMode`) as Promise<boolean>;
+}
+
+export const UpdateAprilFoolsToggle = async (apiUri: string, value: boolean) => {
+    if(value === undefined || value === null)
+        return Promise.reject("value was not provided");
+    return patchData(`${apiUri}/v2/Settings/AprilFoolsMode`, value);
+}
+
+export const GetChapterNamingScheme = async (apiUri: string) : Promise<string> => {
+    return await getData(`${apiUri}/v2/Settings/ChapterNamingScheme`) as Promise<string>;
+}
+
+export const UpdateChapterNamingScheme = async (apiUri: string, value: string) => {
+    return patchData(`${apiUri}/v2/Settings/ChapterNamingScheme`, value);
+}

tranga-website/src/api/Chapter.tsx

@@ -0,0 +1,8 @@
+import {getData} from "./fetchApi.tsx";
+import IChapter from "./types/IChapter.ts";
+
+export const GetChapterFromId = async (apiUri: string, chapterId: string): Promise<IChapter> => {
+    if(chapterId === undefined || chapterId === null)
+        return Promise.reject(`chapterId was not provided`);
+    return await getData(`${apiUri}/v2/Query/Chapter/${chapterId}`) as Promise<IChapter>;
+}

tranga-website/src/api/Job.tsx

@@ -0,0 +1,97 @@
+import {deleteData, getData, patchData, postData, putData} from "./fetchApi";
+import IJob, {JobState, JobType} from "./types/Jobs/IJob";
+import IModifyJobRecord from "./types/records/IModifyJobRecord";
+import IDownloadAvailableJobsRecord from "./types/records/IDownloadAvailableJobsRecord.ts";
+
+export const GetAllJobs = async (apiUri: string) : Promise<IJob[]> => {
+    return await getData(`${apiUri}/v2/Job`) as Promise<IJob[]>;
+}
+
+export const GetJobsWithIds = async (apiUri: string, jobIds: string[]) : Promise<IJob[]> => {
+    if(jobIds === null || jobIds === undefined || jobIds.length === 0)
+        return Promise.reject("jobIds was not provided");
+    return await postData(`${apiUri}/v2/Job/WithIDs`, jobIds) as Promise<IJob[]>;
+}
+
+export const GetJobsInState = async (apiUri: string, state: JobState) : Promise<IJob[]> => {
+    if(state == null || state == undefined)
+        return Promise.reject("state was not provided");
+    return await getData(`${apiUri}/v2/Job/State/${state}`) as Promise<IJob[]>;
+}
+
+export const GetJobsWithType = async (apiUri: string, jobType: JobType) : Promise<IJob[]> => {
+    if(jobType == null || jobType == undefined) {
+        return Promise.reject("jobType was not provided");
+    }
+    return await getData(`${apiUri}/v2/Job/Type/${jobType}`) as Promise<IJob[]>;
+}
+
+export const GetJobsOfTypeAndWithState = async (apiUri: string, jobType: JobType, state: JobState) : Promise<IJob[]> => {
+    if(jobType == null || jobType == undefined)
+        return Promise.reject("jobType was not provided");
+    if(state == null || state == undefined)
+        return Promise.reject("state was not provided");
+    return await getData(`${apiUri}/v2/Job/TypeAndState/${jobType}/${state}`) as Promise<IJob[]>;
+}
+
+export const GetJob = async (apiUri: string, jobId: string) : Promise<IJob> => {
+    if(jobId === undefined || jobId === null || jobId.length < 1)
+        return Promise.reject("jobId was not provided");
+    return await getData(`${apiUri}/v2/Job/${jobId}`) as Promise<IJob>;
+}
+
+export const DeleteJob = async (apiUri: string, jobId: string) : Promise<void> => {
+    if(jobId === undefined || jobId === null || jobId.length < 1)
+        return Promise.reject("jobId was not provided");
+    return await deleteData(`${apiUri}/v2/Job/${jobId}`);
+}
+
+export const ModifyJob = async (apiUri: string, jobId: string, modifyData: IModifyJobRecord) : Promise<IJob> => {
+    if(jobId === undefined || jobId === null || jobId.length < 1)
+        return Promise.reject("jobId was not provided");
+    if(modifyData === undefined || modifyData === null)
+        return Promise.reject("modifyData was not provided");
+    return await patchData(`${apiUri}/v2/Job/${jobId}`, modifyData) as Promise<IJob>;
+}
+
+export const CreateDownloadAvailableChaptersJob = async (apiUri: string, mangaId: string, data: IDownloadAvailableJobsRecord) : Promise<string[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    if(data === undefined || data === null)
+        return Promise.reject("data was not provided");
+    return await putData(`${apiUri}/v2/Job/DownloadAvailableChaptersJob/${mangaId}`, data) as Promise<string[]>;
+}
+
+export const CreateDownloadSingleChapterJob = async (apiUri: string, chapterId: string) : Promise<string[]> => {
+    if(chapterId === undefined || chapterId === null || chapterId.length < 1)
+        return Promise.reject("chapterId was not provided");
+    return await putData(`${apiUri}/v2/Job/DownloadSingleChapterJob/${chapterId}`, {}) as Promise<string[]>;
+}
+
+export const CreateUpdateFilesJob = async (apiUri: string, mangaId: string) : Promise<string[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await putData(`${apiUri}/v2/Job/UpdateFilesJob/${mangaId}`, {}) as Promise<string[]>;
+}
+
+export const CreateUpdateAllFilesJob = async (apiUri: string) : Promise<string[]> => {
+    return await putData(`${apiUri}/v2/Job/UpdateAllFilesJob`, {}) as Promise<string[]>;
+}
+
+export const CreateUpdateMetadataJob = async (apiUri: string, mangaId: string) : Promise<string[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await putData(`${apiUri}/v2/Job/UpdateMetadataJob/${mangaId}`, {}) as Promise<string[]>;
+}
+
+export const CreateUpdateAllMetadataJob = async (apiUri: string) : Promise<string[]> => {
+    return await putData(`${apiUri}/v2/Job/UpdateAllMetadataJob`, {}) as Promise<string[]>;
+}
+
+export const StartJob = async (apiUri: string, jobId: string) : Promise<object> => {
+    return await postData(`${apiUri}/v2/Job/${jobId}/Start`, {});
+}
+
+export const StopJob = async (apiUri: string, jobId: string) : Promise<object> => {
+    return await postData(`${apiUri}/v2/Job/${jobId}/Stop`, {});
+}

tranga-website/src/api/LocalLibrary.tsx

@@ -0,0 +1,31 @@
+import ILocalLibrary from "./types/ILocalLibrary.ts";
+import {deleteData, getData, patchData, putData} from "./fetchApi.tsx";
+import INewLibraryRecord from "./types/records/INewLibraryRecord.ts";
+
+export const GetLibraries = async (apiUri: string) : Promise<ILocalLibrary[]> => {
+    return await getData(`${apiUri}/v2/LocalLibraries`) as Promise<ILocalLibrary[]>;
+}
+
+export const  GetLibrary = async (apiUri: string, libraryId: string) : Promise<ILocalLibrary> => {
+    return await getData(`${apiUri}/v2/LocalLibraries/${libraryId}`) as Promise<ILocalLibrary>;
+}
+
+export const  CreateLibrary = async (apiUri: string, data: INewLibraryRecord) : Promise<ILocalLibrary> => {
+    return await putData(`${apiUri}/v2/LocalLibraries`, data) as Promise<ILocalLibrary>
+}
+
+export const  DeleteLibrary = async (apiUri: string, libraryId: string) : Promise<void> => {
+    return await deleteData(`${apiUri}/v2/LocalLibraries/${libraryId}`);
+}
+
+export const  ChangeLibraryPath = async (apiUri: string, libraryId: string, newPath: string) : Promise<object> => {
+    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}/ChangeBasePath`, newPath);
+}
+
+export const  ChangeLibraryName = async (apiUri: string, libraryId: string, newName: string) : Promise<object> => {
+    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}/ChangeName`, newName);
+}
+
+export const  UpdateLibrary = async (apiUri: string, libraryId: string, record: INewLibraryRecord) : Promise<object> => {
+    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}`, record);
+}

tranga-website/src/api/Manga.tsx

@@ -0,0 +1,77 @@
+import {deleteData, getData, patchData, postData} from './fetchApi.tsx';
+import IManga from "./types/IManga.ts";
+import IChapter from "./types/IChapter.ts";
+
+export const GetAllManga = async (apiUri: string) : Promise<IManga[]> => {
+    return await getData(`${apiUri}/v2/Manga`) as Promise<IManga[]>;
+}
+
+export const GetMangaWithIds = async (apiUri: string, mangaIds: string[]) : Promise<IManga[]> => {
+    if(mangaIds === undefined || mangaIds === null || mangaIds.length < 1)
+        return Promise.reject("mangaIds was not provided");
+    return await postData(`${apiUri}/v2/Manga/WithIds`, mangaIds) as Promise<IManga[]>;
+}
+
+export const GetMangaById = async (apiUri: string, mangaId: string) : Promise<IManga> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}`) as Promise<IManga>;
+}
+
+export const DeleteManga = async (apiUri: string, mangaId: string) : Promise<void> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await deleteData(`${apiUri}/v2/Manga/${mangaId}`);
+}
+
+export const GetMangaCoverImageUrl = (apiUri: string, mangaId: string, ref: HTMLImageElement | undefined) : string => {
+    if(ref == null || ref == undefined)
+        return `${apiUri}/v2/Manga/${mangaId}/Cover?width=64&height=64`;
+    return `${apiUri}/v2/Manga/${mangaId}/Cover?width=${ref.clientWidth}&height=${ref.clientHeight}`;
+}
+
+export const GetChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters`) as Promise<IChapter[]>;
+}
+
+export const  GetDownloadedChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters/Downloaded`) as Promise<IChapter[]>;
+}
+
+export const  GetNotDownloadedChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters/NotDownloaded`) as Promise<IChapter[]>;
+}
+
+export const  GetLatestChapterAvailable = async (apiUri: string, mangaId: string) : Promise<IChapter> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestAvailable`) as Promise<IChapter>;
+}
+
+export const  GetLatestChapterDownloaded = async (apiUri: string, mangaId: string) : Promise<IChapter> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestDownloaded`) as Promise<IChapter>;
+}
+
+export const  SetIgnoreThreshold = async (apiUri: string, mangaId: string, chapterThreshold: number) : Promise<object> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    if(chapterThreshold === undefined || chapterThreshold === null)
+        return Promise.reject("chapterThreshold was not provided");
+    return await patchData(`${apiUri}/v2/Manga/${mangaId}/IgnoreChaptersBefore`, chapterThreshold);
+}
+
+export const  MoveFolder = async (apiUri: string, mangaId: string, newPath: string) : Promise<object> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    if(newPath === undefined || newPath === null || newPath.length < 1)
+        return Promise.reject("newPath was not provided");
+    return await postData(`${apiUri}/v2/Manga/{MangaId}/MoveFolder`, {newPath});
+}

tranga-website/src/api/MangaConnector.tsx

@@ -0,0 +1,22 @@
+import {getData, patchData} from './fetchApi.tsx';
+import IMangaConnector from "./types/IMangaConnector.ts";
+
+export const GetAllConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
+    return await getData(`${apiUri}/v2/MangaConnector`) as Promise<IMangaConnector[]>
+}
+
+export const  GetEnabledConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
+    return await getData(`${apiUri}/v2/MangaConnector/enabled`) as Promise<IMangaConnector[]>
+}
+
+export const  GetDisabledConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
+    return await getData(`${apiUri}/v2/MangaConnector/disabled`) as Promise<IMangaConnector[]>
+}
+
+export const  SetConnectorEnabled = async (apiUri: string, connectorName: string, enabled: boolean) : Promise<object> => {
+    if(connectorName === undefined || connectorName === null || connectorName.length < 1)
+        return Promise.reject("connectorName was not provided");
+    if(enabled === undefined || enabled === null)
+        return Promise.reject("enabled was not provided");
+    return await patchData(`${apiUri}/v2/MangaConnector/${connectorName}/SetEnabled/${enabled}`, {});
+}

tranga-website/src/api/NotificationConnector.tsx

@@ -0,0 +1,52 @@
+import {deleteData, getData, putData} from "./fetchApi.tsx";
+import INotificationConnector from "./types/INotificationConnector.ts";
+import IGotifyRecord from "./types/records/IGotifyRecord.ts";
+import INtfyRecord from "./types/records/INtfyRecord.ts";
+import ILunaseaRecord from "./types/records/ILunaseaRecord.ts";
+import IPushoverRecord from "./types/records/IPushoverRecord.ts";
+
+export const  GetNotificationConnectors = async (apiUri: string) : Promise<INotificationConnector[]> => {
+    return await getData(`${apiUri}/v2/NotificationConnector`) as Promise<INotificationConnector[]>
+}
+
+export const  CreateNotificationConnector = async (apiUri: string, newConnector: INotificationConnector) : Promise<string> => {
+    if(newConnector === undefined || newConnector === null)
+        return Promise.reject("newConnector was not provided");
+    return await putData(`${apiUri}/v2/NotificationConnector`, newConnector) as Promise<string>;
+}
+
+export const  GetNotificationConnectorWithId = async (apiUri: string, notificationConnectorId: string) : Promise<INotificationConnector> => {
+    if(notificationConnectorId === undefined || notificationConnectorId === null || notificationConnectorId.length < 1)
+        return Promise.reject("notificationConnectorId was not provided");
+    return await getData(`${apiUri}/v2/NotificationConnector/${notificationConnectorId}`) as Promise<INotificationConnector>;
+}
+
+export const  DeleteNotificationConnectorWithId = async (apiUri: string, notificationConnectorId: string) : Promise<void> => {
+    if(notificationConnectorId === undefined || notificationConnectorId === null || notificationConnectorId.length < 1)
+        return Promise.reject("notificationConnectorId was not provided");
+    return await deleteData(`${apiUri}/v2/NotificationConnector/${notificationConnectorId}`);
+}
+
+export const  CreateGotify = async (apiUri: string, gotify: IGotifyRecord) : Promise<string> => {
+    if(gotify === undefined || gotify === null)
+        return Promise.reject("gotify was not provided");
+    return await putData(`${apiUri}/v2/NotificationConnector/Gotify`, gotify) as Promise<string>;
+}
+
+export const  CreateNtfy = async (apiUri: string, ntfy: INtfyRecord) : Promise<string> => {
+    if(ntfy === undefined || ntfy === null)
+        return Promise.reject("gotify was not provided");
+    return await putData(`${apiUri}/v2/NotificationConnector/Ntfy`, ntfy) as Promise<string>;
+}
+
+export const  CreateLunasea = async (apiUri: string, lunasea: ILunaseaRecord) : Promise<string> => {
+    if(lunasea === undefined || lunasea === null)
+        return Promise.reject("lunasea was not provided");
+    return await putData(`${apiUri}/v2/NotificationConnector/Lunasea`, lunasea) as Promise<string>;
+}
+
+export const  CreatePushover = async (apiUri: string, pushover: IPushoverRecord) : Promise<string> => {
+    if(pushover === undefined || pushover === null)
+        return Promise.reject("pushover was not provided");
+    return await putData(`${apiUri}/v2/NotificationConnector/Pushover`, pushover) as Promise<string>;
+}

tranga-website/src/api/Query.tsx

@@ -0,0 +1,15 @@
+import IAuthor from "./types/IAuthor.ts";
+import {getData} from "./fetchApi.tsx";
+import ILink from "./types/ILink.ts";
+
+export const GetAuthor = async (apiUri: string, authorId: string) : Promise<IAuthor> => {
+    if(authorId === undefined || authorId === null || authorId.length < 1)
+        return Promise.reject("authorId was not provided");
+    return await getData(`${apiUri}/v2/Query/Author/${authorId}`) as Promise<IAuthor>;
+}
+
+export const GetLink = async (apiUri: string, linkId: string) : Promise<ILink> => {
+    if(linkId === undefined || linkId === null || linkId.length < 1)
+        return Promise.reject("linkId was not provided");
+    return await getData(`${apiUri}/v2/Query/Link/${linkId}`) as Promise<ILink>;
+}

tranga-website/src/api/Search.tsx

@@ -0,0 +1,22 @@
+import {postData} from "./fetchApi.tsx";
+import IManga from "./types/IManga.ts";
+
+export const SearchName = async (apiUri: string, name: string) : Promise<IManga[]> => {
+    if(name === undefined || name === null || name.length < 1)
+        return Promise.reject("name was not provided");
+    return await postData(`${apiUri}/v2/Search/Name`, name) as Promise<IManga[]>;
+}
+
+export const SearchNameOnConnector = async (apiUri: string, connectorName: string, name: string) : Promise<IManga[]> => {
+    if(connectorName === undefined || connectorName === null || connectorName.length < 1)
+        return Promise.reject("connectorName was not provided");
+    if(name === undefined || name === null || name.length < 1)
+        return Promise.reject("name was not provided");
+    return await postData(`${apiUri}/v2/Search/${connectorName}`, name) as Promise<IManga[]>;
+}
+
+export const SearchUrl = async (apiUri: string, url: string) : Promise<IManga> => {
+    if(url === undefined || url === null || url.length < 1)
+        return Promise.reject("name was not provided");
+    return await postData(`${apiUri}/v2/Search/Url`, url) as Promise<IManga>;
+}

tranga-website/src/api/fetchApi.tsx

@@ -0,0 +1,80 @@
+import {createContext} from "react";
+
+export const ApiUriContext = createContext<string>("");
+
+export function getData(uri: string) : Promise<object> {
+    return makeRequest("GET", uri, null) as Promise<object>;
+}
+
+export function postData(uri: string, content: object | string | number | boolean) : Promise<object> {
+    return makeRequest("POST", uri, content) as Promise<object>;
+}
+
+export function deleteData(uri: string) : Promise<void> {
+    return makeRequest("DELETE", uri, null) as Promise<void>;
+}
+
+export function patchData(uri: string, content: object | string | number | boolean) : Promise<object> {
+    return makeRequest("patch", uri, content) as Promise<object>;
+}
+
+export function putData(uri: string, content: object | string | number | boolean) : Promise<object> {
+    return makeRequest("PUT", uri, content) as Promise<object>;
+}
+
+let currentlyRequestedEndpoints: string[] = [];
+function makeRequest(method: string, uri: string, content: object | string | number | null | boolean) : Promise<object | void> {
+    const id = method + uri;
+    if(currentlyRequestedEndpoints.find(x => x == id) != undefined)
+        return Promise.reject(`Already requested: ${method} ${uri}`);
+    currentlyRequestedEndpoints.push(id);
+    return fetch(uri,
+        {
+            method: method,
+            headers : {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            },
+            body: content ? JSON.stringify(content) : null
+        })
+        .then(function(response){
+            if(!response.ok){
+                if(response.status === 503){
+                    currentlyRequestedEndpoints.splice(currentlyRequestedEndpoints.indexOf(id), 1)
+                    let retryHeaderVal = response.headers.get("Retry-After");
+                    let seconds = 10;
+                    if(retryHeaderVal === null){
+                        return response.text().then(text => {
+                            seconds = parseInt(text);
+                            return new Promise(resolve => setTimeout(resolve, seconds * 1000))
+                                .then(() => {
+                                    return makeRequest(method, uri, content);
+                                });
+                        });
+                    }else {
+                        seconds = parseInt(retryHeaderVal);
+                        return new Promise(resolve => setTimeout(resolve, seconds * 1000))
+                            .then(() => {
+                                return makeRequest(method, uri, content);
+                            });
+                    }
+                }else
+                    throw new Error(response.statusText);
+            }
+            let json = response.json();
+            return json.then((json) => json).catch(() => null);
+        })
+        .catch(function(err : Error){
+            console.error(`Error ${method}ing Data ${uri}\n${err}`);
+            return Promise.reject();
+        }).finally(() => currentlyRequestedEndpoints.splice(currentlyRequestedEndpoints.indexOf(id), 1));
+}
+
+export function isValidUri(uri: string) : boolean{
+    try {
+        new URL(uri);
+        return true;
+    } catch (err) {
+        return false;
+    }
+}

tranga-website/src/api/types/EnumLibraryType.ts

@@ -0,0 +1,4 @@
+export enum LibraryType {
+    Komga = "Komga",
+    Kavita = "Kavita"
+}

tranga-website/src/api/types/EnumMangaReleaseStatus.ts

@@ -0,0 +1,24 @@
+import {ColorPaletteProp} from "@mui/joy";
+
+export enum MangaReleaseStatus {
+    Continuing = "Continuing",
+    Completed = "Completed",
+    OnHiatus = "OnHiatus",
+    Cancelled = "Cancelled",
+    Unreleased = "Unreleased",
+}
+
+export function ReleaseStatusToPalette(status: MangaReleaseStatus): ColorPaletteProp {
+    switch (status) {
+        case MangaReleaseStatus.Continuing:
+            return "success";
+        case MangaReleaseStatus.Completed:
+            return "primary";
+        case MangaReleaseStatus.Cancelled:
+            return "danger";
+        case MangaReleaseStatus.Unreleased:
+            return "neutral";
+        case MangaReleaseStatus.OnHiatus:
+            return "warning";
+    }
+}

tranga-website/src/api/types/EnumRequestLimitType.ts

@@ -0,0 +1,8 @@
+export enum RequestLimitType {
+    Default = "Default",
+    MangaDexFeed = "MangaDexFeed",
+    MangaImage = "MangaImage",
+    MangaCover = "MangaCover",
+    MangaDexImage = "MangaDexImage",
+    MangaInfo = "MangaInfo"
+}

tranga-website/src/api/types/IAuthor.ts

@@ -0,0 +1,4 @@
+export default interface IAuthor {
+    authorId: string;
+    authorName: string;
+}

tranga-website/src/api/types/IBackendSettings.ts

@@ -0,0 +1,18 @@
+export default interface IBackendSettings {
+    downloadLocation: string;
+    workingDirectory: string;
+    userAgent: string;
+    aprilFoolsMode: boolean;
+    requestLimits: {
+        Default: number,
+        MangaInfo: number,
+        MangaDexFeed: number,
+        MangaDexImage: number,
+        MangaImage: number,
+        MangaCover: number,
+    };
+    compression: number;
+    bwImages: boolean;
+    startNewJobTimeoutMs: number;
+    chapterNamingScheme: string;
+}

tranga-website/src/api/types/IChapter.ts

@@ -0,0 +1,10 @@
+export default interface IChapter{
+    chapterId: string;
+    volumeNumber: number;
+    chapterNumber: string;
+    url: string;
+    title: string | undefined;
+    archiveFileName: string;
+    downloaded: boolean;
+    parentMangaId: string;
+}

tranga-website/src/api/types/IFrontendSettings.ts

@@ -0,0 +1,4 @@
+export default interface IFrontendSettings {
+    jobInterval: Date;
+    apiUri: string;
+}

tranga-website/src/api/types/ILibraryConnector.ts

@@ -0,0 +1,8 @@
+import {LibraryType} from "./EnumLibraryType";
+
+export default interface ILibraryConnector {
+    libraryConnectorId: string;
+    libraryType: LibraryType;
+    baseUrl: string;
+    auth: string;
+}

tranga-website/src/api/types/ILink.ts

@@ -0,0 +1,5 @@
+export default interface ILink {
+    linkId: string;
+    linkProvider: string;
+    linkUrl: string;
+}

tranga-website/src/api/types/ILocalLibrary.ts

@@ -0,0 +1,5 @@
+export default interface ILocalLibrary {
+    localLibraryId: string;
+    basePath: string;
+    libraryName: string;
+}

tranga-website/src/api/types/IManga.ts

@@ -0,0 +1,37 @@
+import {MangaReleaseStatus} from "./EnumMangaReleaseStatus";
+
+export default interface IManga{
+    mangaId: string;
+    idOnConnectorSite: string;
+    name: string;
+    description: string;
+    websiteUrl: string;
+    year: number;
+    originalLanguage: string;
+    releaseStatus: MangaReleaseStatus;
+    folderName: string;
+    ignoreChapterBefore: number;
+    mangaConnectorId: string;
+    authorIds: string[];
+    tags: string[];
+    linkIds: string[];
+    altTitleIds: string[];
+}
+
+export const DefaultManga : IManga = {
+    mangaId: "MangaId",
+    idOnConnectorSite: "ID",
+    name: "TestManga",
+    description: "Wow so much text, very cool",
+    websiteUrl: "https://realsite.realdomain",
+    year: 1999,
+    originalLanguage: "lindtChoccy",
+    releaseStatus: MangaReleaseStatus.Continuing,
+    folderName: "uhhh",
+    ignoreChapterBefore: 0,
+    mangaConnectorId: "MangaDex",
+    authorIds: ["We got", "Authors"],
+    tags: ["And we", "got Tags"],
+    linkIds: ["And most", "definitely", "links"],
+    altTitleIds: ["But not alt-titles."],
+}

tranga-website/src/api/types/IMangaAltTitle.ts

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

tranga-website/src/api/types/IMangaConnector.ts

@@ -0,0 +1,7 @@
+export default interface IMangaConnector {
+    name: string;
+    supportedLanguages: string[];
+    iconUrl: string;
+    baseUris: string[];
+    enabled: boolean;
+}