Settings Template and Popup in Header bar

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<Date>(new Date());
-    const [lastJobListUpdate, setLastJobListUpdate] = React.useState<Date>(new Date());
-    const [joblistUpdateInterval, setJoblistUpdateInterval] = React.useState<number>();
+    const [frontendSettings, setFrontendSettings] = useState<IFrontendSettings>({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(<div>
-        <Header/>
+        <Header settings={frontendSettings} changeSettings={setFrontendSettings}/>
         {connected
             ? <>
                 {showSearch

Website/media/connector-icons/komga.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="512pt"
+        viewBox="0 0 512 512"
+        width="512pt"
+        version="1.1"
+        id="svg4586">
+    <path
+            d="m512 256c0 141.386719-114.613281 256-256 256s-256-114.613281-256-256 114.613281-256 256-256 256 114.613281 256 256zm0 0"
+            fill="#005ed3"
+            id="path4556"/>
+    <path
+            d="m 512,256 c 0,-11.71094 -0.80469,-23.23047 -2.32422,-34.52344 L 382.48047,94.28125 320.52344,121.85938 256,56.933594 212.69531,131.30469 129.51953,94.28125 141.86719,178.42187 49.949219,193.81641 114.32031,256 l -64.371091,62.18359 82.121091,82.16016 -2.55078,17.375 91.95703,91.95703 C 232.76953,511.19531 244.28906,512 256,512 397.38672,512 512,397.38672 512,256 Z"
+            id="path4558"
+            style="fill:#00459f"/>
+    <path
+            d="m256 86.742188 37.109375 63.738281 70.574219-31.414063-10.527344 71.71875 77.078125 12.910156-54.144531 52.304688 54.144531 52.304688-77.078125 12.910156 10.527344 71.71875-70.574219-31.414063-37.109375 63.738281-37.109375-63.738281-70.574219 31.414063 10.527344-71.71875-77.078125-12.910156 54.144531-52.304688-54.144531-52.304688 77.078125-12.910156-10.527344-71.71875 70.574219 31.414063zm0 0"
+            fill="#ff0335"
+            id="path4560"/>
+    <path
+            d="m430.230469 308.300781-77.070313 12.910157 10.519532 71.71875-70.570313-31.410157-37.109375 63.742188v-338.523438l37.109375 63.742188 70.570313-31.410157-6.757813 46.101563-3.761719 25.617187 58.800782 9.851563 18.269531 3.058594-13.390625 12.929687-40.75 39.371094 11.378906 10.988281zm0 0"
+            fill="#c2001b"
+            id="path4562"/>
+    <path
+            d="m256 455.066406-43.304688-74.371094-83.175781 37.023438 12.347657-84.140625-91.917969-15.394531 64.371093-62.183594-64.371093-62.183594 91.917969-15.394531-12.347657-84.140625 83.179688 37.023438 43.300781-74.371094 43.304688 74.371094 83.175781-37.023438-12.347657 84.140625 91.917969 15.394531-64.371093 62.183594 64.371093 62.183594-91.917969 15.398437 12.347657 84.136719-83.175781-37.023438zm-30.917969-112.722656 30.917969 53.101562 30.917969-53.101562 57.964843 25.800781-8.703124-59.292969 62.238281-10.425781-43.917969-42.425781 43.917969-42.425781-62.238281-10.425781 8.703124-59.292969-57.964843 25.800781-30.917969-53.101562-30.917969 53.101562-57.964843-25.800781 8.703124 59.292969-62.238281 10.425781 43.917969 42.425781-43.917969 42.425781 62.238281 10.425781-8.703124 59.292969zm0 0"
+            fill="#ffdf47"
+            id="path4564"/>
+    <path
+            d="m403.308594 261.441406-5.628906-5.441406 25.160156-24.300781 39.210937-37.878907-55.75-9.339843-36.171875-6.058594 2.800782-19.09375 9.550781-65.046875-83.179688 37.019531-43.300781-74.371093v59.621093l30.921875 53.109375 57.957031-25.808594-3.910156 26.667969-2.546875 17.378907-2.242187 15.25 2.480468.421874 59.761719 10.007813-43.921875 42.421875 16.96875 16.390625 26.953125 26.03125-62.242187 10.429687 8.699218 59.296876-57.957031-25.808594-30.921875 53.109375v59.621093l43.300781-74.371093 83.179688 37.019531-12.351563-84.140625 91.921875-15.398437zm0 0"
+            fill="#fec000"
+            id="path4566"/>
+    <g
+            aria-label="K"
+            transform="matrix(1.1590846,-0.34467221,0.22789693,0.794981,0,0)"
+            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:296.55969238px;line-height:125%;font-family:Impact;-inkscape-font-specification:Impact;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+            id="text4596">
+        <path
+                d="m 220.91497,266.9035 -34.89789,105.85211 38.2284,128.58643 H 161.2555 L 136.63873,400.84769 V 501.34204 H 75.676021 V 266.9035 h 60.962709 v 91.08205 l 27.07845,-91.08205 z"
+                style="font-size:296.55969238px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+                id="path824"/>
+    </g>
+</svg>

Website/media/connector-icons/ntfy.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50mm" height="50mm" viewBox="0 0 50 50">
+    <defs>
+        <linearGradient id="b">
+            <stop offset="0" style="stop-color:#348878;stop-opacity:1"/>
+            <stop offset="1" style="stop-color:#52bca6;stop-opacity:1"/>
+        </linearGradient>
+        <linearGradient id="a">
+            <stop offset="0" style="stop-color:#348878;stop-opacity:1"/>
+            <stop offset="1" style="stop-color:#56bda8;stop-opacity:1"/>
+        </linearGradient>
+        <linearGradient xlink:href="#a" id="e" x1="160.722" x2="168.412" y1="128.533" y2="134.326" gradientTransform="matrix(3.74959 0 0 3.74959 -541.79 -387.599)" gradientUnits="userSpaceOnUse"/>
+        <linearGradient xlink:href="#b" id="c" x1=".034" x2="50.319" y1="0" y2="50.285" gradientTransform="matrix(.99434 0 0 .99434 -.034 0)" gradientUnits="userSpaceOnUse"/>
+        <filter id="d" width="1.176" height="1.211" x="-.076" y="-.092" style="color-interpolation-filters:sRGB">
+            <feFlood flood-color="#fff" flood-opacity=".192" result="flood"/>
+            <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
+            <feGaussianBlur in="composite1" result="blur" stdDeviation="4"/>
+            <feOffset dx="3" dy="2.954" result="offset"/>
+            <feComposite in="SourceGraphic" in2="offset" result="composite2"/>
+        </filter>
+    </defs>
+    <g style="display:inline">
+        <path d="M0 0h50v50H0z" style="fill:url(#c);fill-opacity:1;stroke:none;stroke-width:.286502;stroke-linejoin:bevel"/>
+    </g>
+    <g style="display:inline">
+        <path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" style="color:#fff;display:inline;fill:#fff;stroke:none;stroke-width:1.93113;-inkscape-stroke:none;filter:url(#d)" transform="scale(.26458)"/>
+    </g>
+    <g style="display:inline">
+        <path d="M88.2 95.309H64.92c-1.601 0-2.91 1.236-2.91 2.746l.022 18.602-.435 2.506 6.231-1.881H88.2c1.6 0 2.91-1.236 2.91-2.747v-16.48c0-1.51-1.31-2.746-2.91-2.746z" style="color:#fff;fill:url(#e);stroke:none;stroke-width:2.49558;-inkscape-stroke:none" transform="translate(-51.147 -81.516)"/>
+        <path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" style="color:#fff;fill:#fff;stroke:none;stroke-width:1.93113;-inkscape-stroke:none" transform="scale(.26458)"/>
+        <g style="font-size:8.48274px;font-family:sans-serif;letter-spacing:0;word-spacing:0;fill:#fff;stroke:none;stroke-width:.525121">
+            <path d="M62.57 116.77v-1.312l3.28-1.459q.159-.068.306-.102.158-.045.283-.068l.271-.022v-.09q-.136-.012-.271-.046-.125-.023-.283-.057-.147-.045-.306-.113l-3.28-1.459v-1.323l5.068 2.319v1.413z" style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/>
+            <path d="M62.309 110.31v1.903l3.437 1.53.022.007-.022.008-3.437 1.53v1.892l.37-.17 5.221-2.39v-1.75zm.525.817 4.541 2.08v1.076l-4.541 2.078v-.732l3.12-1.389.003-.002a1.56 1.56 0 0 1 .258-.086h.006l.008-.002c.094-.027.176-.047.246-.06l.498-.041v-.574l-.24-.02a1.411 1.411 0 0 1-.231-.04l-.008-.001-.008-.002a9.077 9.077 0 0 1-.263-.053 2.781 2.781 0 0 1-.266-.097l-.004-.002-3.119-1.39z"
+                  style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/>
+        </g>
+        <g style="font-size:8.48274px;font-family:sans-serif;letter-spacing:0;word-spacing:0;fill:#fff;stroke:none;stroke-width:.525121">
+            <path d="M69.171 117.754h5.43v1.278h-5.43Z" style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/>
+            <path d="M68.908 117.492v1.802h5.955v-1.802zm.526.524h4.904v.754h-4.904z" style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/>
+        </g>
+    </g>
+</svg>

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 (
         <header>
             <div id="titlebox">
-                <img alt="website image is Blahaj" src="media/blahaj.png"/>
+                <img alt="website image is Blahaj" src="../media/blahaj.png"/>
                 <span>Tranga</span>
             </div>
+            <Settings settings={settings} changeSettings={changeSettings} />
         </header>)
 }

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<IFrontendSettings>(settings);
+    const [showSettings, setShowSettings] = useState<boolean>(false);
+
+    return (
+        <div id="Settings">
+            <img id="SettingsIcon" src="../media/settings-cogwheel.svg" alt="cogwheel" onClick={() => setShowSettings(true)}/>
+            {showSettings
+                ? <div className="popup">
+                    <div className="popupHeader">
+                        <h1>Settings</h1>
+                        <img alt="Close Settings" className="close" src="../media/close-x.svg" onClick={() => setShowSettings(false)}/>
+                    </div>
+                    <div id="settingsPopupBody" className="popupBody">
+                        <div className="settings-section">
+                            TRANGA
+                            <div className="settings-section-content">
+                                <div className="section-item">
+                                    <span className="settings-section-title">API Settings</span>
+                                    <label htmlFor="settingApiUri">API URI:</label>
+                                    <input placeholder="https://" type="text" id="settingApiUri" />
+                                    <label htmlFor="userAgent">User Agent:</label>
+                                    <input placeholder="UserAgent" id="userAgent" type="text" />
+                                </div>
+                                <div className="section-item">
+                                    <span className="settings-section-title">Rate Limits</span>
+                                    <label htmlFor="DefaultRL">Default:</label>
+                                    <input id="defaultRL" type="text" />
+                                    <label htmlFor="CoverRL">Manga Covers:</label>
+                                    <input id="coverRL" type="text" />
+                                    <label htmlFor="ImageRL">Manga Images:</label>
+                                    <input id="imageRL" type="text" />
+                                    <label htmlFor="InfoRL">Manga Info:</label>
+                                    <input id="infoRL" type="text" />
+                                </div>
+                                <div className="section-item">
+                                    <span className="settings-section-title">Appearance</span>
+                                    <label htmlFor="cssStyle">Library Style:</label>
+                                    <select id="cssStyle">
+                                        <option id="card_compact" value="card_compact">Cards (Compact)</option>
+                                        <option id="card_hover" value="card_hover">Cards (Hover)</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="settings-section">
+                            <span className="settings-section-title">Sources</span>
+                            <div className="settings-section-content">
+                                <div className="section-item">
+                                    <span className="settings-section-title">
+                                        <img src="../media/connector-icons/mangadex-logo.svg" alt="Mangadex Logo" />
+                                        <a href="https://mangadex.org">MangaDex</a>
+                                    </span>
+                                    <label htmlFor="mDexFeedRL">Feed Rate Limit:</label>
+                                    <input id="mDexFeedRL" type="text" />
+                                    <label htmlFor="mDexImageRL">Image Rate Limit:</label>
+                                    <input id="mDexImageRL" type="text" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="settings-section">
+                        LIBRARY CONNECTORS
+                            <div className="settings-section-content">
+                                <div className="section-item">
+                                    <span className="settings-section-title">
+                                        <img src='../media/connector-icons/komga.svg' alt="Komga Logo" />
+                                        Komga
+                                    </span>
+                                    <label htmlFor="komgaUrl"></label>
+                                    <input placeholder="URL" id="komgaUrl" type="text" />
+                                    <label htmlFor="komgaUsername"></label>
+                                    <input placeholder="Username" id="komgaUsername" type="text" />
+                                    <label htmlFor="komgaPassword"></label>
+                                    <input placeholder="Password" id="komgaPassword" type="password" />
+                                    <div className="section-buttons-container">
+                                        <span>Test</span>
+                                        <span>Reset</span>
+                                        <span>Apply</span>
+                                    </div>
+                                </div>
+                                <div className="section-item">
+                                    <span className="settings-section-title">
+                                        <img src='../media/connector-icons/kavita.png' alt="Kavita Logo" />
+                                        Kavita
+                                    </span>
+                                    <label htmlFor="kavitaUrl"></label>
+                                    <input placeholder="URL" id="kavitaUrl" type="text" />
+                                    <label htmlFor="kavitaUsername"></label>
+                                    <input placeholder="Username" id="kavitaUsername" type="text" />
+                                    <label htmlFor="kavitaPassword"></label>
+                                    <input placeholder="Password" id="kavitaPassword" type="password"/>
+                                    <div className="section-buttons-container">
+                                        <span>Test</span>
+                                        <span>Reset</span>
+                                        <span>Apply</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="settings-section">
+                            NOTIFICATION CONNECTORS
+                            <div className="settings-section-content">
+                                <div className="section-item">
+                                    <span className="settings-section-title">
+                                        <img src='../media/connector-icons/gotify-logo.png' alt="Gotify Logo" />
+                                        Gotify
+                                    </span>
+                                    <label htmlFor="gotifyUrl"></label>
+                                    <input placeholder="URL" id="gotifyUrl" type="text" />
+                                    <label htmlFor="gotifyAppToken"></label>
+                                    <input placeholder="App-Token" id="gotifyAppToken" type="text" />
+                                    <div className="section-buttons-container">
+                                        <span>Test</span>
+                                        <span>Reset</span>
+                                        <span>Apply</span>
+                                    </div>
+                                </div>
+                                <div className="section-item">
+                                    <span className="settings-section-title">
+                                        <img src='../media/connector-icons/lunasea.png' alt="Lunasea Logo" />
+                                        LunaSea
+                                    </span>
+                                    <label htmlFor="lunaseaWebhook"></label>
+                                    <input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text"/>
+                                    <div className="section-buttons-container">
+                                        <span>Test</span>
+                                        <span>Reset</span>
+                                        <span>Apply</span>
+                                    </div>
+                                </div>
+                                <div className="section-item">
+                                    <span className="settings-section-title">
+                                        <img src='../media/connector-icons/ntfy.svg' alt="ntfy Logo" />
+                                        Ntfy
+                                    </span>
+                                    <label htmlFor="ntfyEndpoint"></label>
+                                    <input placeholder="URL" id="ntfyEndpoint" type="text" />
+                                    <label htmlFor="ntfyAuth"></label>
+                                    <input placeholder="Auth" id="ntfyAuth" type="text" />
+                                    <div className="section-buttons-container">
+                                        <span>Test</span>
+                                        <span>Reset</span>
+                                        <span>Apply</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                : <></>
+            }
+        </div>
+    );
+}

Website/modules/interfaces/IFrontendSettings.tsx

@@ -0,0 +1,3 @@
+export default interface IFrontendSettings {
+    jobInterval: Date;
+}

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;

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