Added manga sources to settings

Added the manga sources to the settings page and added a field to set the rate limit, POST api for setting the rate limit awaiting GET api calls to set initial value.

Website/apiConnector.js

@@ -259,6 +259,11 @@ function UpdateUserAgent(userAgent){
     PostData(uri);
 }
 
+function UpdateRateLimit(connector, byteValue, rateLimit) {
+    var uri = `${apiUri}/Settings/customRequestLimit?requestType=${byteValue}&requestsPerMinute=${rateLimit}&connector=${connector}`;
+    PostData(uri);
+}
+
 function RemoveJob(jobId){
     var uri = `${apiUri}/Jobs?jobId=${jobId}`;
     DeleteData(uri);

Website/index.html

@@ -25,7 +25,7 @@
         <popup-title>Filter by: </popup-title>
         <popup-close onclick="filterBox.classList.toggle('animate')" >&times</popup-close>
       </border-bar>
-      <popup-content>
+      <popup-content id="filterContent">
         <div class="popup-section">
           NAME:
           <div class="section-content">
@@ -95,6 +95,37 @@
 
             <div class="popup-section">
               MANGA SOURCES
+              <div class="section-content">
+                <div class="section-item manga">
+                  <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">
+                  <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">
+                  <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">
+                  <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">
+                  <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">
+                  <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">
+                  <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>
+              </div>
+              
             </div>
 
             <div class="popup-section">

Website/interaction.js

@@ -31,22 +31,37 @@ const mangaViewerTags = document.querySelector("#publicationViewerTags");
 const mangaViewerAuthor = document.querySelector("#publicationViewerAuthor");
 const mangaViewCover = document.querySelector("#pubviewcover");
 const settingDownloadLocation = document.querySelector("#downloadLocation");
+
+const manganatoRateLimit = document.querySelector('#manganatoRL');
+const mangaseeRateLimit = document.querySelector('#mangaseeRL');
+const mangadexRateLimit = document.querySelector('#mDexRL');
+const mangakatanaRateLimit = document.querySelector('#mKatanaRL');
+const mangaworldRateLimit = document.querySelector('#mWorldRL');
+const batoRateLimit = document.querySelector('#batoRL');
+const mangalifeRateLimit = document.querySelector('#mLifeRL');
+
 const settingKomgaUrl = document.querySelector("#komgaUrl");
 const settingKomgaUser = document.querySelector("#komgaUsername");
 const settingKomgaPass = document.querySelector("#komgaPassword");
+
 const settingKavitaUrl = document.querySelector("#kavitaUrl");
 const settingKavitaUser = document.querySelector("#kavitaUsername");
 const settingKavitaPass = document.querySelector("#kavitaPassword");
+
 const settingGotifyUrl = document.querySelector("#gotifyUrl");
 const settingGotifyAppToken = document.querySelector("#gotifyAppToken");
+
 const settingLunaseaWebhook = document.querySelector("#lunaseaWebhook");
+
 const settingNtfyEndpoint = document.querySelector("#ntfyEndpoint");
 const settingNtfyAuth = document.querySelector("#ntfyAuth");
+
 const settingKomgaConfigured = document.querySelector("#komgaConfigured");
 const settingKavitaConfigured = document.querySelector("#kavitaConfigured");
 const settingGotifyConfigured = document.querySelector("#gotifyConfigured");
 const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured");
 const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
+
 const settingUserAgent = document.querySelector("#userAgent");
 const settingApiUri = document.querySelector("#settingApiUri");
 const settingMangaHoverCheckbox = document.querySelector("#mangaHoverCheckbox");
@@ -144,28 +159,36 @@ function Setup(){
 }
 Setup();
 
-function ToggleFilterConnector(connector) {
+function ToggleFilterConnector(connector, event) {
   //console.log("Initial Array:");
   //console.log(connectorMatch);
   if (connectorMatch.includes(connector)) {
     idx = connectorMatch.indexOf(connector);
     connectorMatch.splice(idx, 1);
+    event.target.style.outline = 'none';
+    event.target.style.outlineOffset = "0px";
   } else {
     connectorMatch.push(connector);
+    event.target.style.outline = '4px solid var(--secondary-color)';
+    event.target.style.outlineOffset = '3px';
   }
   //console.log("Final Array");
   //console.log(connectorMatch);
   FilterResults();
 }
 
-function ToggleFilterStatus(status) {
+function ToggleFilterStatus(status, event) {
   //console.log("Initial Array:");
   //console.log(statusMatch);
   if (statusMatch.includes(status)) {
     idx = statusMatch.indexOf(status);
     statusMatch.splice(idx, 1);
+    event.target.style.outline = 'none';
+    event.target.style.outlineOffset = "0px";
   } else {
     statusMatch.push(status);
+    event.target.style.outline = '4px solid var(--secondary-color)';
+    event.target.style.outlineOffset = '3px';
   }
   //console.log("Final Array");
   //console.log(statusMatch);
@@ -177,6 +200,23 @@ function ClearFilter() {
   statusMatch.length = 0;
   connectorMatch.length = 0;
   FilterResults();
+
+  //Get rid of the outlines
+  connectorFilterBox = document.querySelector("#connectorFilterBox");
+  connectorFilterBox.childNodes.forEach(connector => {
+    if (connector.nodeName.toLowerCase() == 'connector-name') {
+      connector.style.outline = 'none';
+      connector.style.outlineOffset = "0px";
+    }
+  });
+
+  statusFilterBox = document.querySelector("#statusFilterBox");
+  statusFilterBox.childNodes.forEach(publicationStatus => {
+    if (publicationStatus.nodeName.toLowerCase() == 'status-filter') {
+      publicationStatus.style.outline = 'none';
+      publicationStatus.style.outlineOffset = "0px";
+    }
+  });
 }
 
 function updateCSS(){
@@ -224,7 +264,11 @@ function ShowNewMangaSearch(){
   newMangaResult.replaceChildren();
 }
 
-newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();})
+newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();});
+
+
+
+
 function GetNewMangaItems(){
   if(newMangaTitle.value.length < 4)
     return;
@@ -451,7 +495,7 @@ filterFunnel.addEventListener("click", () => {
   filterBox.classList.toggle("animate");
 });
 
-settingKomgaUrl.addEventListener("keypress", (event) => { { if(event.key === "Enter") UpdateSettings(); } });
+settingKomgaUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingKomgaUser.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingKomgaPass.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingKavitaUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
@@ -465,6 +509,60 @@ settingNtfyAuth.addEventListener("keypress", (event) => { if(event.key === "Ente
 settingUserAgent.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingApiUri.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 
+manganatoRateLimit.addEventListener("keypress", (event) => { if(event.key === "Enter") NewRateLimit(event);}); 
+mangaseeRateLimit.addEventListener("keypress", (event) => { if(event.key === "Enter") NewRateLimit(event);}); 
+mangadexRateLimit.addEventListener("keypress", (event) => { if(event.key === "Enter") NewRateLimit(event);}); 
+mangakatanaRateLimit.addEventListener("keypress", (event) => { if(event.key === "Enter") NewRateLimit(event);}); 
+mangaworldRateLimit.addEventListener("keypress", (event) => { if(event.key === "Enter") NewRateLimit(event);}); 
+batoRateLimit.addEventListener("keypress", (event) => { if(event.key === "Enter") NewRateLimit(event);}); 
+mangalifeRateLimit.addEventListener("keypress", (event) => { if(event.key === "Enter") NewRateLimit(event);}); 
+
+function NewRateLimit(event) {
+  if (event.target.value.length > 0 && event.target.value != 0) {
+    console.log(event.target.id);
+    switch (event.target.id) {
+      case "manganatoRL":
+        connector = 'Manganato';
+        byteValue = 1;
+        UpdateRateLimit(connector, byteValue, event.target.value);
+        break;
+      case "mangaseeRL":
+        connector = 'Mangasee';
+        byteValue = 1;
+        UpdateRateLimit(connector, byteValue, event.target.value);
+        break;
+      case "mDexRL":
+        connector = 'MangaDex'
+        byteValue = 250;
+        UpdateRateLimit(connector, byteValue, event.target.value);
+        break;
+      case "mKatanaRL":
+        connector = 'MangaKatana';
+        byteValue = 1;
+        UpdateRateLimit(connector, byteValue, event.target.value);
+        break;
+      case "mWorldRL":
+        connector = 'Mangaworld';
+        byteValue = 1;
+        UpdateRateLimit(connector, byteValue, event.target.value);
+        break;
+      case "batoRL":
+        connector =  'Bato';
+        byteValue = 1;
+        UpdateRateLimit(connector, byteValue, event.target.value);
+        break;
+      case "mLifeRL":
+        connector = 'Manga4Life';
+        byteValue = 1;
+        UpdateRateLimit(connector, byteValue, event.target.value);
+        break;
+      default: 
+        console.log("Unknown connector:");
+        console.log(event.target.id);
+    }
+  }
+}
+
 function OpenSettings(){
   settingGotifyConfigured.setAttribute("configuration", "Not Configured");
   settingLunaseaConfigured.setAttribute("configuration", "Not Configured");

Website/styles/base.css

@@ -1,6 +1,6 @@
 :root{
     --background-color: #030304;
-    --second-background-color: #fff;
+    --second-background-color: white;
     --primary-color: #f5a9b8;
     --secondary-color:  #5bcefa;
     --blur-background: rgba(245, 169, 184, 0.58);
@@ -320,12 +320,13 @@ popup-title {
     display: flex;
     margin-top: 3px;
     margin-left: 5px;
+    color: var(--second-background-color);
 }
 
 popup-close {
     border: none;
     background-color: inherit;
-    color: inherit;
+    color: var(--second-background-color);;
     font-weight: inherit;
     font-size: 27px;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
@@ -382,6 +383,7 @@ border-bar-button.primary {
     background-color: var(--secondary-color);
     color: var(--accent-color);
     border-color: var(--primary-color);
+    margin-right: 10px;
 }
 
 border-bar-button.primary:hover {
@@ -447,6 +449,10 @@ popup-content > .popup-section {
     padding: 5px;
 }
 
+.section-item.manga {
+    height: fit-content;
+}
+
 .section-item > .title {
     font-weight: bold;
     vertical-align: bottom;
@@ -455,6 +461,25 @@ popup-content > .popup-section {
     width: 100%;
 }
 
+a:link {
+    color: inherit;
+    text-decoration: none;
+}
+
+a:visited {
+    color: inherit;
+    text-decoration: none;
+}
+
+a:hover {
+    color: inherit;
+    text-decoration: underline solid var(--secondary-color) 3px;
+}
+
+a:active {
+    color: inherit;
+    text-decoration: none;
+}
 
 .section-item > .title > img {
     width: auto;
@@ -523,6 +548,32 @@ popup-content > .popup-section {
     border-color: var(--secondary-color);
 }
 
+.section-item > row {
+    width: calc(100%-20px);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 5px;
+}
+
+.section-item > row > input {
+    margin-left: auto;
+    margin-right: 2px; 
+    padding: 2px;
+    height: 20px;
+    border-radius: 10px;
+    border-style: solid;
+    outline: none;
+    flex-grow: 0;
+    text-align: end;
+    float: right;
+    width: 200px;
+}
+.section-item > row > input:focus {
+    border-color: var(--secondary-color);
+}
+
+
 .section-buttons-container {
     display: flex;
     flex-direction: row;