From f53dfb0822e9b5bce5b26e70d2cc9981970f9400 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Tue, 23 May 2023 15:15:29 +0200
Subject: [PATCH] update task select window #1

---
 Website/index.html     |  8 +++++-
 Website/interaction.js | 58 +++++++++++++++++++++++++++++++++++++-----
 Website/style.css      | 10 ++++++++
 3 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/Website/index.html b/Website/index.html
index f050e27..dbd566a 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -46,7 +46,13 @@
         </window-titlebar>
         <window-content>
           <label for="taskTypes">TaskType</label><select id="taskTypes"></select>
-          <label for="connectors">Connector</label><select id="connectors"></select>
+          <label for="selectReccurrence">Recurrence</label><input id="selectReccurrence" type="time" value="01:00" step="3600">
+          <label for="connectors">Connector</label>
+          <select id="connectors">
+            <option value=""></option>
+          </select>
+          <label for="searchPublicationQuery">Search:</label><input id="searchPublicationQuery" type="text">
+          <div id="taskSelectOutput"></div>
         </window-content>
       </addtask-window>
     </addtask-popup>
diff --git a/Website/interaction.js b/Website/interaction.js
index 454a766..2ab3a84 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -35,16 +35,60 @@ const connectorSelect = document.querySelector("#connectors");
 let availableConnectors;
 GetAvailableControllers()
     .then(json => availableConnectors = json)
-    .then(json => console.log(json));
-    /*.then(json => 
+    //.then(json => console.log(json))
+    .then(json => 
         json.forEach(connector => {
-        var option = document.createElement('option');
-        option.value = connector.name;
-        option.innerText = connector.name;
-        taskTypesSelect.appendChild(option);
-    }));*/
+            var option = document.createElement('option');
+            option.value = connector;
+            option.innerText = connector;
+            connectorSelect.appendChild(option);
+        })
+    );
 
+const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
+const selectPublication = document.querySelector("#taskSelectOutput");
+searchPublicationQuery.addEventListener("keypress", (event) => {
+   if(event.key === "Enter"){
+       GetPublication(connectorSelect.value, searchPublicationQuery.value)
+           //.then(json => console.log(json));
+           .then(json => 
+               json.forEach(publication => {
+                   var option = CreatePublication(publication);
+                   option.addEventListener("click", () => {
+                       CreateNewMangaDownloadTask(
+                           taskTypesSelect.select,
+                           connectorSelect.value,
+                           publication.internalId
+                           );
+                   });
+                   selectPublication.appendChild(option);
+               }
+           ));
+   } 
+});
 
+function CreatePublication(publcationData){
+    var option = document.createElement('publication');
+    var img = document.createElement('img');
+    img.src = publication.posterUrl;
+    option.appendChild(img);
+    var info = document.createElement('publication-information');
+    var connectorName = document.createElement('connector-name');
+    connectorName.innerText = connectorSelect.value;
+    connectorName.className = "pill";
+    info.appendChild(connectorName);
+    var publicationName = document.createElement('publication-name');
+    publicationName.innerText = publication.sortName;
+    info.appendChild(publicationName);
+    option.appendChild(info);
+    return option;
+}
+
+const selectRecurrence = document.querySelector("#selectReccurrence");
+function CreateNewMangaDownloadTask(taskType, connectorName, publicationId){
+    CreateTask(taskType, selectRecurrence.value, connectorName, publicationId, "en");
+    selectPublication.innerHTML = "";
+}
 
 const settingsTab = document.querySelector("#settingstab");
 const settingsCog = document.querySelector("#settingscog");
diff --git a/Website/style.css b/Website/style.css
index efac94f..70a1638 100644
--- a/Website/style.css
+++ b/Website/style.css
@@ -270,4 +270,14 @@ window-content {
     width: 100%;
     top: 60px;
     left: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+#taskSelectOutput{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: start;
+    align-content: start;
 }
\ No newline at end of file