Add Settings Popup

Add NotificationConnector Setting (need to add styling)

README.md

@@ -14,7 +14,7 @@
 <h3 align="center">Tranga-Website</h3>
 
   <p align="center">
-    Automatic Manga and Metadata downloader 
+    Automatic MangaFunctions and Metadata downloader 
   </p>
   <p align="center">
     This is the Website for <a href="https://github.com/C9Glax/tranga">Tranga</a> (API)  
@@ -46,7 +46,7 @@
 | Search                                                                     | SearchResults                                                                   | Default-View                                                               |
 |----------------------------------------------------------------------------|---------------------------------------------------------------------------------|----------------------------------------------------------------------------|
 | ![Image](Screenshots/Screenshot%202025-03-14%20at%2000-53-15%20Tranga.png) | ![Image](Screenshots/Screenshot%202025-03-14%20at%2000-54-59%20Tranga.png)      | ![Image](Screenshots/Screenshot%202025-03-14%20at%2000-55-13%20Tranga.png) |
-| Search opens with click on "Add new Manga"                                 | When selecting different connectors, available languages automatically update   | Clicking on an Item here will bring up a view with more information        |
+| Search opens with click on "Add new MangaFunctions"                                 | When selecting different connectors, available languages automatically update   | Clicking on an Item here will bring up a view with more information        |
 
 
 ## About The Project

Website/App.tsx

