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

@@ -37,8 +37,8 @@
       </publication>
     </content>    
     
-    <popup>
-      <blur-background></blur-background>
+    <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,10 +53,14 @@
               </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>
@@ -69,6 +72,7 @@
             Pandemic love comedy!
           </publication-description>
           <publication-delete>Delete Task ❌</publication-delete>
+          <publication-add>Add Task ➕</publication-add>
         </publication-information>
       </publication-viewer>
     </popup>
@@ -76,7 +80,17 @@
   </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

@@ -20,8 +20,8 @@ const slideOutRightTiming = {
 
 let publications = [];
 let tasks = [];
+let toEditId;
 
-const taskTypesSelect = document.querySelector("#taskTypes")
 const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
 const selectPublication = document.querySelector("#taskSelectOutput");
 const connectorSelect = document.querySelector("#connectors");
@@ -29,35 +29,34 @@ const settingsTab = document.querySelector("#settingstab");
 const settingsCog = document.querySelector("#settingscog");
 const selectRecurrence = document.querySelector("#selectReccurrence");
 const tasksContent = document.querySelector("content");
-const generalPopup = document.querySelector("popup");
-const addTaskWindow = document.querySelector("addtask-window");
-const publicationViewer = document.querySelector("publication-viewer");
+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", () => HidePopup())
-document.querySelector("blur-background").addEventListener("click", () => HidePopup());
 
-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');
@@ -69,22 +68,37 @@ GetAvailableControllers()
 
 searchPublicationQuery.addEventListener("keypress", (event) => {
    if(event.key === "Enter"){
-       selectPublication.replaceChildren();
-       GetPublication(connectorSelect.value, searchPublicationQuery.value)
-           //.then(json => console.log(json));
-           .then(json => 
-               json.forEach(publication => {
-                   var option = CreatePublication(publication, connectorSelect.value);
-                   option.addEventListener("click", () => {
-                       CreateTask(taskTypesSelect.value, selectRecurrence.value, connectorSelect.value, publication.internalId, "en");
-                       selectPublication.replaceChildren();
-                   });
-                   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 publicationElement = document.createElement('publication');
     publicationElement.setAttribute("id", publication.internalId);
@@ -105,11 +119,19 @@ function CreatePublication(publication, connector){
     return publicationElement;
 }
 
-function DeleteTask(taskType, connectorName, publicationId){
-    
+function DeleteTaskClick(){
+    taskToDelete = tasks.filter(tTask => tTask.publication.internalId === toEditId)[0];
+    DeleteTask("DownloadNewChapters", taskToDelete.connectorName, toEditId);
+    HidePublicationPopup();
 }
 
-var slideIn = true;
+function AddTaskClick(){
+    CreateTask("DownloadNewChapters", selectRecurrence.value, connectorSelect.value, toEditId, "en")
+    HideAddTaskPopup();
+    HidePublicationPopup();
+}
+
+let slideIn = true;
 function slide() {
     if (slideIn)
         settingsTab.animate(slideInRight, slideInRightTiming);
@@ -119,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");
@@ -128,39 +153,46 @@ 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`;
     
-function ShowPopup(){
-    generalPopup.style.display = "block";
-    generalPopup.animate(fadeIn, fadeInTiming);
-}
-
-let toRemoveId;
-function ShowPublicationViewerWindow(publicationId, event){
-    publicationViewer.style.top = `${event.clientY - 60}px`;
-    publicationViewer.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;
     
-    toRemoveId = publicationId;
-    publicationViewer.style.display = "block";
-    ShowPopup();
+    //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();
-    addTaskWindow.style.display = "flex";
-    ShowPopup();
+    addTaskPopup.style.display = "block";
 }
-function HidePopup(){
-    generalPopup.style.display = "none";
-    addTaskWindow.style.display = "none";
-    publicationViewer.style.display = "none";
+function HideAddTaskPopup(){
+    addTaskPopup.style.display = "none";
 }
 
+
 const fadeIn = [
     { opacity: "0" },
     { opacity: "1" }
@@ -172,28 +204,74 @@ const fadeInTiming = {
     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));
+        publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event, false));
         tasksContent.appendChild(publication);
-        
-        if(tasks.filter(task => task.publication.internalId === publication.internalId) < 1)
-            tasks.push(task);
+        tasks.push(task);
     }));
 
 setInterval(() => {
-    ResetContent();
-    GetTasks()
-        //.then(json => console.log(json))
-        .then(json => json.forEach(task => {
-            var publication = CreatePublication(task.publication, task.connectorName);
-            publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event));
-            tasksContent.appendChild(publication);
+    //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);
+                })
 
-            if(tasks.filter(task => task.publication.internalId === publication.internalId) < 1)
-                tasks.push(task);
-        }));
-}, 5000);
+                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 {
@@ -226,7 +256,7 @@ blur-background {
 }
 
 addtask-window {
-    display: none;
+    display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     position: absolute;
@@ -307,8 +337,12 @@ addtask-settings addtask-setting{
     align-content: start;
 }
 
+#publicationViewerPopup{
+    z-index: 6;
+}
+
 publication-viewer{
-    display: none;
+    display: block;
     width: 500px;
     height: 300px;
     position: absolute;
@@ -376,3 +410,12 @@ publication-viewer publication-information publication-delete {
     margin: 20px;
     font-size: 16pt;
 }
+
+publication-viewer publication-information publication-add {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    color: limegreen;
+    margin: 20px;
+    font-size: 16pt;
+}