From a0636ac7a2eaefab3e8ac13ce3d432e9e784c46b Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Wed, 24 May 2023 21:48:54 +0200
Subject: [PATCH] Finished Settings-Cart

---
 Website/apiConnector.js | 12 +++++++++---
 Website/index.html      |  9 ++++++---
 Website/interaction.js  | 40 ++++++++++++++++++++++++++++++++++------
 Website/style.css       | 30 ++++++++++++++++++++++++++++++
 4 files changed, 79 insertions(+), 12 deletions(-)

diff --git a/Website/apiConnector.js b/Website/apiConnector.js
index 0a94b9e..52d2dbd 100644
--- a/Website/apiConnector.js
+++ b/Website/apiConnector.js
@@ -52,8 +52,8 @@ async function GetRunningTasks(){
     return json;
 }
 
-async function GetTasks(){
-    var uri = apiUri + "/Tasks/GetList";
+async function GetDownloadTasks(){
+    var uri = apiUri + "/Tasks/Get?taskType=DownloadNewChapters";
     let json = await GetData(uri);
     return json;
 }
@@ -64,6 +64,12 @@ async function GetSettings(){
     return json;
 }
 
+async function GetKomgaTask(){
+    var uri = apiUri + "/Tasks/Get?taskType=UpdateKomgaLibrary";
+    let json = await GetData(uri);
+    return json;
+}
+
 function CreateTask(taskType, reoccurrence, connectorName, publicationId, language){
     var uri = apiUri + `/Tasks/Create?taskType=${taskType}&connectorName=${connectorName}&publicationId=${publicationId}&reoccurrenceTime=${reoccurrence}&language=${language}`;
     PostData(uri);
@@ -80,7 +86,7 @@ function EnqueueTask(taskType, connectorName, publicationId){
 }
 
 function UpdateSettings(downloadLocation, komgaUrl, komgaAuth){
-    var uri = apiUri + `/Settings/Update?downloadLocation=${downloadLocation}&komgaUrl=${komgaAuth}&komgaAuth=${komgaAuth}`;
+    var uri = apiUri + `/Settings/Update?downloadLocation=${downloadLocation}&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
     PostData(uri);
 }
 
diff --git a/Website/index.html b/Website/index.html
index 6edce65..2a65505 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -80,13 +80,16 @@
   </viewport>
   
   <settingstab id="settingstab">
-    <p>Download Location: <span id="downloadLocation"></span></p>
+    <span class="title">Download Location:</span>
+    <span id="downloadLocation"></span>
     <komga-settings>
+      <span class="title">Komga</span>
+      <div>Configured: <span id="komgaConfigured">✅❌</span></div>
       <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
       <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
       <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
-      <label for="komgaUpdateTime">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01">
-      <input type="submit" value="Update" onclick="UpdateSettingsClick()">;
+      <div><label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01"></div>
+      <input type="submit" value="Update" onclick="UpdateSettingsClick()">
     </komga-settings>
   </settingstab>
   
diff --git a/Website/interaction.js b/Website/interaction.js
index 8fb1ccf..13957d0 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -40,13 +40,14 @@ const publicationDelete = document.querySelector("publication-delete");
 const publicationAdd = document.querySelector("publication-add");
 const closetaskpopup = document.querySelector("#closePopupImg");
 const settingDownloadLocation = document.querySelector("#downloadLocation");
-const settingKomgaUrl = document.querySelector("#komgaURL");
+const settingKomgaUrl = document.querySelector("#komgaUrl");
 const settingKomgaUser = document.querySelector("#komgaUsername");
 const settingKomgaPass = document.querySelector("#komgaPassword");
 const settingKomgaTime = document.querySelector("#komgaUpdateTime");
+const settingKomgaConfigured = document.querySelector("#komgaConfigured");
 
 
-settingsCog.addEventListener("click", () => slide());
+settingsCog.addEventListener("click", () => OpenSettings());
 closetaskpopup.addEventListener("click", () => HideAddTaskPopup());
 document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup());
 document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
@@ -203,20 +204,47 @@ const fadeInTiming = {
     fill: "forwards"
 }
 
+function OpenSettings(){
+    GetSettingsClick();
+    slide();
+}
+
 function GetSettingsClick(){
+    settingKomgaUrl.value = "";
+    settingKomgaUser.value = "";
+    settingKomgaPass.value = "";
     
+    GetSettings().then(json => {
+        console.log(json);
+        settingDownloadLocation.innerText = json.downloadLocation;
+        if(json.komga != null)
+            settingKomgaUrl.placeholder = json.komga.baseUrl;
+    });
+    
+    GetKomgaTask().then(json => {
+        if(json.length > 0)
+            settingKomgaConfigured.innerText = "✅";
+        else
+            settingKomgaConfigured.innerText = "❌";
+    });
 }
 
 function UpdateSettingsClick(){
-    var auth = atob(`${settingKomgaUser.value}:${settingKomgaPass.value}`)
-    UpdateSettings(settingDownloadLocation.value, settingKomgaUrl.value, auth);
+    var auth = utf8_to_b64(`${settingKomgaUser.value}:${settingKomgaPass.value}`);
+    console.log(auth);
+    UpdateSettings("", settingKomgaUrl.value, auth);
     CreateTask("UpdateKomgaLibrary", settingKomgaTime.value, "","","");
+    setTimeout(() => GetSettingsClick(), 500);
+}
+
+function utf8_to_b64( str ) {
+    return window.btoa(unescape(encodeURIComponent( str )));
 }
 
 //Resets the tasks shown
 ResetContent();
 //Get Tasks and show them
-GetTasks()
+GetDownloadTasks()
     .then(json => json.forEach(task => {
         var publication = CreatePublication(task.publication, task.connectorName);
         publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event, false));
@@ -227,7 +255,7 @@ GetTasks()
 setInterval(() => {
     //Tasks from API
     var cTasks = [];
-    GetTasks()
+    GetDownloadTasks()
         .then(json => json.forEach(task => cTasks.push(task)))
         .then(() => {
             //Only update view if tasks-amount has changed
diff --git a/Website/style.css b/Website/style.css
index e9220bf..70a2604 100644
--- a/Website/style.css
+++ b/Website/style.css
@@ -123,6 +123,36 @@ settingstab{
     height: calc(100% - var(--topbar-height) - 40px);
     margin-bottom: 10px;
     border-radius: 5px 0 0 5px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+settingstab > * {
+    margin: 0 20px;
+}
+
+settingstab .title {
+    font-size: 14pt;
+    font-weight: bolder;
+    margin-top: 20px;
+}
+
+komga-settings {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+komga-settings > * {
+    margin: 2px 0;
+}
+
+komga-settings input {
+    padding: 3px;
+    border-radius: 3px;
+    border: 0;
 }
 
 #addPublication {