Website/apiConnector.js

@@ -3,15 +3,6 @@
 if(getCookie("apiUri") != ""){
     apiUri = getCookie("apiUri");
 }
-setCookie("apiUri", apiUri);
-
-function setCookie(cname, cvalue) {
-  const d = new Date();
-  d.setTime(d.getTime() + (365*24*60*60*1000));
-  let expires = "expires="+ d.toUTCString();
-  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;samesite=strict";
-}
-
 function getCookie(cname) {
     let name = cname + "=";
     let decodedCookie = decodeURIComponent(document.cookie);
@@ -87,12 +78,6 @@ async function GetWaitingJobs(){
     return json;
 }
 
-async function GetMonitorJobs(){
-  var uri = `${apiUri}/Jobs/MonitorJobs`;
-  let json = await GetData(uri);
-  return json;
-}
-
 async function GetProgress(jobId){
     var uri = `${apiUri}/Jobs/Progress?jobId=${jobId}`;
     let json = await GetData(uri);
@@ -139,23 +124,18 @@ function CreateDownloadNewChaptersJob(connector, internalId){
     PostData(uri);
 }
 
-function StartJob(jobId){
-    var uri = `${apiUri}/Jobs/StartNow?jobId=${jobId}`;
-    PostData(uri);
-}
-
 function UpdateDownloadLocation(downloadLocation){
     var uri = `${apiUri}/Settings/UpdateDownloadLocation?downloadLocation=${downloadLocation}`;
     PostData(uri);	
 }
 
 function UpdateKomga(komgaUrl, komgaAuth){
-    var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
+    var uri = `/LibraryManagers/Update?libraryManager=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
     PostData(uri);
 }
 
-function UpdateKavita(kavitaUrl, kavitaUsername, kavitaPassword){
-    var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword={kavitaPassword}`;
+function UpdateKavita(kavitaUrl, kavitaUser, kavitaPass){
+    var uri = `/LibraryManagers/Update?libraryManager=Kavita&kavitaUrl=${kavitaUrl}&kavitaUser=${kavitaUser}&kavitaPass={kavitaPass}`;
     PostData(uri);
 }
 

Website/index.html

@@ -33,9 +33,81 @@
         </publication>
       </content>
       
+      <popup id="selectPublicationPopup">
+        <blur-background id="blurBackgroundTaskPopup"></blur-background>
+        <popup-window>
+          <popup-title>Select Publication</popup-title>
+          <popup-content>
+            <div>
+              <label for="connectors">Connector</label>
+              <select id="connectors">
+                <option value=""></option>
+              </select>
+            </div>
+            <div>
+              <label for="searchPublicationQuery">Search Title</label><input id="searchPublicationQuery" type="text"></addtask-setting>
+            </div>
+            <input type="submit" value="Search" style="font-weight: bolder" onclick="NewSearch();">
+          </popup-content>
+          <div id="taskSelectOutput"></div>
+        </popup-window>
+      </popup>
+      
+      <popup id="createMonitorTaskPopup">
+        <blur-background id="blurBackgroundCreateMonitorTaskPopup"></blur-background>
+        <popup-window>
+          <popup-title>Create Task: Monitor Publication</popup-title>
+          <popup-content>
+            <div>
+              <span>Run every</span>
+              <label for="hours"></label><input id="hours" type="number" value="3" min="0" max="23"><span>hours</span>
+              <label for="minutes"></label><input id="minutes" type="number" value="0" min="0" max="59"><span>minutes</span>
+              <input type="submit" value="Create" onclick="AddMonitorTask()">
+            </div>
+          </popup-content>
+        </popup-window>
+      </popup>
+      
+      <popup id="createDownloadChaptersTask">
+        <blur-background id="blurBackgroundCreateDownloadChaptersTask"></blur-background>
+        <popup-window>
+          <popup-title>Create Task: Download Chapter(s)</popup-title>
+          <popup-content>
+            <div>
+              <label for="selectedChapters">Chapters:</label><input id="selectedChapters" placeholder="Select"><input type="submit" value="Select" onclick="DownloadChapterTaskClick()">
+            </div>
+            <div id="chapterOutput">
+              
+            </div>
+          </popup-content>
+        </popup-window>
+      </popup>
+
+      <popup id="publicationViewerPopup">
+        <blur-background id="blurBackgroundPublicationPopup"></blur-background>
+        <publication-viewer>
+          <img id="pubviewcover" src="media/cover.jpg" alt="cover">
+          <publication-information>
+            <publication-name id="publicationViewerName">Tensei Pandemic</publication-name>
+            <publication-tags id="publicationViewerTags"></publication-tags>
+            <publication-author id="publicationViewerAuthor">Imamura Hinata</publication-author>
+            <publication-description id="publicationViewerDescription">Imamura Hinata is a high school boy with a cute appearance.
+              Since his trauma with the first love, he wanted to be more manly than anybody else. But one day he woke up to something different…
+              The total opposite of his ideal male body!
+              Pandemic love comedy!
+            </publication-description>
+            <publication-interactions>
+              <publication-starttask>Start Task ▶️</publication-starttask>
+              <publication-delete>Delete Task ❌</publication-delete>
+              <publication-add id="createMonitorTaskButton">Monitor ➕</publication-add>
+              <publication-add id="createDownloadChapterTaskButton">Download Chapter ➕</publication-add>
+            </publication-interactions>
+          </publication-information>
+        </publication-viewer>
+      </popup>
+      
       <popup id="settingsPopup">
-        <blur-background id="blurBackgroundSettingsPopup" onclick="
-    settingsPopup.style.display = 'none';"></blur-background>
+        <blur-background id="blurBackgroundSettingsPopup"></blur-background>
         <popup-window>
           <popup-title>Settings</popup-title>
           <popup-content>
@@ -73,36 +145,23 @@
               <label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text">
             </div>
             <div>
-              <input type="submit" value="Update" onclick="UpdateSettings()">
+              <label for="libraryUpdateTime" style="margin-right: 5px;">Update Time</label><input id="libraryUpdateTime" type="time" value="00:01:00" step="10">
+              <input type="submit" value="Update" onclick="UpdateLibrarySettings()">
             </div>
           </popup-content>
         </popup-window>
       </popup>
-		
-	  <popup id="publicationViewerPopup">
-        <blur-background id="blurBackgroundPublicationPopup"></blur-background>
-        <publication-viewer>
-          <img id="pubviewcover" src="media/cover.jpg" alt="cover">
-          <publication-information>
-            <publication-name id="publicationViewerName">Tensei Pandemic</publication-name>
-            <publication-tags id="publicationViewerTags"></publication-tags>
-            <publication-author id="publicationViewerAuthor">Imamura Hinata</publication-author>
-            <publication-description id="publicationViewerDescription">Imamura Hinata is a high school boy with a cute appearance.
-              Since his trauma with the first love, he wanted to be more manly than anybody else. But one day he woke up to something different…
-              The total opposite of his ideal male body!
-              Pandemic love comedy!
-            </publication-description>
-            <publication-interactions>
-              <publication-starttask>Start Task ▶️</publication-starttask>
-              <publication-delete>Delete Task ❌</publication-delete>
-              <publication-add id="createMonitorTaskButton">Monitor ➕</publication-add>
-              <publication-add id="createDownloadChapterTaskButton">Download Chapter ➕</publication-add>
-            </publication-interactions>
-          </publication-information>
-        </publication-viewer>
+      
+      <popup id="downloadTasksPopup">
+        <blur-background id="blurBackgroundTasksQueuePopup"></blur-background>
+        <popup-window>
+          <popup-title>Task Progress</popup-title>
+          <popup-content>
+            
+          </popup-content>
+        </popup-window>
       </popup>
     </viewport>
-	  
     <footer>
       <div onclick="ShowTasksQueue();">
         <img src="media/running.svg" alt="running"><div id="tasksRunningTag">0</div>

Website/interaction.js

@@ -1,37 +1,22 @@
-let jobs = [];
-let notificationConnectorTypes = [];
-let libraryConnectorTypes = [];
-
-function Setup(){
-  GetAvailableNotificationConnectors().then((json) => {
-    json.forEach(connector => {
-      notificationConnectorTypes[connector.Key] = connector.Value;
-    });
-  });
-
-  GetAvailableLibraryConnectors().then((json) => {
-    json.forEach(connector => {
-      libraryConnectorTypes[connector.Key] = connector.Value;
-    });
-  });
-  
-  GetMonitorJobs().then((json) => {
-    json.forEach(job => {
-      if(!jobs.includes(job)){
-        jobs.push(job);
-      }
-    });
-  });
-}
-Setup();
-
+let publications = [];
+let tasks = [];
+let toEditId;
 
 const searchBox = document.querySelector("#searchbox");
+const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
+const selectPublication = document.querySelector("#taskSelectOutput");
+const connectorSelect = document.querySelector("#connectors");
 const settingsPopup = document.querySelector("#settingsPopup");
 const settingsCog = document.querySelector("#settingscog");
+const selectRecurrence = document.querySelector("#selectReccurrence");
 const tasksContent = document.querySelector("content");
+const selectPublicationPopup = document.querySelector("#selectPublicationPopup");
 const createMonitorTaskButton = document.querySelector("#createMonitorTaskButton");
 const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterTaskButton");
+const createMonitorTaskPopup = document.querySelector("#createMonitorTaskPopup");
+const createDownloadChaptersTask = document.querySelector("#createDownloadChaptersTask");
+const chapterOutput = document.querySelector("#chapterOutput");
+const selectedChapters = document.querySelector("#selectedChapters");
 const publicationViewerPopup = document.querySelector("#publicationViewerPopup");
 const publicationViewerWindow = document.querySelector("publication-viewer");
 const publicationViewerDescription = document.querySelector("#publicationViewerDescription");
@@ -51,28 +36,89 @@ const settingKavitaPass = document.querySelector("#kavitaPassword");
 const settingGotifyUrl = document.querySelector("#gotifyUrl");
 const settingGotifyAppToken = document.querySelector("#gotifyAppToken");
 const settingLunaseaWebhook = document.querySelector("#lunaseaWebhook");
+const libraryUpdateTime = document.querySelector("#libraryUpdateTime");
 const settingKomgaConfigured = document.querySelector("#komgaConfigured");
 const settingKavitaConfigured = document.querySelector("#kavitaConfigured");
 const settingGotifyConfigured = document.querySelector("#gotifyConfigured");
 const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured");
 const settingApiUri = document.querySelector("#settingApiUri");
+const tagTasksRunning = document.querySelector("#tasksRunningTag");
+const tagTasksQueued = document.querySelector("#tasksQueuedTag");
+const downloadTasksPopup = document.querySelector("#downloadTasksPopup");
+const downloadTasksOutput = downloadTasksPopup.querySelector("popup-content");
 
-ResetContent();
-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");
-    plus.innerText = "+";
-    add.appendChild(plus);
-    add.addEventListener("click", () => ShowNewTaskWindow());
-    tasksContent.appendChild(add);
+searchbox.addEventListener("keyup", (event) => FilterResults());
+settingsCog.addEventListener("click", () => OpenSettings());
+document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => settingsPopup.style.display = "none");
+document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => selectPublicationPopup.style.display = "none");
+document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
+document.querySelector("#blurBackgroundCreateMonitorTaskPopup").addEventListener("click", () => createMonitorTaskPopup.style.display = "none");
+document.querySelector("#blurBackgroundCreateDownloadChaptersTask").addEventListener("click", () => createDownloadChaptersTask.style.display = "none");
+document.querySelector("#blurBackgroundTasksQueuePopup").addEventListener("click", () => downloadTasksPopup.style.display = "none");
+selectedChapters.addEventListener("keypress", (event) => {
+    if(event.key === "Enter"){
+        DownloadChapterTaskClick();
+    }
+})
+publicationDelete.addEventListener("click", () => DeleteTaskClick());
+createMonitorTaskButton.addEventListener("click", () => {
+    HidePublicationPopup();
+    createMonitorTaskPopup.style.display = "block";
+});
+createDownloadChapterTaskButton.addEventListener("click", () => {
+    HidePublicationPopup();
+    OpenDownloadChapterTaskPopup();
+});
+publicationTaskStart.addEventListener("click", () => StartTaskClick());
+searchPublicationQuery.addEventListener("keypress", (event) => {
+    if(event.key === "Enter"){
+        NewSearch();
+    }
+});
+
+
+let availableConnectors;
+GetAvailableControllers()
+    .then(json => availableConnectors = json)
+    .then(json => 
+        json.forEach(connector => {
+            var option = document.createElement('option');
+            option.value = connector;
+            option.innerText = connector;
+            connectorSelect.appendChild(option);
+        })
+    );
+
+
+function NewSearch(){
+    //Disable inputs
+    connectorSelect.disabled = true;
+    searchPublicationQuery.disabled = true;
+    //Waitcursor
+    document.body.style.cursor = "wait";
+
+    //Empty previous results
+    selectPublication.replaceChildren();
+    GetPublicationFromConnector(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
+            connectorSelect.disabled = false;
+            searchPublicationQuery.disabled = false;
+            //Cursor
+            document.body.style.cursor = "initial";
+        });
 }
 
