LibraryConnector Settings

tranga-website/src/Components/Settings/LibraryConnectors/AddLibraryConnector.tsx

@@ -0,0 +1,19 @@
+import {Modal, ModalDialog, Tab, TabList, Tabs} from "@mui/joy";
+import ModalClose from "@mui/joy/ModalClose";
+import * as React from "react";
+
+export default function ({open, setOpen} : {open: boolean, setOpen: Dispatch<boolean>}) {
+    return (
+        <Modal open={open} onClose={() => setOpen(false)}>
+            <ModalDialog>
+                <ModalClose />
+                <Tabs sx={{width:'95%'}} defaultValue={"komga"}>
+                    <TabList>
+                        <Tab value={"komga"}>Komga</Tab>
+                        <Tab value={"kavita"}>Kavita</Tab>
+                    </TabList>
+                </Tabs>
+            </ModalDialog>
+        </Modal>
+    );
+}

tranga-website/src/Components/Settings/LibraryConnectors/LibraryConnectors.tsx

@@ -0,0 +1,18 @@
+import {Button, Card, Typography} from "@mui/joy";
+import {useState} from "react";
+import ListLibraryConnectors from "./ListLibraryConnectors.tsx";
+import AddLibraryConnector from "./AddLibraryConnector.tsx";
+
+export default function (){
+
+    const [addDialogOpen, setAddDialogOpen] = useState<boolean>(false);
+
+    return (
+        <Card>
+            <Typography>Library Connectors</Typography>
+            <Button onClick={() => setAddDialogOpen(true)}>Add</Button>
+            <ListLibraryConnectors />
+            <AddLibraryConnector open={addDialogOpen} setOpen={() => setAddDialogOpen(false)} />
+        </Card>
+    );
+}

tranga-website/src/Components/Settings/LibraryConnectors/ListLibraryConnectors.tsx

@@ -0,0 +1,35 @@
+import {useContext, useEffect, useState} from "react";
+import {ApiContext} from "../../../apiClient/ApiContext.tsx";
+import {LibraryConnector} from "../../../apiClient/data-contracts.ts";
+import {Card, Chip, Input, Stack} from "@mui/joy";
+
+export default function (){
+    const Api = useContext(ApiContext);
+    const [libraryConnectors, setLibraryConnectors] = useState<LibraryConnector[]>([]);
+
+    useEffect(() => {
+        getConnectors();
+    }, []);
+
+    const getConnectors = () => {
+        Api.libraryConnectorList().then(r => {
+            if(r.ok)
+                setLibraryConnectors(r.data);
+        })
+    };
+
+    return (
+        <Stack direction={"column"} spacing={1}>
+            {libraryConnectors.map(c => <LibraryConnectorItem key={c.key} connector={c} />)}
+        </Stack>
+    );
+}
+
+function LibraryConnectorItem({connector} : {connector: LibraryConnector}){
+    return (
+        <Card>
+            <Chip>{connector.libraryType}</Chip>
+            <Input disabled value={connector.baseUrl} />
+        </Card>
+    );
+}

tranga-website/src/Components/Settings/NotificationConnectors/AddNotificationConnector.tsx

@@ -1,5 +1,5 @@
 import {ReactNode, useContext, useState} from "react";
-import { ApiContext } from "../../apiClient/ApiContext";
+import { ApiContext } from "../../../apiClient/ApiContext.tsx";
 import {
     Button, Card,
     Input,
@@ -12,8 +12,8 @@ import {
     Tabs, Typography
 } from "@mui/joy";
 import ModalClose from "@mui/joy/ModalClose";
-import {GotifyRecord, NtfyRecord, PushoverRecord} from "../../apiClient/data-contracts.ts";
-import {LoadingState, StateColor, StateIndicator} from "../Loading.tsx";
+import {GotifyRecord, NtfyRecord, PushoverRecord} from "../../../apiClient/data-contracts.ts";
+import {LoadingState, StateColor, StateIndicator} from "../../Loading.tsx";
 import * as React from "react";
 import ListNotificationConnector from "./ListNotificationConnector.tsx";
 

tranga-website/src/Components/Settings/NotificationConnectors/ListNotificationConnector.tsx

@@ -1,6 +1,6 @@
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
+import {ApiContext} from "../../../apiClient/ApiContext.tsx";
 import {useContext, useEffect, useState} from "react";
-import { NotificationConnector } from "../../apiClient/data-contracts.ts";
+import { NotificationConnector } from "../../../apiClient/data-contracts.ts";
 import {Card, Chip, Input, Stack, Table, Textarea, Typography} from "@mui/joy";
 
 export default function (){

tranga-website/src/Components/Settings/Services.tsx

@@ -1,6 +1,7 @@
 import {SettingsItem} from "./Settings.tsx";
-import NotificationConnectors from "./AddNotificationConnector.tsx";
+import NotificationConnectors from "./NotificationConnectors/AddNotificationConnector.tsx";
 import FlareSolverr from "./FlareSolverr.tsx";
+import LibraryConnectors from "./LibraryConnectors/LibraryConnectors.tsx";
 
 export default function(){
 
@@ -10,6 +11,7 @@ export default function(){
         <SettingsItem title={"Services"} direction={"row"}>
             <FlareSolverr />
             <NotificationConnectors />
+            <LibraryConnectors />
         </SettingsItem>
     );
 }