glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-06-15 16:27:54 +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
Download Patch File Download Diff File Expand all files Collapse all files

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