Search Button on AddTask

Website/index.html

@@ -53,6 +53,7 @@
               </select>
             </addtask-setting>
             <addtask-setting><label for="searchPublicationQuery">Search Title</label><input id="searchPublicationQuery" type="text"></addtask-setting>
+            <input type="submit" value="Search" onclick="NewSearch();">
           </addtask-settings>
           <div id="taskSelectOutput"></div>
         </window-content>
@@ -79,7 +80,14 @@
   </viewport>
   
   <settingstab id="settingstab">
-
+    <p>Download Location: <span id="downloadLocation"></span></p>
+    <komga-settings>
+      <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()">;
+    </komga-settings>
   </settingstab>
   
   <script src="apiConnector.js"></script>

Website/interaction.js

@@ -22,7 +22,6 @@ let publications = [];
 let tasks = [];
 let toEditId;
 
-const taskTypesSelect = document.querySelector("#taskTypes")
 const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
 const selectPublication = document.querySelector("#taskSelectOutput");
 const connectorSelect = document.querySelector("#connectors");
@@ -40,6 +39,12 @@ const pubviewcover = document.querySelector("#pubviewcover");
 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 settingKomgaUser = document.querySelector("#komgaUsername");
+const settingKomgaPass = document.querySelector("#komgaPassword");
+const settingKomgaTime = document.querySelector("#komgaUpdateTime");
+
 
 settingsCog.addEventListener("click", () => slide());
 closetaskpopup.addEventListener("click", () => HideAddTaskPopup());
