From d1a21af15d663c1d3934a23a288a290c6ab78fa0 Mon Sep 17 00:00:00 2001 From: glax Date: Thu, 25 May 2023 21:58:45 +0200 Subject: [PATCH] resolves #26 --- Website/index.html | 206 +++++++++++++++++++++-------------------- Website/interaction.js | 62 +++++++++++++ Website/style.css | 49 +++++++++- 3 files changed, 215 insertions(+), 102 deletions(-) diff --git a/Website/index.html b/Website/index.html index 9c6b6ad..2a4f93f 100644 --- a/Website/index.html +++ b/Website/index.html @@ -6,106 +6,114 @@ - - - - Tranga - - - - - - settingscog - - - -
-

+

+ + + + + Tranga + + + + + + settingscog + + + +
+

+

+
+ + + + MangaDex + Tensei Pandemic + + + + + + + + +

Add Task

+ Close + + + + + + + + + + +
+ + + + + + + cover + + Tensei Pandemic + Imamura Hinata + Imamura Hinata is a high school boy with a cute appearance. + Since his trauma with the first love, he wanted to be more manly than anybody else. But one day he woke up to something different… + The total opposite of his ideal male body! + Pandemic love comedy! + + Delete Task ❌ + Add Task ➕ + + + + + + + Settings +
+

Download Location:

+ +
+
+

API-URI

+ +
+ + Komga +
Configured: ✅❌
+ + + + + + + + + +
+
+ running
0
- - - - MangaDex - Tensei Pandemic - - - - - - - - -

Add Task

- Close - - - - - - - - - - -
- - - - - - - cover - - Tensei Pandemic - Imamura Hinata - Imamura Hinata is a high school boy with a cute appearance. - Since his trauma with the first love, he wanted to be more manly than anybody else. But one day he woke up to something different… - The total opposite of his ideal male body! - Pandemic love comedy! - - Delete Task ❌ - Add Task ➕ - - - - - - - Settings -
-

Download Location:

- -
-
-

API-URI

- -
- - Komga -
Configured: ✅❌
- - - - - - - - - -
-
- running
0
-
-
- queue
0
-
-
- queue
0
-
-

Made with Blåhaj 🦈

-
+
+ queue
0
+
+
+ queue
0
+
+

Made with Blåhaj 🦈

+
+ + + + Test + + + diff --git a/Website/interaction.js b/Website/interaction.js index cc4ff30..61f4049 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -29,6 +29,8 @@ const settingApiUri = document.querySelector("#settingApiUri"); const tagTasksRunning = document.querySelector("#tasksRunningTag"); const tagTasksQueued = document.querySelector("#tasksQueuedTag"); const tagTasksTotal = document.querySelector("#totalTasksTag"); +const tagTaskPopup = document.querySelector("footer-tag-popup"); +const tagTasksPopupContent = document.querySelector("footer-tag-content"); settingsCog.addEventListener("click", () => OpenSettings()); document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => HideSettings()); @@ -49,6 +51,12 @@ searchPublicationQuery.addEventListener("keypress", (event) => { NewSearch(); } }); +tagTasksRunning.addEventListener("mouseover", (event) => ShowRunningTasks(event)); +tagTasksRunning.addEventListener("mouseout", () => CloseTasksPopup()); +tagTasksQueued.addEventListener("mouseover", (event) => ShowQueuedTasks(event)); +tagTasksQueued.addEventListener("mouseout", () => CloseTasksPopup()); +tagTasksTotal.addEventListener("mouseover", (event) => ShowAllTasks(event)); +tagTasksTotal.addEventListener("mouseout", () => CloseTasksPopup()); let availableConnectors; GetAvailableControllers() @@ -238,6 +246,60 @@ function utf8_to_b64( str ) { return window.btoa(unescape(encodeURIComponent( str ))); } + +function ShowRunningTasks(event){ + GetRunningTasks() + .then(json => { + tagTasksPopupContent.replaceChildren(); + json.forEach(task => { + var taskname = document.createElement("footer-tag-task-name"); + taskname.innerText = task.publication.sortName; + tagTasksPopupContent.appendChild(taskname); + }); + if(json.length > 0){ + tagTaskPopup.style.display = "block"; + tagTaskPopup.style.left = `${event.client - 20}px`; + } + + }); +} + +function ShowQueuedTasks(event){ + GetQueue() + .then(json => { + tagTasksPopupContent.replaceChildren(); + json.forEach(task => { + var taskname = document.createElement("footer-tag-task-name"); + taskname.innerText = task.publication.sortName; + tagTasksPopupContent.appendChild(taskname); + }); + if(json.length > 0){ + tagTaskPopup.style.display = "block"; + tagTaskPopup.style.left = `${event.clientX - 20}px`; + } + }); +} + +function ShowAllTasks(event){ + GetDownloadTasks() + .then(json => { + tagTasksPopupContent.replaceChildren(); + json.forEach(task => { + var taskname = document.createElement("footer-tag-task-name"); + taskname.innerText = task.publication.sortName; + tagTasksPopupContent.appendChild(taskname); + }); + if(json.length > 0){ + tagTaskPopup.style.display = "block"; + tagTaskPopup.style.left = `${event.clientX - 20}px`; + } + }); +} + +function CloseTasksPopup(){ + tagTaskPopup.style.display = "none"; +} + //Resets the tasks shown ResetContent(); //Get Tasks and show them diff --git a/Website/style.css b/Website/style.css index 9524dbc..819b369 100644 --- a/Website/style.css +++ b/Website/style.css @@ -11,15 +11,19 @@ body{ padding: 0; margin: 0; - display: flex; - flex-flow: column; - flex-wrap: nowrap; height: 100vh; background-color: var(--background-color); font-family: "Inter", sans-serif; overflow-x: hidden; } +wrapper { + display: flex; + flex-flow: column; + flex-wrap: nowrap; + height: 100vh; +} + background-placeholder{ background-color: var(--second-background-color); opacity: 1; @@ -447,4 +451,43 @@ publication-viewer publication-information publication-add { color: limegreen; margin: 20px; font-size: 16pt; +} + +footer-tag-popup { + display: none; + padding: 5px; + position: fixed; + bottom: 55px; + left: 20px; + background-color: var(--secondary-color); + z-index: 8; + border-radius: 5px; + max-height: 400px; +} + +footer-tag-content{ + position: relative; + max-height: 400px; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + overflow-y: scroll; +} + +footer-tag-content > * { + margin: 2px 0; +} + +footer-tag-popup::before{ + content: ""; + width: 0; + height: 0; + position: absolute; + border-right: 20px solid var(--secondary-colorr); + border-left: 20px solid transparent; + border-top: 20px solid var(--secondary-color); + border-bottom: 20px solid transparent; + left: 0px; + bottom: -36px; + border-radius: 0 0 0 5px; } \ No newline at end of file