@mui/joy

Website/modules/Elements/Author.tsx

@@ -0,0 +1,19 @@
+import React, {ReactElement, useEffect} from "react";
+import {getData} from "../../App";
+import IAuthor from "../types/IAuthor";
+
+export default 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/AuthorTag/${authorId}`)
+            .then((json) => {
+                let ret = json as IAuthor;
+                setAuthor(ret);
+            });
+    }, [])
+
+    return (<span className="Manga-Author-Name">{author ? author.authorName : authorId}</span>);
+}

Website/modules/Elements/Chapter.tsx

@@ -0,0 +1,41 @@
+import React, {ReactElement, ReactEventHandler, useEffect, useState} from "react";
+import Manga from "../api/Manga";
+import Chapter from "../api/Chapter";
+import IChapter from "../types/IChapter";
+import IManga from "../types/IManga";
+
+export default function ChapterItem({apiUri, chapterId} : {apiUri: string, chapterId: string}) : ReactElement {
+    const setCoverItem : ReactEventHandler<HTMLImageElement> = (e) => {
+        setMangaCoverHtmlImageItem(e.currentTarget);
+    }
+
+    let [chapter, setChapter] = useState<IChapter | null>(null);
+    let [manga, setManga] = useState<IManga | null>(null);
+    let [mangaCoverUrl, setMangaCoverUrl] = useState<string>("../../media/blahaj.png");
+    let [mangaCoverHtmlImageItem, setMangaCoverHtmlImageItem] = useState<HTMLImageElement | null>(null);
+    useEffect(() => {
+        Chapter.GetChapterFromId(apiUri, chapterId).then(setChapter);
+    }, []);
+    useEffect(() => {
+        if(chapter === null)
+            manga = null;
+        else
+            Manga.GetMangaById(apiUri, chapter.parentMangaId).then(setManga);
+    }, [chapter]);
+    useEffect(() => {
+        if(chapter != null && mangaCoverHtmlImageItem != null)
+            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="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>
+        <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/Elements/Gotify.tsx

@@ -0,0 +1,45 @@
+import {ReactElement, useState} from "react";
+import NotificationConnector from "../api/NotificationConnector";
+import Loader from "../Loader";
+import IGotifyRecord from "../types/records/IGotifyRecord";
+import {isValidUri} from "../../App";
+
+export function GotifyItem ({apiUri} : {apiUri: string}) : ReactElement{
+    const [record, setRecord] = useState<IGotifyRecord>({
+        endpoint: "",
+        appToken: "",
+        priority: 3
+    });
+    const [loading, setLoading] = useState(false);
+    return <div className="NotificationConnectorItem">
+        <input className="NotificationConnectorItem-Name" value="Gotify" disabled={true} />
+        <div className="NotificationConnectorItem-Url">
+            <input type="text" className="NotificationConnectorItem-RequestUrl" placeholder="URL" onChange={(e) => setRecord({...record, endpoint: e.currentTarget.value})} />
+            <input type="text" className="NotificationConnectorItem-AppToken" placeholder="Apptoken" onChange={(e) => setRecord({...record, appToken: e.currentTarget.value})} />
+        </div>
+        <div className="NotificationConnectorItem-Priority">
+            <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) => setRecord({...record, priority: e.currentTarget.valueAsNumber})} />
+        </div>
+        <>
+            <button className="NotificationConnectorItem-Save" onClick={(e) => {
+                if(record === null || Validate(record) === false)
+                    return;
+                setLoading(true);
+                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

@@ -0,0 +1,19 @@
+import React, {ReactElement, useEffect} from "react";
+import {getData} from "../../App";
+import ILink from "../types/ILink";
+
+export default function LinkElement({apiUri, linkId} : {apiUri: string, linkId: string | null}) : ReactElement{
+    let [link, setLink] = React.useState<ILink | null>(null);
+
+    useEffect(()=> {
+        if(linkId === null)
+            return;
+        getData(`${apiUri}/v2/Query/Link/${linkId}`)
+            .then((json) => {
+                let ret = json as ILink;
+                setLink(ret);
+            });
+    }, [])
+
+    return (<a className="Manga-Link-Value" href={link ? link.linkUrl : "#"}>{link ? link.linkProvider : linkId}</a>);
+}

Website/modules/Elements/LocalLibrary.tsx

@@ -0,0 +1,40 @@
+import {ReactElement, useState} from "react";
+import INewLibraryRecord, {Validate} from "../types/records/INewLibraryRecord";
+import Loader from "../Loader";
+import LocalLibrary from "../api/LocalLibrary";
+import "../../styles/localLibrary.css";
+import ILocalLibrary from "../types/ILocalLibrary";
+
+export default function LocalLibraryItem({apiUri, library} : {apiUri: string, library: ILocalLibrary | null}) : ReactElement {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [record, setRecord] = useState<INewLibraryRecord>({
+       path: library?.basePath ?? "",
+       name: library?.libraryName ?? ""
+    });
+
+    return (<div className="LocalLibraryFunctions">
+        <label htmlFor="LocalLibraryFunctions-Name">Library Name</label>
+        <input id="LocalLibraryFunctions-Name" className="LocalLibraryFunctions-Name" placeholder="Library Name" defaultValue={library ? library.libraryName : "New Library"}
+               onChange={(e) => setRecord({...record, name: e.currentTarget.value})}/>
+        <label htmlFor="LocalLibraryFunctions-Path">Library Path</label>
+        <input id="LocalLibraryFunctions-Path" className="LocalLibraryFunctions-Path" placeholder="Library Path" defaultValue={library ? library.basePath : ""}
+               onChange={(e) => setRecord({...record, path: e.currentTarget.value})}/>
+        {library
+        ? <button className="LocalLibraryFunctions-Action" onClick={() => {
+                if(record === null || Validate(record) === false)
+                    return;
+                setLoading(true);
+                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);
+                LocalLibrary.CreateLibrary(apiUri, record)
+                    .finally(() => setLoading(false));
+            }}>Add</button>
+        }
+        <Loader loading={loading} style={{width:"40px",height:"40px"}}/>
+    </div>);
+}

Website/modules/Elements/Lunasea.tsx

@@ -0,0 +1,32 @@
+import {ReactElement, useState} from "react";
+import NotificationConnector from "../api/NotificationConnector";
+import Loader from "../Loader";
+import ILunaseaRecord from "../types/records/ILunaseaRecord";
+
+export function LunaseaItem ({apiUri} : {apiUri: string}) : ReactElement{
+    const [record, setRecord] = useState<ILunaseaRecord>({
+        id: ""
+    });
+    const [loading, setLoading] = useState(false);
+    return <div className="NotificationConnectorItem">
+        <input className="NotificationConnectorItem-Name" value="LunaSea" disabled={true} />
+        <div className="NotificationConnectorItem-Url">
+            <input type="text" className="NotificationConnectorItem-RequestUrl" placeholder="device/:device_id or user/:user_id" onChange={(e) => setRecord({...record, id: e.currentTarget.value})} />
+        </div>
+        <>
+            <button className="NotificationConnectorItem-Save" onClick={(e) => {
+                if(record === null || Validate(record) === false)
+                    return;
+                setLoading(true);
+                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

@@ -0,0 +1,104 @@
+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 Loader from "../Loader";
+import IManga from "../types/IManga";
+import IChapter from "../types/IChapter";
+import AuthorElement from "./Author";
+import LinkElement from "./Link";
+
+export default 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);
+    }
+
+    let [manga, setManga] = useState<IManga | null>(null);
+    let [clicked, setClicked] = useState<boolean>(false);
+    let [latestChapterDownloaded, setLatestChapterDownloaded] = useState<IChapter | null>(null);
+    let [latestChapterAvailable, setLatestChapterAvailable] = useState<IChapter | null>(null);
+    let [loadingChapterStats, setLoadingChapterStats] = useState<boolean>(true);
+    let [settingThreshold, setSettingThreshold] = useState<boolean>(false);
+    const invalidTargets = ["input", "textarea", "button", "select", "a"];
+    useEffect(() => {
+        Manga.GetMangaById(apiUri, mangaId).then(setManga);
+        Manga.GetLatestChapterDownloaded(apiUri, mangaId)
+            .then(setLatestChapterDownloaded)
+            .finally(() => {
+                if(latestChapterDownloaded && latestChapterAvailable)
+                    setLoadingChapterStats(false);
+            });
+        Manga.GetLatestChapterAvailable(apiUri, mangaId)
+            .then(setLatestChapterAvailable)
+            .finally(() => {
+                if(latestChapterDownloaded && latestChapterAvailable)
+                    setLoadingChapterStats(false);
+            });
+    }, []);
+
+    return (<div className="MangaItem" key={mangaId} is-clicked={clicked ? "clicked" : "not-clicked"} onClick={(e)=> {
+        e.preventDefault();
+        const target = e.target as HTMLElement;
+        if(invalidTargets.find(x => x == target.localName) === undefined )
+            setClicked(!clicked)
+    }}>
+        <img className="MangaItem-Cover" src="../../media/blahaj.png" alt="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>
+        <a className="MangaItem-Website" href={manga ? manga.websiteUrl : "#"}><img src="../../media/link.svg" alt="Link"/></a>
+        <div className="MangaItem-Tags">
+            {manga ? manga.authorIds.map(authorId =>
+                <div className="MangaItem-Author" key={authorId} >
+                    <Icon path={mdiAccountEdit} size={0.5} />
+                    <AuthorElement apiUri={apiUri} authorId={authorId}></AuthorElement>
+                </div>)
+                :
+                <div className="MangaItem-Author" key="null-AuthorTag">
+                    <Icon path={mdiAccountEdit} size={0.5} />
+                    <AuthorElement apiUri={apiUri} authorId={null}></AuthorElement>
+                </div>}
+            {manga ? manga.tags.map(tag =>
+                <div className="MangaItem-Tag" key={tag}>
+                    <Icon path={mdiTagTextOutline} size={0.5}/>
+                    <span className="MangaItem-Tag-Value">{tag}</span>
+                </div>)
+                :
+                <div className="MangaItem-Tag" key="null-Tag">
+                    <Icon path={mdiTagTextOutline} size={0.5}/>
+                    <span className="MangaItem-Tag-Value">Tag</span>
+                </div>
+            }
+            {manga ? manga.linkIds.map(linkId =>
+                <div className="MangaItem-Link" key={linkId}>
+                    <Icon path={mdiLinkVariant} size={0.5}/>
+                    <LinkElement apiUri={apiUri} linkId={linkId} />
+                </div>)
+                :
+                <div className="MangaItem-Link" key="null-Link">
+                    <Icon path={mdiLinkVariant} size={0.5}/>
+                    <LinkElement apiUri={apiUri} linkId={null} />
+                </div>}
+        </div>
+        <MarkdownPreview className="MangaItem-Description" source={manga ? manga.description : "# Description"} />
+        <div className="MangaItem-Props">
+            <div className="MangaItem-Props-Threshold">
+                Start at Chapter
+                <input type="text" defaultValue={latestChapterDownloaded ? latestChapterDownloaded.chapterNumber : ""} disabled={settingThreshold} onChange={(e) => {
+                    setSettingThreshold(true);
+                    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>
+            </div>
+            {children ? children.map(c => {
+                if(c instanceof Element)
+                    return c as ReactElement;
+                else
+                    return c
+            }) : null}
+        </div>
+    </div>)
+}

Website/modules/Elements/MangaAltTitle.tsx

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

Website/modules/Elements/NotificationConnector.tsx

@@ -0,0 +1,102 @@
+import {ReactElement, ReactEventHandler, useState} from "react";
+import "../../styles/notificationConnector.css";
+import Loader from "../Loader";
+import NotificationConnector from "../api/NotificationConnector";
+import INotificationConnector from "../types/INotificationConnector";
+import {GotifyItem} from "./Gotify";
+import {NtfyItem} from "./Ntfy";
+import {LunaseaItem} from "./Lunasea";
+import {PushoverItem} from "./Pushover";
+
+export default function NotificationConnectorItem({apiUri, notificationConnector} : {apiUri: string, notificationConnector: INotificationConnector | null}) : ReactElement {
+    if(notificationConnector != null)
+        return <DefaultItem apiUri={apiUri} notificationConnector={notificationConnector} />
+
+    const [selectedConnectorElement, setSelectedConnectorElement] = useState<ReactElement>(<DefaultItem apiUri={apiUri} notificationConnector={null} />);
+
+    return <div>
+        <div>New Notification Connector</div>
+        <label>Type</label>
+        <select defaultValue="default" onChange={(e) => {
+            switch (e.currentTarget.value){
+                case "default": setSelectedConnectorElement(<DefaultItem apiUri={apiUri} notificationConnector={null} />); break;
+                case "gotify": setSelectedConnectorElement(<GotifyItem apiUri={apiUri} />); break;
+                case "ntfy": setSelectedConnectorElement(<NtfyItem apiUri={apiUri} />); break;
+                case "lunasea": setSelectedConnectorElement(<LunaseaItem apiUri={apiUri} />); break;
+                case "pushover": setSelectedConnectorElement(<PushoverItem apiUri={apiUri} />); break;
+            }
+        }}>
+            <option value="default">Generic REST</option>
+            <option value="gotify">Gotify</option>
+            <option value="ntfy">Ntfy</option>
+            <option value="lunasea">Lunasea</option>
+            <option value="pushover">Pushover</option>
+        </select>
+        {selectedConnectorElement}
+    </div>;
+}
+
+function DefaultItem({apiUri, notificationConnector}:{apiUri: string, notificationConnector: INotificationConnector | null}) : ReactElement {
+    const AddHeader : ReactEventHandler<HTMLButtonElement> = () => {
+        let header : Record<string, string> = {};
+        let x = info;
+        x.headers = [header, ...x.headers];
+        setInfo(x);
+        setHeaderElements([...headerElements, <HeaderElement record={header} />])
+    }
+    const [headerElements, setHeaderElements] = useState<ReactElement[]>([]);
+    const [info, setInfo] = useState<INotificationConnector>({
+        name: "",
+        url: "",
+        headers: [],
+        httpMethod: "",
+        body: ""
+    });
+    const [loading, setLoading] = useState<boolean>(false);
+    return <div className="NotificationConnectorItem">
+        <input className="NotificationConnectorItem-Name" placeholder="Name" defaultValue={notificationConnector ? notificationConnector.name : ""}
+               disabled={notificationConnector != null} onChange={(e) => setInfo({...info, name: e.currentTarget.value})} />
+        <div className="NotificationConnectorItem-Url">
+            <select className="NotificationConnectorItem-RequestMethod" defaultValue={notificationConnector ? notificationConnector.httpMethod : ""}
+                    disabled={notificationConnector != null} onChange={(e)=> setInfo({...info, httpMethod: e.currentTarget.value})} >
+                <option value="" disabled hidden>Request Method</option>
+                <option value="GET">GET</option>
+                <option value="POST">POST</option>
+            </select>
+            <input type="url" className="NotificationConnectorItem-RequestUrl" placeholder="URL" defaultValue={notificationConnector ? notificationConnector.url : ""}
+                   disabled={notificationConnector != null} onChange={(e) => setInfo({...info, url: e.currentTarget.value})}  />
+        </div>
+        <textarea className="NotificationConnectorItem-Body" placeholder="Request-Body" defaultValue={notificationConnector ? notificationConnector.body : ""}
+                  disabled={notificationConnector != null} onChange={(e)=> setInfo({...info, body: e.currentTarget.value})}  />
+        {notificationConnector != null ? null :
+            (
+                <p className="NotificationConnectorItem-Explanation">Formatting placeholders: "%title" and "%text" can be placed in url, header-values and body and will be replaced when notifications are sent</p>
+            )}
+        <div className="NotificationConnectorItem-Headers">
+            {headerElements}
+            {notificationConnector
+                ? notificationConnector.headers.map((h: Record<string, string>) =>
+                    (<HeaderElement record={h} disabled={notificationConnector != null}/>)
+                ) :
+                (
+                    <button className="NotificationConnectorItem-AddHeader" onClick={AddHeader}>Add Header</button>
+                )
+            }
+        </div>
+        <>
+            <button className="NotificationConnectorItem-Save" onClick={(e) => {
+                setLoading(true);
+                NotificationConnector.CreateNotificationConnector(apiUri, info)
+                    .finally(() => setLoading(false));
+            }}>Add</button>
+            <Loader loading={loading} style={{width:"40px",height:"40px",margin:"25vh calc(sin(70)*(50% - 40px))"}}/>
+        </>
+    </div>
+}
+
+function HeaderElement({record, disabled} : {record: Record<string, string>, disabled?: boolean | null}) : ReactElement {
+    return <div className="NotificationConnectorItem-Header" key={record.name}>
+        <input type="text" className="NotificationConnectorItem-Header-Key" placeholder="Header-Key" defaultValue={record.name} disabled={disabled?disabled:false} onChange={(e) => record.name = e.currentTarget.value}/>
+        <input type="text" className="NotificationConnectorItem-Header-Value" placeholder="Header-Value" defaultValue={record.value} disabled={disabled?disabled:false} onChange={(e) => record.value = e.currentTarget.value} />
+    </div>;
+}

Website/modules/Elements/Ntfy.tsx

@@ -0,0 +1,54 @@
+import {isValidUri} from "../../App";
+import {ReactElement, useState} from "react";
+import NotificationConnector from "../api/NotificationConnector";
+import Loader from "../Loader";
+import INtfyRecord from "../types/records/INtfyRecord";
+
+export function NtfyItem ({apiUri} : {apiUri: string}) : ReactElement{
+    const [info, setInfo] = useState<INtfyRecord>({
+        endpoint: "",
+        username: "",
+        password: "",
+        topic: "",
+        priority: 0
+    });
+    const [loading, setLoading] = useState(false);
+    return <div className="NotificationConnectorItem">
+        <input className="NotificationConnectorItem-Name" value="Ntfy" disabled={true} />
+        <div className="NotificationConnectorItem-Url">
+            <input type="text" className="NotificationConnectorItem-RequestUrl" placeholder="URL" onChange={(e) => setInfo({...info, endpoint: e.currentTarget.value})} />
+            <input type="text" className="NotificationConnectorItem-Topic" placeholder="Topic" onChange={(e) => setInfo({...info, topic: e.currentTarget.value})} />
+        </div>
+        <div className="NotificationConnectorItem-Ident">
+            <input type="text" className="NotificationConnectorItem-Username" placeholder="Username" onChange={(e) => setInfo({...info, username: e.currentTarget.value})} />
+            <input type="password" className="NotificationConnectorItem-Password" placeholder="***" onChange={(e) => setInfo({...info, password: e.currentTarget.value})} />
+        </div>
+        <div className="NotificationConnectorItem-Priority">
+            <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) => {
+            if(info === null || Validate(info) === false)
+                return;
+            setLoading(true);
+            NotificationConnector.CreateNtfy(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: 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

@@ -0,0 +1,37 @@
+import {ReactElement, useState} from "react";
+import NotificationConnector from "../api/NotificationConnector";
+import Loader from "../Loader";
+import IPushoverRecord from "../types/records/IPushoverRecord";
+
+export function PushoverItem ({apiUri} : {apiUri: string}) : ReactElement{
+    const [info, setInfo] = useState<IPushoverRecord>({
+        apptoken: "",
+        user: ""
+    });
+    const [loading, setLoading] = useState(false);
+    return <div className="NotificationConnectorItem">
+        <input className="NotificationConnectorItem-Name" value="Pushover" disabled={true} />
+        <div className="NotificationConnectorItem-Ident">
+            <input type="text" className="NotificationConnectorItem-Apptoken" placeholder="Apptoken" onChange={(e) => setInfo({...info, apptoken: e.currentTarget.value})} />
+            <input type="text" className="NotificationConnectorItem-User" placeholder="User" onChange={(e) => setInfo({...info, user: e.currentTarget.value})} />
+        </div>
+        <>
+            <button className="NotificationConnectorItem-Save" onClick={(e) => {
+                if(info === null || Validate(info) === false)
+                    return;
+                setLoading(true);
+                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;
+}