docker-compose.yaml

Added Dockerfile to website
Changed Ports

.gitignore

@@ -17,3 +17,5 @@ riderModule.iml
 /dataSources/
 /dataSources.local.xml
 /.idea
+cover.jpg
+cover.png

Dockerfile

@@ -0,0 +1,15 @@
+# syntax=docker/dockerfile:1
+
+FROM mcr.microsoft.com/dotnet/sdk:7.0 as build-env
+WORKDIR /src
+COPY . /src/
+RUN ls /src
+RUN dotnet restore Tranga-API/Tranga-API.csproj
+RUN dotnet publish -c Release -o /publish
+
+FROM mcr.microsoft.com/dotnet/aspnet:7.0 as runtime
+WORKDIR /publish
+COPY --from=build-env /publish .
+RUN ls /publish
+EXPOSE 80
+ENTRYPOINT ["dotnet", "/publish/Tranga-API.dll"]

Tranga-API/Dockerfile

@@ -1,20 +0,0 @@
-FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS base
-WORKDIR /app
-EXPOSE 80
-EXPOSE 443
-
-FROM mcr.microsoft.com/dotnet/sdk:7.0 AS build
-WORKDIR /src
-COPY ["Tranga-API/Tranga-API.csproj", "Tranga-API/"]
-RUN dotnet restore "Tranga-API/Tranga-API.csproj"
-COPY . .
-WORKDIR "/src/Tranga-API"
-RUN dotnet build "Tranga-API.csproj" -c Release -o /app/build
-
-FROM build AS publish
-RUN dotnet publish "Tranga-API.csproj" -c Release -o /app/publish /p:UseAppHost=false
-
-FROM base AS final
-WORKDIR /app
-COPY --from=publish /app/publish .
-ENTRYPOINT ["dotnet", "Tranga-API.dll"]

Tranga-API/Program.cs

@@ -1,26 +1,30 @@
+using System.Runtime.InteropServices;
 using Logging;
 using Tranga;
 
-string applicationFolderPath =
-    Path.Join(Environment.GetFolderPath(Environment.SpecialFolder.CommonApplicationData), "Tranga-API");
-string logsFolderPath = Path.Join(applicationFolderPath, "logs");
+string applicationFolderPath = Path.Join(Environment.GetFolderPath(Environment.SpecialFolder.CommonApplicationData), "Tranga-API");
+string downloadFolderPath = RuntimeInformation.IsOSPlatform(OSPlatform.Linux) ? "/Manga" : Path.Join(applicationFolderPath, "Manga");
+string logsFolderPath = RuntimeInformation.IsOSPlatform(OSPlatform.Linux) ? "/var/logs/Tranga" : Path.Join(applicationFolderPath, "logs");
 string logFilePath = Path.Join(logsFolderPath, $"log-{DateTime.Now:dd-M-yyyy-HH-mm-ss}.txt");
 string settingsFilePath = Path.Join(applicationFolderPath, "settings.json");
 
 Directory.CreateDirectory(applicationFolderPath);
+Directory.CreateDirectory(downloadFolderPath);
 Directory.CreateDirectory(logsFolderPath);
 
+Console.WriteLine($"Application-Folder: {applicationFolderPath}");
+Console.WriteLine($"Download-Folder-Path: {downloadFolderPath}");
 Console.WriteLine($"Logfile-Path: {logFilePath}");
 Console.WriteLine($"Settings-File-Path: {settingsFilePath}");
 
-Logger logger = new(new[] { Logger.LoggerType.FileLogger }, null, null, logFilePath);
+Logger logger = new(new[] { Logger.LoggerType.FileLogger, Logger.LoggerType.ConsoleLogger }, Console.Out, Console.Out.Encoding, logFilePath);
         
 logger.WriteLine("Tranga_CLI", "Loading Taskmanager.");
 TrangaSettings settings;
 if (File.Exists(settingsFilePath))
     settings = TrangaSettings.LoadSettings(settingsFilePath);
 else
-    settings = new TrangaSettings(Directory.GetCurrentDirectory(), applicationFolderPath, null);
+    settings = new TrangaSettings(downloadFolderPath, applicationFolderPath, null);
 
 TaskManager taskManager = new (settings, logger);
 
