diff --git a/Website/App.tsx b/Website/App.tsx index 1fcf465..8d538d3 100644 --- a/Website/App.tsx +++ b/Website/App.tsx @@ -10,10 +10,7 @@ import IFrontendSettings from "./modules/interfaces/IFrontendSettings"; export default function App(){ const [connected, setConnected] = React.useState(false); const [showSearch, setShowSearch] = React.useState(false); - const [showQueue, setShowQueue] = React.useState(false); - const [lastMangaListUpdate, setLastMangaListUpdate] = React.useState(new Date()); - const [lastJobListUpdate, setLastJobListUpdate] = React.useState(new Date()); - const [joblistUpdateInterval, setJoblistUpdateInterval] = React.useState(); + const [frontendSettings, setFrontendSettings] = useState({jobInterval: new Date(0,0,0,3)}); useEffect(() => { checkConnection().then(res => setConnected(res)).catch(() => setConnected(false)); @@ -27,7 +24,7 @@ export default function App(){ } return(
-
+
{connected ? <> {showSearch diff --git a/Website/media/connector-icons/bato.ico b/Website/media/connector-icons/bato.ico new file mode 100644 index 0000000..42c201a Binary files /dev/null and b/Website/media/connector-icons/bato.ico differ diff --git a/Website/media/connector-icons/gotify-logo.png b/Website/media/connector-icons/gotify-logo.png new file mode 100644 index 0000000..5d29004 Binary files /dev/null and b/Website/media/connector-icons/gotify-logo.png differ diff --git a/Website/media/connector-icons/kavita.png b/Website/media/connector-icons/kavita.png new file mode 100644 index 0000000..00a4ba7 Binary files /dev/null and b/Website/media/connector-icons/kavita.png differ diff --git a/Website/media/connector-icons/komga.svg b/Website/media/connector-icons/komga.svg new file mode 100644 index 0000000..e8b3f56 --- /dev/null +++ b/Website/media/connector-icons/komga.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + diff --git a/Website/media/connector-icons/lunasea.png b/Website/media/connector-icons/lunasea.png new file mode 100644 index 0000000..868e849 Binary files /dev/null and b/Website/media/connector-icons/lunasea.png differ diff --git a/Website/media/connector-icons/mangadex-logo.svg b/Website/media/connector-icons/mangadex-logo.svg new file mode 100644 index 0000000..696dd8b --- /dev/null +++ b/Website/media/connector-icons/mangadex-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Website/media/connector-icons/mangakatana.png b/Website/media/connector-icons/mangakatana.png new file mode 100644 index 0000000..2d3e044 Binary files /dev/null and b/Website/media/connector-icons/mangakatana.png differ diff --git a/Website/media/connector-icons/mangalife.png b/Website/media/connector-icons/mangalife.png new file mode 100644 index 0000000..af14c64 Binary files /dev/null and b/Website/media/connector-icons/mangalife.png differ diff --git a/Website/media/connector-icons/manganato.png b/Website/media/connector-icons/manganato.png new file mode 100644 index 0000000..0df9c28 Binary files /dev/null and b/Website/media/connector-icons/manganato.png differ diff --git a/Website/media/connector-icons/mangasee.png b/Website/media/connector-icons/mangasee.png new file mode 100644 index 0000000..7965217 Binary files /dev/null and b/Website/media/connector-icons/mangasee.png differ diff --git a/Website/media/connector-icons/mangaworld.png b/Website/media/connector-icons/mangaworld.png new file mode 100644 index 0000000..04b30e5 Binary files /dev/null and b/Website/media/connector-icons/mangaworld.png differ diff --git a/Website/media/connector-icons/ntfy.svg b/Website/media/connector-icons/ntfy.svg new file mode 100644 index 0000000..8530901 --- /dev/null +++ b/Website/media/connector-icons/ntfy.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Website/modules/Header.tsx b/Website/modules/Header.tsx index 426895a..3bc5a78 100644 --- a/Website/modules/Header.tsx +++ b/Website/modules/Header.tsx @@ -1,12 +1,15 @@ import React from 'react'; import '../styles/header.css' +import Settings from "./Settings"; +import IFrontendSettings from "./interfaces/IFrontendSettings"; -export default function Header(){ +export default function Header({settings, changeSettings} : {settings: IFrontendSettings, changeSettings(settings: IFrontendSettings): void}){ return (
- website image is Blahaj + website image is Blahaj Tranga
+
) } \ No newline at end of file diff --git a/Website/modules/Settings.tsx b/Website/modules/Settings.tsx new file mode 100644 index 0000000..86b8e8e --- /dev/null +++ b/Website/modules/Settings.tsx @@ -0,0 +1,161 @@ +import React, {useState} from 'react'; +import IFrontendSettings from "./interfaces/IFrontendSettings"; +import '../styles/settings.css'; + +export default function Settings({settings, changeSettings} : {settings: IFrontendSettings, changeSettings(settings: IFrontendSettings): void}) { + const [frontendSettings] = useState(settings); + const [showSettings, setShowSettings] = useState(false); + + return ( +
+ cogwheel setShowSettings(true)}/> + {showSettings + ?
+
+

Settings

+ Close Settings setShowSettings(false)}/> +
+
+
+ TRANGA +
+
+ API Settings + + + + +
+
+ Rate Limits + + + + + + + + +
+
+ Appearance + + +
+
+
+ +
+ Sources +
+
+ + Mangadex Logo + MangaDex + + + + + +
+
+
+ +
+ LIBRARY CONNECTORS +
+
+ + Komga Logo + Komga + + + + + + + +
+ Test + Reset + Apply +
+
+
+ + Kavita Logo + Kavita + + + + + + + +
+ Test + Reset + Apply +
+
+
+
+ +
+ NOTIFICATION CONNECTORS +
+
+ + Gotify Logo + Gotify + + + + + +
+ Test + Reset + Apply +
+
+
+ + Lunasea Logo + LunaSea + + + +
+ Test + Reset + Apply +
+
+
+ + ntfy Logo + Ntfy + + + + + +
+ Test + Reset + Apply +
+
+
+
+
+
+ : <> + } +
+ ); +} \ No newline at end of file diff --git a/Website/modules/interfaces/IFrontendSettings.tsx b/Website/modules/interfaces/IFrontendSettings.tsx new file mode 100644 index 0000000..4983559 --- /dev/null +++ b/Website/modules/interfaces/IFrontendSettings.tsx @@ -0,0 +1,3 @@ +export default interface IFrontendSettings { + jobInterval: Date; +} \ No newline at end of file diff --git a/Website/styles/header.css b/Website/styles/header.css index 18d80fc..3e5a26f 100644 --- a/Website/styles/header.css +++ b/Website/styles/header.css @@ -1,6 +1,7 @@ header { display: flex; align-items: center; + justify-content: space-between; height: var(--topbar-height); background-color: var(--secondary-color); z-index: 100; diff --git a/Website/styles/settings.css b/Website/styles/settings.css new file mode 100644 index 0000000..df93b67 --- /dev/null +++ b/Website/styles/settings.css @@ -0,0 +1,66 @@ +#Settings { + position: relative; + height: 100%; +} + +#SettingsIcon { + height: calc(100% - 20px); + margin: 10px; +} + +#settingsPopupBody { + display: flex; + flex-direction: column; + overflow-y: scroll; +} + +.settings-section { + margin: 5px 5px 10px; + font-size: 10pt; + font-weight: 100; + display: block; + border-top-style: solid; + border-top-width: 1px; + border-top-color: lightgray; + width: calc(100% - 10px); + padding: 10px; +} + +.settings-section-content { + display: flex; + flex-direction: row; + width: 100%; + flex-wrap: wrap; + +} + +.section-item { + display: flex; + flex-direction: column; + width: 22%; + min-width: 300px; + height: auto; + border-radius: 10px; + border-style: solid; + border-width: 1px; + border-color: lightgray; + margin: 7px; + padding: 5px; +} + +.section-item > .settings-section-title { + font-weight: bold; + vertical-align: bottom; + line-height: 32px; + font-size: 12pt; + width: 100%; +} + +.section-item > .settings-section-title > img { + width: auto; + height: 32px; + margin: 5px; + vertical-align: middle; + border-radius: 5px; +} +