From c7e49fb6bce18f22a482b8c8fb5d01178c39cab2 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Fri, 9 Feb 2024 11:17:33 -0500 Subject: [PATCH] Added in remaining Tranga settings functionality Changed CSS style to be stored in local storage since we might want it to be browser specific (mobile vs desktop vs tablet) --- Website/apiConnector.js | 10 +++---- Website/index.html | 52 +++++++++++++++++++----------------- Website/interaction.js | 59 +++++++++++++++++++---------------------- Website/styles/base.css | 42 ++++++++++++++++++++++++++--- 4 files changed, 98 insertions(+), 65 deletions(-) diff --git a/Website/apiConnector.js b/Website/apiConnector.js index 5b298a8..955ecf0 100644 --- a/Website/apiConnector.js +++ b/Website/apiConnector.js @@ -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}`; diff --git a/Website/index.html b/Website/index.html index e0f1799..6ae6c04 100644 --- a/Website/index.html +++ b/Website/index.html @@ -91,36 +91,54 @@
TRANGA +
+
+ API Settings + + + + Refresh Library Metadata + Download Logs + +
+
+ Appearance + +
+
MANGA SOURCES
-
+
MangaNato
-
+
MangaSee
-
+
MangaDex
-
+
MangaKatana
-
+
MangaWorld
-
+
Bato
-
+
MangaLife
@@ -189,25 +207,9 @@
-
- -
-

Download Location:

- -
-
-

API-URI

- -
-
- UserAgent
- -
-
- -
-
+
+
Refresh Library Metadata diff --git a/Website/interaction.js b/Website/interaction.js index a131a5e..4d71952 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -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); diff --git a/Website/styles/base.css b/Website/styles/base.css index 4c07906..96f4564 100644 --- a/Website/styles/base.css +++ b/Website/styles/base.css @@ -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;