@@ -28,17 +32,31 @@ var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen();
 builder.Services.AddControllers().AddNewtonsoftJson();
+
+string corsHeader = "Tranga";
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy(name: corsHeader,
+        policy  =>
+        {
+            policy.AllowAnyOrigin();
+            policy.WithMethods("GET", "POST", "DELETE");
+        });
+});
+
 var app = builder.Build();
 app.UseSwagger();
 app.UseSwaggerUI();
 app.UseSwagger();
 app.UseSwaggerUI();
 
-app.MapGet("/GetAvailableControllers", () =>  taskManager.GetAvailableConnectors());
+app.UseCors(corsHeader);
 
-app.MapGet("/GetKnownPublications", () => taskManager.GetAllPublications());
+app.MapGet("/Tranga/GetAvailableControllers", () =>  taskManager.GetAvailableConnectors().Keys.ToArray());
 
-app.MapGet("/GetPublicationsFromConnector", (string connectorName, string title) =>
+app.MapGet("/Tranga/GetKnownPublications", () => taskManager.GetAllPublications());
+
+app.MapGet("/Tranga/GetPublicationsFromConnector", (string connectorName, string title) =>
 {
     Connector? connector = taskManager.GetAvailableConnectors().FirstOrDefault(con => con.Key == connectorName).Value;
     if (connector is null)
@@ -65,16 +83,47 @@ app.MapDelete("/Tasks/Delete", (string taskType, string? connectorName, string?
     taskManager.DeleteTask(task, connectorName, publication);
 });
 
-app.MapGet("/Tasks/GetList", () => taskManager.GetAllTasks());
+app.MapGet("/Tasks/Get", (string taskType, string? connectorName, string? searchString) =>
+{
+    try
+    {
+        TrangaTask.Task task = Enum.Parse<TrangaTask.Task>(taskType);
+        if (searchString is null || connectorName is null)
+            return taskManager.GetAllTasks().Where(tTask => tTask.task == task);
+        else
+            return taskManager.GetAllTasks().Where(tTask =>
+                tTask.task == task && tTask.connectorName == connectorName && tTask.ToString()
+                    .Contains(searchString, StringComparison.InvariantCultureIgnoreCase));
+    }
+    catch (ArgumentException)
+    {
+        return Array.Empty<TrangaTask>();
+    }
+});
 
 app.MapPost("/Tasks/Start", (string taskType, string? connectorName, string? publicationId) =>
+{
+    try
     {
         TrangaTask.Task pTask = Enum.Parse<TrangaTask.Task>(taskType);
-    TrangaTask? task = taskManager.GetAllTasks().FirstOrDefault(tTask =>
-        tTask.task == pTask && tTask.publication?.internalId == publicationId && tTask.connectorName == connectorName);
+        TrangaTask? task = null;
+        if (connectorName is null || publicationId is null)
+            task = taskManager.GetAllTasks().FirstOrDefault(tTask =>
+                tTask.task == pTask);
+        else
+            task = taskManager.GetAllTasks().FirstOrDefault(tTask =>
+                tTask.task == pTask && tTask.publication?.internalId == publicationId &&
+                tTask.connectorName == connectorName);
+            
         if (task is null)
             return;
         taskManager.ExecuteTaskNow(task);
+    }
+    catch (ArgumentException)
+    {
+        return;
+    }
+
 });
 
 app.MapGet("/Tasks/GetRunningTasks",
@@ -84,23 +133,51 @@ app.MapGet("/Queue/GetList",
     () => taskManager.GetAllTasks().Where(task => task.state is TrangaTask.ExecutionState.Enqueued));
 
 app.MapPost("/Queue/Enqueue", (string taskType, string? connectorName, string? publicationId) =>
+{
+    try
     {
         TrangaTask.Task pTask = Enum.Parse<TrangaTask.Task>(taskType);
-    TrangaTask? task = taskManager.GetAllTasks().FirstOrDefault(tTask =>
-        tTask.task == pTask && tTask.publication?.internalId == publicationId && tTask.connectorName == connectorName);
+        TrangaTask? task = null;
+        if (connectorName is null || publicationId is null)
+            task = taskManager.GetAllTasks().FirstOrDefault(tTask =>
+                tTask.task == pTask);
+        else
+            task = taskManager.GetAllTasks().FirstOrDefault(tTask =>
+                tTask.task == pTask && tTask.publication?.internalId == publicationId &&
+                tTask.connectorName == connectorName);
+            
         if (task is null)
             return;
         taskManager.AddTaskToQueue(task);
+    }
+    catch (ArgumentException)
+    {
+        return;
+    }
 });
 
 app.MapDelete("/Queue/Dequeue", (string taskType, string? connectorName, string? publicationId) =>
+{
+    try
     {
         TrangaTask.Task pTask = Enum.Parse<TrangaTask.Task>(taskType);
-    TrangaTask? task = taskManager.GetAllTasks().FirstOrDefault(tTask =>
-        tTask.task == pTask && tTask.publication?.internalId == publicationId && tTask.connectorName == connectorName);
+        TrangaTask? task = null;
+        if (connectorName is null || publicationId is null)
+            task = taskManager.GetAllTasks().FirstOrDefault(tTask =>
+                tTask.task == pTask);
+        else
+            task = taskManager.GetAllTasks().FirstOrDefault(tTask =>
+                tTask.task == pTask && tTask.publication?.internalId == publicationId &&
+                tTask.connectorName == connectorName);
+            
         if (task is null)
             return;
         taskManager.RemoveTaskFromQueue(task);
+    }
+    catch (ArgumentException)
+    {
+        return;
+    }
 });
 
 app.MapGet("/Settings/Get", () => taskManager.settings);

Tranga-CLI/Dockerfile

@@ -1,18 +0,0 @@
-FROM mcr.microsoft.com/dotnet/runtime:7.0 AS base
-WORKDIR /app
-
-FROM mcr.microsoft.com/dotnet/sdk:7.0 AS build
-WORKDIR /src
-COPY ["Tranga-CLI/Tranga-CLI.csproj", "Tranga-CLI/"]
-RUN dotnet restore "Tranga-CLI/Tranga-CLI.csproj"
-COPY . .
-WORKDIR "/src/Tranga-CLI"
-RUN dotnet build "Tranga-CLI.csproj" -c Release -o /app/build
-
-FROM build AS publish
-RUN dotnet publish "Tranga-CLI.csproj" -c Release -o /app/publish /p:UseAppHost=false
-
-FROM base AS final
-WORKDIR /app
-COPY --from=publish /app/publish .
-ENTRYPOINT ["dotnet", "Tranga-CLI.dll"]

Tranga/Komga.cs

@@ -1,4 +1,5 @@
-using System.Net.Http.Headers;
+using System.Net;
+using System.Net.Http.Headers;
 using System.Text.Json.Nodes;
 using Logging;
 using Newtonsoft.Json;
@@ -45,9 +46,17 @@ public class Komga
     {
         logger?.WriteLine(this.GetType().ToString(), $"Getting Libraries");
         Stream data = NetClient.MakeRequest($"{baseUrl}/api/v1/libraries", auth);
+        if (data == Stream.Null)
+        {
+            logger?.WriteLine(this.GetType().ToString(), $"No libraries returned");
+            return Array.Empty<KomgaLibrary>();
+        }
         JsonArray? result = JsonSerializer.Deserialize<JsonArray>(data);
         if (result is null)
+        {
+            logger?.WriteLine(this.GetType().ToString(), $"No libraries returned");
             return Array.Empty<KomgaLibrary>();
+        }
 
         HashSet<KomgaLibrary> ret = new();
 
@@ -89,37 +98,51 @@ public class Komga
     {
         public static Stream MakeRequest(string url, string auth)
         {
-            HttpClient client = new();
-            HttpRequestMessage requestMessage = new HttpRequestMessage
+            HttpClientHandler clientHandler = new ();
+            clientHandler.ServerCertificateCustomValidationCallback = (message, cert, chain, sslPolicyErrors) => true;
+            HttpClient client = new(clientHandler);
+            client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", auth);
+            
+            HttpRequestMessage requestMessage = new ()
             {
                 Method = HttpMethod.Get,
-                RequestUri = new Uri(url),
-                Headers =
-                {
-                    { "Accept", "application/json" },
-                    { "Authorization", new AuthenticationHeaderValue("Basic", auth).ToString() }
-                }
+                RequestUri = new Uri(url)
             };
             HttpResponseMessage response = client.Send(requestMessage);
-            Stream resultString = response.IsSuccessStatusCode ? response.Content.ReadAsStream() : Stream.Null;
-            return resultString;
+            Stream ret;
+            if (response.StatusCode is HttpStatusCode.Unauthorized)
+            {
+                ret = MakeRequest(response.RequestMessage!.RequestUri!.AbsoluteUri, auth);
+            }else
+                return response.IsSuccessStatusCode ? response.Content.ReadAsStream() : Stream.Null;
+            return ret;
         }
 
         public static bool MakePost(string url, string auth)
         {
-            HttpClient client = new();
-            HttpRequestMessage requestMessage = new HttpRequestMessage
+            HttpClientHandler clientHandler = new HttpClientHandler();
+            clientHandler.ServerCertificateCustomValidationCallback = (message, cert, chain, sslPolicyErrors) => true;
+            HttpClient client = new(clientHandler)
             {
-                Method = HttpMethod.Post,
-                RequestUri = new Uri(url),
-                Headers =
+                DefaultRequestHeaders =
                 {
                     { "Accept", "application/json" },
                     { "Authorization", new AuthenticationHeaderValue("Basic", auth).ToString() }
                 }
             };
+            HttpRequestMessage requestMessage = new HttpRequestMessage
+            {
+                Method = HttpMethod.Post,
+                RequestUri = new Uri(url)
+            };
             HttpResponseMessage response = client.Send(requestMessage);
+            bool ret;
+            if (response.StatusCode is HttpStatusCode.Unauthorized)
+            {
+                ret = MakePost(response.RequestMessage!.RequestUri!.AbsoluteUri, auth);
+            }else
                 return response.IsSuccessStatusCode;
+            return ret;
         }
     }
 }

Website/Dockerfile

@@ -0,0 +1,4 @@
+FROM nginx:alpine3.17-slim
+COPY . /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

Website/apiConnector.js

@@ -0,0 +1,120 @@
+let apiUri = `http://${window.location.host.split(':')[0]}:6531`
+
+if(getCookie("apiUri") != ""){
+    apiUri = getCookie("apiUri");
+}
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for(let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
+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 GetDownloadTasks(){
+    var uri = apiUri + "/Tasks/Get?taskType=DownloadNewChapters";
+    let json = await GetData(uri);
+    return json;
+}
+
+async function GetSettings(){
+    var uri = apiUri + "/Settings/Get";
+    let json = await GetData(uri);
+    return json;
+}
+
+async function GetKomgaTask(){
+    var uri = apiUri + "/Tasks/Get?taskType=UpdateKomgaLibrary";
+    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=${komgaUrl}&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);
+}

Website/index.html

@@ -0,0 +1,101 @@
+<!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>    
+    
+    <popup id="addTaskPopup">
+      <blur-background id="blurBackgroundTaskPopup"></blur-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="selectReccurrence">Recurrence</label><input id="selectReccurrence" type="time" value="01:00: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>
+            <input type="submit" value="Search" onclick="NewSearch();">
+          </addtask-settings>
+          <div id="taskSelectOutput"></div>
+        </window-content>
+      </addtask-window>
+    </popup>
+    <popup id="publicationViewerPopup">
+      <blur-background id="blurBackgroundPublicationPopup"></blur-background>
+      <publication-viewer>
+        <img id="pubviewcover" src="media/cover.jpg" alt="cover">
+        <publication-information>
+          <publication-name id="publicationViewerName">Tensei Pandemic</publication-name>
+          <publication-author id="publicationViewerAuthor">Imamura Hinata</publication-author>
+          <publication-description id="publicationViewerDescription">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!
+          </publication-description>
+          <publication-delete>Delete Task ❌</publication-delete>
+          <publication-add>Add Task ➕</publication-add>
+        </publication-information>
+      </publication-viewer>
+    </popup>
+    
+  </viewport>
+  
+  <settingstab id="settingstab">
+    <span class="title">Download Location:</span>
+    <span id="downloadLocation"></span>
+    <span class="title">API-URI</span>
+    <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
+    <komga-settings>
+      <span class="title">Komga</span>
+      <div>Configured: <span id="komgaConfigured">✅❌</span></div>
+      <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
+      <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
+      <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
+      <div><label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01:00" step="10"></div>
+      <input type="submit" value="Update" onclick="UpdateKomgaSettings()">
+    </komga-settings>
+  </settingstab>
+  
+  <script src="apiConnector.js"></script>
+  <script src="interaction.js"></script>
+</body>
+</html>

Website/interaction.js

@@ -0,0 +1,288 @@
+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"
+}
+
+let publications = [];
+let tasks = [];
+let toEditId;
+
+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("#addTaskPopup");
+const publicationViewerPopup = document.querySelector("#publicationViewerPopup");
+const publicationViewerWindow = document.querySelector("publication-viewer");
+const publicationViewerDescription = document.querySelector("#publicationViewerDescription");
+const publicationViewerName = document.querySelector("#publicationViewerName");
+const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor");
+const pubviewcover = document.querySelector("#pubviewcover");
+const publicationDelete = document.querySelector("publication-delete");
+const publicationAdd = document.querySelector("publication-add");
+const closetaskpopup = document.querySelector("#closePopupImg");
+const settingDownloadLocation = document.querySelector("#downloadLocation");
+const settingKomgaUrl = document.querySelector("#komgaUrl");
+const settingKomgaUser = document.querySelector("#komgaUsername");
+const settingKomgaPass = document.querySelector("#komgaPassword");
+const settingKomgaTime = document.querySelector("#komgaUpdateTime");
+const settingKomgaConfigured = document.querySelector("#komgaConfigured");
+const settingApiUri = document.querySelector("#settingApiUri");
+
+
+settingsCog.addEventListener("click", () => OpenSettings());
+closetaskpopup.addEventListener("click", () => HideAddTaskPopup());
+document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup());
+document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
+publicationDelete.addEventListener("click", () => DeleteTaskClick());
+publicationAdd.addEventListener("click", () => AddTaskClick());
+settingApiUri.addEventListener("keypress", (event) => {
+    if(event.key === "Enter"){
+        apiUri = settingApiUri.value;
+        setTimeout(() => GetSettingsClick(), 100);
+        document.cookie = `apiUri=${apiUri};`;
+    }
+});
+searchPublicationQuery.addEventListener("keypress", (event) => {
+    if(event.key === "Enter"){
+        NewSearch();
+    }
+});
+
+let availableConnectors;
+GetAvailableControllers()
+    .then(json => availableConnectors = json)
+    .then(json => 
+        json.forEach(connector => {
+            var option = document.createElement('option');
+            option.value = connector;
+            option.innerText = connector;
+            connectorSelect.appendChild(option);
+        })
+    );
+
+
+function NewSearch(){
+    //Disable inputs
+    selectRecurrence.disabled = true;
+    connectorSelect.disabled = true;
+    searchPublicationQuery.disabled = true;
+
+    //Empty previous results
+    selectPublication.replaceChildren();
+    GetPublication(connectorSelect.value, searchPublicationQuery.value)
+        .then(json =>
+            json.forEach(publication => {
+                    var option = CreatePublication(publication, connectorSelect.value);
+                    option.addEventListener("click", (mouseEvent) => {
+                        ShowPublicationViewerWindow(publication.internalId, mouseEvent, true);
+                    });
+                    selectPublication.appendChild(option);
+                }
+            ))
+        .then(() => {
+            //Re-enable inputs
+            selectRecurrence.disabled = false;
+            connectorSelect.disabled = false;
+            searchPublicationQuery.disabled = false;
+        });
+}
+
+//Returns a new "Publication" Item to display in the tasks section
+function CreatePublication(publication, connector){
+    var publicationElement = document.createElement('publication');
+    publicationElement.setAttribute("id", publication.internalId);
+    var img = document.createElement('img');
+    img.src = publication.posterUrl;
+    publicationElement.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);
+    publicationElement.appendChild(info);
+    if(publications.filter(pub => pub.internalId === publication.internalId) < 1)
+        publications.push(publication);
+    return publicationElement;
+}
+
+function DeleteTaskClick(){
+    taskToDelete = tasks.filter(tTask => tTask.publication.internalId === toEditId)[0];
+    DeleteTask("DownloadNewChapters", taskToDelete.connectorName, toEditId);
+    HidePublicationPopup();
+}
+
+function AddTaskClick(){
+    CreateTask("DownloadNewChapters", selectRecurrence.value, connectorSelect.value, toEditId, "en")
+    HideAddTaskPopup();
+    HidePublicationPopup();
+}
+
+let slideIn = true;
+function slide() {
+    if (slideIn)
+        settingsTab.animate(slideInRight, slideInRightTiming);
+    else
+        settingsTab.animate(slideInRight, slideOutRightTiming);
+    slideIn = !slideIn;
+}
+
+function ResetContent(){
+    //Delete everything
+    tasksContent.replaceChildren();
+    
+    //Add "Add new Task" Button
+    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 ShowPublicationViewerWindow(publicationId, event, add){
+    //Set position to mouse-position
+    publicationViewerWindow.style.top = `${event.clientY - 60}px`;
+    publicationViewerWindow.style.left = `${event.clientX}px`;
+    
+    //Edit information inside the window
+    var publication = publications.filter(pub => pub.internalId === publicationId)[0];
+    publicationViewerName.innerText = publication.sortName;
+    publicationViewerDescription.innerText = publication.description;
+    publicationViewerAuthor.innerText = publication.author;
+    pubviewcover.src = publication.posterUrl;
+    toEditId = publicationId;
+    
+    //Check what action should be listed
+    if(add){
+        publicationAdd.style.display = "block";
+        publicationDelete.style.display = "none";
+    }
+    else{
+        publicationAdd.style.display = "none";
+        publicationDelete.style.display = "block";
+    }
+    
+    //Show popup
+    publicationViewerPopup.style.display = "block";
+}
+
+function HidePublicationPopup(){
+    publicationViewerPopup.style.display = "none";
+}
+
+function ShowNewTaskWindow(){
+    selectPublication.replaceChildren();
+    addTaskPopup.style.display = "block";
+}
+function HideAddTaskPopup(){
+    addTaskPopup.style.display = "none";
+}
+
+
+const fadeIn = [
+    { opacity: "0" },
+    { opacity: "1" }
+];
+
+const fadeInTiming = {
+    duration: 50,
+    iterations: 1,
+    fill: "forwards"
+}
+
+function OpenSettings(){
+    GetSettingsClick();
+    slide();
+}
+
+function GetSettingsClick(){
+    settingApiUri.value = "";
+    settingKomgaUrl.value = "";
+    settingKomgaUser.value = "";
+    settingKomgaPass.value = "";
+    
+    settingApiUri.placeholder = apiUri;
+    
+    GetSettings().then(json => {
+        settingDownloadLocation.innerText = json.downloadLocation;
+        if(json.komga != null)
+            settingKomgaUrl.placeholder = json.komga.baseUrl;
+    });
+    
+    GetKomgaTask().then(json => {
+        if(json.length > 0)
+            settingKomgaConfigured.innerText = "✅";
+        else
+            settingKomgaConfigured.innerText = "❌";
+    });
+}
+
+function UpdateKomgaSettings(){
+    var auth = utf8_to_b64(`${settingKomgaUser.value}:${settingKomgaPass.value}`);
+    console.log(auth);
+    UpdateSettings("", settingKomgaUrl.value, auth);
+    CreateTask("UpdateKomgaLibrary", settingKomgaTime.value, "","","");
+    setTimeout(() => GetSettingsClick(), 500);
+}
+
+function utf8_to_b64( str ) {
+    return window.btoa(unescape(encodeURIComponent( str )));
+}
+
+//Resets the tasks shown
+ResetContent();
+//Get Tasks and show them
+GetDownloadTasks()
+    .then(json => json.forEach(task => {
+        var publication = CreatePublication(task.publication, task.connectorName);
+        publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event, false));
+        tasksContent.appendChild(publication);
+        tasks.push(task);
+    }));
+
+setInterval(() => {
+    //Tasks from API
+    var cTasks = [];
+    GetDownloadTasks()
+        .then(json => json.forEach(task => cTasks.push(task)))
+        .then(() => {
+            //Only update view if tasks-amount has changed
+            if(tasks.length != cTasks.length) {
+                //Resets the tasks shown
+                ResetContent();
+                //Add all currenttasks to view
+                cTasks.forEach(task => {
+                    var publication = CreatePublication(task.publication, task.connectorName);
+                    publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event, false));
+                    tasksContent.appendChild(publication);
+                })
+
+                tasks = cTasks;
+            }
+        }
+    );
+    
+    
+}, 1000);

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>

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>

