From c685bd622ff5eac2dfb0189fba421053c6d1b23a Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Thu, 8 Jun 2023 19:25:28 +0200
Subject: [PATCH] Website: New task-Creation dialog Redesigned Settings dialog

---
 Website/index.html     | 136 ++++++++++++++----------
 Website/interaction.js | 104 +++++++++++++------
 Website/style.css      | 227 +++++++++++++++++++++--------------------
 3 files changed, 276 insertions(+), 191 deletions(-)

diff --git a/Website/index.html b/Website/index.html
index 1d6ad85..8d2ded2 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -25,36 +25,64 @@
           <p>+</p>
         </div>
         <publication>
-          <img src="media/cover.jpg">
+          <img alt="cover" src="media/cover.jpg">
           <publication-information>
             <connector-name class="pill">MangaDex</connector-name>
             <publication-name>Tensei Pandemic</publication-name>
           </publication-information>
         </publication>
       </content>
-
-      <popup id="addTaskPopup">
+      
+      <popup id="selectPublicationPopup">
         <blur-background id="blurBackgroundTaskPopup"></blur-background>
-        <addtask-window>
-          <window-titlebar>
-            <p>Add Task</p>
-            <img id="closePopupImg" src="media/close-x.svg" alt="Close">
-          </window-titlebar>
-          <window-content>
-            <addtask-settings>
-              <addtask-setting><label for="selectReccurrence">Recurrence</label><input id="selectReccurrence" type="time" value="01:00:00" step="3600"></addtask-setting>
-              <addtask-setting><label for="connectors">Connector</label>
-                <select id="connectors">
-                  <option value=""></option>
-                </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>
-        </addtask-window>
+        <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>
+              <p>Every</p>
+              <label for="hours">Hours: </label><input id="hours" type="number" value="3" min="0" max="23">
+              <label for="minutes">Minutes: </label><input id="minutes" type="number" value="0" min="0" max="59">
+              <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>
@@ -71,42 +99,46 @@
             <publication-interactions>
               <publication-starttask>Start Task ▶️</publication-starttask>
               <publication-delete>Delete Task ❌</publication-delete>
-              <publication-add>Add Task ➕</publication-add>
+              <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"></blur-background>
-        <settings>
-          <span style="font-weight: bold; text-align: center; font-size: 16pt;">Settings</span>
-          <div>
-            <p class="title">Download Location:</p>
-            <span id="downloadLocation"></span>
-          </div>
-          <div>
-            <p class="title">API-URI</p>
-            <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
-          </div>
-          <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">
-          </komga-settings>
-          <kavita-settings>
-            <span class="title">Kavita</span>
-            <div>Configured: <span id="kavitaConfigured">✅❌</span></div>
-            <label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
-            <label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
-            <label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
-          </kavita-settings>
-          <div>
-            <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>
-        </settings>
+        <popup-window>
+          <popup-title>Settings</popup-title>
+          <popup-content>
+            <div>
+              <p class="title">Download Location:</p>
+              <span id="downloadLocation"></span>
+            </div>
+            <div>
+              <p class="title">API-URI</p>
+              <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
+            </div>
+            <div>
+              <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>
+            <div>
+              <span class="title">Kavita</span>
+              <div>Configured: <span id="kavitaConfigured">✅❌</span></div>
+              <label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
+              <label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
+              <label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
+            </div>
+            <div>
+              <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>
     </viewport>
     <footer>
diff --git a/Website/interaction.js b/Website/interaction.js
index eec4a03..8aa47ca 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -10,7 +10,13 @@ const settingsPopup = document.querySelector("#settingsPopup");
 const settingsCog = document.querySelector("#settingscog");
 const selectRecurrence = document.querySelector("#selectReccurrence");
 const tasksContent = document.querySelector("content");
-const addTaskPopup = document.querySelector("#addTaskPopup");
+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");
@@ -19,9 +25,7 @@ const publicationViewerTags = document.querySelector("#publicationViewerTags");
 const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor");
 const pubviewcover = document.querySelector("#pubviewcover");
 const publicationDelete = document.querySelector("publication-delete");
-const publicationAdd = document.querySelector("publication-add");
 const publicationTaskStart = document.querySelector("publication-starttask");
-const closetaskpopup = document.querySelector("#closePopupImg");
 const settingDownloadLocation = document.querySelector("#downloadLocation");
 const settingKomgaUrl = document.querySelector("#komgaUrl");
 const settingKomgaUser = document.querySelector("#komgaUsername");
@@ -41,12 +45,25 @@ const tagTasksPopupContent = document.querySelector("footer-tag-content");
 
 searchbox.addEventListener("keyup", (event) => FilterResults());
 settingsCog.addEventListener("click", () => OpenSettings());
