From 2092db2ba3b4384585110fde3d6db14ee36f8af0 Mon Sep 17 00:00:00 2001 From: glax Date: Wed, 19 Mar 2025 22:44:11 +0100 Subject: [PATCH] Local Libraries in Settings --- Website/modules/LocalLibraryFunctions.tsx | 7 ++++ Website/modules/Settings.tsx | 14 +++++-- Website/modules/interfaces/ILocalLibrary.tsx | 41 ++++++++++++++++--- .../interfaces/INotificationConnector.tsx | 7 ++-- .../interfaces/records/INewLibraryRecord.ts | 8 ++++ Website/styles/localLibrary.css | 13 ++++++ Website/styles/notificationConnector.css | 6 --- Website/styles/settings.css | 18 +++++++- 8 files changed, 95 insertions(+), 19 deletions(-) create mode 100644 Website/styles/localLibrary.css diff --git a/Website/modules/LocalLibraryFunctions.tsx b/Website/modules/LocalLibraryFunctions.tsx index f8c357b..7fc3669 100644 --- a/Website/modules/LocalLibraryFunctions.tsx +++ b/Website/modules/LocalLibraryFunctions.tsx @@ -47,4 +47,11 @@ export default class LocalLibraryFunctions return Promise.resolve() }); } + + static async UpdateLibrary(apiUri: string, libraryId: string, record: INewLibraryRecord): Promise { + return patchData(`${apiUri}/v2/LocalLibraries/${libraryId}`, record) + .then(()=> { + return Promise.resolve() + }); + } } \ No newline at end of file diff --git a/Website/modules/Settings.tsx b/Website/modules/Settings.tsx index 5ac4565..c011558 100644 --- a/Website/modules/Settings.tsx +++ b/Website/modules/Settings.tsx @@ -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(false); let [notificationConnectors, setNotificationConnectors] = useState([]); + let [localLibraries, setLocalLibraries] = useState([]); 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 setFrontendSettings({...frontendSettings, jobInterval: new Date(e.currentTarget.valueAsNumber-60*60*1000) ?? frontendSettings.jobInterval})}/> - {notificationConnectors.map(c => )} - +

Notification Connectors:

+ {notificationConnectors.map(c => )} + +

Local Libraries:

+ {localLibraries.map(l => )} + : null diff --git a/Website/modules/interfaces/ILocalLibrary.tsx b/Website/modules/interfaces/ILocalLibrary.tsx index f7aca1e..8381be7 100644 --- a/Website/modules/interfaces/ILocalLibrary.tsx +++ b/Website/modules/interfaces/ILocalLibrary.tsx @@ -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 (
-

{library.libraryName}

-

{library.basePath}

+export function LocalLibraryItem({apiUri, library} : {apiUri: string, library: ILocalLibrary | null}) : ReactElement { + const [loading, setLoading] = useState(false); + const [record, setRecord] = useState({ + path: library?.basePath ?? "", + name: library?.libraryName ?? "" + }); + + return (
+ + setRecord({...record, name: e.currentTarget.value})}/> + + setRecord({...record, path: e.currentTarget.value})}/> + {library + ? + : + } +
); } \ No newline at end of file diff --git a/Website/modules/interfaces/INotificationConnector.tsx b/Website/modules/interfaces/INotificationConnector.tsx index 80966e0..271e104 100644 --- a/Website/modules/interfaces/INotificationConnector.tsx +++ b/Website/modules/interfaces/INotificationConnector.tsx @@ -20,8 +20,9 @@ export function NotificationConnectorItem({apiUri, notificationConnector} : {api const [selectedConnectorElement, setSelectedConnectorElement] = useState(); - return <> -

New Notification Connector

+ return
+
New Notification Connector
+ {selectedConnectorElement} - ; +
; } function DefaultItem({apiUri, notificationConnector}:{apiUri: string, notificationConnector: INotificationConnector | null}) : ReactElement { diff --git a/Website/modules/interfaces/records/INewLibraryRecord.ts b/Website/modules/interfaces/records/INewLibraryRecord.ts index d831a1c..59a764b 100644 --- a/Website/modules/interfaces/records/INewLibraryRecord.ts +++ b/Website/modules/interfaces/records/INewLibraryRecord.ts @@ -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; } \ No newline at end of file diff --git a/Website/styles/localLibrary.css b/Website/styles/localLibrary.css new file mode 100644 index 0000000..0064e55 --- /dev/null +++ b/Website/styles/localLibrary.css @@ -0,0 +1,13 @@ +.LocalLibraryFunctions { + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.LocalLibraryFunctions input{ + width: min-content; +} + +.LocalLibraryFunctions-Action { + margin-left: auto; +} \ No newline at end of file diff --git a/Website/styles/notificationConnector.css b/Website/styles/notificationConnector.css index 31d8d62..31f8de1 100644 --- a/Website/styles/notificationConnector.css +++ b/Website/styles/notificationConnector.css @@ -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; } \ No newline at end of file diff --git a/Website/styles/settings.css b/Website/styles/settings.css index 0c61f2b..5bcf686 100644 --- a/Website/styles/settings.css +++ b/Website/styles/settings.css @@ -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; } \ No newline at end of file