From dd651adc1589ac838947aacfa00ad7ab92408107 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Tue, 23 May 2023 14:44:59 +0200
Subject: [PATCH] Add Task window

---
 Website/index.html        | 16 +++++++++
 Website/interaction.js    | 38 ++++++++++++++++++++-
 Website/media/close-x.svg |  4 +++
 Website/style.css         | 70 +++++++++++++++++++++++++++++++++++++--
 4 files changed, 125 insertions(+), 3 deletions(-)
 create mode 100644 Website/media/close-x.svg

diff --git a/Website/index.html b/Website/index.html
index 10f6daf..f050e27 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -36,10 +36,26 @@
         </publication-information>
       </publication>
     </content>
+
+    <addtask-popup>
+      <addtask-background></addtask-background>
+      <addtask-window>
+        <window-titlebar>
+          <p>Add Task</p>
+          <img src="media/close-x.svg" alt="Close">
+        </window-titlebar>
+        <window-content>
+          <label for="taskTypes">TaskType</label><select id="taskTypes"></select>
+          <label for="connectors">Connector</label><select id="connectors"></select>
+        </window-content>
+      </addtask-window>
+    </addtask-popup>
   </viewport>
+  
   <settingstab id="settingstab">
 
   </settingstab>
+  
   <script src="apiConnector.js"></script>
   <script src="interaction.js"></script>
 </body>
diff --git a/Website/interaction.js b/Website/interaction.js
index 0df2910..454a766 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -18,6 +18,34 @@ const slideOutRightTiming = {
     easing: "ease-in"
 }
 
+
+const taskTypesSelect = document.querySelector("#taskTypes")
+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);
+        }));
+
+const connectorSelect = document.querySelector("#connectors");
+let availableConnectors;
+GetAvailableControllers()
+    .then(json => availableConnectors = 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);
+    }));*/
+
+
+
 const settingsTab = document.querySelector("#settingstab");
 const settingsCog = document.querySelector("#settingscog");
 var slideIn = true;
@@ -29,4 +57,12 @@ function slide(){
     slideIn = !slideIn;
 }
 
-settingsCog.addEventListener("click", () => slide());
\ No newline at end of file
+settingsCog.addEventListener("click", () => slide());
+
+const addTask = document.querySelector("addPublication");
+
+setInterval(() => {
+    GetTasks().then(json => {
+        //TODO
+    });
+}, 1000);
\ No newline at end of file
diff --git a/Website/media/close-x.svg b/Website/media/close-x.svg
new file mode 100644
index 0000000..fc8cc4d
--- /dev/null
+++ b/Website/media/close-x.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="#0F1729"/>
+</svg>
\ No newline at end of file
diff --git a/Website/style.css b/Website/style.css
index 5c37e87..efac94f 100644
--- a/Website/style.css
+++ b/Website/style.css
@@ -120,7 +120,7 @@ settingstab{
     bottom: 0;
     background-color: rgba(0,0,0,0.5);
     width: 20rem;
-    height: calc(100% - var(--topbar-height) - 20px);
+    height: calc(100% - var(--topbar-height) - 40px);
     margin-bottom: 10px;
     border-radius: 5px 0 0 5px;
 }
@@ -179,7 +179,7 @@ publication-information {
     display: flex;
     flex-direction: column;
     justify-content: start;
-    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73))
+    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73));
     z-index: 1;
 }
 
@@ -204,4 +204,70 @@ publication img {
     width: 100%;
     height: 100%;
     z-index: 0;
+}
+
+addtask-popup{
+    display: block;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+}
+
+addtask-background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    background-color: black;
+    opacity: 0.5;
+    z-index: 5;
+}
+
+addtask-window {
+    display: block;
+    position: absolute;
+    left: 25%;
+    top: 15%;
+    width: 50%;
+    height: 70%;
+    padding: 0;
+    background-color: var(--accent-color);
+    z-index: 6;
+    border-radius: 5px;
+}
+
+window-titlebar {
+    width: 100%;
+    height: 60px;
+    background-color: var(--primary-color);
+    position: absolute;
+    left: 0;
+    top: 0;
+    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 img {
+    height: 70%;
+}
+
+window-content {
+    position: absolute;
+    width: 100%;
+    top: 60px;
+    left: 0;
 }
\ No newline at end of file