Website/style.css

@@ -0,0 +1,422 @@
+: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;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+settingstab > * {
+    margin: 0 20px;
+}
+
+settingstab input {
+    padding: 3px;
+    border-radius: 3px;
+    border: 0;
+    margin: 2px 20px;
+}
+
+settingstab .title {
+    font-size: 14pt;
+    font-weight: bolder;
+    margin-top: 20px;
+}
+
+komga-settings {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+komga-settings input {
+    margin: 2px 0;
+}
+
+#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;
+}
+
+publication-information * {
+    z-index: 1;
+    color: var(--accent-color);
+}
+
+connector-name{
+    width: fit-content;
+    margin: 10px 0;
+}
+
+publication-name{
+    width: fit-content;
+    font-size: 16pt;
+    font-weight: bold;
+}
+
+publication img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+popup{
+    display: none;
+    width: 100%;
+    min-height: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    z-index: 2;
+}
+
+blur-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;
+}
+
+#publicationViewerPopup{
+    z-index: 6;
+}
+
+publication-viewer{
+    display: block;
+    width: 500px;
+    height: 300px;
+    position: absolute;
+    top: 200px;
+    left: 400px;
+    background-color: var(--accent-color);
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+publication-viewer{
+    padding: 30px;
+}
+
+publication-viewer::after{
+    content: '';
+    position: absolute;
+    left: 0; top: 0;
+    border-radius: 5px;
+    width: 100%; height: 100%;
+    background: rgba(0,0,0,0.8);
+    backdrop-filter: blur(3px);
+}
+
+publication-viewer img {
+    position: absolute;
+    left: 0;
+    top: 0;
+    min-height: 100%;
+    max-width: 100%;
+    border-radius: 5px;
+    z-index: 0;
+}
+
+publication-viewer publication-information publication-name{
+    margin: 5px 0;
+}
+
+publication-viewer publication-information publication-author {
+    margin: 5px 0;
+}
+
+publication-viewer publication-information publication-author::before {
+    content: "Author: ";
+}
+
+publication-viewer publication-information publication-description::before {
+    content: "Description";
+    display: block;
+    font-weight: bolder;
+}
+
+publication-viewer publication-information publication-description {
+    font-size: 12pt;
+    margin: 5px 0;
+    max-height: 200px;
+    overflow-x: scroll;
+}
+
+publication-viewer publication-information publication-delete {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    color: red;
+    margin: 20px;
+    font-size: 16pt;
+}
+
+publication-viewer publication-information publication-add {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    color: limegreen;
+    margin: 20px;
+    font-size: 16pt;
+}

docker-compose.yaml

@@ -0,0 +1,15 @@
+services:
+  tranga-api:
+    image: glax/tranga-api:latest
+    container_name: tranga-api
+    volumes:
+      - ./tranga:/usr/share/Tranga-API
+      - ./Manga:/Manga
+    ports:
+      - 6531:80
+    restart: unless-stopped
+  tranga-website:
+    image: glax/tranga-website:latest
+    container_name: tranga-website
+    ports:
+      - 9555:80