Merge branch 'Website'

Website/apiConnector.js

@@ -52,8 +52,8 @@ async function GetRunningTasks(){
     return json;
 }
 
-async function GetTasks(){
+async function GetDownloadTasks(){
-    var uri = apiUri + "/Tasks/GetList";
+    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);
 }
 

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,17 @@
   </viewport>
   
   <settingstab id="settingstab">
-
+    <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">
+      <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>
   
   <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,30 +39,24 @@ 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");
+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());
 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,13 +68,19 @@ GetAvailableControllers()
 
 searchPublicationQuery.addEventListener("keypress", (event) => {
    if(event.key === "Enter"){
+       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 => console.log(json));
         .then(json =>
             json.forEach(publication => {
                     var option = CreatePublication(publication, connectorSelect.value);
@@ -92,13 +91,14 @@ searchPublicationQuery.addEventListener("keypress", (event) => {
                 }
             ))
         .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 +131,7 @@ function AddTaskClick(){
     HidePublicationPopup();
 }
 
-var slideIn = true;
+let slideIn = true;
 function slide() {
     if (slideIn)
         settingsTab.animate(slideInRight, slideInRightTiming);
@@ -141,7 +141,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 +154,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 +176,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 +192,6 @@ function HideAddTaskPopup(){
     addTaskPopup.style.display = "none";
 }
 
-function HidePublicationPopup(){
-    publicationViewerPopup.style.display = "none";
-}
 
 const fadeIn = [
     { opacity: "0" },
@@ -197,9 +204,46 @@ const fadeInTiming = {
     fill: "forwards"
 }
 
+function OpenSettings(){
+    GetSettingsClick();
+    slide();
+}
+
+function GetSettingsClick(){
+    settingKomgaUrl.value = "";
+    settingKomgaUser.value = "";
+    settingKomgaPass.value = "";
+    
+    GetSettings().then(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 = 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();
-GetTasks()
+//Get Tasks and show them
-    //.then(json => console.log(json))
+GetDownloadTasks()
     .then(json => json.forEach(task => {
         var publication = CreatePublication(task.publication, task.connectorName);
         publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event, false));
@@ -208,13 +252,16 @@ GetTasks()
     }));
 
 setInterval(() => {
+    //Tasks from API
     var cTasks = [];
-    GetTasks()
+    GetDownloadTasks()
-        //.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));

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 {