Add Task Window styling

Exist popup by clicking outside of it
Task can now be added
2025-07-07 03:14:17 +02:00 · 2023-05-23 16:54:39 +02:00 · 2023-05-23 16:29:09 +02:00 · 2023-05-23 16:27:09 +02:00 · 2023-05-23 15:19:09 +02:00 · 2023-05-23 15:17:47 +02:00
8 changed files with 658 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -17,3 +17,5 @@ riderModule.iml
 /dataSources/
 /dataSources.local.xml
 /.idea
+cover.jpg
+cover.png
--- a/Website/apiConnector.js
+++ b/Website/apiConnector.js
@ -0,0 +1,95 @@
+const apiUri = "http://localhost:5177";
+
+async function GetData(uri){
+    let request = await fetch(uri, {
+        method: 'GET',
+        headers: {
+            'Accept': 'application/json'
+        }
+    });
+    let json = await request.json();
+    return json;
+}
+
+function PostData(uri){
+    fetch(uri, {
+        method: 'POST'
+    });
+}
+
+function DeleteData(uri){
+    fetch(uri, {
+        method: 'DELETE'
+    });
+}
+
+async function GetAvailableControllers(){
+    var uri = apiUri + "/Tranga/GetAvailableControllers";
+    let json = await GetData(uri);
+    return json;
+}
+
+async function GetPublication(connectorName, title){
+    var uri = apiUri + `/Tranga/GetPublicationsFromConnector?connectorName=${connectorName}&title=${title}`;
+    let json = await GetData(uri);
+    return json;
+}
+
+async function GetKnownPublications(){
+    var uri = apiUri + "/Tranga/GetKnownPublications";
+    let json = await GetData(uri);
+    return json;
+}
+
+async function GetTaskTypes(){
+    var uri = apiUri + "/Tasks/GetTaskTypes";
+    let json = await GetData(uri);
+    return json;
+}
+async function GetRunningTasks(){
+    var uri = apiUri + "/Tranga/GetRunningTasks";
+    let json = await GetData(uri);
+    return json;
+}
+
+async function GetTasks(){
+    var uri = apiUri + "/Tasks/GetList";
+    let json = await GetData(uri);
+    return json;
+}
+
+async function GetSettings(){
+    var uri = apiUri + "/Settings/Get";
+    let json = await GetData(uri);
+    return json;
+}
+
+function CreateTask(taskType, reoccurrence, connectorName, publicationId, language){
+    var uri = apiUri + `/Tasks/Create?taskType=${taskType}&connectorName=${connectorName}&publicationId=${publicationId}&reoccurrenceTime=${reoccurrence}&language=${language}`;
+    PostData(uri);
+}
+
+function StartTask(taskType, connectorName, publicationId){
+    var uri = apiUri + `/Tasks/Start?taskType=${taskType}&connectorName=${connectorName}&publicationId=${publicationId}`;
+    PostData(uri);
+}
+
+function EnqueueTask(taskType, connectorName, publicationId){
+    var uri = apiUri + `/Queue/Enqueue?taskType=${taskType}&connectorName=${connectorName}&publicationId=${publicationId}`;
+    PostData(uri);
+}
+
+function UpdateSettings(downloadLocation, komgaUrl, komgaAuth){
+    var uri = apiUri + `/Settings/Update?downloadLocation=${downloadLocation}&komgaUrl=${komgaAuth}&komgaAuth=${komgaAuth}`;
+    PostData(uri);
+}
+
+function DeleteTask(taskType, connectorName, publicationId){
+    var uri = apiUri + `/Tasks/Delete?taskType=${taskType}&connectorName=${connectorName}&publicationId=${publicationId}`;
+    DeleteData(uri);
+}
+
+function DequeueTask(taskType, connectorName, publicationId){
+    var uri = apiUri + `/Queue/Dequeue?taskType=${taskType}&connectorName=${connectorName}&publicationId=${publicationId}`;
+    DeleteData(uri);
+}
--- a/Website/index.html
+++ b/Website/index.html
@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Tranga</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <topbar>
+    <titlebox>
+      <img src="media/blahaj.png">
+      <span>Tranga</span>
+    </titlebox>
+    <spacer></spacer>
+    <searchdiv>
+      <input id="searchbox" placeholder="Filter" type="text">
+    </searchdiv>
+    <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
+  </topbar>
+  <viewport>
+    <sidebar>
+      <background-placeholder></background-placeholder>
+      
+      <spacer></spacer>
+      <p style="text-align: center">Made with Blåhaj 🦈</p>
+    </sidebar>
+    <content>
+      <div id="addPublication">
+        <p>+</p>
+      </div>
+      <publication>
+        <img src="media/cover.jpg">
+        <publication-information>
+          <connector-name class="pill">MangaDex</connector-name>
+          <publication-name>Tensei Pandemic</publication-name>
+        </publication-information>
+      </publication>
+    </content>
+
+    <addtask-popup>
+      <addtask-background></addtask-background>
+      <addtask-window>
+        <window-titlebar>
+          <p>Add Task</p>
+          <img id="closePopupImg" src="media/close-x.svg" alt="Close">
+        </window-titlebar>
+        <window-content>
+          <addtask-settings>
+            <addtask-setting><label for="taskTypes">TaskType</label><select id="taskTypes"></select></addtask-setting>
+            <addtask-setting><label for="selectReccurrence">Recurrence</label><input id="selectReccurrence" type="time" value="01:00" step="3600"></addtask-setting>
+            <addtask-setting><label for="connectors">Connector</label>
+              <select id="connectors">
+                <option value=""></option>
+              </select>
+            </addtask-setting>
+            <addtask-setting><label for="searchPublicationQuery">Search Title</label><input id="searchPublicationQuery" type="text"></addtask-setting>
+          </addtask-settings>
+          <div id="taskSelectOutput"></div>
+        </window-content>
+      </addtask-window>
+    </addtask-popup>
+  </viewport>
+  
+  <settingstab id="settingstab">
+
+  </settingstab>
+  
+  <script src="apiConnector.js"></script>
+  <script src="interaction.js"></script>
+</body>
+</html>
--- a/Website/interaction.js
+++ b/Website/interaction.js
@ -0,0 +1,158 @@
+const slideInRight = [
+    { right: "-20rem" },
+    { right: "0" }
+];
+
+const slideInRightTiming = {
+    duration: 200,
+    iterations: 1,
+    fill: "forwards",
+    easing: "ease-out"
+}
+
+const slideOutRightTiming = {
+    direction: "reverse",
+    duration: 200,
+    iterations: 1,
+    fill: "forwards",
+    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());
+closetaskpopup.addEventListener("click", () => HideNewTaskWindow())
+document.querySelector("addtask-background").addEventListener("click", () => HideNewTaskWindow());
+
+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);
+        }));
+
+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;
+            option.innerText = connector;
+            connectorSelect.appendChild(option);
+        })
+    );
+
+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, connectorSelect.value);
+                   option.addEventListener("click", () => {
+                       CreateNewMangaDownloadTask(
+                           taskTypesSelect.value,
+                           connectorSelect.value,
+                           publication.internalId
+                           );
+                   });
+                   selectPublication.appendChild(option);
+               }
+           ));
+   } 
+});
+
+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 = connector;
+    connectorName.className = "pill";
+    info.appendChild(connectorName);
+    var publicationName = document.createElement('publication-name');
+    publicationName.innerText = publication.sortName;
+    info.appendChild(publicationName);
+    option.appendChild(info);
+    return option;
+}
+
+function CreateNewMangaDownloadTask(taskType, connectorName, publicationId){
+    CreateTask(taskType, selectRecurrence.value, connectorName, publicationId, "en");
+    selectPublication.innerHTML = "";
+}
+
+var slideIn = true;
+function slide(){
+    if(slideIn)
+        settingsTab.animate(slideInRight, slideInRightTiming);
+    else
+        settingsTab.animate(slideInRight, slideOutRightTiming);
+    slideIn = !slideIn;
+}
+
+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);
+}
+
+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(() => {
+    ResetContent();
+    GetTasks()
+        //.then(json => console.log(json))
+        .then(json => json.forEach(task => {
+            var publication = CreatePublication(task.publication, task.connectorName);
+            tasksContent.appendChild(publication);
+        }));
+}, 5000);
--- a/Website/media/blahaj.png
+++ b/Website/media/blahaj.png
--- a/Website/media/close-x.svg
+++ 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>
--- a/Website/media/settings-cogwheel.svg
+++ b/Website/media/settings-cogwheel.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 93.5 93.5" xml:space="preserve">
+<g>
+	<g>
+		<path d="M93.5,40.899c0-2.453-1.995-4.447-4.448-4.447H81.98c-0.74-2.545-1.756-5.001-3.035-7.331l4.998-5
+			c0.826-0.827,1.303-1.973,1.303-3.146c0-1.19-0.462-2.306-1.303-3.146L75.67,9.555c-1.613-1.615-4.673-1.618-6.29,0l-5,5
+			c-2.327-1.28-4.786-2.296-7.332-3.037v-7.07C57.048,1.995,55.053,0,52.602,0H40.899c-2.453,0-4.447,1.995-4.447,4.448v7.071
+			c-2.546,0.741-5.005,1.757-7.333,3.037l-5-5c-1.68-1.679-4.609-1.679-6.288,0L9.555,17.83c-1.734,1.734-1.734,4.555,0,6.289
+			l4.999,5c-1.279,2.33-2.295,4.788-3.036,7.333h-7.07C1.995,36.452,0,38.447,0,40.899V52.6c0,2.453,1.995,4.447,4.448,4.447h7.071
+			c0.74,2.545,1.757,5.003,3.036,7.332l-4.998,4.999c-0.827,0.827-1.303,1.974-1.303,3.146c0,1.189,0.462,2.307,1.302,3.146
+			l8.274,8.273c1.614,1.615,4.674,1.619,6.29,0l5-5c2.328,1.279,4.786,2.297,7.333,3.037v7.071c0,2.453,1.995,4.448,4.447,4.448
+			h11.702c2.453,0,4.446-1.995,4.446-4.448V81.98c2.546-0.74,5.005-1.756,7.332-3.037l5,5c1.681,1.68,4.608,1.68,6.288,0
+			l8.275-8.273c1.734-1.734,1.734-4.555,0-6.289l-4.998-5.001c1.279-2.329,2.295-4.787,3.035-7.332h7.071
+			c2.453,0,4.448-1.995,4.448-4.446V40.899z M62.947,46.75c0,8.932-7.266,16.197-16.197,16.197c-8.931,0-16.197-7.266-16.197-16.197
+			c0-8.931,7.266-16.197,16.197-16.197C55.682,30.553,62.947,37.819,62.947,46.75z"/>
+	</g>
+</g>
+</svg>
--- a/Website/style.css
+++ b/Website/style.css
@ -0,0 +1,306 @@
+:root{
+    --background-color: #eee;
+    --second-background-color: #fff;
+    --primary-color: #f5a9b8;
+    --secondary-color: #5bcefa;
+    --accent-color: #fff;
+    --topbar-height: 60px;
+    box-sizing: border-box;
+}
+
+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;
+}
+
+background-placeholder{
+    background-color: var(--second-background-color);
+    opacity: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 0 0 5px 0;
+    z-index: -1;
+}
+
+topbar {
+    display: flex;
+    align-items: center;
+    height: var(--topbar-height);
+    background-color: var(--secondary-color);
+}
+
+titlebox {
+    position: relative;
+    display: flex;
+    margin: 0 0 0 40px;
+    height: 100%;
+    align-items:center;
+    justify-content:center;
+}
+
+titlebox span{
+    font-size: 24pt;
+    font-weight: bold;
+    background: linear-gradient(150deg, var(--primary-color), var(--accent-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-left: 20px;
+}
+
+titlebox img {
+    height: 100%;
+    margin-right: 10px;
+}
+
+spacer{
+    flex-grow: 1;
+}
+
+searchdiv{
+    display: block;
+    margin: 0 10px 0 0;
+}
+
+#searchbox {
+    padding: 6px 8px;
+    border: 0;
+    border-radius: 3px;
+    font-size: 14pt;
+    width: 250px;
+}
+
+#settingscog {
+    cursor: pointer;
+    margin: 0px 30px;
+    height: calc(100% - 40px);
+    filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(115deg) brightness(116%) contrast(101%);
+}
+
+viewport {
+    position: relative;
+    display: flex;
+    flex-flow: row;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+}
+
+sidebar{
+    position: relative;
+    width: 20rem;
+    margin-bottom: 20px;
+    border-radius: 0 0 5px 0;
+    display: flex;
+    flex-direction: column;
+    
+}
+
+content {
+    position: relative;
+    flex-grow: 1;
+    margin: 0 10px 10px 10px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: start;
+    align-content: start;
+}
+
+settingstab{
+    position: absolute;
+    right: -20rem;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.5);
+    width: 20rem;
+    height: calc(100% - var(--topbar-height) - 40px);
+    margin-bottom: 10px;
+    border-radius: 5px 0 0 5px;
+}
+
+#addPublication {
+    cursor: pointer;
+    background-color: var(--secondary-color);
+    width: 180px;
+    height: 300px;
+    border-radius: 5px;
+    margin: 10px 10px;
+    padding: 15px 20px;
+    position: relative;
+}
+
+#addPublication p{
+    width: 100%;
+    text-align: center;
+    font-size: 150pt;
+    vertical-align: middle;
+    line-height: 300px;
+    margin: 0;
+    color: var(--accent-color);
+}
+
+.pill {
+    flex-grow: 0;
+    height: 14pt;
+    font-size: 12pt;
+    border-radius: 9pt;
+    background-color: var(--primary-color);
+    padding: 2pt 20px;
+}
+
+publication{
+    cursor: pointer;
+    background-color: var(--secondary-color);
+    width: 180px;
+    height: 300px;
+    border-radius: 5px;
+    margin: 10px 10px;
+    padding: 15px 20px;
+    position: relative;
+}
+
+publication::after{
+    content: '';
+    position: absolute;
+    left: 0; top: 0;
+    border-radius: 5px;
+    width: 100%; height: 100%;
+    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.1));
+}
+
+publication-information {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+}
+
+connector-name{
+    width: fit-content;
+    margin: 10px 0;
+    z-index: 1;
+}
+
+publication-name{
+    width: fit-content;
+    font-size: 16pt;
+    font-weight: bold;
+    z-index: 1;
+    color: var(--accent-color);
+}
+
+publication img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+addtask-popup{
+    display: none;
+    width: 100%;
+    min-height: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    z-index: 2;
+}
+
+addtask-background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    background-color: black;
+    opacity: 0.5;
+}
+
+addtask-window {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    position: absolute;
+    left: 12.5%;
+    top: 15%;
+    width: 75%;
+    min-height: 70%;
+    max-height: 80%;
+    padding: 0;
+    background-color: var(--accent-color);
+    z-index: 5;
+    border-radius: 5px;
+}
+
+window-titlebar {
+    width: 100%;
+    height: 60px;
+    background-color: var(--primary-color);
+    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 #closePopupImg {
+    height: 70%;
+    cursor: pointer;
+    margin-right: 20px;
+    filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(115deg) brightness(116%) contrast(101%);
+}
+
+window-content {
+    display: flex;
+    flex-direction: column;
+    padding: 20px 5%;
+    overflow-x: scroll;
+}
+
+addtask-settings{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+addtask-settings select, addtask-settings input{
+    padding: 5px;
+    font-size: 10pt;
+    border: 1px solid rgba(0,0,0,0.2);
+    border-radius: 3px;
+    background-color: transparent;
+    margin: 10px 0;
+    width: 150px;
+}
+
+addtask-settings label {
+    font-weight: bolder;
+    margin: 0 5px;
+}
+
+addtask-settings addtask-setting{
+    margin: 0 15px;
+}
+
+#taskSelectOutput{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: start;
+    align-content: start;
+}
Author	SHA1	Message	Date
glax	73d98b9c0f	Add Task Window styling	2023-05-23 16:54:39 +02:00
glax	b0ee888c82	Exist popup by clicking outside of it	2023-05-23 16:29:09 +02:00
glax	5c4431778e	Task can now be added	2023-05-23 16:27:09 +02:00
glax	ccfa213b77	some bugfixes	2023-05-23 15:19:09 +02:00
glax	22d6389d38	Fix wrong API* Path create task	2023-05-23 15:17:47 +02:00
glax	f53dfb0822	update task select window #1	2023-05-23 15:15:29 +02:00
glax	dd651adc15	Add Task window	2023-05-23 14:44:59 +02:00
glax	ba5ae67aa7	Fix wrong API path for GetTaskTypes	2023-05-23 14:44:45 +02:00
glax	da4a5bed09	All API-calls #1	2023-05-23 13:52:35 +02:00
glax	290819de09	Created first api-calls #1	2023-05-23 13:15:29 +02:00
glax	87d2357b41	CORS Error	2023-05-23 12:51:21 +02:00
glax	e3186aebb0	Merge branch 'master' into Website	2023-05-23 00:17:25 +02:00
glax	1cd37e2b1b	Update gitignore	2023-05-23 00:16:48 +02:00
glax	9c267f395f	But I like this! #1	2023-05-23 00:12:30 +02:00
glax	e2b8888130	#1 Basic layout and colors	2023-05-22 23:52:35 +02:00
glax	b6ac2682f6	#1 First commit It do be uglyyyyy	2023-05-22 22:25:50 +02:00