Add Settings Popup

Add NotificationConnector Setting (need to add styling)

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/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/MonitorJobsList.tsx

@@ -39,7 +39,7 @@ export default function MonitorJobsList({onStartSearch, onJobsChanged, connected
         return (<div key="monitorMangaEntry.StartSearch" className="startSearchEntry MangaItem" onClick={onStartSearch}>
             <img className="MangaItem-Cover" src="../media/blahaj.png" alt="Blahaj"></img>
             <div>
-                <p style={{textAlign: "center", width: "100%"}} className="MangaItem-Name">Add new MangaFunctions</p>
+                <p style={{textAlign: "center", width: "100%"}} className="MangaItem-Name">Add new Manga</p>
                 <p style={{fontSize: "42pt", textAlign: "center"}}>+</p>
             </div>
         </div>);

Website/modules/QueuePopUp.tsx

@@ -4,7 +4,6 @@ import '../styles/queuePopUp.css';
 import '../styles/popup.css';
 import JobFunctions from "./JobFunctions";
 import IDownloadSingleChapterJob from "./interfaces/Jobs/IDownloadSingleChapterJob";
-import { MangaItem } from "./interfaces/IManga";
 import {ChapterItem} from "./interfaces/IChapter";
 
 export default function QueuePopUp({connectedToBackend, children, apiUri} : {connectedToBackend: boolean, children: JSX.Element[], apiUri: string}) {
@@ -55,7 +54,7 @@ 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">
@@ -73,7 +72,7 @@ export default function QueuePopUp({connectedToBackend, children, apiUri} : {con
                         </div>
                     </div>
                 </div>
-                : <></>
+                : null
             }
         </>
     );

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/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/styles/header.css

@@ -31,3 +31,7 @@ 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%);
+}