-document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => HideSettings());
-closetaskpopup.addEventListener("click", () => HideAddTaskPopup());
-document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup());
+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");
+selectedChapters.addEventListener("keypress", (event) => {
+    if(event.key === "Enter"){
+        DownloadChapterTaskClick();
+    }
+})
 publicationDelete.addEventListener("click", () => DeleteTaskClick());
-publicationAdd.addEventListener("click", () => AddTaskClick());
+createMonitorTaskButton.addEventListener("click", () => {
+    HidePublicationPopup();
+    createMonitorTaskPopup.style.display = "block";
+});
+createDownloadChapterTaskButton.addEventListener("click", () => {
+    HidePublicationPopup();
+    OpenDownloadChapterTaskPopup();
+})
 publicationTaskStart.addEventListener("click", () => StartTaskClick());
 settingApiUri.addEventListener("keypress", (event) => {
     if(event.key === "Enter"){
@@ -82,14 +99,10 @@ GetAvailableControllers()
 
 function NewSearch(){
     //Disable inputs
-    selectRecurrence.disabled = true;
     connectorSelect.disabled = true;
     searchPublicationQuery.disabled = true;
     //Waitcursor
     document.body.style.cursor = "wait";
-    selectRecurrence.style.cursor = "wait";
-    connectorSelect.style.cursor = "wait";
-    searchPublicationQuery.style.cursor = "wait";
 
     //Empty previous results
     selectPublication.replaceChildren();
@@ -105,14 +118,10 @@ function NewSearch(){
             ))
         .then(() => {
             //Re-enable inputs
-            selectRecurrence.disabled = false;
             connectorSelect.disabled = false;
             searchPublicationQuery.disabled = false;
             //Cursor
             document.body.style.cursor = "initial";
-            selectRecurrence.style.cursor = "initial";
-            connectorSelect.style.cursor = "initial";
-            searchPublicationQuery.style.cursor = "initial";
         });
 }
 
@@ -137,18 +146,57 @@ 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(){
+    createDownloadChaptersTask.style.display = "block";
+    GetChapters(toEditId, connectorSelect.value, "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("DownloadNewChapters", taskToDelete.connectorName, toEditId);
     HidePublicationPopup();
 }
 
-function AddTaskClick(){
-    CreateTask("DownloadNewChapters", selectRecurrence.value, connectorSelect.value, toEditId, "en")
-    HideAddTaskPopup();
-    HidePublicationPopup();
-}
-
 function StartTaskClick(){
     var toEditTask = tasks.filter(task => task.publication.internalId == toEditId)[0];
     StartTask("DownloadNewChapters", toEditTask.connectorName, toEditId);
@@ -194,12 +242,14 @@ function ShowPublicationViewerWindow(publicationId, event, add){
     
     //Check what action should be listed
     if(add){
-        publicationAdd.style.display = "initial";
+        createMonitorTaskButton.style.display = "initial";
+        createDownloadChapterTaskButton.style.display = "initial";
         publicationDelete.style.display = "none";
         publicationTaskStart.style.display = "none";
     }
     else{
-        publicationAdd.style.display = "none";
+        createMonitorTaskButton.style.display = "none";
+        createDownloadChapterTaskButton.style.display = "none";
         publicationDelete.style.display = "initial";
         publicationTaskStart.style.display = "initial";
     }
@@ -211,10 +261,7 @@ function HidePublicationPopup(){
 
 function ShowNewTaskWindow(){
     selectPublication.replaceChildren();
-    addTaskPopup.style.display = "block";
-}
-function HideAddTaskPopup(){
-    addTaskPopup.style.display = "none";
+    selectPublicationPopup.style.display = "flex";
 }
 
 
@@ -234,9 +281,6 @@ function OpenSettings(){
     settingsPopup.style.display = "flex";
 }
 
-function HideSettings(){
-    settingsPopup.style.display = "none";
-}
 
 function GetSettingsClick(){
     settingApiUri.value = "";
diff --git a/Website/style.css b/Website/style.css
index 4fbee8a..f7627da 100644
--- a/Website/style.css
+++ b/Website/style.css
@@ -147,46 +147,22 @@ content {
     align-content: start;
 }
 
-settings {
-    width: 50%;
-    background-color: var(--accent-color);
-    display: flex;
-    flex-direction: column;
-    z-index: 10;
-    position: absolute;
-    left: 25%;
-    top: 100px;
-    border-radius: 5px;
-    padding: 10px 0;
-}
-
 #settingsPopup{
     z-index: 10;
 }
 
-settings > * {
-    margin: 0 20%;
-}
-
-settings input {
-    margin: 3px 0;
-    padding: 3px;
-    border-radius: 3px;
-    border: 1px solid rgba(0,0,0,0.2);
-    width: 100%;
-}
-
-settings .title {
-    font-weight: bolder;
-    font-size: 14pt;
-    margin: 15px 0 2px 0;
-}
-
-komga-settings {
-    margin-top: 20px;
-    display: flex;
+#settingsPopup popup-content{
     flex-direction: column;
-    flex-wrap: nowrap;
+    align-items: start;
+    margin: 15px 10px;
+}
+
+#settingsPopup popup-content > * {
+    margin: 5px 10px;
+}
+
+#settingsPopup popup-content .title {
+    font-weight: bolder;
 }
 
 #addPublication {
@@ -281,6 +257,112 @@ popup{
     left: 0;
     position: fixed;
     z-index: 2;
+    flex-direction: column;
+}
+
+
+popup popup-window {
+    position: absolute;
+    z-index: 3;
+    left: 25%;
+    top: 100px;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--second-background-color);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+popup popup-window popup-title {
+    height: 30px;
+    font-size: 14pt;
+    font-weight: bolder;
+    padding: 5px 10px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    background-color: var(--primary-color);
+    color: var(--accent-color)
+}
+
+popup popup-window popup-content{
+    margin: 15px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+popup popup-window popup-content div > * {
+    margin: 2px 3px 0 0;
+}
+
+popup popup-window popup-content input, select {
+    padding: 3px 4px;
+    width: 130px;
+    border: 1px solid lightgrey;
+    background-color: var(--accent-color);
+    border-radius: 3px;
+}
+
+#selectPublicationPopup publication {
+    width: 150px;
+    height: 250px;
+}
+
+#createTaskPopup {
+    z-index: 7;
+}
+
+#createTaskPopup input {
+    height: 30px;
+    width: 200px;
+}
+
+#createMonitorTaskPopup, #createDownloadChaptersTask {
+    z-index: 9;
+}
+
+#createDownloadChaptersTask popup-content {
+    flex-direction: column;
+    align-items: start;
+}
+
+
+#createDownloadChaptersTask popup-content > * {
+    margin: 3px 0;
+}
+
+#createDownloadChaptersTask #chapterOutput {
+    max-height: 50vh;
+    overflow-y: scroll;
+}
+
+#createDownloadChaptersTask #chapterOutput .index{
+    display: inline-block;
+    width: 25px;
+}
+
+#createDownloadChaptersTask #chapterOutput .index::after{
+    content: ':';
+}
+
+#createDownloadChaptersTask #chapterOutput .vol::before{
+    content: 'Vol.';
+}
+
+#createDownloadChaptersTask #chapterOutput .vol{
+    display: inline-block;
+    width: 45px;
+}
+
+#createDownloadChaptersTask #chapterOutput .ch::before{
+    content: 'Ch.';
+}
+
+#createDownloadChaptersTask #chapterOutput .ch {
+    display: inline-block;
+    width: 60px;
 }
 
 blur-background {
@@ -292,79 +374,6 @@ blur-background {
     opacity: 0.5;
 }
 
-addtask-window {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    position: absolute;
-    left: 12.5%;
-    top: 15%;
-    width: 75%;
-    min-height: 70%;
-    max-height: 80%;
-    padding: 0;
-    background-color: var(--accent-color);
-    border-radius: 5px;
-}
-
-window-titlebar {
-    width: 100%;
-    height: 60px;
-    background-color: var(--primary-color);
-    border-radius: 5px 5px 0 0;
-    color: var(--accent-color);
-    display: flex block;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-}
-
-window-titlebar p {
-    margin: 0 30px;
-    font-size: 14pt;
-    font-weight: bolder;
-    letter-spacing: 1px;
-}
-
-window-titlebar #closePopupImg {
-    height: 70%;
-    cursor: pointer;
-    margin-right: 20px;
-    filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(115deg) brightness(116%) contrast(101%);
-}
-
-window-content {
-    display: flex;
-    flex-direction: column;
-    padding: 20px 5%;
-    overflow-x: scroll;
-}
-
-addtask-settings{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-addtask-settings select, addtask-settings input{
-    padding: 5px;
-    font-size: 10pt;
-    border: 1px solid rgba(0,0,0,0.2);
-    border-radius: 3px;
-    background-color: transparent;
-    margin: 10px 0;
-    width: 150px;
-}
-
-addtask-settings label {
-    font-weight: bolder;
-    margin: 0 5px;
-}
-
-addtask-settings addtask-setting{
-    margin: 0 15px;
-}
-
 #taskSelectOutput{
     display: flex;
     flex-direction: row;
@@ -512,7 +521,7 @@ footer-tag-popup::before{
     border-left: 10px solid transparent;
     border-top: 10px solid var(--second-background-color);
     border-bottom: 10px solid transparent;
-    left: 0px;
+    left: 0;
     bottom: -17px;
     border-radius: 0 0 0 5px;
 }
\ No newline at end of file