@@ -48,22 +53,9 @@ document.querySelector("#blurBackgroundPublicationPopup").addEventListener("clic
 publicationDelete.addEventListener("click", () => DeleteTaskClick());
 publicationAdd.addEventListener("click", () => AddTaskClick());
 
-/*
-let availableTaskTypes;
-GetTaskTypes()
-    .then(json => availableTaskTypes = json)
-    .then(json => 
-        json.forEach(taskType => {
-            var option = document.createElement('option');
-            option.value = taskType;
-            option.innerText = taskType;
-            taskTypesSelect.appendChild(option);
-        }));*/
-
 let availableConnectors;
 GetAvailableControllers()
     .then(json => availableConnectors = json)
-    //.then(json => console.log(json))
     .then(json => 
         json.forEach(connector => {
             var option = document.createElement('option');
@@ -75,30 +67,37 @@ GetAvailableControllers()
 
 searchPublicationQuery.addEventListener("keypress", (event) => {
    if(event.key === "Enter"){
-       selectRecurrence.disabled = true;
-       connectorSelect.disabled = true;
-       searchPublicationQuery.disabled = true;
-       
-       selectPublication.replaceChildren();
-       GetPublication(connectorSelect.value, searchPublicationQuery.value)
-           //.then(json => console.log(json));
-           .then(json => 
-               json.forEach(publication => {
-                   var option = CreatePublication(publication, connectorSelect.value);
-                   option.addEventListener("click", (mouseEvent) => {
-                       ShowPublicationViewerWindow(publication.internalId, mouseEvent, true);
-                   });
-                   selectPublication.appendChild(option);
-               }
-           ))
-           .then(() => {
-               selectRecurrence.disabled = false;
-               connectorSelect.disabled = false;
-               searchPublicationQuery.disabled = false;
-           });
+       NewSearch();
    } 
 });
 
+function NewSearch(){
+    //Disable inputs
+    selectRecurrence.disabled = true;
+    connectorSelect.disabled = true;
+    searchPublicationQuery.disabled = true;
+
+    //Empty previous results
+    selectPublication.replaceChildren();
+    GetPublication(connectorSelect.value, searchPublicationQuery.value)
+        .then(json =>
+            json.forEach(publication => {
+                    var option = CreatePublication(publication, connectorSelect.value);
+                    option.addEventListener("click", (mouseEvent) => {
+                        ShowPublicationViewerWindow(publication.internalId, mouseEvent, true);
+                    });
+                    selectPublication.appendChild(option);
+                }
+            ))
+        .then(() => {
+            //Re-enable inputs
+            selectRecurrence.disabled = false;
+            connectorSelect.disabled = false;
+            searchPublicationQuery.disabled = false;
+        });
+}
+
+//Returns a new "Publication" Item to display in the tasks section
 function CreatePublication(publication, connector){
     var publicationElement = document.createElement('publication');
     publicationElement.setAttribute("id", publication.internalId);
@@ -131,7 +130,7 @@ function AddTaskClick(){
     HidePublicationPopup();
 }
 
-var slideIn = true;
+let slideIn = true;
 function slide() {
     if (slideIn)
         settingsTab.animate(slideInRight, slideInRightTiming);
@@ -141,7 +140,10 @@ function slide() {
 }
 
 function ResetContent(){
+    //Delete everything
     tasksContent.replaceChildren();
+    
+    //Add "Add new Task" Button
     var add = document.createElement("div");
     add.setAttribute("id", "addPublication")
     var plus = document.createElement("p");
@@ -151,16 +153,19 @@ function ResetContent(){
     tasksContent.appendChild(add);
 }
 function ShowPublicationViewerWindow(publicationId, event, add){
+    //Set position to mouse-position
     publicationViewerWindow.style.top = `${event.clientY - 60}px`;
     publicationViewerWindow.style.left = `${event.clientX}px`;
-    var publication = publications.filter(pub => pub.internalId === publicationId)[0];
     
+    //Edit information inside the window
+    var publication = publications.filter(pub => pub.internalId === publicationId)[0];
     publicationViewerName.innerText = publication.sortName;
     publicationViewerDescription.innerText = publication.description;
     publicationViewerAuthor.innerText = publication.author;
     pubviewcover.src = publication.posterUrl;
     toEditId = publicationId;
     
+    //Check what action should be listed
     if(add){
         publicationAdd.style.display = "block";
         publicationDelete.style.display = "none";
@@ -170,10 +175,14 @@ function ShowPublicationViewerWindow(publicationId, event, add){
         publicationDelete.style.display = "block";
     }
     
-    toEditId = publicationId;
+    //Show popup
     publicationViewerPopup.style.display = "block";
 }
 
+function HidePublicationPopup(){
+    publicationViewerPopup.style.display = "none";
+}
+
 function ShowNewTaskWindow(){
     selectPublication.replaceChildren();
     addTaskPopup.style.display = "block";
@@ -182,9 +191,6 @@ function HideAddTaskPopup(){
     addTaskPopup.style.display = "none";
 }
 
-function HidePublicationPopup(){
-    publicationViewerPopup.style.display = "none";
-}
 
 const fadeIn = [
     { opacity: "0" },
@@ -197,9 +203,20 @@ const fadeInTiming = {
     fill: "forwards"
 }
 
+function GetSettingsClick(){
+    
+}
+
+function UpdateSettingsClick(){
+    var auth = atob(`${settingKomgaUser.value}:${settingKomgaPass.value}`)
+    UpdateSettings(settingDownloadLocation.value, settingKomgaUrl.value, auth);
+    CreateTask("UpdateKomgaLibrary", settingKomgaTime.value, "","","");
+}
+
+//Resets the tasks shown
 ResetContent();
+//Get Tasks and show them
 GetTasks()
-    //.then(json => console.log(json))
     .then(json => json.forEach(task => {
         var publication = CreatePublication(task.publication, task.connectorName);
         publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event, false));
@@ -208,13 +225,16 @@ GetTasks()
     }));
 
 setInterval(() => {
+    //Tasks from API
     var cTasks = [];
     GetTasks()
-        //.then(json => console.log(json))
         .then(json => json.forEach(task => cTasks.push(task)))
         .then(() => {
+            //Only update view if tasks-amount has changed
             if(tasks.length != cTasks.length) {
+                //Resets the tasks shown
                 ResetContent();
+                //Add all currenttasks to view
                 cTasks.forEach(task => {
                     var publication = CreatePublication(task.publication, task.connectorName);
                     publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event, false));