@@ -39,7 +39,7 @@ export default function App(){
     const UpdateList = () => {setUpdateMonitorList(new Date())}
 
     return(<div>
-        <Header apiUri={apiUri} backendConnected={connected} settings={frontendSettings} changeSettings={ChangeSettings}/>
+        <Header apiUri={apiUri} backendConnected={connected} settings={frontendSettings} />
         {connected
             ? <>
                 {showSearch

Website/modules/ChapterFunctions.tsx

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

Website/modules/Footer.tsx

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

Website/modules/Header.tsx

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

Website/modules/JobFunctions.tsx

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

Website/modules/LibraryConnector.tsx

@@ -1,135 +0,0 @@
-import {deleteData, getData, postData} from "../App";
-import ILibraryConnector from "./interfaces/ILibraryConnector";
-
-export default abstract class LibraryConnector
-{
-    static async GetLibraryConnectors(apiUri: string) : Promise<ILibraryConnector[]> {
-    //console.info("Getting Library Connectors");
-    return getData(`${apiUri}/v2/LibraryConnector`)
-        .then((json) => {
-            //console.info("Got Library Connectors");
-            const ret = json as ILibraryConnector[];
-            //console.debug(ret);
-            return (ret);
-        })
-        .catch(Promise.reject);
-    }
-    public url = "";
-
-    protected constructor(url: string) {
-        this.url = url;
-    }
-
-    public SetUrl(url: string){
-        this.url = url;
-    }
-
-    public abstract Test(apiUri: string) : Promise<boolean>;
-    public abstract Reset(apiUri: string) : Promise<boolean>;
-    public abstract Create(apiUri: string) : Promise<boolean>;
-    protected abstract CheckConnector() : boolean;
-
-    protected async TestConnector(apiUri: string, connectorType: string, data: object): Promise<boolean> {
-        if(!this.CheckConnector())
-            return Promise.reject("Connector not fully configured.");
-        //console.info(`Testing ${connectorType}`);
-        return postData(`${apiUri}/v2/LibraryConnector/${connectorType}/Test`, data)
-            .then((json) => {
-                //console.info(`Successfully tested ${connectorType}`);
-                return true;
-            })
-            .catch(Promise.reject);
-    }
-
-    protected async ResetConnector(apiUri: string, connectorType: string): Promise<boolean> {
-        //console.info(`Deleting ${connectorType}`);
-        return deleteData(`${apiUri}/v2/LibraryConnector/${connectorType}`)
-            .then((json) => {
-                //console.info(`Successfully deleted ${connectorType}`);
-                return true;
-            })
-            .catch(Promise.reject);
-    }
-
-    protected async CreateConnector(apiUri: string, connectorType: string, data: object): Promise<boolean> {
-        if(!this.CheckConnector())
-            return Promise.reject("Connector not fully configured.");
-        //console.info(`Creating ${connectorType}`);
-        return postData(`${apiUri}/v2/LibraryConnector/${connectorType}`, data)
-            .then((json) => {
-                //console.info(`Successfully created ${connectorType}`);
-                return true;
-            })
-            .catch(Promise.reject);
-    }
-}
-
-export class Komga extends LibraryConnector
-{
-    private username = "";
-    private password = "";
-
-    constructor({url, username, password} : {url: string, username: string, password: string}){
-        super(url);
-        this.username = username;
-        this.password = password;
-    }
-
-    public async Test(apiUri: string) : Promise<boolean> {
-        return this.TestConnector(apiUri, "Komga", {url: this.url, username: this.username, password: this.password}).then(() => true).catch(() => false);
-    }
-
-    public async Reset(apiUri: string) : Promise<boolean> {
-        return this.ResetConnector(apiUri, "Komga").then(() => true).catch(() => false);
-    }
-
-    public async Create(apiUri: string) : Promise<boolean> {
-        return this.CreateConnector(apiUri, "Komga", {url: this.url, username: this.username, password: this.password}).then(() => true).catch(() => false);
-    }
-
-    protected CheckConnector(): boolean {
-        try{
-            new URL(this.url)
-        }catch{
-            return false;
-        }
-        if(this.username.length < 1 || this.password.length < 1)
-            return false;
-        return true;
-    }
-}
-
-export class Kavita extends LibraryConnector
-{
-    private username = "";
-    private password = "";
-
-    constructor({url, username, password} : {url: string, username: string, password: string}) {
-        super(url);
-        this.username = username;
-        this.password = password;
-    }
-
-    public async Test(apiUri: string) : Promise<boolean> {
-        return this.TestConnector(apiUri, "Kavita", {url: this.url, username: this.username, password: this.password}).then(() => true).catch(() => false);
-    }
-
-    public async Reset(apiUri: string) : Promise<boolean> {
-        return this.ResetConnector(apiUri, "Kavita").then(() => true).catch(() => false);
-    }
-
-    public async Create(apiUri: string) : Promise<boolean> {
-        return this.CreateConnector(apiUri, "Kavita", {url: this.url, username: this.username, password: this.password}).then(() => true).catch(() => false);
-    }
-
-    protected CheckConnector(): boolean {
-        try{
-            new URL(this.url)
-        }catch{
-            return false;
-        }
-        if(this.username.length < 1 || this.password.length < 1)
-            return false;
-        return true;
-    }
-}

Website/modules/LocalLibraryFunctions.tsx

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

Website/modules/MangaConnectorFunctions.tsx

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

Website/modules/MangaFunctions.tsx

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

Website/modules/MonitorJobsList.tsx

@@ -1,14 +1,14 @@
 import React, {EventHandler, ReactElement, useEffect, useState} from 'react';
-import Job from './Job';
+import JobFunctions from './JobFunctions';
 import '../styles/monitorMangaList.css';
 import {JobType} from "./interfaces/Jobs/IJob";
-import '../styles/MangaCoverCard.css'
-import DownloadAvailableChaptersJob from "./interfaces/Jobs/DownloadAvailableChaptersJob";
+import '../styles/mangaCover.css'
+import IDownloadAvailableChaptersJob from "./interfaces/Jobs/IDownloadAvailableChaptersJob";
 import {MangaItem} from "./interfaces/IManga";
-import Manga from "./Manga";
+import MangaFunctions from "./MangaFunctions";
 
 export default function MonitorJobsList({onStartSearch, onJobsChanged, connectedToBackend, apiUri, updateList} : {onStartSearch() : void, onJobsChanged: EventHandler<any>, connectedToBackend: boolean, apiUri: string, updateList: Date}) {
-    const [MonitoringJobs, setMonitoringJobs] = useState<DownloadAvailableChaptersJob[]>([]);
+    const [MonitoringJobs, setMonitoringJobs] = useState<IDownloadAvailableChaptersJob[]>([]);
     const [joblistUpdateInterval, setJoblistUpdateInterval] = React.useState<number>();
 
     useEffect(() => {
@@ -31,8 +31,8 @@ export default function MonitorJobsList({onStartSearch, onJobsChanged, connected
         if(!connectedToBackend)
             return;
         //console.debug("Updating MonitoringJobsList");
-        Job.GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob)
-            .then((jobs) => setMonitoringJobs(jobs as DownloadAvailableChaptersJob[]));
+        JobFunctions.GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob)
+            .then((jobs) => setMonitoringJobs(jobs as IDownloadAvailableChaptersJob[]));
     }
 
     function StartSearchMangaEntry() : ReactElement {
@@ -52,7 +52,7 @@ export default function MonitorJobsList({onStartSearch, onJobsChanged, connected
                 <MangaItem apiUri={apiUri} mangaId={MonitoringJob.mangaId} key={MonitoringJob.mangaId}>
                     <></>
                     <button className="Manga-DeleteButton" onClick={() => {
-                        Manga.DeleteManga(apiUri, MonitoringJob.mangaId);
+                        MangaFunctions.DeleteManga(apiUri, MonitoringJob.mangaId);
                     }}>Delete</button>
                 </MangaItem>
             )}

Website/modules/NotificationConnectorFunctions.tsx

@@ -2,9 +2,9 @@ import INotificationConnector from "./interfaces/INotificationConnector";
 import {deleteData, getData, putData} from "../App";
 import IGotifyRecord from "./interfaces/records/IGotifyRecord";
 import INtfyRecord from "./interfaces/records/INtfyRecord";
-import IlunaseaRecord from "./interfaces/records/IlunaseaRecord";
+import ILunaseaRecord from "./interfaces/records/ILunaseaRecord";
 
-export default class NotificationConnector {
+export default class NotificationConnectorFunctions {
 
     static async GetNotificationConnectors(apiUri: string) : Promise<INotificationConnector[]> {
         //console.info("Getting Notification Connectors");
@@ -81,7 +81,7 @@ export default class NotificationConnector {
             });
     }
 
-    static async CreateLunasea(apiUri: string, lunasea: IlunaseaRecord) : Promise<string> {
+    static async CreateLunasea(apiUri: string, lunasea: ILunaseaRecord) : Promise<string> {
         if(lunasea === undefined || lunasea === null) {
             console.error(`ntfy was not provided`);
             return Promise.reject();

Website/modules/QueuePopUp.tsx

@@ -2,9 +2,8 @@ import React, {useEffect, useState} from 'react';
 import IJob, {JobState, JobType} from "./interfaces/Jobs/IJob";
 import '../styles/queuePopUp.css';
 import '../styles/popup.css';
-import Job from "./Job";
-import DownloadSingleChapterJob from "./interfaces/Jobs/DownloadSingleChapterJob";
-import { MangaItem } from "./interfaces/IManga";
+import JobFunctions from "./JobFunctions";
+import IDownloadSingleChapterJob from "./interfaces/Jobs/IDownloadSingleChapterJob";
 import {ChapterItem} from "./interfaces/IChapter";
 
 export default function QueuePopUp({connectedToBackend, children, apiUri} : {connectedToBackend: boolean, children: JSX.Element[], apiUri: string}) {
@@ -33,13 +32,13 @@ export default function QueuePopUp({connectedToBackend, children, apiUri} : {con
     }, [connectedToBackend]);
 
     function UpdateMonitoringJobsList(){
-        Job.GetJobsInState(apiUri, JobState.Waiting)
+        JobFunctions.GetJobsInState(apiUri, JobState.Waiting)
             .then((jobs: IJob[]) => {
                 //console.log(jobs);
                 return jobs;
             })
             .then(setWaitingJobs);
-        Job.GetJobsInState(apiUri, JobState.Running)
+        JobFunctions.GetJobsInState(apiUri, JobState.Running)
             .then((jobs: IJob[]) => {
                 //console.log(jobs);
                 return jobs;
@@ -55,25 +54,25 @@ export default function QueuePopUp({connectedToBackend, children, apiUri} : {con
                 ? <div className="popup" id="QueuePopUp">
                     <div className="popupHeader">
                         <h1>Queue Status</h1>
-                        <img alt="Close Search" className="close" src="../media/close-x.svg"
+                        <img alt="Close Queue" className="close" src="../media/close-x.svg"
                              onClick={() => setShowQueuePopup(false)}/>
                     </div>
                     <div id="QueuePopUpBody" className="popupBody">
                         <div>
                             {RunningJobs.filter(j => j.jobType == JobType.DownloadSingleChapterJob).map(j => {
-                                let job = j as DownloadSingleChapterJob;
+                                let job = j as IDownloadSingleChapterJob;
                                 return <ChapterItem apiUri={apiUri} chapterId={job.chapterId} />
                             })}
                         </div>
                         <div>
                             {WaitingJobs.filter(j => j.jobType == JobType.DownloadSingleChapterJob).map(j =>{
-                                let job = j as DownloadSingleChapterJob;
+                                let job = j as IDownloadSingleChapterJob;
                                 return <ChapterItem apiUri={apiUri} chapterId={job.chapterId} />
                             })}
                         </div>
                     </div>
                 </div>
-                : <></>
+                : null
             }
         </>
     );

Website/modules/Search.tsx

@@ -1,13 +1,13 @@
 import React, {ChangeEventHandler, EventHandler, useEffect, useState} from 'react';
-import {MangaConnector} from "./MangaConnector";
+import {MangaConnectorFunctions} from "./MangaConnectorFunctions";
 import IMangaConnector from "./interfaces/IMangaConnector";
 import {isValidUri} from "../App";
 import IManga, {MangaItem} from "./interfaces/IManga";
 import '../styles/search.css';
 import SearchFunctions from "./SearchFunctions";
-import Job from "./Job";
+import JobFunctions from "./JobFunctions";
 import ILocalLibrary from "./interfaces/ILocalLibrary";
-import LocalLibrary from "./interfaces/LocalLibrary";
+import LocalLibraryFunctions from "./LocalLibraryFunctions";
 
 export default function Search({apiUri, jobInterval, onJobsChanged, closeSearch} : {apiUri: string, jobInterval: Date, onJobsChanged: (internalId: string) => void, closeSearch(): void}) {
     const [mangaConnectors, setConnectors] = useState<IMangaConnector[]>();
@@ -20,7 +20,7 @@ export default function Search({apiUri, jobInterval, onJobsChanged, closeSearch}
 
     useEffect(() => {
         if(mangaConnectors === undefined) {
-            MangaConnector.GetAllConnectors(apiUri).then(setConnectors)
+            MangaConnectorFunctions.GetAllConnectors(apiUri).then(setConnectors)
             return;
         }
     }, [mangaConnectors]);
@@ -90,7 +90,7 @@ export default function Search({apiUri, jobInterval, onJobsChanged, closeSearch}
     let [selectedLibrary, setSelectedLibrary] = useState<ILocalLibrary | null>(null);
     let [libraries, setLibraries] = useState<ILocalLibrary[] | null>(null);
     useEffect(() => {
-        LocalLibrary.GetLibraries(apiUri).then(setLibraries);
+        LocalLibraryFunctions.GetLibraries(apiUri).then(setLibraries);
     }, []);
     useEffect(() => {
         if(libraries === null || libraries.length < 1)
@@ -137,7 +137,7 @@ export default function Search({apiUri, jobInterval, onJobsChanged, closeSearch}
                                 : libraries.map(library => <option key={library.localLibraryId} value={library.localLibraryId}>{library.libraryName} ({library.basePath})</option>)}
                         </select>
                         <button className="Manga-AddButton" onClick={() => {
-                            Job.CreateDownloadAvailableChaptersJob(apiUri, result.mangaId, {recurrenceTimeMs: jobInterval.getTime(), localLibraryId: selectedLibrary!.localLibraryId}).then(() => onJobsChanged(result.mangaId));
+                            JobFunctions.CreateDownloadAvailableChaptersJob(apiUri, result.mangaId, {recurrenceTimeMs: jobInterval.getTime(), localLibraryId: selectedLibrary!.localLibraryId}).then(() => onJobsChanged(result.mangaId));
                         }}>Monitor</button>
                     </MangaItem>
                 )

Website/modules/Settings.tsx

@@ -1,7 +1,38 @@
 import IFrontendSettings from "./interfaces/IFrontendSettings";
 import '../styles/settings.css';
 import '../styles/react-toggle.css';
+import React, {useEffect, useState} from "react";
+import INotificationConnector, {NotificationConnectorItem} from "./interfaces/INotificationConnector";
+import NotificationConnectorFunctions from "./NotificationConnectorFunctions";
 
-export default function Settings({backendConnected, apiUri, settings, changeSettings} : {backendConnected: boolean, apiUri: string, settings: IFrontendSettings, changeSettings: (settings: IFrontendSettings) => void}) {
+export default function Settings({backendConnected, apiUri, settings} : {backendConnected: boolean, apiUri: string, settings: IFrontendSettings}) {
+    let [showSettings, setShowSettings] = useState<boolean>(false);
+    let [notificationConnectors, setNotificationConnectors] = useState<INotificationConnector[]>([]);
 
+    useEffect(() => {
+        if(!backendConnected)
+            return;
+        NotificationConnectorFunctions.GetNotificationConnectors(apiUri).then(setNotificationConnectors);
+    }, []);
+
+    return (
+        <div id="Settings">
+            <div onClick={() => setShowSettings(true)}>
+                <img id="Settings-Cogwheel" src="../../media/settings-cogwheel.svg" alt="settings-cogwheel" />
+            </div>
+            {showSettings
+                ? <div className="popup" id="SettingsPopUp">
+                    <div className="popupHeader">
+                        <h1>Settings</h1>
+                        <img alt="Close Settings" className="close" src="../media/close-x.svg" onClick={() => setShowSettings(false)}/>
+                    </div>
+                    <div id="SettingsPopUpBody" className="popupBody">
+                        {notificationConnectors.map(c => <NotificationConnectorItem apiUri={apiUri} notificationConnector={c} />)}
+                        <NotificationConnectorItem apiUri={apiUri} notificationConnector={null} />
+                    </div>
+                </div>
+                : null
+            }
+        </div>
+    );
 }

Website/modules/interfaces/IChapter.tsx

@@ -1,7 +1,7 @@
 import React, {ReactElement, ReactEventHandler, useEffect, useState} from "react";
-import Manga from "../Manga";
+import MangaFunctions from "../MangaFunctions";
 import IManga from "./IManga";
-import Chapter from "../Chapter";
+import ChapterFunctions from "../ChapterFunctions";
 
 export default interface IChapter{
     chapterId: string;
@@ -24,25 +24,28 @@ 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(() => {
-        Chapter.GetChapterFromId(apiUri, chapterId).then(setChapter);
+        ChapterFunctions.GetChapterFromId(apiUri, chapterId).then(setChapter);
     }, []);
     useEffect(() => {
         if(chapter === null)
             manga = null;
         else
-            Manga.GetMangaById(apiUri, chapter.parentMangaId).then(setManga);
+            MangaFunctions.GetMangaById(apiUri, chapter.parentMangaId).then(setManga);
     }, [chapter]);
     useEffect(() => {
         if(chapter != null && mangaCoverHtmlImageItem != null)
-            setMangaCoverUrl(Manga.GetMangaCoverImageUrl(apiUri, chapter.parentMangaId, mangaCoverHtmlImageItem));
+            setMangaCoverUrl(MangaFunctions.GetMangaCoverImageUrl(apiUri, chapter.parentMangaId, mangaCoverHtmlImageItem));
     }, [chapter, mangaCoverHtmlImageItem]);
 
-    return (<div className="ChapterItem" key={chapterId}>
-        <img className="ChapterItem-Cover" src={mangaCoverUrl} alt="Manga Cover" onLoad={setCoverItem} onResize={setCoverItem}></img>
-        <p className="ChapterItem-MangaName">{manga ? manga.name : "Manga-Name"}</p>
-        <p className="ChapterItem-ChapterName">{chapter ? chapter.title : "Chapter-Title"}</p>
+    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>
+        <p className="ChapterItem-MangaName">{manga ? manga.name : "MangaFunctions-Name"}</p>
+        <p className="ChapterItem-ChapterName">{chapter ? chapter.title : "ChapterFunctions-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>
         <a className="ChapterItem-Website" href={chapter ? chapter.url : "#"}><img src="../../media/link.svg" alt="Link"/></a>
     </div>)
 }

Website/modules/interfaces/ILocalLibrary.tsx

@@ -8,7 +8,7 @@ export default interface ILocalLibrary {
 
 export function LocalLibrary(library: ILocalLibrary) : ReactElement {
     return (<div key={library.localLibraryId}>
-        <p className={"LocalLibrary-Name"}>{library.libraryName}</p>
-        <p className={"LocalLibrary-Path"}>{library.basePath}</p>
+        <p className={"LocalLibraryFunctions-Name"}>{library.libraryName}</p>
+        <p className={"LocalLibraryFunctions-Path"}>{library.basePath}</p>
     </div>);
 }

Website/modules/interfaces/IManga.tsx

@@ -1,4 +1,4 @@
-import Manga from "../Manga";
+import MangaFunctions from "../MangaFunctions";
 import React, {Children, ReactElement, ReactEventHandler, useEffect, useState} from "react";
 import Icon from '@mdi/react';
 import { mdiTagTextOutline, mdiAccountEdit, mdiLinkVariant } from '@mdi/js';
@@ -34,18 +34,18 @@ export enum MangaReleaseStatus {
 
 export function MangaItem({apiUri, mangaId, children} : {apiUri: string, mangaId: string, children?: (string | ReactElement)[]}) : ReactElement {
     const LoadMangaCover : ReactEventHandler<HTMLImageElement> = (e) => {
-        if(e.currentTarget.src != Manga.GetMangaCoverImageUrl(apiUri, mangaId, e.currentTarget))
-            e.currentTarget.src = Manga.GetMangaCoverImageUrl(apiUri, mangaId, e.currentTarget);
+        if(e.currentTarget.src != MangaFunctions.GetMangaCoverImageUrl(apiUri, mangaId, e.currentTarget))
+            e.currentTarget.src = MangaFunctions.GetMangaCoverImageUrl(apiUri, mangaId, e.currentTarget);
     }
 
     let [manga, setManga] = useState<IManga | null>(null);
     let [clicked, setClicked] = useState<boolean>(false);
     useEffect(() => {
-        Manga.GetMangaById(apiUri, mangaId).then(setManga);
+        MangaFunctions.GetMangaById(apiUri, mangaId).then(setManga);
     }, []);
 
     return (<div className="MangaItem" key={mangaId} is-clicked={clicked ? "clicked" : "not-clicked"} onClick={()=>setClicked(!clicked)}>
-        <img className="MangaItem-Cover" src={Manga.GetMangaCoverImageUrl(apiUri, mangaId, undefined)} alt="Manga Cover" onLoad={LoadMangaCover} onResize={LoadMangaCover}></img>
+        <img className="MangaItem-Cover" src={MangaFunctions.GetMangaCoverImageUrl(apiUri, mangaId, undefined)} alt="MangaFunctions Cover" onLoad={LoadMangaCover} onResize={LoadMangaCover}></img>
         <p className="MangaItem-Connector">{manga ? manga.mangaConnectorId : "Connector"}</p>
         <p className="MangaItem-Status" release-status={manga?.releaseStatus}></p>
         <p className="MangaItem-Name">{manga ? manga.name : "Name"}</p>

Website/modules/interfaces/INotificationConnector.ts

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

Website/modules/interfaces/INotificationConnector.tsx

@@ -0,0 +1,57 @@
+import {ReactElement, ReactEventHandler, useState} from "react";
+
+export default interface INotificationConnector {
+    name: string;
+    url: string;
+    headers: Record<string, string>[];
+    httpMethod: string;
+    body: string;
+}
+
+export function NotificationConnectorItem({apiUri, notificationConnector} : {apiUri: string, notificationConnector: INotificationConnector | null}) : ReactElement {
+    const Save : ReactEventHandler<HTMLButtonElement> = (e) => {
+
+    }
+
+    const AddHeader : ReactEventHandler<HTMLButtonElement> = (e) => {
+        const div = e.currentTarget.parentElement as HTMLDivElement;
+        setHeaderElements([...headerElements, <HeaderElement record={null} />])
+    }
+    const [headerElements, setHeaderElements] = useState<ReactElement[]>([]);
+
+    return (<div className="NotificationConnectorItem" key={notificationConnector ? notificationConnector.name : "new"}>
+        <p className="NotificationConnectorItem-Name">{notificationConnector ? notificationConnector.name : "New Notification Connector"}</p>
+        <select className="NotificationConnectorItem-RequestMethod" defaultValue={notificationConnector ? notificationConnector.httpMethod : ""} disabled={notificationConnector != null}>
+            <option value="" disabled hidden>Request Method</option>
+            <option value="GET">GET</option>
+            <option value="POST">POST</option>
+        </select>
+        <input type="url" className="NotificationConnectorItem-Url" placeholder="URL" value={notificationConnector ? notificationConnector.url : ""} disabled={notificationConnector != null} />
+        <textarea className="NotificationConnectorItem-Body" placeholder="Request-Body" value={notificationConnector ? notificationConnector.body : ""} disabled={notificationConnector != null} />
+        {notificationConnector != null ? null :
+            (
+                <p className="NotificationConnectorItem-Explanation">Explanation Text</p>
+            )}
+        <div className="NotificationConnectorItem-Headers">
+            {notificationConnector
+                ? notificationConnector.headers.map((h: Record<string, string>) =>
+                    (<HeaderElement record={h} />)
+                ) :
+                (
+                    <button className="NotificationConnectorItem-AddHeader" onClick={AddHeader}>Add Header</button>
+                )
+            }
+            {headerElements}
+        </div>
+        {notificationConnector != null ? null : (
+            <button className="NotificationConnectorItem-Save" onClick={Save}>Save</button>
+        )}
+    </div>);
+}
+
+function HeaderElement({record} : {record: Record<string, string> | null}) : ReactElement {
+    return <div className="NotificationConnectorItem-Header" key={"newHeader"}>
+        <input type="text" className="NotificationConnectorItem-Header-Key" placeholder="Header-Key" value={record ? record.name : ""} disabled={record != null} />
+        <input type="text" className="NotificationConnectorItem-Header-Value" placeholder="Header-Value" value={record ? record.value : ""} disabled={record != null} />
+    </div>;
+}

Website/modules/interfaces/Jobs/DownloadAvailableChaptersJob.ts

@@ -1,5 +0,0 @@
-import IJob from "./IJob";
-
-export default interface DownloadAvailableChaptersJob extends IJob {
-    mangaId: string;
-}

Website/modules/interfaces/Jobs/DownloadMangaCoverJob.ts

@@ -1,5 +0,0 @@
-import IJob from "./IJob";
-
-export default interface DownloadMangaCoverJob extends IJob {
-    mangaId: string;
-}

Website/modules/interfaces/Jobs/DownloadSingleChapterJob.ts

@@ -1,5 +0,0 @@
-import IJob from "./IJob";
-
-export default interface DownloadSingleChapterJob extends IJob {
-    chapterId: string;
-}

Website/modules/interfaces/Jobs/IDownloadAvailableChaptersJob.ts

@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IDownloadAvailableChaptersJob extends IJob {
+    mangaId: string;
+}

Website/modules/interfaces/Jobs/IDownloadMangaCoverJob.ts

@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IDownloadMangaCoverJob extends IJob {
+    mangaId: string;
+}

Website/modules/interfaces/Jobs/IDownloadSingleChapterJob.ts

@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IDownloadSingleChapterJob extends IJob {
+    chapterId: string;
+}

Website/modules/interfaces/Jobs/IJob.ts

@@ -17,7 +17,8 @@ export enum JobType {
     MoveFileOrFolderJob = "MoveFileOrFolderJob",
     DownloadMangaCoverJob = "DownloadMangaCoverJob",
     RetrieveChaptersJob = "RetrieveChaptersJob",
-    UpdateFilesDownloadedJob = "UpdateFilesDownloadedJob"
+    UpdateFilesDownloadedJob = "UpdateFilesDownloadedJob",
+    MoveMangaLibraryJob = "MoveMangaLibraryJob"
 }
 
 export enum JobState {

Website/modules/interfaces/Jobs/IMoveFileOrFolderJob.ts

@@ -1,6 +1,6 @@
 import IJob from "./IJob";
 
-export default interface MoveFileOrFolderJob extends IJob {
+export default interface IMoveFileOrFolderJob extends IJob {
     fromLocation: string;
     toLocation: string;
 }

Website/modules/interfaces/Jobs/IMoveMangaLibraryJob.ts

@@ -0,0 +1,6 @@
+import IJob from "./IJob";
+
+export default interface IMoveMangaLibraryJob extends IJob {
+    MangaId: string;
+    ToLibraryId: string;
+}

Website/modules/interfaces/Jobs/IRetrieveChaptersJob.ts

@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IRetrieveChaptersJob extends IJob {
+    mangaId: string;
+}

Website/modules/interfaces/Jobs/IUpdateFilesDownloadedJob.ts

@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IUpdateFilesDownloadedJob extends IJob {
+    mangaId: string;
+}

Website/modules/interfaces/Jobs/IUpdateMetadataJob.ts

@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IUpdateMetadataJob extends IJob {
+    mangaId: string;
+}

Website/modules/interfaces/Jobs/RetrieveChaptersJob.ts

@@ -1,5 +0,0 @@
-import IJob from "./IJob";
-
-export default interface RetrieveChaptersJob extends IJob {
-    mangaId: string;
-}

Website/modules/interfaces/Jobs/UpdateFilesDownloadedJob.ts

@@ -1,5 +0,0 @@
-import IJob from "./IJob";
-
-export default interface UpdateFilesDownloadedJob extends IJob {
-    mangaId: string;
-}

Website/modules/interfaces/Jobs/UpdateMetadataJob.ts

@@ -1,5 +0,0 @@
-import IJob from "./IJob";
-
-export default interface UpdateMetadataJob extends IJob {
-    mangaId: string;
-}

Website/modules/interfaces/records/ICoverFormatRequestRecord.ts

@@ -1,9 +0,0 @@
-export default interface ICoverFormatRequestRecord {
-    size: Size;
-}
-
-export interface Size {
-    width: number;
-    height: number;
-    isEmpty: boolean;
-}

Website/modules/interfaces/records/ILunaseaRecord.ts

@@ -0,0 +1,3 @@
+export default interface ILunaseaRecord {
+    id: string;
+}

Website/modules/interfaces/records/IlunaseaRecord.ts

@@ -1,3 +0,0 @@
-export default interface IlunaseaRecord {
-    id: string;
-}

Website/styles/header.css

@@ -30,4 +30,8 @@ header > #titlebox > span{
 header > #titlebox > img {
     height: 100%;
     cursor: grab;
+}
+
+header > * {
+    height: 100%;
 }

Website/styles/settings.css

@@ -0,0 +1,15 @@
+#Settings {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+#Settings > * {
+    height: 80%;
+}
+
+#Settings > div > img {
+    height: calc(100% - 10px);
+    margin: 5px;
+    filter: invert(100%) sepia(20%) saturate(7480%) hue-rotate(179deg) brightness(121%) contrast(102%);
+}