glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-06-14 07:47:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added April Fools Mode toggle

Browse Source
This commit is contained in:
glax
2024-10-23 03:01:23 +02:00
parent f426a77f25
commit a486b5bdfc
4 changed files with 198 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
Website/modules/Settings.tsx
View File

@ -1,4 +1,4 @@
import React, {KeyboardEventHandler, MouseEventHandler, useEffect, useState} from 'react';
import React, {ChangeEventHandler, KeyboardEventHandler, MouseEventHandler, useEffect, useState} from 'react';
import IFrontendSettings from "./interfaces/IFrontendSettings";
import '../styles/settings.css';
import IBackendSettings from "./interfaces/IBackendSettings";
@ -7,6 +7,8 @@ import LibraryConnector, {Kavita, Komga} from "./LibraryConnector";
import NotificationConnector, {Gotify, Lunasea, Ntfy} from "./NotificationConnector";
import ILibraryConnector from "./interfaces/ILibraryConnector";
import INotificationConnector from "./interfaces/INotificationConnector";
import Toggle from 'react-toggle';
import '../styles/react-toggle.css';
export default function Settings({backendConnected, apiUri, settings, changeSettings} : {backendConnected: boolean, apiUri: string, settings: IFrontendSettings, changeSettings: (settings: IFrontendSettings) => void}) {
const [frontendSettings, setFrontendSettings] = useState<IFrontendSettings>(settings);
@ -97,16 +99,27 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
.catch(() => alert("Failed to update Useragent."));
}
}
const ResetUserAgent: MouseEventHandler<HTMLSpanElement> = () => {
//console.info(`Resetting Useragent`);
postData(`${apiUri}/v2/Settings/UserAgent`, {value: undefined})
.then((json) => {
//console.info(`Successfully updated Useragent ${e.currentTarget.value}`);
//console.info(`Successfully reset Useragent`);
UpdateBackendSettings();
RefreshInputs();
})
.catch(() => alert("Failed to update Useragent."));
}
const SetAprilFoolsMode : ChangeEventHandler<HTMLInputElement> = (e) => {
//console.info(`Updating AprilFoolsMode ${e.currentTarget.value}`);
postData(`${apiUri}/v2/Settings/AprilFoolsMode`, {value: e.currentTarget.value == "on"})
.then((json) => {
//console.info(`Successfully updated AprilFoolsMode ${e.currentTarget.value}`);
UpdateBackendSettings();
})
}
function RefreshInputs(){
alert("Saved.");
setShowSettings(false);
@ -132,6 +145,10 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
<label htmlFor="userAgent">User Agent:</label>
<input id="userAgent" type="text" placeholder={backendSettings != undefined ? backendSettings.userAgent : "UserAgent"} onKeyDown={SubmitUserAgent} />
<span id="resetUserAgent" onClick={ResetUserAgent}>Reset</span>
<label htmlFor="aprilFoolsMode">April Fools Mode</label>
<Toggle id="aprilFoolsMode"
defaultChecked={backendSettings?.aprilFoolsMode ?? false}
onChange={SetAprilFoolsMode} />
</div>
<div className="section-item">
<span className="settings-section-title">Rate Limits</span>

143
Website/styles/react-toggle.css Normal file
View File

@ -0,0 +1,143 @@
/* https://raw.githubusercontent.com/instructure-react/react-toggle/master/style.css */
.react-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.react-toggle-screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.react-toggle--disabled {
cursor: not-allowed;
opacity: 0.5;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.react-toggle-track {
width: 50px;
height: 24px;
padding: 0;
border-radius: 30px;
background-color: #4D4D4D;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: #000000;
}
.react-toggle--checked .react-toggle-track {
background-color: #19AB27;
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: #128D15;
}
.react-toggle-track-check {
position: absolute;
width: 14px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
left: 8px;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-check {
opacity: 1;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle-track-x {
position: absolute;
width: 10px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
right: 10px;
opacity: 1;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-x {
opacity: 0;
}
.react-toggle-thumb {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
position: absolute;
top: 1px;
left: 1px;
width: 22px;
height: 22px;
border: 1px solid #4D4D4D;
border-radius: 50%;
background-color: #FAFAFA;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.react-toggle--checked .react-toggle-thumb {
left: 27px;
border-color: #19AB27;
}
.react-toggle--focus .react-toggle-thumb {
-webkit-box-shadow: 0px 0px 3px 2px #0099E0;
-moz-box-shadow: 0px 0px 3px 2px #0099E0;
box-shadow: 0px 0px 2px 3px #0099E0;
}
.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
-webkit-box-shadow: 0px 0px 5px 5px #0099E0;
-moz-box-shadow: 0px 0px 5px 5px #0099E0;
box-shadow: 0px 0px 5px 5px #0099E0;
}