-//Returns a new "Publication" Item to display in the jobs section
+//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);
@@ -93,6 +139,78 @@ function CreatePublication(publication, connector){
     return publicationElement;
 }
 
+function AddMonitorTask(){
+    var hours = document.querySelector("#hours").value;
+    var minutes = document.querySelector("#minutes").value;
+    CreateMonitorTask(connectorSelect.value, toEditId, `${hours}:${minutes}:00`, "en");
+    HidePublicationPopup();
+    createMonitorTaskPopup.style.display = "none";
+    selectPublicationPopup.style.display = "none";
+}
+
+function OpenDownloadChapterTaskPopup(){
+    selectedChapters.value = "";
+    chapterOutput.replaceChildren();
+    createDownloadChaptersTask.style.display = "block";
+    GetChapters(toEditId, connectorSelect.value, true, "en").then((json) => {
+        var i = 0;
+        json.forEach(chapter => {
+            var chapterDom = document.createElement("div");
+            var indexDom = document.createElement("span");
+            indexDom.className = "index";
+            indexDom.innerText = i++;
+            chapterDom.appendChild(indexDom);
+            
+            var volDom = document.createElement("span");
+            volDom.className = "vol";
+            volDom.innerText = chapter.volumeNumber;
+            chapterDom.appendChild(volDom);
+            
+            var chDom = document.createElement("span");
+            chDom.className = "ch";
+            chDom.innerText = chapter.chapterNumber;
+            chapterDom.appendChild(chDom);
+            
+            var titleDom = document.createElement("span");
+            titleDom.innerText = chapter.name;
+            chapterDom.appendChild(titleDom);
+            chapterOutput.appendChild(chapterDom);
+        });
+    });
+}
+
+function DownloadChapterTaskClick(){
+    CreateDownloadChaptersTask(connectorSelect.value, toEditId, selectedChapters.value, "en");
+    HidePublicationPopup();
+    createDownloadChaptersTask.style.display = "none";
+    selectPublicationPopup.style.display = "none";
+}
+
+function DeleteTaskClick(){
+    taskToDelete = tasks.filter(tTask => tTask.publication.internalId === toEditId)[0];
+    DeleteTask("MonitorPublication", taskToDelete.connectorName, toEditId);
+    HidePublicationPopup();
+}
+
+function StartTaskClick(){
+    var toEditTask = tasks.filter(task => task.publication.internalId == toEditId)[0];
+    StartTask("MonitorPublication", toEditTask.connectorName, toEditId);
+    HidePublicationPopup();
+}
+
+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");
+    plus.innerText = "+";
+    add.appendChild(plus);
+    add.addEventListener("click", () => ShowNewTaskWindow());
+    tasksContent.appendChild(add);
+}
 function ShowPublicationViewerWindow(publicationId, event, add){
     //Show popup
     publicationViewerPopup.style.display = "block";
@@ -136,9 +254,108 @@ function HidePublicationPopup(){
     publicationViewerPopup.style.display = "none";
 }
 
-searchBox.addEventListener("keyup", () => FilterResults());
+function ShowNewTaskWindow(){
+    selectPublication.replaceChildren();
+    searchPublicationQuery.value = "";
+    selectPublicationPopup.style.display = "flex";
+}
+
+
+const fadeIn = [
+    { opacity: "0" },
+    { opacity: "1" }
+];
+
+const fadeInTiming = {
+    duration: 50,
+    iterations: 1,
+    fill: "forwards"
+}
+
+function OpenSettings(){
+    GetSettingsClick();
+    settingsPopup.style.display = "flex";
+}
+
+function GetSettingsClick(){
+    settingApiUri.value = "";
+    settingKomgaUrl.value = "";
+    settingKomgaUser.value = "";
+    settingKomgaPass.value = "";
+    settingKomgaConfigured.innerText = "❌";
+    settingKavitaUrl.value = "";
+    settingKavitaUser.value = "";
+    settingKavitaPass.value = "";
+    settingKavitaConfigured.innerText = "❌";
+    settingGotifyUrl.value = "";
+    settingGotifyAppToken.value = "";
+    settingGotifyConfigured.innerText = "❌";
+    settingLunaseaWebhook.value = "";
+    settingLunaseaConfigured.innerText = "❌";
+    
+    settingApiUri.placeholder = apiUri;
+    
+    GetSettings().then(json => {
+        settingDownloadLocation.innerText = json.downloadLocation;
+        json.libraryManagers.forEach(lm => {
+           if(lm.libraryType == 0){
+               settingKomgaUrl.placeholder = lm.baseUrl;
+               settingKomgaUser.placeholder = "User";
+               settingKomgaPass.placeholder = "***";
+               settingKomgaConfigured.innerText = "✅";
+           } else if(lm.libraryType == 1){
+               settingKavitaUrl.placeholder = lm.baseUrl;
+               settingKavitaUser.placeholder = "User";
+               settingKavitaPass.placeholder = "***";
+               settingKavitaConfigured.innerText = "✅";
+           }
+        });
+        json.notificationManagers.forEach(nm => {
+           if(nm.notificationManagerType == 0){
+               settingGotifyConfigured.innerText = "✅";
+           } else if(nm.notificationManagerType == 1){
+               settingLunaseaConfigured.innerText = "✅";
+           }
+        });
+    });
+    
+    GetKomgaTask().then(json => {
+        if(json.length > 0)
+            libraryUpdateTime.value = json[0].reoccurrence;
+    });
+}
+
+function UpdateLibrarySettings(){
+    if(settingKomgaUrl.value != "" && settingKomgaUser.value != "" && settingKomgaPass.value != ""){
+        var auth = utf8_to_b64(`${settingKomgaUser.value}:${settingKomgaPass.value}`);
+        console.log(auth);
+        UpdateKomga(settingKomgaUrl.value, auth);
+    }
+    
+    if(settingKavitaUrl.value != "" && settingKavitaUser.value != "" && settingKavitaPass.value != ""){
+        UpdateKavita(settingKavitaUrl.value, settingKavitaUser.value, settingKavitaPass.value);
+    }
+    
+    if(settingGotifyUrl.value != "" && settingGotifyAppToken.value != ""){
+        UpdateGotify(settingGotifyUrl.value, settingGotifyAppToken.value);
+    }
+    
+    if(settingLunaseaWebhook.value != ""){
+        UpdateLunaSea(settingLunaseaWebhook.value);
+    }
+
+    if(settingApiUri.value != ""){
+        apiUri = settingApiUri.value;
+        document.cookie = `apiUri=${apiUri};`;
+    }
+    
+    setTimeout(() => GetSettingsClick(), 200);
+}
+
+function utf8_to_b64( str ) {
+    return window.btoa(unescape(encodeURIComponent( str )));
+}
 
-//Filter shown jobs
 function FilterResults(){
     if(searchBox.value.length > 0){
         tasksContent.childNodes.forEach(publication => {
@@ -161,119 +378,148 @@ function FilterResults(){
     }
 }
 
-settingsCog.addEventListener("click", () => {
-  OpenSettings();
-  settingsPopup.style.display = "flex";
-});
+function ShowTasksQueue(){
 
-settingKomgaUrl.addEventListener("keypress", (event) => { { if(event.key === "Enter") UpdateSettings(); } });
-settingKomgaUser.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingKomgaPass.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingKavitaUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingKavitaUser.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingKavitaPass.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingGotifyUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingGotifyAppToken.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingLunaseaWebhook.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingApiUri.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
+    downloadTasksOutput.replaceChildren();
+    GetRunningTasks()
+        .then(json => {
+            tagTasksRunning.innerText = json.length;
+            json.forEach(task => {
+                if(task.task == 2 || task.task == 4) {
+                    downloadTasksOutput.appendChild(CreateProgressChild(task));
+                    document.querySelector(`#progress${GetValidSelector(task.taskId)}`).value = task.progress;
+                    var finishedHours = task.executionApproximatelyRemaining.split(':')[0];
+                    var finishedMinutes = task.executionApproximatelyRemaining.split(':')[1];
+                    var finishedSeconds = task.executionApproximatelyRemaining.split(':')[2].split('.')[0];
+                    document.querySelector(`#progressStr${GetValidSelector(task.taskId)}`).innerText = `${finishedHours}:${finishedMinutes}:${finishedSeconds}`;
+                }
+            });
+        });
 
-function OpenSettings(){
-  settingGotifyConfigured.innerText = "❌";
-  settingLunaseaConfigured.innerText = "❌";
-  settingKavitaConfigured.innerText = "❌";
-  settingKomgaConfigured.innerText = "❌";
-  settingKomgaUrl.value = "";
-  settingKomgaUser.value = "";
-  settingKomgaPass.value = "";
-  settingKavitaUrl.value = "";
-  settingKavitaUser.value = "";
-  settingKavitaPass.value = "";
-  settingGotifyUrl.value = "";
-  settingGotifyAppToken.value = "";
-  settingLunaseaWebhook.value = "";
-  settingApiUri.value = "";
-  
-  GetSettings().then((json) => {
-    //console.log(json);
-    settingDownloadLocation.innerText = json.downloadLocation;
-    settingApiUri.placeholder = apiUri;
-  });
-  GetLibraryConnectors().then((json) => {
-    //console.log(json);
-    json.forEach(connector => {
-      switch(libraryConnectorTypes[connector.libraryType]){
-        case "Kavita":
-          settingKavitaConfigured.innerText = "✅";
-          settingKavitaUrl.placeholder = connector.baseUrl;
-          settingKavitaUser.placeholder = "***";
-          settingKavitaPass.placeholder = "***";
-          break;
-        case "Komga":
-          settingKomgaConfigured.innerText = "✅";
-          settingKomgaUrl.placeholder = connector.baseUrl;
-          settingKomgaUser.placeholder = "***";
-          settingKomgaPass.placeholder = "***";
-          break;
-        default:
-          console.log("Unknown type");
-          console.log(connector);
-          break;
-      }
+    GetQueue()
+        .then(json => {
+            tagTasksQueued.innerText = json.length;
+            json.forEach(task => {
+                downloadTasksOutput.appendChild(CreateProgressChild(task));
+            });
+        });
+    downloadTasksPopup.style.display = "flex";
+}
+
+function CreateProgressChild(task){
+    var child = document.createElement("div");
+    var img = document.createElement('img');
+    img.src = `imageCache/${task.publication.coverFileNameInCache}`;
+    child.appendChild(img);
+    
+    var name = document.createElement("span");
+    name.innerText = task.publication.sortName;
+    name.className = "pubTitle";
+    child.appendChild(name);
+
+
+    var progress = document.createElement("progress");
+    progress.id = `progress${GetValidSelector(task.taskId)}`;
+    child.appendChild(progress);
+    
+    var progressStr = document.createElement("span");
+    progressStr.innerText = " \t∞";
+    progressStr.className = "progressStr";
+    progressStr.id = `progressStr${GetValidSelector(task.taskId)}`;
+    child.appendChild(progressStr);
+    
+    if(task.chapter != undefined){
+        var chapterNumber = document.createElement("span");
+        chapterNumber.className = "chapterNumber";
+        chapterNumber.innerText = `Vol.${task.chapter.volumeNumber} Ch.${task.chapter.chapterNumber}`;
+        child.appendChild(chapterNumber);
+        
+        var chapterName = document.createElement("span");
+        chapterName.className = "chapterName";
+        chapterName.innerText = task.chapter.name;
+        child.appendChild(chapterName);
+    }
+    
+    
+    return child;
+}
+
+//Resets the tasks shown
+ResetContent();
+downloadTasksOutput.replaceChildren();
+//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));
+        tasksContent.appendChild(publication);
+        tasks.push(task);
+    }));
+
+GetRunningTasks()
+    .then(json => {
+        tagTasksRunning.innerText = json.length;
+        json.forEach(task => {
+            downloadTasksOutput.appendChild(CreateProgressChild(task));
+        });
     });
-  });
-  GetNotificationConnectors().then((json) => {
-    //console.log(json);
-    json.forEach(connector => {
-      switch(notificationConnectorTypes[connector.notificationConnectorType]){
-        case "Gotify":
-          settingGotifyUrl.placeholder = connector.endpoint;
-          settingGotifyAppToken.placeholder = "***";
-          settingGotifyConfigured.innerText = "✅";
-          break;
-        case "LunaSea":
-          settingLunaseaConfigured.innerText = "✅";
-          settingLunaseaWebhook.placeholder = connector.id;
-          break;
-        default:
-          console.log("Unknown type");
-          console.log(connector);
-          break;
-      }
+
+GetQueue()
+    .then(json => {
+        tagTasksQueued.innerText = json.length;
+        json.forEach(task => {
+            downloadTasksOutput.appendChild(CreateProgressChild(task));
+        });
+    })
+
+setInterval(() => {
+    //Tasks from API
+    var cTasks = [];
+    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));
+                    tasksContent.appendChild(publication);
+                })
+
+                tasks = cTasks;
+            }
+        }
+    );
+
+    GetRunningTasks()
+        .then(json => {
+           tagTasksRunning.innerText = json.length;
+        });
+    
+    GetQueue()
+        .then(json => {
+            tagTasksQueued.innerText = json.length;
+        });
+}, 1000);
+
+setInterval(() => {
+    GetRunningTasks().then((json) => {
+        json.forEach(task => {
+            if(task.task == 2 || task.task == 4){
+                document.querySelector(`#progress${GetValidSelector(task.taskId)}`).value = task.progress;
+                var finishedHours = task.executionApproximatelyRemaining.split(':')[0];
+                var finishedMinutes = task.executionApproximatelyRemaining.split(':')[1];
+                var finishedSeconds = task.executionApproximatelyRemaining.split(':')[2].split('.')[0];
+                document.querySelector(`#progressStr${GetValidSelector(task.taskId)}`).innerText = `${finishedHours}:${finishedMinutes}:${finishedSeconds}`;
+            }
+        });
     });
-  });
-}
+},500);
 
