mirror of
https://github.com/C9Glax/tranga-website.git
synced 2025-06-12 14:57:53 +02:00
Settings Template and Popup in Header bar
This commit is contained in:
@ -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>)
|
||||
}
|
||||
161
Website/modules/Settings.tsx
Normal file
161
Website/modules/Settings.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
3
Website/modules/interfaces/IFrontendSettings.tsx
Normal file
3
Website/modules/interfaces/IFrontendSettings.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default interface IFrontendSettings {
|
||||
jobInterval: Date;
|
||||
}
|
||||
Reference in New Issue
Block a user