Task can now be added

Website/index.html

@@ -42,7 +42,7 @@
       <addtask-window>
         <window-titlebar>
           <p>Add Task</p>
-          <img src="media/close-x.svg" alt="Close">
+          <img id="closePopupImg" src="media/close-x.svg" alt="Close">
         </window-titlebar>
         <window-content>
           <label for="taskTypes">TaskType</label><select id="taskTypes"></select>

Website/interaction.js

@@ -18,8 +18,19 @@ const slideOutRightTiming = {
     easing: "ease-in"
 }
 
-
 const taskTypesSelect = document.querySelector("#taskTypes")
+const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
+const selectPublication = document.querySelector("#taskSelectOutput");
+const connectorSelect = document.querySelector("#connectors");
+const settingsTab = document.querySelector("#settingstab");
+const settingsCog = document.querySelector("#settingscog");
+const selectRecurrence = document.querySelector("#selectReccurrence");
+const tasksContent = document.querySelector("content");
+const addtaskpopup = document.querySelector("addtask-popup");
+const closetaskpopup = document.querySelector("#closePopupImg");
+
+settingsCog.addEventListener("click", () => slide());
+
 let availableTaskTypes;
 GetTaskTypes()
     .then(json => availableTaskTypes = json)
@@ -31,7 +42,6 @@ GetTaskTypes()
             taskTypesSelect.appendChild(option);
         }));
 
-const connectorSelect = document.querySelector("#connectors");
 let availableConnectors;
 GetAvailableControllers()
     .then(json => availableConnectors = json)
@@ -45,18 +55,16 @@ GetAvailableControllers()
         })
     );
 
-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);
+                   var option = CreatePublication(publication, connectorSelect.value);
                    option.addEventListener("click", () => {
                        CreateNewMangaDownloadTask(
-                           "DownloadNewChapters",
+                           taskTypesSelect.value,
                            connectorSelect.value,
                            publication.internalId
                            );
@@ -67,14 +75,15 @@ searchPublicationQuery.addEventListener("keypress", (event) => {
    } 
 });
 
-function CreatePublication(publication){
+function CreatePublication(publication, connector){
     var option = document.createElement('publication');
+    option.setAttribute("id", publication.internalId);
     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.innerText = connector;
     connectorName.className = "pill";
     info.appendChild(connectorName);
     var publicationName = document.createElement('publication-name');
@@ -84,14 +93,11 @@ function CreatePublication(publication){
     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");
 var slideIn = true;
 function slide(){
     if(slideIn)
@@ -101,12 +107,53 @@ function slide(){
     slideIn = !slideIn;
 }
 
-settingsCog.addEventListener("click", () => slide());
 
-const addTask = document.querySelector("addPublication");
+
+function ResetContent(){
+    tasksContent.replaceChildren();
+    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);
+}
+
+closetaskpopup.addEventListener("click", () => HideNewTaskWindow())
+function ShowNewTaskWindow(){
+    addtaskpopup.style.display = "block";
+    addtaskpopup.animate(fadeIn, fadeInTiming);
+}
+function HideNewTaskWindow(){
+    addtaskpopup.style.display = "none";
+}
+
+const fadeIn = [
+    { opacity: "0" },
+    { opacity: "1" }
+];
+
+const fadeInTiming = {
+    duration: 150,
+    iterations: 1,
+    fill: "forwards"
+}
+
+ResetContent();
+GetTasks()
+    //.then(json => console.log(json))
+    .then(json => json.forEach(task => {
+        var publication = CreatePublication(task.publication, task.connectorName);
+        tasksContent.appendChild(publication);
+    }));
 
 setInterval(() => {
-    GetTasks().then(json => {
+    ResetContent();
-        //TODO
+    GetTasks()
-    });
+        //.then(json => console.log(json))
-}, 1000);
+        .then(json => json.forEach(task => {
+            var publication = CreatePublication(task.publication, task.connectorName);
+            tasksContent.appendChild(publication);
+        }));
+}, 5000);

Website/style.css

@@ -179,21 +179,19 @@ 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));
-    z-index: 1;
 }
 
 connector-name{
     width: fit-content;
     margin: 10px 0;
-    z-index: 2;
+    z-index: 1;
 }
 
 publication-name{
     width: fit-content;
     font-size: 16pt;
     font-weight: bold;
-    z-index: 2;
+    z-index: 1;
     color: var(--accent-color);
 }
 
@@ -207,12 +205,14 @@ publication img {
 }
 
 addtask-popup{
-    display: block;
+    display: none;
+    opacity: 0;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     position: absolute;
+    z-index: 2;
 }
 
 addtask-background {
@@ -222,7 +222,6 @@ addtask-background {
     left: 0;
     background-color: black;
     opacity: 0.5;
-    z-index: 5;
 }
 
 addtask-window {
@@ -234,7 +233,7 @@ addtask-window {
     height: 70%;
     padding: 0;
     background-color: var(--accent-color);
-    z-index: 6;
+    z-index: 5;
     border-radius: 5px;
 }
 
@@ -261,8 +260,10 @@ window-titlebar p {
     letter-spacing: 1px;
 }
 
-window-titlebar img {
+window-titlebar #closePopupImg {
     height: 70%;
+    cursor: pointer;
+    filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(115deg) brightness(116%) contrast(101%);
 }
 
 window-content {