Merge branch 'Website'

Reviewed-on: #21

Tranga-API/Program.cs

@@ -3,6 +3,7 @@ using Tranga;
 
 string applicationFolderPath =
     Path.Join(Environment.GetFolderPath(Environment.SpecialFolder.CommonApplicationData), "Tranga-API");
+string downloadFolderPath = Path.Join(applicationFolderPath, "Manga");
 string logsFolderPath = 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");
@@ -20,7 +21,7 @@ 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 +29,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.WithOrigins("http://localhost", "http://127.0.0.1", "http://localhost:63342");
+            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,7 +80,16 @@ 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) =>
+{
+    TrangaTask.Task task = Enum.Parse<TrangaTask.Task>(taskType);
+    if (searchString is null)
+        return taskManager.GetAllTasks().Where(tTask => tTask.task == task && tTask.connectorName == connectorName);
+    else
+        return taskManager.GetAllTasks().Where(tTask =>
+            tTask.task == task && tTask.connectorName == connectorName && tTask.ToString()
+                .Contains(searchString, StringComparison.InvariantCultureIgnoreCase));
+});
 
 app.MapPost("/Tasks/Start", (string taskType, string? connectorName, string? publicationId) =>
 {

Website/apiConnector.js

@@ -52,8 +52,8 @@ async function GetRunningTasks(){
     return json;
 }
 
-async function GetTasks(){
-    var uri = apiUri + "/Tasks/GetList";
+async function GetDownloadTasks(){
+    var uri = apiUri + "/Tasks/Get?taskType=DownloadNewChapters";
     let json = await GetData(uri);
     return json;
 }
@@ -64,6 +64,12 @@ async function GetSettings(){
     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);
@@ -80,7 +86,7 @@ function EnqueueTask(taskType, connectorName, publicationId){
 }
 
 function UpdateSettings(downloadLocation, komgaUrl, komgaAuth){
-    var uri = apiUri + `/Settings/Update?downloadLocation=${downloadLocation}&komgaUrl=${komgaAuth}&komgaAuth=${komgaAuth}`;
+    var uri = apiUri + `/Settings/Update?downloadLocation=${downloadLocation}&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
     PostData(uri);
 }
 

Website/index.html

@@ -35,10 +35,10 @@
           <publication-name>Tensei Pandemic</publication-name>
         </publication-information>
       </publication>
-    </content>
-
-    <addtask-popup>
-      <addtask-background></addtask-background>
+    </content>    
+    
+    <popup id="addTaskPopup">
+      <blur-background id="blurBackgroundTaskPopup"></blur-background>
       <addtask-window>
         <window-titlebar>
           <p>Add Task</p>
@@ -46,7 +46,6 @@
         </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">
@@ -54,15 +53,44 @@
               </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>
-    </addtask-popup>
+    </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>
+    <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"></div>
+      <input type="submit" value="Update" onclick="UpdateSettingsClick()">
+    </komga-settings>
   </settingstab>
   
   <script src="apiConnector.js"></script>

Website/interaction.js

@@ -18,7 +18,10 @@ const slideOutRightTiming = {
     easing: "ease-in"
 }
 
-const taskTypesSelect = document.querySelector("#taskTypes")
+let publications = [];
+let tasks = [];
+let toEditId;
+
 const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
 const selectPublication = document.querySelector("#taskSelectOutput");
 const connectorSelect = document.querySelector("#connectors");
@@ -26,28 +29,34 @@ 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 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");
 
-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);
-        }));
+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());
 
 let availableConnectors;
 GetAvailableControllers()
     .then(json => availableConnectors = json)
-    //.then(json => console.log(json))
     .then(json => 
         json.forEach(connector => {
             var option = document.createElement('option');
@@ -59,30 +68,43 @@ GetAvailableControllers()
 
 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);
-               }
-           ));
+       NewSearch();
    } 
 });
 
+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 option = document.createElement('publication');
-    option.setAttribute("id", publication.internalId);
+    var publicationElement = document.createElement('publication');
+    publicationElement.setAttribute("id", publication.internalId);
     var img = document.createElement('img');
     img.src = publication.posterUrl;
-    option.appendChild(img);
+    publicationElement.appendChild(img);
     var info = document.createElement('publication-information');
     var connectorName = document.createElement('connector-name');
     connectorName.innerText = connector;
@@ -91,18 +113,27 @@ function CreatePublication(publication, connector){
     var publicationName = document.createElement('publication-name');
     publicationName.innerText = publication.sortName;
     info.appendChild(publicationName);
-    option.appendChild(info);
-    return option;
+    publicationElement.appendChild(info);
+    if(publications.filter(pub => pub.internalId === publication.internalId) < 1)
+        publications.push(publication);
+    return publicationElement;
 }
 
-function CreateNewMangaDownloadTask(taskType, connectorName, publicationId){
-    CreateTask(taskType, selectRecurrence.value, connectorName, publicationId, "en");
-    selectPublication.innerHTML = "";
+function DeleteTaskClick(){
+    taskToDelete = tasks.filter(tTask => tTask.publication.internalId === toEditId)[0];
+    DeleteTask("DownloadNewChapters", taskToDelete.connectorName, toEditId);
+    HidePublicationPopup();
 }
 
-var slideIn = true;
-function slide(){
-    if(slideIn)
+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);
@@ -110,7 +141,10 @@ function slide(){
 }
 
 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");
@@ -119,40 +153,125 @@ function ResetContent(){
     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(){
-    addtaskpopup.style.display = "block";
-    addtaskpopup.animate(fadeIn, fadeInTiming);
+    selectPublication.replaceChildren();
+    addTaskPopup.style.display = "block";
 }
-function HideNewTaskWindow(){
-    addtaskpopup.style.display = "none";
+function HideAddTaskPopup(){
+    addTaskPopup.style.display = "none";
 }
 
+
 const fadeIn = [
     { opacity: "0" },
     { opacity: "1" }
 ];
 
 const fadeInTiming = {
-    duration: 150,
+    duration: 50,
     iterations: 1,
     fill: "forwards"
 }
 
+function OpenSettings(){
+    GetSettingsClick();
+    slide();
+}
+
+function GetSettingsClick(){
+    settingKomgaUrl.value = "";
+    settingKomgaUser.value = "";
+    settingKomgaPass.value = "";
+    
+    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 UpdateSettingsClick(){
+    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();
-GetTasks()
-    //.then(json => console.log(json))
+//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(() => {
-    ResetContent();
-    GetTasks()
-        //.then(json => console.log(json))
-        .then(json => json.forEach(task => {
-            var publication = CreatePublication(task.publication, task.connectorName);
-            tasksContent.appendChild(publication);
-        }));
-}, 5000);
+    //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/style.css

@@ -123,6 +123,36 @@ settingstab{
     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 .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 > * {
+    margin: 2px 0;
+}
+
+komga-settings input {
+    padding: 3px;
+    border-radius: 3px;
+    border: 0;
 }
 
 #addPublication {
@@ -181,18 +211,20 @@ publication-information {
     justify-content: start;
 }
 
+publication-information * {
+    z-index: 1;
+    color: var(--accent-color);
+}
+
 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 {
@@ -204,7 +236,7 @@ publication img {
     z-index: 0;
 }
 
-addtask-popup{
+popup{
     display: none;
     width: 100%;
     min-height: 100%;
@@ -214,7 +246,7 @@ addtask-popup{
     z-index: 2;
 }
 
-addtask-background {
+blur-background {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -303,4 +335,87 @@ addtask-settings addtask-setting{
     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;
 }