-function UpdateSettings(){
-  if(settingApiUri.value != ""){
-    apiUri = settingApiUri.value;
-    setCookie("apiUri", apiUri);
-    Setup();
-  }
-  
-  if(settingKomgaUrl.value != "" &&
-     settingKomgaUser.value != "" &&
-     settingKomgaPass.value != ""){
-    UpdateKomga(settingKomgaUrl.value, utf8_to_b64(`${settingKomgaUser.value}:${settingKomgaPass.value}`));
-  }
-  
-  if(settingKavitaUrl.value != "" &&
-    settingKavitaUser.value != "" &&
-    settingKavitaPass.value != ""){
-    UpdateKavita(settingKavitaUrl.value, settingKavitaUser.value, settingKavitaPass.value);
-  }
-  
-  if(settingGotifyUrl.value != "" &&
-    settingGotifyAppToken.value != ""){
-    UpdateGotify(settingGotifyUrl.value, settingGotifyAppToken.value);
-  }
-  
-  if(settingLunaseaWebhook.value != ""){
-    UpdateLunaSea(settingLunaseaWebhook.value);
-  }
-  
-  OpenSettings();
-}
-
-function utf8_to_b64(str) {
-    return window.btoa(unescape(encodeURIComponent( str )));
-}
+function GetValidSelector(str){
+    var clean = [...str.matchAll(/[a-zA-Z0-9]*-*_*/g)];
+    return clean.join('');
+}