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

Local Libraries in Settings

Browse Source
This commit is contained in:
glax 2025-03-19 22:44:11 +01:00
parent ecd76712d8
commit 2092db2ba3
8 changed files with 95 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Website/modules/LocalLibraryFunctions.tsx
View File

@ -47,4 +47,11 @@ export default class LocalLibraryFunctions
return Promise.resolve()
});
}
static async UpdateLibrary(apiUri: string, libraryId: string, record: INewLibraryRecord): Promise<void> {
return patchData(`${apiUri}/v2/LocalLibraries/${libraryId}`, record)
.then(()=> {
return Promise.resolve()
});
}
}

14
Website/modules/Settings.tsx
View File

@ -4,16 +4,20 @@ import '../styles/react-toggle.css';
import React, {useEffect, useState} from "react";
import INotificationConnector, {NotificationConnectorItem} from "./interfaces/INotificationConnector";
import NotificationConnectorFunctions from "./NotificationConnectorFunctions";
import ILocalLibrary, {LocalLibraryItem} from "./interfaces/ILocalLibrary";
import LocalLibraryFunctions from "./LocalLibraryFunctions";
export default function Settings({backendConnected, apiUri, frontendSettings, setFrontendSettings} : {backendConnected: boolean, apiUri: string, frontendSettings: IFrontendSettings, setFrontendSettings: (settings: IFrontendSettings) => void}) {
let [showSettings, setShowSettings] = useState<boolean>(false);
let [notificationConnectors, setNotificationConnectors] = useState<INotificationConnector[]>([]);
let [localLibraries, setLocalLibraries] = useState<ILocalLibrary[]>([]);
useEffect(() => {
if(!backendConnected)
return;
NotificationConnectorFunctions.GetNotificationConnectors(apiUri).then(setNotificationConnectors);
}, []);
LocalLibraryFunctions.GetLibraries(apiUri).then(setLocalLibraries);
}, [backendConnected, showSettings]);
const dateToStr = (x: Date) => {
const ret = (x.getHours() < 10 ? "0" + x.getHours() : x.getHours())
@ -42,8 +46,12 @@ export default function Settings({backendConnected, apiUri, frontendSettings, se
<label>Default Job-Interval</label>
<input type="time" min="00:30" max="23:59" defaultValue={dateToStr(new Date(frontendSettings.jobInterval))} onChange={(e) => setFrontendSettings({...frontendSettings, jobInterval: new Date(e.currentTarget.valueAsNumber-60*60*1000) ?? frontendSettings.jobInterval})}/>
</div>
{notificationConnectors.map(c => <NotificationConnectorItem apiUri={apiUri} notificationConnector={c} />)}
<NotificationConnectorItem apiUri={apiUri} notificationConnector={null} />
<h3>Notification Connectors:</h3>
{notificationConnectors.map(c => <NotificationConnectorItem apiUri={apiUri} notificationConnector={c} key={c.name} />)}
<NotificationConnectorItem apiUri={apiUri} notificationConnector={null} key="New Notification Connector" />
<h3>Local Libraries:</h3>
{localLibraries.map(l => <LocalLibraryItem apiUri={apiUri} library={l} key={l.localLibraryId} />)}
<LocalLibraryItem apiUri={apiUri} library={null} key="New Local Library" />
</div>
</div>
: null

41
Website/modules/interfaces/ILocalLibrary.tsx
View File

@ -1,4 +1,8 @@
import {ReactElement} from "react";
import {ReactElement, useState} from "react";
import INewLibraryRecord, {Validate} from "./records/INewLibraryRecord";
import Loader from "../Loader";
import LocalLibraryFunctions from "../LocalLibraryFunctions";
import "../../styles/localLibrary.css";
export default interface ILocalLibrary {
localLibraryId: string;
@ -6,9 +10,36 @@ export default interface ILocalLibrary {
libraryName: string;
}
export function LocalLibrary(library: ILocalLibrary) : ReactElement {
return (<div key={library.localLibraryId}>
<p className={"LocalLibraryFunctions-Name"}>{library.libraryName}</p>
<p className={"LocalLibraryFunctions-Path"}>{library.basePath}</p>
export 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);
LocalLibraryFunctions.UpdateLibrary(apiUri, library.localLibraryId, record)
.finally(() => setLoading(false));
}}>Edit</button>
: <button className="LocalLibraryFunctions-Action" onClick={() => {
if(record === null || Validate(record) === false)
return;
setLoading(true);
LocalLibraryFunctions.CreateLibrary(apiUri, record)
.finally(() => setLoading(false));
}}>Add</button>
}
<Loader loading={loading} style={{width:"40px",height:"40px"}}/>
</div>);
}

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

@ -20,8 +20,9 @@ export function NotificationConnectorItem({apiUri, notificationConnector} : {api
const [selectedConnectorElement, setSelectedConnectorElement] = useState<ReactElement>(<DefaultItem apiUri={apiUri} notificationConnector={null} />);
return <>
<p>New Notification Connector</p>
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;
@ -36,7 +37,7 @@ export function NotificationConnectorItem({apiUri, notificationConnector} : {api
<option value="lunasea">Lunasea</option>
</select>
{selectedConnectorElement}
</>;
</div>;
}
function DefaultItem({apiUri, notificationConnector}:{apiUri: string, notificationConnector: INotificationConnector | null}) : ReactElement {

8
Website/modules/interfaces/records/INewLibraryRecord.ts
View File

@ -1,4 +1,12 @@
export default interface INewLibraryRecord {
path: string;
name: string;
}
export function Validate(record: INewLibraryRecord) : boolean {
if(record.path.length < 1)
return false;
if(record.name.length < 1)
return false;
return true;
}

13
Website/styles/localLibrary.css Normal file
View File

@ -0,0 +1,13 @@
.LocalLibraryFunctions {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.LocalLibraryFunctions input{
width: min-content;
}
.LocalLibraryFunctions-Action {
margin-left: auto;
}

6
Website/styles/notificationConnector.css
View File

@ -1,11 +1,7 @@
.NotificationConnectorItem{
position: relative;
display: grid;
width: calc(100% - 10px);
grid-template-columns: 40% calc(60% - 10px);
margin: 0 auto;
padding: 5px;
border-radius: 5px;
grid-template-rows: 30px auto auto 30px;
column-gap: 4px;
row-gap: 4px;
@ -15,7 +11,6 @@
"headers body"
"footer footer";
align-items: center;
border: 1px solid var(--primary-color);
}
.NotificationConnectorItem p{
@ -80,5 +75,4 @@
.NotificationConnectorItem-Save{
grid-area: footer;
justify-self: flex-end;
padding: 0 15px;
}

18
Website/styles/settings.css
View File

@ -21,14 +21,28 @@
}
#SettingsPopUpBody > * {
margin: 5px 0;
margin: 5px auto;
border: 1px solid var(--primary-color);
padding: 5px;
width: calc(100% - 10px);
border-radius: 5px;
}
#SettingsPopUpBody label {
width: max-content;
margin-right: 10px;
margin-right: 5px;
}
#SettingsPopUpBody label::after {
content: ':';
}
#SettingsPopUpBody button {
padding: 0 15px;
}
#SettingsPopUpBody h1, #SettingsPopUpBody h2, #SettingsPopUpBody h3 {
border: 0;
margin: 5px 0 0 0;
padding: 0;
}