Local Libraries in Settings

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<void> {
+        return patchData(`${apiUri}/v2/LocalLibraries/${libraryId}`, record)
+            .then(()=> {
+                return Promise.resolve()
+            });
+    }
 }

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<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} />)}
+                        <h3>Notification Connectors:</h3>
-                        <NotificationConnectorItem apiUri={apiUri} notificationConnector={null} />
+                        {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

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 {
+export function LocalLibraryItem({apiUri, library} : {apiUri: string, library: ILocalLibrary | null}) : ReactElement {
-    return (<div key={library.localLibraryId}>
+    const [loading, setLoading] = useState<boolean>(false);
-        <p className={"LocalLibraryFunctions-Name"}>{library.libraryName}</p>
+    const [record, setRecord] = useState<INewLibraryRecord>({
-        <p className={"LocalLibraryFunctions-Path"}>{library.basePath}</p>
+       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>);
 }

Website/modules/interfaces/INotificationConnector.tsx

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

Website/modules/interfaces/records/INewLibraryRecord.ts

@@ -2,3 +2,11 @@ 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;
+}

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

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

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