Update apiRequestFunctions to new API endpoints

.github/workflows/docker-image-cuttingedge.yml

@@ -3,8 +3,6 @@ name: Docker Image CI
 on:
   push:
     branches: [ "cuttingedge" ]
-  pull_request:
-    branches: [ "cuttingedge" ] 
   workflow_dispatch:
 
 jobs:
@@ -19,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.6.0
+        uses: docker/setup-qemu-action@v2.2.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.11.0
+        uses: docker/setup-buildx-action@v3.3.0
 
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -35,12 +33,12 @@ jobs:
 
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v6.18.0
+        uses: docker/build-push-action@v4.1.1
         with:
-          context: .
+          context: ./Website
           file: ./Dockerfile
           #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64
           pull: true
           push: true
           tags: |

.github/workflows/docker-image-dev.yml

@@ -2,7 +2,7 @@ name: Docker Image CI
 
 on:
   push:
-    branches: [ "vite-react-ts" ]
+    branches: [ "cuttingedge" ]
   workflow_dispatch:
 
 jobs:
@@ -17,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.6.0
+        uses: docker/setup-qemu-action@v2.2.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.11.0
+        uses: docker/setup-buildx-action@v3.3.0
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -33,13 +33,11 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v6.18.0
+        uses: docker/build-push-action@v4.1.1
         with:
-          context: .
+          context: ./Website
           file: ./Dockerfile
-          #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
+          #platforms: linux/amd63,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
           platforms: linux/amd64
           pull: true
           push: true
-          tags: |
-            glax/tranga-website:Server-V2

.github/workflows/docker-image-master.yml

@@ -3,6 +3,8 @@ name: Docker Image CI
 on:
   push:
     branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
   workflow_dispatch:
 
 jobs:
@@ -17,12 +19,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.6.0
+        uses: docker/setup-qemu-action@v2.2.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.11.0
+        uses: docker/setup-buildx-action@v3.1.0
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -33,12 +35,12 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v6.18.0
+        uses: docker/build-push-action@v4.1.1
         with:
           context: ./
           file: ./Dockerfile
           #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64
           pull: true
           push: true
           tags: |

README.md

