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

@@ -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}`;

Website/index.html

@@ -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> 
-
-            <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>
           </popup-content>
+
           <border-bar>
             <div class="button-container">
               <border-bar-button onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>

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(){
+settingCSSStyle.addEventListener("change", (event) => {
-  if (document.getElementById("mangaHoverCheckbox").checked == true){
+  localStorage.setItem('cssStyle', settingCSSStyle.value);
-    ChangeStyleSheet('hover')
+  document.getElementById('librarystyle').setAttribute('href', 'styles/' + localStorage.getItem('cssStyle') + '.css');
-    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')
-  }
-}
 
 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);

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;