From 5c4431778e2bd18397d1d23fe6aa9f1555ca184a Mon Sep 17 00:00:00 2001 From: glax Date: Tue, 23 May 2023 16:27:09 +0200 Subject: [PATCH] Task can now be added --- Website/index.html | 2 +- Website/interaction.js | 81 +++++++++++++++++++++++++++++++++--------- Website/style.css | 17 ++++----- 3 files changed, 74 insertions(+), 26 deletions(-) diff --git a/Website/index.html b/Website/index.html index dbd566a..372fbeb 100644 --- a/Website/index.html +++ b/Website/index.html @@ -42,7 +42,7 @@

Add Task

- Close + Close diff --git a/Website/interaction.js b/Website/interaction.js index 05df64c..78bbeaa 100644 --- a/Website/interaction.js +++ b/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 => { - //TODO - }); -}, 1000); \ No newline at end of file + ResetContent(); + GetTasks() + //.then(json => console.log(json)) + .then(json => json.forEach(task => { + var publication = CreatePublication(task.publication, task.connectorName); + tasksContent.appendChild(publication); + })); +}, 5000); \ No newline at end of file diff --git a/Website/style.css b/Website/style.css index 70a1638..9bc2e44 100644 --- a/Website/style.css +++ b/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 {