@@ -1,6 +1,11 @@
-# Testers for V2 wanted!
-
-[Details](https://github.com/C9Glax/tranga/pull/355#issuecomment-2764217944)
+<!-- PROJECT SHIELDS -->
+<!--
+*** I'm using markdown "reference style" links for readability.
+*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
+*** See the bottom of this document for the declaration of the reference variables
+*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
+*** https://www.markdownguide.org/basic-syntax/#reference-style-links
+-->
 
 <!-- PROJECT LOGO -->
 <br />

Website/apiConnector.js

@@ -1,7 +1,11 @@
-if(getCookie("apiUri") != ""){
-    apiUri = getCookie("apiUri");
-}
-setCookie("apiUri", apiUri);
+//let apiUri = `${window.location.protocol}//${window.location.host}/api`
+
+let apiUri = `http://192.168.1.79:6531`;
+
+// if(getCookie("apiUri") != ""){
+//     apiUri = getCookie("apiUri");
+// }
+// setCookie("apiUri", apiUri);
 
 function setCookie(cname, cvalue) {
   const d = new Date();
@@ -37,9 +41,13 @@ async function GetData(uri){
     return json;
 }
 
-async function PostData(uri){
+async function PostData(uri, body){
     let request = await fetch(uri, {
-        method: 'POST'
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json'
+        },
+        body: body
     });
     //console.log(request);
 }
@@ -51,130 +59,132 @@ function DeleteData(uri){
 }
 
 async function Ping(){
-  let ret = await GetData(`${apiUri}/Ping`);
+  let ret = await GetData(`${apiUri}/v2/Ping`);
   return ret;
 }
 
 async function GetAvailableControllers(){
-    var uri = apiUri + "/Connectors";
+    var uri = `${apiUri}/v2/Connector/Types`;
     let json = await GetData(uri);
     return json;
 }
 
 async function GetPublicationFromConnector(connector, title){
-  var uri;
-  if(title.includes("http")){
-    uri = `${apiUri}/Manga/FromConnector?connector=${connector}&url=${title}`;
+  var uri = `${apiUri}/v2/Connector/${connector}/GetManga`;
+  if(title.startsWith("http")){
+    uri += `?url=${title}`
   }else{
-    uri = `${apiUri}/Manga/FromConnector?connector=${connector}&title=${title}`;
+    uri += `?title=${title}`
   }
   let json = await GetData(uri);
   return json;
 }
 
-async function GetChapters(connector, internalId, language){
-    var uri = `${apiUri}/Manga/Chapters?connector=${connector}&internalId=${internalId}&translatedLanguage=${language}`;
-    let json = await GetData(uri);
-    return json;
-}
-
-function GetCoverUrl(internalId){
-  return `${apiUri}/Manga/Cover?internalId=${internalId}`;
+async function GetCoverUrl(internalId){
+    return `${apiUri}/v2/Manga/${internalId}/Cover`;
 }
 
 async function GetAllJobs(){
-	var uri = `${apiUri}/Jobs`;
+	var uri = `${apiUri}/v2/Jobs`;
 	let json = await GetData(uri);
 	return json;
 }
 
 async function GetRunningJobs(){
-    var uri = `${apiUri}/Jobs/Running`;
+    var uri = `${apiUri}/v2/Jobs/Running`;
     let json = await GetData(uri);
     return json;
 }
 
 async function GetWaitingJobs(){
-    var uri = `${apiUri}/Jobs/Waiting`;
+    var uri = `${apiUri}/v2/Jobs/Waiting`;
     let json = await GetData(uri);
     return json;
 }
 
 async function GetMonitorJobs(){
-  var uri = `${apiUri}/Jobs/MonitorJobs`;
+  var uri = `${apiUri}/v2/Jobs/Monitoring`;
   let json = await GetData(uri);
   return json;
 }
 
-async function GetProgress(jobId){
-    var uri = `${apiUri}/Jobs/Progress?jobId=${jobId}`;
+async function GetJob(jobId){
+    var uri = `${apiUri}/v2/Job/${jobId}`;
     let json = await GetData(uri);
     return json;
 }
 
 async function GetSettings(){
-    var uri = `${apiUri}/Settings`;
+    var uri = `${apiUri}/v2/Settings`;
     let json = await GetData(uri);
     return json;
 }
 
 async function GetAvailableNotificationConnectors(){
-	var uri = `${apiUri}/NotificationConnectors/Types`;
+	var uri = `${apiUri}/v2/NotificationConnector/Types`;
 	let json = await GetData(uri);
 	return json;
 }
 
 async function GetNotificationConnectors(){
-	var uri = `${apiUri}/NotificationConnectors`;
+	var uri = `${apiUri}/v2/NotificationConnector`;
 	let json = await GetData(uri);
 	return json;
 }
 
 async function GetAvailableLibraryConnectors(){
-	var uri = `${apiUri}/LibraryConnectors/Types`;
+	var uri = `${apiUri}/v2/LibraryConnector/Types`;
 	let json = await GetData(uri);
 	return json;
 }
 
 async function GetLibraryConnectors(){
-	var uri = `${apiUri}/LibraryConnectors`;
+	var uri = `${apiUri}/v2/LibraryConnector`;
 	let json = await GetData(uri);
 	return json;
 }
 
 async function GetRateLimits() {
-    var uri = `${apiUri}/Settings/customRequestLimit`
+    var uri = `${apiUri}/v2/Settings/RateLimit`
     let json = await GetData(uri);
     return json;
 }
 
-function CreateMonitorJob(connector, internalId, language){
-    var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=03:00:00&translatedLanguage=${language}`;
-    PostData(uri);
+async function GetMangaChapters(connector, internalId) {
+    var uri = `${apiUri}/v2/Manga/${internalId}`
+    let json = await GetData(uri);
+    return json;
 }
 
-function CreateDownloadNewChaptersJob(connector, internalId, language){
-    var uri = `${apiUri}/Jobs/DownloadNewChapters?connector=${connector}&internalId=${internalId}&translatedLanguage=${language}`;
-    PostData(uri);
+function CreateMonitorJob(internalId, language, interval, folder = null, chapterNo){
+    var uri = `${apiUri}/v2/Job/Create/MonitorManga`;
+    let data = `{ "internalId": ${internalId}, "language": ${language}, "interval": ${interval}, "startChapter": ${chapterNo}, "customFolder": ${folder} }`
+    PostData(uri, data);
+}
+
+function CreateDownloadNewChaptersJob(internalId, language){
+    var uri = `${apiUri}/v2/Job/Create/DownloadNewChaptersJob`;
+    let data = `{ "internalId": ${internalId}, "language": ${language} }`
+    PostData(uri, data);
 }
 
 function StartJob(jobId){
-    var uri = `${apiUri}/Jobs/StartNow?jobId=${jobId}`;
+    var uri = `${apiUri}/v2/Job/${jobId}/StartNow`;
     PostData(uri);
 }
 
 function UpdateDownloadLocation(downloadLocation){
-    var uri = `${apiUri}/Settings/UpdateDownloadLocation?downloadLocation=${downloadLocation}`;
-    PostData(uri);	
+    var uri = `${apiUri}/v2/Settings/DownloadLocation`;
+    PostData(uri, `{ "location": ${location} }`);	
 }
 
-function RefreshLibraryMetadata() {
-    var uri = `${apiUri}/Jobs/UpdateMetadata`;
-    PostData(uri);
+function RefreshMangaMetadata(internalId) {
+    var uri = `${apiUri}/v2/Job/Create/UpdateMetaDataJob`;
+    PostData(uri, `{ "internalId": ${internalId} }`);
 }
 
 async function DownloadLogs() {
-    var uri = `${apiUri}/LogFile`;
+    var uri = `${apiUri}/v2/LogFile`;
 
     //Below taken from https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream
     fetch(uri)
@@ -235,110 +245,121 @@ Date.prototype.timeNow = function () {
      return ((this.getHours() < 10)?"0":"") + this.getHours() +"_"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +"_"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds();
 }
 
+function UpdateAprilFoolsMode() { 
+	checkBox = document.getElementById("aprilFoolsMode");
+	var uri = `${apiUri}/v2/Settings/AprilFoolsMode`;
+	PostData(uri, `{ "value": ${checkBox.checked} }` );
+}
+
+function ResetRateLimits() {
+	var uri = `${apiUri}/v2/Settings/RateLimit`;
+	PostData(uri);
+	OpenSettings();
+}
+
+function ResetUserAgent() {
+	var uri = `${apiUri}/v2/Settings/UserAgent`;
+	PostData(uri);
+	OpenSettings();
+}
+
 //Komga
 function UpdateKomga(komgaUrl, komgaAuth){
-    var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/LibraryConnector/Komga`;
+    PostData(uri, `{ "url": ${komgaUrl}, "auth": ${komgaAuth} }`);
 }
 
 function ResetKomga(){
-    var uri = `${apiUri}/LibraryConnectors/Reset?libraryConnector=Komga`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/LibraryConnector/Komga`;
+    DeleteData(uri);
 }
 
 function TestKomga(komgaUrl, komgaAuth){
-    var uri = `${apiUri}/LibraryConnectors/Test?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/LibraryConnector/Komga/Test`;
+    PostData(uri, `{ "url": ${komgaUrl}, "auth": ${komgaAuth} }`);
 }
 
 
 //Kavita
 function UpdateKavita(kavitaUrl, kavitaUsername, kavitaPassword){
-    var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/LibraryConnector/Kavita`;
+    PostData(uri, `{ "url": ${kavitaUrl}, "uasername": ${kavitaUsername}, "password": ${kavitaPassword} }`);
 }
 
 function ResetKavita(){
-    var uri = `${apiUri}/LibraryConnectors/Reset?libraryConnector=Kavita`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/LibraryConnector/Kavita`;
+    DeleteData(uri);
 }
 
 function TestKavita(kavitaUrl, kavitaUsername, kavitaPassword){
-    var uri = `${apiUri}/LibraryConnectors/Test?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/LibraryConnector/Kavita/Test`;
+    PostData(uri, `{ "url": ${kavitaUrl}, "uasername": ${kavitaUsername}, "password": ${kavitaPassword} }`);
 }
 
 //Gotify
 function UpdateGotify(gotifyUrl, gotifyAppToken){
-    var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=Gotify&gotifyUrl=${gotifyUrl}&gotifyAppToken=${gotifyAppToken}`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/NotificationConnector/Gotify`;
+    PostData(uri, `{ "url": ${gotifyUrl}, "appToken": ${gotifyAppToken} }`);
 }
 
 function ResetGotify(){
-    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=Gotify`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/NotificationConnector/Gotify`;
+    DeleteData(uri);
 }
 
 function TestGotify(gotifyUrl, gotifyAppToken){
-    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=Gotify&gotifyUrl=${gotifyUrl}&gotifyAppToken=${gotifyAppToken}`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/NotificationConnector/Gotify/Test`;
+    PostData(uri, `{ "url": ${gotifyUrl}, "appToken": ${gotifyAppToken} }`);
 }
 
 //LunaSea
 function UpdateLunaSea(lunaseaWebhook){
-    var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=LunaSea&lunaseaWebhook=${lunaseaWebhook}`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/NotificationConnector/LunaSea`;
+    PostData(uri, `{ "webhook": ${lunaseaWebhook} }`);
 }
 
 function ResetLunaSea(){
-    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=LunaSea`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/NotificationConnector/LunaSea`;
+    DeleteData(uri);
 }
 
 function TestLunaSea(lunaseaWebhook){
-    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=LunaSea&lunaseaWebhook=${lunaseaWebhook}`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/NotificationConnector/LunaSea/Test`;
+    PostData(uri, `{ "webhook": ${lunaseaWebhook} }`);
 }
 
 //Ntfy
-function UpdateNtfy(ntfyEndpoint, ntfyAuth){
-    var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=Ntfy&ntfyUrl=${ntfyEndpoint}&ntfyAuth=${ntfyAuth}`;
-    PostData(uri);
+function UpdateNtfy(ntfyEndpoint, ntfyUser, ntfyPass){
+    var uri = `${apiUri}/v2/NotificationConnector/Ntfy`;
+    PostData(uri, `{ "url": ${ntfyEndpoint}, "username": ${ntfyUser}, "password": ${ntfyPass} }`);
 }
 
 function ResetNtfy(){
-    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=Ntfy`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/NotificationConnector/Ntfy`;
+    DeleteData(uri);
 }
 
-function TestNtfy(ntfyEndpoint, ntfyAuth){
-    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=Ntfy&ntfyUrl=${ntfyEndpoint}&ntfyAuth=${ntfyAuth}`;
-    PostData(uri);
+function TestNtfy(ntfyEndpoint, ntfyUser, ntfyPass){
+    var uri = `${apiUri}/v2/NotificationConnector/Ntfy/Test`;
+    PostData(uri, `{ "url": ${ntfyEndpoint}, "username": ${ntfyUser}, "password": ${ntfyPass} }`);
 }
 
 function UpdateUserAgent(userAgent){
-    var uri = `${apiUri}/Settings/userAgent?userAgent=${userAgent}`;
-    PostData(uri);
+    var uri = `${apiUri}/v2/Settings/UserAgent`;
+    PostData(uri, `{ "value": ${userAgent} }`);
 }
 
-function UpdateRateLimit(byteValue, rateLimit) {
-    var uri = `${apiUri}/Settings/customRequestLimit?requestType=${byteValue}&requestsPerMinute=${rateLimit}`;
-    PostData(uri);
+function UpdateRateLimit(rateLimitType, rateLimitValue) {
+    var uri = `${apiUri}/v2/Settings/RateLimit/${rateLimitType}`;
+    PostData(uri, `{ "value": ${rateLimitValue} }`);
 }
 
 function RemoveJob(jobId){
-    var uri = `${apiUri}/Jobs?jobId=${jobId}`;
+    var uri = `${apiUri}/v2/Job/${jobId}`;
     DeleteData(uri);
 }
 
 function CancelJob(jobId){
-    var uri = `${apiUri}/Jobs/Cancel?jobId=${jobId}`;
+    var uri = `${apiUri}/v2/Job/${jobId}/Cancel`;
     PostData(uri);
 }
-
-async function GetLogmessages(count){
-	var uri = `${apiUri}/LogMessages?count=${count}`;
-	let json = await GetData(uri);
-    console.log(json);
-	return json;
-}

Website/defaultApiUri.js

@@ -1 +0,0 @@
-let apiUri = `${window.location.protocol}//${window.location.host.split(':')[0]}:6531`

Website/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -6,6 +6,10 @@
   <link id='basestyle' rel="stylesheet" href="styles/base.css">
   <link id='librarystyle' rel="stylesheet" href="styles/style_default.css">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..900&display=swap" rel="stylesheet">
 </head>
 <body>
   <wrapper>
@@ -23,7 +27,7 @@
     <filter-box id="filterBox">
       <border-bar>
         <popup-title>Filter by: </popup-title>
-        <popup-close onclick="filterBox.classList.toggle('animate')" >&times</popup-close>
+        <popup-close onclick="filterBox.style.display = 'none';" >&times</popup-close>
       </border-bar>
       <popup-content id="filterContent">
         <div class="popup-section">
@@ -68,16 +72,27 @@
       
       <popup id="newMangaPopup">
         <blur-background id="blurBackgroundNewMangaPopup" onclick="newMangaPopup.style.display = 'none';"></blur-background>
+        <popup-window>
+          <border-bar>
+            <popup-title>Search</popup-title>
+            <popup-close onclick="newMangaPopup.style.display = 'none'">&times</popup-close>
+          </border-bar>
+          <popup-content>
+            <div id="loaderdiv">
+              <div id="loader"></div>
+            </div>
             <div id="newMangaPopupSelector">
-          <select id="newMangaConnector" />
+              <select id="newMangaConnector">
               <input type="text" placeholder="Title" id="newMangaTitle" />
               <select id="newMangaTranslatedLanguage">
-            <option selected="selected">en</option>
-            <option>it</option>
-            <option>de</option>
+                <option selected="selected">EN</option>
+                <option>IT</option>
+                <option>DE</option>
               </select>
             </div>
             <div id="newMangaResult"></div>
+          </popup-content>
+        </popup-window>
       </popup>
       
       <popup id="settingsPopup">
@@ -97,7 +112,14 @@
                   <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>
+                    <label for="aprilFoolsMode">Skip Chapters on April 1st:</label>
+                    <label class="switch-toggle">
+                      <input type="checkbox" onclick="UpdateAprilFoolsMode()" id="aprilFoolsMode">
+                      <span class="slider"></span>
+                    </label>
+                  </row>
+                  <row>
+                    <border-bar-button class="section" onclick="ResetUserAgent()">Reset User Agent</border-bar-button>
                     <border-bar-button class="section" onclick="DownloadLogs()">Download Logs</border-bar-button>
                   </row>
                 </div>
@@ -107,13 +129,19 @@
                   <row><label for="CoverRL">Manga Covers:</label><input id="coverRL" type="text"></row>
                   <row><label for="ImageRL">Manga Images:</label><input id="imageRL" type="text"></row>
                   <row><label for="InfoRL">Manga Info:</label><input id="infoRL" type="text"></row>
+                  <row>
+                    <border-bar-button class="section" onclick="ResetRateLimits()">Reset All Rate Limits</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">
+                  <span class="title">Library</span>
+                  <row><label for="cssStyle">Appearance 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>
+                  <row> 
+                    <border-bar-button class="section" onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
+                  </row>
                 </div>
               </div>
             </div>
@@ -207,11 +235,12 @@
                   <div class="section-item">
                     <span class="title"><img src='connector-icons/ntfy.svg'>Ntfy<connector-configured id="ntfyConfigured"></connector-configured></span>
                     <label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
-                    <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
+                    <label for="ntfyUser"></label><input placeholder="Username" id="ntfyUser" type="text">
+                    <label for="ntfyPass"></label><input placeholder="Password" id="ntfyPass" type="password">
                     <div class="section-buttons-container">
-                      <span onclick="TestNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button' id="test-connector">Test</span>
+                      <span onclick="TestNtfy(ntfyEndpoint.value, ntfyUser.value, ntfyPass.value);" class='section-button' id="test-connector">Test</span>
                       <span onclick="ClearNtfy()" class='section-button' id="reset">Reset</span>
-                      <span onclick="UpdateNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button'>Apply</span>
+                      <span onclick="UpdateNtfy(ntfyEndpoint.value, ntfyUser.value, ntfyPass.value);" class='section-button'>Apply</span>
                   </div>
                   </div>
                 </div>
@@ -229,24 +258,32 @@
 		
 	  <popup id="publicationViewerPopup">
         <blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
-        <publication-viewer>
-          <img id="pubviewcover" src="media/cover.jpg" alt="cover">
-          <publication-details>
-            <publication-name id="publicationViewerName">Best Manga there is</publication-name>
-            <publication-tags id="publicationViewerTags">A Manga</publication-tags>
-            <publication-author id="publicationViewerAuthor">Glax</publication-author>
-            <publication-description id="publicationViewerDescription">
-              An interesting description. The description is very intriguing, yet wholesome.
-            </publication-description>
-            <publication-interactions>
-              <publication-starttask id="startJobButton">Start Job ▶️</publication-starttask>
-              <publication-canceltask id="cancelJobButton">Cancel Job ❌</publication-canceltask>
-              <publication-delete id="deleteJobButton">Delete Job 🗑️</publication-delete>
-              <publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
-              <publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
-            </publication-interactions>
-          </publication-details>
-        </publication-viewer>
+        <popup-window>
+          <border-bar>
+            <popup-title><a class="mangaTitle" id="publicationViewerName"></a></popup-title><status-filter id="publicationViewerStatus"></status-filter>
+            <popup-close onclick="publicationViewerPopup.style.display = 'none'">&times</popup-close>
+          </border-bar>
+          <manga-details>
+
+            <img-container>
+              <img id="pubviewcover">
+              <manga-connector id="publicationViewerConnector"></manga-connector>
+              <span class="latest-chapter-no" id="publicationViewerChapterNo"></span>
+            </img-container>
+            <div style="height: 100%;">
+              <tag-cloud id="publicationViewerTags"></tag-cloud>
+              <div class="mangaDescription" id="publicationViewerDescription"></div>
+            </div>
+          </manga-details>
+          <!-- <manga-chapter id="publicationViewerChapters"></manga-chapter> -->
+          <border-bar>
+            <div class="button-container">
+              <border-bar-button onclick="RefreshMangaMetadata(selectedManga.internalId)">Refresh Metadata</border-bar-button>
+              <border-bar-button id="reset" onclick="RemoveJob(selectedJob.id); UpdateJobs(); mangaViewerPopup.style.display = 'none'">Remove Manga</border-bar-button>
+              <border-bar-button class="primary" onclick="StartJob(selectedJob.id); mangaViewerPopup.style.display = 'none'">Start Job</border-bar-button>
+            </div>
+          </border-bar>
+        </popup-window>
       </popup>
 
       <popup id="jobStatusView">
@@ -281,6 +318,7 @@
           </border-bar>
 
         </popup-window>
+      </popup>
     </viewport>
 	  
     <footer>
@@ -294,7 +332,6 @@
     </footer> 
   </wrapper>
   
-  <script src="defaultApiUri.js"></script>
   <script src="apiConnector.js"></script>
   <script src="interaction.js"></script>
 </body>

Website/interaction.js

@@ -1,4 +1,4 @@
-let monitoringJobsCount = 0;
+let monitoringJobsCount = 0;
 let runningJobs = [];
 let waitingJobs = [];
 let notificationConnectorTypes = [];
@@ -15,14 +15,10 @@ let statusNameMatch = [];
 const searchBox = document.querySelector("#searchbox");
 const settingsPopup = document.querySelector("#settingsPopup");
 const filterBox = document.querySelector("#filterBox");
+const filterContent = document.querySelector("#filterContent");
 const settingsCog = document.querySelector("#settingscog");
 const filterFunnel = document.querySelector("#filterFunnel");
 const tasksContent = document.querySelector("content");
-const createMonitorTaskButton = document.querySelector("#createMonitoJobButton");
-const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterJobButton");
-const startJobButton = document.querySelector("#startJobButton");
-const cancelJobButton = document.querySelector("#cancelJobButton");
-const deleteJobButton = document.querySelector("#deleteJobButton");
 
 //Manga viewer popup
 const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
@@ -30,8 +26,10 @@ const mangaViewerWindow = document.querySelector("publication-viewer");
 const mangaViewerDescription = document.querySelector("#publicationViewerDescription");
 const mangaViewerName = document.querySelector("#publicationViewerName");
 const mangaViewerTags = document.querySelector("#publicationViewerTags");
-const mangaViewerAuthor = document.querySelector("#publicationViewerAuthor");
 const mangaViewCover = document.querySelector("#pubviewcover");
+const mangaViewConn = document.querySelector('#publicationViewerConnector');
+const mangaViewStatus = document.querySelector('#publicationViewerStatus');
+const mangaViewChapterNo = document.querySelector('#publicationViewerChapterNo');
 
 //General Rate Limits
 const defaultRL = document.querySelector("#defaultRL");
@@ -62,7 +60,8 @@ const settingLunaseaWebhook = document.querySelector("#lunaseaWebhook");
 
 //Ntfy
 const settingNtfyEndpoint = document.querySelector("#ntfyEndpoint");
-const settingNtfyAuth = document.querySelector("#ntfyAuth");
+const settingNtfyUser = document.querySelector("#ntfyUser");
+const settingNtfyPass = document.querySelector("#ntfyPass");
 
 //Connector Configured
 const settingKomgaConfigured = document.querySelector("#komgaConfigured");
@@ -73,12 +72,17 @@ const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
 
 const settingUserAgent = document.querySelector("#userAgent");
 const settingApiUri = document.querySelector("#settingApiUri");
+const settingAprilFoolsMode = document.querySelector("#aprilFoolsMode");
 const settingCSSStyle = document.querySelector('#cssStyle');
+const settingDownloadLocation = [];
+
+//Search and Add
 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");
+const newMangaLoader = document.querySelector("popup-content #loaderdiv");
 
 //Jobs
 const jobsRunningTag = document.querySelector("#jobsRunningTag");
@@ -151,6 +155,9 @@ function Setup(){
     GetSettings().then((json) => {
       //console.log(json);
       settingApiUri.placeholder = apiUri;
+      settingDownloadLocation.placeholder = json.downloadLocation;
+      settingUserAgent.placeholder = json.userAgent;
+      settingAprilFoolsMode.checked = json.aprilFoolsMode;
     });
     GetRateLimits().then((json) => {
       defaultRL.placeholder = json.Default + ' Requests/Minute';
@@ -174,7 +181,7 @@ function Setup(){
     }
     setInterval(() => {
       UpdateJobs();
-    }, 5000);
+    }, 1000);
   });
   //Clear the previous values if any exist.
   searchBox.value = "";
@@ -183,6 +190,15 @@ function Setup(){
 }
 Setup();
 
+function ToggleFilterBox() {
+  if (filterBox.style.display == 'none') {
+    filterBox.style.display = 'flex';
+  } else {
+    filterBox.style.display = 'none';
+  }
+  filterContent.scrollTop = 0;
+}
+
 function ToggleFilterConnector(connector, event) {
   //console.log("Initial Array:");
   //console.log(connectorMatch);
@@ -279,31 +295,30 @@ function ShowNewMangaSearch(){
   newMangaTitle.value = "";
   newMangaPopup.style.display = "block";
   newMangaResult.replaceChildren();
+  newMangaLoader.style.display = 'none';
 }
 
 newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();});
 
-
-
-
 function GetNewMangaItems(){
-  if(newMangaTitle.value.length < 4)
-    return;
   
+  if(newMangaTitle.value.length < 4) {
+    return;
+  }
   newMangaResult.replaceChildren();
   newMangaConnector.disabled = true;
   newMangaTitle.disabled = true;
   newMangaTranslatedLanguage.disabled = true;
+  newMangaLoader.style.display = 'block';
   GetPublicationFromConnector(newMangaConnector.value, newMangaTitle.value).then((json) => {
     //console.log(json);
+    newMangaLoader.style.display = 'none';
+    newMangaResult.scrollTop = 0;
     if(json.length > 0)
       newMangaResult.style.display = "flex";
     json.forEach(result => {
-      var mangaElement = CreateManga(result, newMangaConnector.value)
-      newMangaResult.appendChild(mangaElement);
-      mangaElement.addEventListener("click", (event) => {
-        ShowMangaWindow(null, result, event, true);
-      });
+      var searchResult = CreateSearchResult(result, newMangaConnector.value)
+      newMangaResult.appendChild(searchResult);
     });
     
     newMangaConnector.disabled = false;
@@ -365,65 +380,289 @@ function CreateManga(manga, connector){
     return mangaElement;
 }
 
-createMonitorJobButton.addEventListener("click", () => {
-  CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
-  UpdateJobs();
-  mangaViewerPopup.style.display = "none";
+//Returns a new "Search Result" item to display in the search window
+function CreateSearchResult(manga, connector) {
+  //Create a new publication and set an internal ID
+  var searchResult = document.createElement('div');
+  searchResult.id = GetValidSelector(manga.internalId);
+  searchResult.className = "section-item";
+  
+//Append the cover image to the publication
+  var imageCont = document.createElement('img-container');
+
+  var mangaImage = document.createElement('img');
+  mangaImage.src = GetCoverUrl(manga.internalId);
+  imageCont.appendChild(mangaImage);
+
+  var connectorName = document.createElement('manga-connector');
+  connectorName.innerText = connector.toUpperCase();
+  connectorName.style.backgroundColor = stringToColour(connector);
+  imageCont.appendChild(connectorName);
+
+  var chapterNo = document.createElement('span');
+  chapterNo.className = 'latest-chapter-no';
+  chapterNo.innerText = manga.latestChapterAvailable.toString();
+  imageCont.appendChild(chapterNo);
+
+  searchResult.appendChild(imageCont);
+
+  var mangaDetails = document.createElement('div');
+  mangaDetails.className = 'jobDetails';
+
+  var headerRow = document.createElement('header-row');
+  
+  var mangaTitle = document.createElement('a');
+  mangaTitle.innerText = manga.sortName;
+  mangaTitle.href = manga.websiteUrl;
+  mangaTitle.className = 'mangaTitle';
+  headerRow.appendChild(mangaTitle);
+
+  //Create the publication status indicator
+  var releaseStatus = document.createElement('status-filter');
+  switch(manga.releaseStatus){
+    case 0:
+      releaseStatus.setAttribute("release-status", "Ongoing");
+      releaseStatus.innerText = "Ongoing";
+      break;
+    case 1:
+      releaseStatus.setAttribute("release-status", "Completed");
+      releaseStatus.innerText = "Completed";
+      break;
+    case 2:
+      releaseStatus.setAttribute("release-status", "On Hiatus");
+      releaseStatus.innerText = "On Hiatus";
+      break;
+    case 3:
+      releaseStatus.setAttribute("release-status", "Cancelled");
+      releaseStatus.innerText = "Cancelled";
+      break;
+    case 4:
+      releaseStatus.setAttribute("release-status", "Upcoming");
+      releaseStatus.innerText = "Upcoming";
+      break;
+    default:
+      releaseStatus.setAttribute("release-status", "Status Unavailable");
+      releaseStatus.innerText = "Status Unavailable";
+      break;
+  }
+  headerRow.appendChild(releaseStatus);
+
+  mangaDetails.appendChild(headerRow);
+
+  //Genres
+  var tagCloud = document.createElement('tag-cloud');
+  manga.authors.forEach(author => {
+    var authorCard = document.createElement('author-tag');
+
+    var personImg = document.createElement('img');
+    personImg.src = 'media/person.svg';
+    authorCard.appendChild(personImg);
+
+    var authorName = document.createElement('span');
+    authorName.innerText = author;
+    authorCard.appendChild(authorName);
+
+    tagCloud.appendChild(authorCard);
   });
-startJobButton.addEventListener("click", () => {
-  StartJob(selectedJob.id);
-  mangaViewerPopup.style.display = "none";
+  manga.tags.forEach(tag => {
+    var tagElement = document.createElement('manga-tag');
+    tagElement.innerText = tag;
+    tagCloud.appendChild(tagElement);
   });
-cancelJobButton.addEventListener("click", () => {
-  CancelJob(selectedJob.id);
-  mangaViewerPopup.style.display = "none";
-});
-deleteJobButton.addEventListener("click", () => {
-  RemoveJob(selectedJob.id);
-  UpdateJobs();
-  mangaViewerPopup.style.display = "none";
+  mangaDetails.appendChild(tagCloud);
+
+  //Description
+  var description = document.createElement('div');
+  description.className = 'mangaDescription abbreviated';
+  description.innerText = manga.description;
+  mangaDetails.appendChild(description);
+
+  searchResult.appendChild(mangaDetails);
+
+  //Download Settings
+  var dlSett = document.createElement('div');
+  dlSett.className = 'new-manga-download-settings'
+  
+  folderRow = document.createElement('row');
+  folderLabel = document.createElement('label');
+  folderLabel.innerText = 'Download Folder';
+  folderRow.appendChild(folderLabel);
+  folderInput = document.createElement('input');
+  downloadFolder = manga.folderName;
+  folderInput.placeholder = downloadFolder.toString();
+  folderInput.type = 'text';
+  folderInput.id = manga.internalId.concat('-downloadfolder')
+  folderRow.appendChild(folderInput);
+  dlSett.appendChild(folderRow);
+
+  intervalRow = document.createElement('row');
+  intervalLabel = document.createElement('label');
+  intervalLabel.innerText = 'Job Interval';
+  intervalRow.appendChild(intervalLabel);
+  intervalInput = document.createElement('input');
+  intervalInput.placeholder = '03:00:00 (HH:MM:SS)';
+  intervalInput.type = 'text';
+  intervalInput.id = manga.internalId.concat('-downloadinterval')
+  intervalRow.appendChild(intervalInput);
+  dlSett.appendChild(intervalRow);
+
+  chapterRow = document.createElement('row');
+  chapterLabel = document.createElement('label');
+  chapterLabel.innerText = 'Download from Chapter';
+  chapterRow.appendChild(chapterLabel);
+  chapterInput = document.createElement('input');
+  chapterInput.placeholder = (manga.ignoreChaptersBelow + 1).toString();
+  chapterInput.type = 'number';
+  chapterInput.id = manga.internalId.concat('-downloadchapter')
+  chapterRow.appendChild(chapterInput);
+  dlSett.appendChild(chapterRow);
+
+  dlButton = document.createElement('border-bar-button');
+  if (IsInLibrary(manga.internalId)) {
+    dlButton.className = 'section in-library';
+    dlButton.innerText = 'In Library';
+  } else {
+    dlButton.className = 'section downloadManga';
+    dlButton.innerText = 'Monitor Manga';
+    dlButton.addEventListener('click', function() { AddManga(manga.internalId, connector) });
+  }
+  
+
+  dlSett.appendChild(dlButton);
+
+  mangaDetails.appendChild(dlSett);
+
+//Append the publication information to the publication
+  //console.log(manga);
+  return searchResult;
+}
+
+function IsInLibrary(id) {
+  matchFound = false;
+  tasksContent.childNodes.forEach(publication => {
+    if (id.toLowerCase().includes(publication.id.toLowerCase())) {
+      console.log('Match found');
+      matchFound = true;
+    }
   });
+  return matchFound;
+}
+
+function AddManga(id, connector) {
+  console.log('Adding Manga');
+  mangaID = id;
+  mangaConnector = connector; 
+  mangaLanguage = document.getElementById('newMangaTranslatedLanguage').value.toLowerCase();
+
+  folderInput = document.getElementById(id.concat('-downloadfolder')).value;
+  if (folderInput != null || folderInput != '') {
+    mangaFolder = folderInput;
+  }
+  
+  intervalInput = document.getElementById(id.concat('-downloadinterval')).value;
+  if (intervalInput == null || intervalInput == '') {
+    mangaInterval = '03:00:00';
+  } else {
+    mangaInterval = intervalInput;
+  }
+
+  chapterInput = document.getElementById(id.concat('-downloadchapter')).value;
+  if (chapterInput == null || chapterInput == '') {
+    mangaChapter = 0;
+  } else {
+    mangaChapter = chapterInput;
+  }
+
+  CreateMonitorJob(mangaConnector, mangaID, mangaLanguage, mangaInterval, mangaFolder, mangaChapter);
+}
 
 function ShowMangaWindow(job, manga, event, add){
     selectedManga = manga;
     selectedJob = job;
-    //Show popup
-    mangaViewerPopup.style.display = "block";
     
-    //Set position to mouse-position
-    if(event.clientY < window.innerHeight - mangaViewerWindow.offsetHeight)
-        mangaViewerWindow.style.top = `${event.clientY}px`;
-    else
-        mangaViewerWindow.style.top = `${event.clientY - mangaViewerWindow.offsetHeight}px`;
-    
-    if(event.clientX < window.innerWidth - mangaViewerWindow.offsetWidth)
-        mangaViewerWindow.style.left = `${event.clientX}px`;
-    else
-        mangaViewerWindow.style.left = `${event.clientX - mangaViewerWindow.offsetWidth}px`;
-    
-    //Edit information inside the window
+    //Title
     mangaViewerName.innerText = manga.sortName;
-    mangaViewerTags.innerText = manga.tags.join(", ");
-    mangaViewerDescription.innerText = manga.description;
-    mangaViewerAuthor.innerText = manga.authors.join(',');
-    mangaViewCover.src = GetCoverUrl(manga.internalId);
-    toEditId = manga.internalId;
+    mangaViewerName.href = manga.websiteUrl;
 
-    //Check what action should be listed
-    if(add){
-        createMonitorJobButton.style.display = "initial";
-        createDownloadChapterJobButton.style.display = "none";
-        cancelJobButton.style.display = "none";
-        startJobButton.style.display = "none";
-        deleteJobButton.style.display = "none";
-    }
-    else{
-        createMonitorJobButton.style.display = "none";
-        createDownloadChapterJobButton.style.display = "none";
-        cancelJobButton.style.display = "initial";
-        startJobButton.style.display = "initial";
-        deleteJobButton.style.display = "initial";
+    //Author and Genre Tag Cloud
+    mangaViewerTags.replaceChildren();
+    manga.authors.forEach(author => {
+      var authorCard = document.createElement('author-tag');
+  
+      var personImg = document.createElement('img');
+      personImg.src = 'media/person.svg';
+      authorCard.appendChild(personImg);
+  
+      var authorName = document.createElement('span');
+      authorName.innerText = author;
+      authorCard.appendChild(authorName);
+  
+      mangaViewerTags.appendChild(authorCard);
+    });
+    manga.tags.forEach(tag => {
+      var tagElement = document.createElement('manga-tag');
+      tagElement.innerText = tag;
+      mangaViewerTags.appendChild(tagElement);
+    });
+
+    //Description
+    mangaViewerDescription.innerText = manga.description;
+
+    //Image and Connector
+    mangaViewCover.src = GetCoverUrl(manga.internalId);
+    mangaViewConn.innerText = job.mangaConnector.name.toUpperCase();
+    mangaViewConn.style.backgroundColor = stringToColour(job.mangaConnector.name);
+    mangaViewChapterNo.innerText = manga.latestChapterAvailable.toString();
+
+    //Release Status
+    switch(manga.releaseStatus){
+      case 0:
+        mangaViewStatus.setAttribute("release-status", "Ongoing");
+        mangaViewStatus.innerText = "Ongoing";
+        break;
+      case 1:
+        mangaViewStatus.setAttribute("release-status", "Completed");
+        mangaViewStatus.innerText = "Completed";
+        break;
+      case 2:
+        mangaViewStatus.setAttribute("release-status", "On Hiatus");
+        mangaViewStatus.innerText = "On Hiatus";
+        break;
+      case 3:
+        mangaViewStatus.setAttribute("release-status", "Cancelled");
+        mangaViewStatus.innerText = "Cancelled";
+        break;
+      case 4:
+        mangaViewStatus.setAttribute("release-status", "Upcoming");
+        mangaViewStatus.innerText = "Upcoming";
+        break;
+      default:
+        mangaViewStatus.setAttribute("release-status", "Status Unavailable");
+        mangaViewStatus.innerText = "Status Unavailable";
+        break;
     }
+
+    // //Individual Manga Chapters
+    // chapters = document.querySelector('#publicationViewerChapters');
+    // chapters.replaceChildren();
+    // var mangaChapters = GetMangaChapters(job.mangaConnector.name, manga.internalId);
+
+    // mangaChapters.then(value => {
+
+    //   sortedChapters = value.sort((a, b) => b.chapterNumber - a.chapterNumber);
+
+    //   sortedChapters.forEach(chapter => {
+    //     chapterNo = chapter.chapterNumber;
+    //     var chapterElement = document.createElement('chapter-row');
+    //     chapterElement.innerText = chapter.fileName;
+    //     chapters.appendChild(chapterElement);
+    // })
+    // }).then(() => { 
+    //   //Show popup
+    //   mangaViewerPopup.style.display = "block";
+    // });
+
+    mangaViewerPopup.style.display = "block"
 }
 
 function HidePublicationPopup(){
@@ -507,7 +746,7 @@ settingsCog.addEventListener("click", () => {
 });
 
 filterFunnel.addEventListener("click", () => {
-  filterBox.classList.toggle("animate");
+  ToggleFilterBox();
 });
 
 settingKomgaUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
@@ -520,7 +759,7 @@ settingGotifyUrl.addEventListener("keypress", (event) => { if(event.key === "Ent
 settingGotifyAppToken.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingLunaseaWebhook.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingNtfyEndpoint.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingNtfyAuth.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
+settingNtfyPass.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingUserAgent.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingApiUri.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 
@@ -547,7 +786,8 @@ function OpenSettings(){
   settingGotifyUrl.value = "";
   settingGotifyAppToken.value = "";
   settingLunaseaWebhook.value = "";
-  settingNtfyAuth.value = "";
+  settingNtfyUser.value = "";
+  settingNtfyPass.value = "";
   settingNtfyEndpoint.value = "";
   settingUserAgent.value = "";
   settingApiUri.value = "";
@@ -562,6 +802,8 @@ function OpenSettings(){
     //console.log(json);
     settingApiUri.placeholder = apiUri;
     settingUserAgent.placeholder = json.userAgent;
+    settingAprilFoolsMode.checked = json.aprilFoolsMode;
+    settingDownloadLocation.placeholder = json.downloadLocation;
     //console.log(json.styleSheet);
   });
   GetRateLimits().then((json) => {
@@ -610,7 +852,8 @@ function OpenSettings(){
         case "Ntfy":
           settingNtfyConfigured.setAttribute("configuration", "Active");
           settingNtfyEndpoint.placeholder = connector.endpoint;
-          settingNtfyAuth.placeholder = "***";
+          settingNtfyUser.placeholder = "***"
+          settingNtfyPass.placeholder = "***";
           break;
         default:
           console.log("Unknown type");
@@ -653,7 +896,8 @@ function ClearLunasea(){
 
 function ClearNtfy(){
   settingNtfyEndpoint.value = "";
-  settingNtfyAuth.value = "";
+  settingNtfyUser.value = "";
+  settingNtfyPass.value = "";
   settingNtfyConfigured.setAttribute("configuration", "Not Configured");
   ResetNtfy();
 }
@@ -687,8 +931,8 @@ function UpdateSettings(){
   }
   
   if(settingNtfyEndpoint.value != "" &&
-    settingNtfyAuth.value != ""){
-    UpdateNtfy(settingNtfyEndpoint.value, settingNtfyAuth.value);
+    settingNtfyUser.value != ""){
+    UpdateNtfy(settingNtfyEndpoint.value, settingNtfyUser.value, settingNtfyPass.value);
   }
   
   if(settingUserAgent.value != ""){
@@ -812,16 +1056,14 @@ function createJob(jobjson){
     title.innerText = manga.sortName;
   details.appendChild(title);
   
-  var progressBar = document.createElement("progress");
-  progressBar.className = "jobProgressBar";
-  progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
-  details.appendChild(progressBar);
+  var progressBarContainer = document.createElement('div');
+  progressBarContainer.className = 'progress-container';
 
-  var progressSpan = document.createElement("span");
-  progressSpan.className = "jobProgressSpan";
-  progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`;
-  progressSpan.innerText = "Pending...";
-  details.appendChild(progressSpan);
+  var progressBar = document.createElement("div");
+  progressBar.className = "pending";
+  progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
+  progressBarContainer.appendChild(progressBar);
+  details.appendChild(progressBarContainer);
   
   var cancelSpan = document.createElement("span");
   cancelSpan.className = "jobCancel";
@@ -841,18 +1083,12 @@ function ShowJobQueue(){
 function UpdateJobProgress(jobId){
   GetProgress(jobId).then((json) => {
     var progressBar = document.querySelector(`#jobProgressBar${GetValidSelector(jobId)}`);
-    var progressSpan = document.querySelector(`#jobProgressSpan${GetValidSelector(jobId)}`);
     if(progressBar != null && json.progress != 0){
-      progressBar.value = json.progress;
-    }
-    if(progressSpan != null){
-      var percentageStr = "0%";
-      var timeleftStr = "00:00:00";
-      if(json.progress != 0){
+      progressBar.className = 'jobProgressBar';
       percentageStr = Intl.NumberFormat("en-US", { style: "percent"}).format(json.progress);
-        timeleftStr = json.timeRemaining.split('.')[0];
-      }
-      progressSpan.innerText = `${percentageStr} ${timeleftStr}`;
+      console.log(percentageStr);
+      progressBar.style.width = percentageStr;
+      progressBar.innerText = percentageStr;
     }
   });
 }
@@ -862,7 +1098,7 @@ function GetValidSelector(str){
     return clean.join('');
 }
 
-const stringToColour = (str) => {
+function stringToColour(str) {
   let hash = 0;
   str.split('').forEach(char => {
     hash = char.charCodeAt(0) + ((hash << 5) - hash)

Website/media/check-circle.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-check-circle" viewBox="0 0 16 16">
+  
+  <path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
+</svg>

Website/media/person.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-person" viewBox="0 0 16 16">
+  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
+</svg>

Website/styles/base.css

@@ -1,4 +1,4 @@
-:root{
+:root{
     --background-color: #030304;
     --second-background-color: white;
     --primary-color: #f5a9b8;
@@ -20,6 +20,7 @@ body{
     background-color: var(--background-color);
     font-family: "Inter", sans-serif;
     overflow-x: hidden;
+    font-weight: 400;
 }
 
 wrapper {
@@ -95,10 +96,6 @@ filter-box {
     height: 600px;
 }
 
-filter-box.animate {
-    display: flex;
-}
-
 filter-box border-bar popup-title{
     font-size: 12pt;
 }
@@ -149,6 +146,10 @@ status-filter {
     user-select: none; /* Standard syntax */
 }
 
+row > status-filter {
+    cursor: default;
+}
+
 status-filter[release-status="Ongoing"]{
     background-color: limegreen;
 }
@@ -420,11 +421,14 @@ popup popup-window {
     overflow: hidden;
 }
 
-popup#jobStatusView popup-window {
-    left: 20%;
-    top: 20%;
-    height: 60%;
-    width: 60%;
+/*Remove below when individual chapter download is implemented*/
+#publicationViewerPopup > popup-window {
+    height: fit-content;
+    width: auto; 
+    max-width: 80%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 popup-content{
@@ -642,66 +646,58 @@ a:active {
     user-select: none; /* Standard syntax */
 }
 
-.section-button#reset:hover {
-    color: red;
-    border-color: red;
+#reset:hover {
+    color: rgb(255, 44, 29);
+    border-color: rgb(255, 44, 29);
 }
 .section-buttons-container > .section-button:hover {
     border-color: var(--secondary-color);
     color: var(--secondary-color);
 }
 
-#newMangaPopup > div {
-  z-index: 3;
-  position: relative;
-}
-
-#newMangaPopup > #newMangaPopupSelector {
-  width: 600px;
-  height: 40px;
-  margin: 80px auto 0;
-}
-
-#newMangaPopup > div > #newMangaConnector, #newMangaTitle, #newMangaTranslatedLanguage {
-  margin: 0;
-  display: inline-block;
-  height: 40px;
+ #newMangaPopupSelector {
+    display: flex;
+    padding: 5px;
+    margin: 10px;
+    width: calc(100%-20px)
  }
 
 #newMangaPopup #newMangaConnector {
   width: 100px;
-  padding: 0 0 0 5px;
-  border-radius: 5px 0 0 5px;
-  border: 0;
-  border-right: 1px solid darkgray;
+  padding: 5px;
+  border-radius: 10px;
+  border: 0;;
 }
 
 #newMangaPopup #newMangaTitle{
-  width: 445px;
-  padding: 0 5px 0 5px;
-  border: 0;
+    margin: 0px 10px;
+    padding: 5px;
+    height: 20px;
+    border-radius: 10px;
+    border-style: solid;
+    outline: none;
+    flex-grow: 1;
+    width: auto;
 }
 
 #newMangaPopup #newMangaTranslatedLanguage {
-  width: 45px;
-  border-radius: 0 5px 5px 0;
+  width: 60px;
+  padding: 5px;
+  border-radius: 10px;
   border: 0;
-  border-left: 1px solid darkgray;
-  margin-left: -5px;
 }
 
 #newMangaResult {
   display: none;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: flex-start;
-  margin: 5px auto 0;
+  margin: 5px;
   border-radius: 5px;
   padding: 5px;
-  width: min-content;
-  max-width: 98%;
-  max-height: 400px;
-  overflow-x: scroll;
-  overflow-y: hidden;
+  width: 98%;
+  height: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 
 blur-background {
@@ -719,111 +715,6 @@ blur-background {
     z-index: 5;
 }
 
-publication-viewer{
-    display: block;
-    width: 460px;
-    position: absolute;
-    top: 200px;
-    left: 400px;
-    background-color: var(--accent-color);
-    border-radius: 5px;
-    overflow: hidden;
-    padding: 15px;
-}
-
-publication-viewer::after{
-    content: '';
-    position: absolute;
-    left: 0; top: 0;
-    border-radius: 5px;
-    width: 100%;
-    height: 100%;
-    background: rgba(0,0,0,0.8);
-    backdrop-filter: blur(3px);
-}
-
-publication-viewer img {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-    border-radius: 5px;
-    z-index: 0;
-}
-
-publication-viewer publication-details > * {
-    margin: 5px 0;
-}
-
-publication-viewer publication-details publication-name {
-    width: initial;
-    overflow-x: scroll;
-    white-space: nowrap;
-    scrollbar-width: none;
-}
-
-publication-viewer publication-details publication-tags::before {
-    content: "Tags";
-    display: block;
-    font-weight: bolder;
-}
-
-publication-viewer publication-details publication-tags {
-    overflow-x: scroll;
-    white-space: nowrap;
-    scrollbar-width: none;
-}
-
-publication-viewer publication-details publication-author::before {
-    content: "Author: ";
-    font-weight: bolder;
-}
-
-publication-viewer publication-details publication-description::before {
-    content: "Description";
-    display: block;
-    font-weight: bolder;
-}
-
-publication-viewer publication-details publication-description {
-    font-size: 12pt;
-    margin: 5px 0;
-    height: 145px;
-    overflow-x: scroll;
-}
-
-publication-viewer publication-details publication-interactions {
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    align-items: start;
-    width: 100%;
-}
-
-publication-viewer publication-details publication-interactions > * {
-    margin: 0 10px;
-    font-size: 16pt;
-    cursor: pointer;
-}
-
-publication-viewer publication-details publication-interactions publication-starttask {
-    color: var(--secondary-color);
-}
-
-publication-viewer publication-details publication-interactions publication-delete {
-    color: red;
-}
-
-publication-view publication-details publication-interactions publication-canceltask {
-  color: yellow;
-}
-
-publication-viewer publication-details publication-interactions publication-add {
-    color: limegreen;
-}
-
 footer-tag-popup {
     display: none;
     padding: 2px 4px;
@@ -886,6 +777,10 @@ footer-tag-popup::before{
   z-index: 201;
 }
 
+popup-content #loaderdiv {
+    display: none;
+}
+
 #loaderText {
   position: relative;
   margin: 0 auto;
@@ -915,6 +810,169 @@ footer-tag-popup::before{
     overflow: hidden;
 }
 
+#newMangaResult > .section-item {
+    flex-direction: row;
+    width: auto;
+    height: auto;
+    padding: 0;
+}
+
+img-container {
+    height: 300px;
+    width: 180px;
+    position: relative;
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+    overflow: hidden;
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+
+img-container > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+    border-radius: 5px;
+}
+
+manga-connector {
+    display: block;
+    margin: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    /*Text Properties*/
+    font-size:8pt;
+    font-weight:bold;
+    color:white;
+    text-align: center;
+}
+
+manga-details {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    margin: 2px;
+}
+
+manga-details > .mangaDescription {
+    width: 100%;
+}
+
+manga-chapter {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-style: solid;
+    border-width: 2px;
+    margin: 5px;
+    border-radius: 10px;
+    border-color: #bbb;
+    scrollbar-width: thin;
+    scrollbar-color:  var(--secondary-color) var(--second-background-color);
+}
+
+chapter-row {
+    font-size: 12pt;
+    width: 100%;
+    border-style: solid;
+    border-color: #ccc;
+    border-width: 1px;
+    padding-left: 50px;
+    padding-top: 7px;
+    padding-bottom: 7px;
+}
+
+span.latest-chapter-no {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    padding: 5px 10px 5px 10px;
+    border-radius: 5px;
+
+    font-size: 10pt;
+    font-weight: bold;
+    color: white;
+    background-color: var(--primary-color);;
+}
+
+div.new-manga-download-settings {
+    position: relative;
+    overflow: hidden;
+    width: calc(100%-20px);
+    height: auto;
+    padding: 10px;
+}
+
+.new-manga-download-settings > row {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    margin-left: 5px;
+}
+
+.new-manga-download-settings > row > label {
+    text-wrap: nowrap;
+    font-size: 10pt;
+    font-weight: bold;
+    color: #474646;
+}
+
+.new-manga-download-settings > row > input {
+    margin-left: auto;
+    margin-right: 5px; 
+    padding: 5px;
+    height: 20px;
+    border-radius: 10px;
+    border-style: solid;
+    border-color: lightgray;
+    outline: none;
+    float: right;
+    width: 100%;
+}
+.new-manga-download-settings > row > input:focus {
+    border-color: var(--secondary-color);
+}
+
+@media only screen and (max-width: 768px) {
+    /* For mobile phones: */
+    img-container {
+      display: none;
+    }
+
+    .section-item > tag-cloud {
+        display: none !important;
+    }
+    .new-manga-download-settings > row, .downloadManga, border-bar-button.in-library { 
+        width: calc(100% - 25px) !important;
+        align-self: center;
+        position: relative;
+    }
+
+    popup popup-window {
+        width: 100%;
+        height: calc(100% - var(--topbar-height));
+        top: var(--topbar-height);
+        left: 0;
+        border-radius: 0;
+    }
+
+    .section-item {
+        width: 100% !important;
+    }
+}
+
+
 .section-item > .jobImage {
   height: 100%;
   width: auto;
@@ -927,7 +985,9 @@ footer-tag-popup::before{
     display: flex;
     flex-direction: column;
     height: 100%;
-    width: 100%;
+    width: calc(100% - 15px);
+    margin-left: 7px;
+    position: relative;
 }
 
 .section-item > .jobDetails > .jobTitle {
@@ -937,16 +997,189 @@ footer-tag-popup::before{
   text-wrap: wrap;
 }
 
-.section-item > .jobDetails > .jobProgressBar {
-  margin: 5px;
-  height: 10px;
-  border-radius: 7px;
+header-row {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center
 }
 
-.section-item > .jobDetails > .jobProgressSpan {
+.mangaTitle {
     margin: 5px;
-    margin-left: auto;
+    font-size: 14pt;
+    font-weight: bold;
+    text-wrap: wrap;
+    display: flex;
+}
+
+tag-cloud {
+    display: inline-flex;
+    flex-direction: row;
+    margin-left: 10px;
+    width: calc(100% - 30px);
+    flex-wrap: wrap;
+}
+
+manga-tag {
+    display: inline-block;
+    height: 24px;
+    line-height: 24px;
+    position: relative;
+    margin: 0 5px 8px 17px;
+    padding: 0 10px 0 12px;
+    background: darkslategrey;
+    -webkit-border-bottom-right-radius: 3px;    
+    border-bottom-right-radius: 3px;
+    -webkit-border-top-right-radius: 3px;    
+    border-top-right-radius: 3px;
+    color: #fff;
+    font-size: 11px;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+manga-tag:before {
+    content: "";
+    position: absolute;
+    top:0;
+    left: -12px;
+    width: 0;
+    height: 0;
+    border-color: transparent darkslategrey transparent transparent;
+    border-style: solid;
+    border-width: 12px 12px 12px 0;
+}
+
+manga-tag:after {
+    content: "";
+    position: absolute;
+    top: 10px;
+    left: 1px;
+    float: left;
+    width: 5px;
+    height: 5px;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+    background: #fff;
+}
+
+author-tag {
+    display: inline-block;
+    height: 24px;
+    line-height: 24px;
+    position: relative;
+    margin-left: 0px;
     margin-right: 5px;
+    padding: 0 5px 0 5px;
+    background: #800000;
+    border-radius: 5px;
+    color: #fff;
+    font-size: 11px;
+    text-decoration: none;
+    font-weight: bold;
+    align-items: center;
+    display: flex;
+}
+
+author-tag > img {
+    height: 18px; 
+    width: 18px;
+    float: left;
+    background: #800000;
+}
+
+.mangaDescription {
+    font-size: 10pt;
+    padding: 4px;
+    height: auto;
+    margin: 2px;
+}
+
+.abbreviated {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 10;
+    line-clamp: 10;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+}
+
+.downloadManga {
+    position: relative;
+    float: right;
+    width: fit-content;
+    margin: 5px 5px 0 auto;
+
+    border-radius: 5px;
+    padding: 5px 10px;
+    font-size: 10pt;
+}
+
+border-bar-button.in-library {
+    position: relative;
+    float: right;
+    margin: 5px 5px 0 auto;
+    width: fit-content;
+
+    border-radius: 5px;
+    padding: 5px 10px;
+    font-size: 10pt;
+
+    background-color: #08962e;
+    color: #fff;
+    border: none;
+    cursor: default;
+}
+
+border-bar-button.in-library:hover {
+    border: none;
+    color: #fff;
+}
+
+.section-item > .jobDetails > .progress-container {
+  margin: 5px;
+  height: 15px;
+  border-radius: 12px;
+  overflow: hidden;
+  background-color: #999999;
+  position: relative;
+}
+
+.progress-container > .jobProgressBar {
+    margin: 0px;
+    display: block;
+    height: 15px;
+    padding-left: 5px;
+    border-radius: 12px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: #0075fa;
+    color: white;
+    justify-content: left;
+    font-size: 8pt;
+    line-height: 15px;
+}
+
+.progress-container > .pending { 
+    width: 50%;
+    display: block;
+    height: 15px;
+    top: 0%;
+    position: absolute;
+    border-radius: 12px;
+    background-color: #0075fa;
+    animation: bounce;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+}
+
+@keyframes bounce {
+    0%      {width: 10%; transform: translateX(0);};
+    50%     {width: 50%; transform: translateX(100%);};
+    100%    {width: 10%; transform: translateX(0);};
 }
 
 .section-item > .jobDetails > .jobCancel {
@@ -958,3 +1191,61 @@ footer-tag-popup::before{
   color: var(--secondary-color);
   cursor: pointer;
 }
+
+
+ /* The switch - the box around the slider */
+ .switch-toggle {
+    position: relative;
+    width: 40px;
+    height: 20px;
+    margin-left: auto;
+    float: right;
+    margin-right: 2px;
+  }
+  
+  /* Hide default HTML checkbox */
+  .switch-toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  /* The slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;    border-radius: 34px;
+  }
+  
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 12px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+  
+  input:checked + .slider {
+    background-color: var(--primary-color);
+  }
+  
+  input:focus + .slider {
+    box-shadow: 0 0 1px var(--primary-color);
+  }
+  
+  input:checked + .slider:before {
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }