glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-04-12 14:38:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Settings Popup

Browse Source 
Add NotificationConnector Setting (need to add styling)
This commit is contained in:
glax 2025-03-17 21:07:27 +01:00
parent 62665f5660
commit 0b0abb3801
9 changed files with 115 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Website/App.tsx
View File

@ -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

4
Website/modules/Header.tsx
View File

@ -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>)
}

2
Website/modules/MonitorJobsList.tsx
View File

@ -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>);

5
Website/modules/QueuePopUp.tsx
View File

@ -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
}
</>
);

33
Website/modules/Settings.tsx
View File

@ -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>
);
}

7
Website/modules/interfaces/INotificationConnector.ts
View File

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

57
Website/modules/interfaces/INotificationConnector.tsx Normal file
View File

@ -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>;
}

4
Website/styles/header.css
View File

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

15
Website/styles/settings.css
View File

@ -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%);
}