Merge branch 'Website'

2023-05-24 21:52:31 +02:00 · 2023-05-24 21:52:31 +02:00 · 32dc58715e
commit 32dc58715e
parent add0583776 6fed0e5473
4 changed files with 144 additions and 50 deletions
--- 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);
 }

--- a/Website/index.html
+++ b/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>
--- a/Website/interaction.js
+++ b/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,30 +68,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 +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()
-    //.then(json => console.log(json))
+//Get Tasks and show them
+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()
-        //.then(json => console.log(json))
+    GetDownloadTasks()
        .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));
--- 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 {