glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Added in remaining Tranga settings functionality

Browse Source 
Changed CSS style to be stored in local storage since we might want it to be browser specific (mobile vs desktop vs tablet)
This commit is contained in:
db-2001 2024-02-09 11:17:33 -05:00
parent 2c5a032890
commit c7e49fb6bc
4 changed files with 98 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Website/apiConnector.js
View File

@ -163,16 +163,16 @@ function UpdateDownloadLocation(downloadLocation){
PostData(uri);
}
function ChangeStyleSheet(sheet){
var uri = `${apiUri}/Settings/ChangeStyleSheet?styleSheet=${sheet}`;
PostData(uri);
}
function RefreshLibraryMetadata() {
var uri = `${apiUri}/Jobs/UpdateMetadata`;
PostData(uri);
}
async function DownloadLogs() {
var uri = `${apiUri}/LogFile`;
let response = await GetData(uri);
}
//Komga
function UpdateKomga(komgaUrl, komgaAuth){
var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;

52
Website/index.html
View File

@ -91,36 +91,54 @@
<div class="popup-section">
TRANGA
<div class="section-content">
<div class="section-item dyn-height">
<span class="title">API Settings</span>
<row><label for="settingApiUri">API URI:</label><input placeholder="https://" type="text" id="settingApiUri"></row>
<row><label for="userAgent">User Agent:</label><input placeholder="UserAgent" id="userAgent" type="text"></row>
<row>
<border-bar-button class="section" onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
<border-bar-button class="section" onclick="DownloadLogs()">Download Logs</border-bar-button>
</row>
</div>
<div class="section-item dyn-height">
<span class="title">Appearance</span>
<row><label for="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></row>
</div>
</div>
</div>
<div class="popup-section">
MANGA SOURCES
<div class="section-content">
<div class="section-item manga">
<div class="section-item dyn-height">
<span class="title"><img src="connector-icons/manganato.png"><a href="https://manganato.com">MangaNato</a></span>
<row><label for="manganatoRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="manganatoRL" type="text"></row>
</div>
<div class="section-item manga">
<div class="section-item dyn-height">
<span class="title"><img src="connector-icons/mangasee.png"><a href="https://mangasee123.com">MangaSee</a></span>
<row><label for="mangaseeRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mangaseeRL" type="text"></row>
</div>
<div class="section-item manga">
<div class="section-item dyn-height">
<span class="title"><img src="connector-icons/mangadex-logo.svg"><a href="https://mangadex.org">MangaDex</a></span>
<row><label for="mDexRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mDexRL" type="text"></row>
</div>
<div class="section-item manga">
<div class="section-item dyn-height">
<span class="title"><img src="connector-icons/mangakatana.png"><a href="https://mangakatana.com">MangaKatana</a></span>
<row><label for="mKatanaRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mKatanaRL" type="text"></row>
</div>
<div class="section-item manga">
<div class="section-item dyn-height">
<span class="title"><img src="connector-icons/mangaworld.png"><a href="https://www.mangaworld.ac">MangaWorld</a></span>
<row><label for="mWorldRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mWorldRL" type="text"></row>
</div>
<div class="section-item manga">
<div class="section-item dyn-height">
<span class="title"><img src="connector-icons/bato.ico"><a href="https://bato.to">Bato</a></span>
<row><label for="batoRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="batoRL" type="text"></row>
</div>
<div class="section-item manga">
<div class="section-item dyn-height">
<span class="title"><img src="connector-icons/mangalife.png"><a href="https://www.manga4life.com">MangaLife</a></span>
<row><label for="mLifeRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mLifeRL" type="text"></row>
</div>
@ -189,25 +207,9 @@
</div>
</div>
</div>
</div>
<div>
<p class="title">Download Location:</p>
<span id="downloadLocation"></span>
</div>
<div>
<p class="title">API-URI</p>
<label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
</div>
<div>
<span class="title">UserAgent</span><br />
<label for="userAgent"></label><input style="width: 400px" placeholder="UserAgent" id="userAgent" type="text">
</div>
<div>
<input type="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css" onclick="updateCSS()">
<label for="css-style"> Show manga titles and sources on hover</label><br>
</div>
</div>
</popup-content>
<border-bar>
<div class="button-container">
<border-bar-button onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>

59
Website/interaction.js
View File

@ -23,6 +23,8 @@ const createDownloadChapterTaskButton = document.querySelector("#createDownloadC
const startJobButton = document.querySelector("#startJobButton");
const cancelJobButton = document.querySelector("#cancelJobButton");
const deleteJobButton = document.querySelector("#deleteJobButton");
//Manga viewer popup
const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
const mangaViewerWindow = document.querySelector("publication-viewer");
const mangaViewerDescription = document.querySelector("#publicationViewerDescription");
@ -30,8 +32,8 @@ const mangaViewerName = document.querySelector("#publicationViewerName");
const mangaViewerTags = document.querySelector("#publicationViewerTags");
const mangaViewerAuthor = document.querySelector("#publicationViewerAuthor");
const mangaViewCover = document.querySelector("#pubviewcover");
const settingDownloadLocation = document.querySelector("#downloadLocation");
//Rate Limits
const manganatoRateLimit = document.querySelector('#manganatoRL');
const mangaseeRateLimit = document.querySelector('#mangaseeRL');
const mangadexRateLimit = document.querySelector('#mDexRL');
@ -40,22 +42,28 @@ const mangaworldRateLimit = document.querySelector('#mWorldRL');
const batoRateLimit = document.querySelector('#batoRL');
const mangalifeRateLimit = document.querySelector('#mLifeRL');
//Komga
const settingKomgaUrl = document.querySelector("#komgaUrl");
const settingKomgaUser = document.querySelector("#komgaUsername");
const settingKomgaPass = document.querySelector("#komgaPassword");
//Kavita
const settingKavitaUrl = document.querySelector("#kavitaUrl");
const settingKavitaUser = document.querySelector("#kavitaUsername");
const settingKavitaPass = document.querySelector("#kavitaPassword");
//Gotify
const settingGotifyUrl = document.querySelector("#gotifyUrl");
const settingGotifyAppToken = document.querySelector("#gotifyAppToken");
//Lunasea
const settingLunaseaWebhook = document.querySelector("#lunaseaWebhook");
//Ntfy
const settingNtfyEndpoint = document.querySelector("#ntfyEndpoint");
const settingNtfyAuth = document.querySelector("#ntfyAuth");
//Connector Configured
const settingKomgaConfigured = document.querySelector("#komgaConfigured");
const settingKavitaConfigured = document.querySelector("#kavitaConfigured");
const settingGotifyConfigured = document.querySelector("#gotifyConfigured");
@ -64,12 +72,14 @@ const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
const settingUserAgent = document.querySelector("#userAgent");
const settingApiUri = document.querySelector("#settingApiUri");
const settingMangaHoverCheckbox = document.querySelector("#mangaHoverCheckbox");
const settingCSSStyle = document.querySelector('#cssStyle');
const newMangaPopup = document.querySelector("#newMangaPopup");
const newMangaConnector = document.querySelector("#newMangaConnector");
const newMangaTitle = document.querySelector("#newMangaTitle");
const newMangaResult = document.querySelector("#newMangaResult");
const newMangaTranslatedLanguage = document.querySelector("#newMangaTranslatedLanguage");
//Jobs
const jobsRunningTag = document.querySelector("#jobsRunningTag");
const jobsQueuedTag = document.querySelector("#jobsQueuedTag");
const loaderdiv = document.querySelector('#loaderdiv');
@ -137,17 +147,20 @@ function Setup(){
UpdateJobs();
GetSettings().then((json) => {
//console.log(json);
settingDownloadLocation.innerText = json.downloadLocation;
settingApiUri.placeholder = apiUri;
//console.log(json.styleSheet);
if (json.styleSheet == 'hover') {
settingMangaHoverCheckbox.checked = true;
document.getElementById('librarystyle').setAttribute('href', 'styles/card_hover.css');
} else {
settingMangaHoverCheckbox.checked = false;
document.getElementById('librarystyle').setAttribute('href', 'styles/card_compact.css');
}
});
//If the cssStyle key isn't in the local storage of the browser, then set the css style to the default and load the page
//Otherwise get the style key from storage and set it.
if (!localStorage.getItem('cssStyle')) {
localStorage.setItem('cssStyle', 'card_compact');
document.getElementById('librarystyle').setAttribute('href', 'styles/' + localStorage.getItem('cssStyle') + '.css');
document.getElementById('card_compact').selected = true;
} else {
css_style = localStorage.getItem('cssStyle');
document.getElementById('librarystyle').setAttribute('href', 'styles/' + css_style + '.css');
document.getElementById(css_style).selected = true;
}
setInterval(() => {
UpdateJobs();
}, 1000);
@ -219,17 +232,10 @@ function ClearFilter() {
});
}
function updateCSS(){
if (document.getElementById("mangaHoverCheckbox").checked == true){
ChangeStyleSheet('hover')
document.getElementById('librarystyle').setAttribute('href', 'styles/card_hover.css');
//console.log('Changing theme to mangahover')
} else {
ChangeStyleSheet('default');
document.getElementById('librarystyle').setAttribute('href', 'styles/card_compact.css');
//console.log('Changing theme to default')
}
}
settingCSSStyle.addEventListener("change", (event) => {
localStorage.setItem('cssStyle', settingCSSStyle.value);
document.getElementById('librarystyle').setAttribute('href', 'styles/' + localStorage.getItem('cssStyle') + '.css');
});
function ResetContent(){
//Delete everything
@ -582,21 +588,12 @@ function OpenSettings(){
settingNtfyEndpoint.value = "";
settingUserAgent.value = "";
settingApiUri.value = "";
settingMangaHoverCheckbox.checked = false;
GetSettings().then((json) => {
//console.log(json);
settingDownloadLocation.innerText = json.downloadLocation;
settingApiUri.placeholder = apiUri;
settingUserAgent.placeholder = json.userAgent;
//console.log(json.styleSheet);
if (json.styleSheet == 'hover') {
settingMangaHoverCheckbox.checked = true;
document.getElementById('librarystyle').setAttribute('href', 'styles/card_hover.css');
} else {
settingMangaHoverCheckbox.checked = false;
document.getElementById('librarystyle').setAttribute('href', 'styles/card_compact.css');
}
});
GetLibraryConnectors().then((json) => {
//console.log(json);

42
Website/styles/base.css
View File

@ -92,7 +92,7 @@ filter-box {
width: 50%;
overflow: hidden;
max-height: 50%;
height: 400px;
height: 600px;
}
filter-box.animate {
@ -390,6 +390,22 @@ border-bar-button.primary:hover {
border-color: var(--accent-color);
}
border-bar-button.section {
font-weight: bold;
color: darkgray;
border-color: darkgray;
text-align: center;
padding: 5px;
flex-grow: 1;
justify-content: center;
}
border-bar-button.section:hover {
color: var(--secondary-color);
border-color: var(--secondary-color);
}
popup popup-window {
position: absolute;
z-index: 3;
@ -449,7 +465,7 @@ popup-content > .popup-section {
padding: 5px;
}
.section-item.manga {
.section-item.dyn-height {
height: fit-content;
}
@ -538,7 +554,7 @@ a:active {
.section-item > input {
margin: 2px;
padding: 2px;
padding: 5px;
height: 20px;
border-radius: 10px;
border-style: solid;
@ -554,12 +570,13 @@ a:active {
flex-direction: row;
align-items: center;
margin-left: 5px;
margin-bottom: 5px;
}
.section-item > row > input {
margin-left: auto;
margin-right: 2px;
padding: 2px;
padding: 5px;
height: 20px;
border-radius: 10px;
border-style: solid;
@ -573,6 +590,23 @@ a:active {
border-color: var(--secondary-color);
}
.section-item > row > select {
margin-left: auto;
margin-right: 2px;
padding: 2px;
height: 30px;
border-radius: 10px;
border-style: solid;
outline: none;
flex-grow: 0;
text-align: end;
float: right;
width: 200px;
}
.section-item > row > select:focus {
border-color: var(--secondary-color);
}
.section-buttons-container {
display: flex;