Renamed methods, made some methods non-static in Connector, some more logging

Tranga/Connector.cs

@@ -14,9 +14,9 @@ public abstract class Connector
     internal string downloadLocation { get; }  //Location of local files
     protected DownloadClient downloadClient { get; init; }
 
-    protected Logger? logger;
+    protected readonly Logger? logger;
 
-    protected string imageCachePath;
+    protected readonly string imageCachePath;
 
     protected Connector(string downloadLocation, string imageCachePath, Logger? logger)
     {
@@ -55,28 +55,31 @@ public abstract class Connector
     /// <param name="publication">Publication that contains Chapter</param>
     /// <param name="chapter">Chapter with Images to retrieve</param>
     public abstract void DownloadChapter(Publication publication, Chapter chapter);
-    
+
     /// <summary>
     /// Retrieves the Cover from the Website
     /// </summary>
     /// <param name="publication">Publication to retrieve Cover for</param>
-    public abstract void DownloadCover(Publication publication);
-
-    /// <summary>
-    /// Saves the series-info to series.json in the Publication Folder
-    /// </summary>
-    /// <param name="publication">Publication to save series.json for</param>
-    public void SaveSeriesInfo(Publication publication)
+    /// <param name="settings">TrangaSettings</param>
+    public void CloneCoverFromCache(Publication publication, TrangaSettings settings)
     {
-        logger?.WriteLine(this.GetType().ToString(), $"Saving series.json for {publication.sortName}");
-        //Check if Publication already has a Folder and a series.json
+        logger?.WriteLine(this.GetType().ToString(), $"Cloning cover {publication.sortName}");
+        //Check if Publication already has a Folder and cover
         string publicationFolder = Path.Join(downloadLocation, publication.folderName);
+        
         if(!Directory.Exists(publicationFolder))
             Directory.CreateDirectory(publicationFolder);
-        
-        string seriesInfoPath = Path.Join(publicationFolder, "series.json");
-        if(!File.Exists(seriesInfoPath))
-            File.WriteAllText(seriesInfoPath,publication.GetSeriesInfoJson());
+        DirectoryInfo dirInfo = new (publicationFolder);
+        if (dirInfo.EnumerateFiles().Any(info => info.Name.Contains("cover.")))
+        {
+            logger?.WriteLine(this.GetType().ToString(), $"Cover exists {publication.sortName}");
+            return;
+        }
+
+        string fileInCache = Path.Join(settings.coverImageCache, publication.coverFileNameInCache);
+        string newFilePath = Path.Join(publicationFolder, $"cover.{Path.GetFileName(fileInCache).Split('.')[^1]}" );
+        logger?.WriteLine(this.GetType().ToString(), $"Cloning cover {fileInCache} -> {newFilePath}");
+        File.Copy(fileInCache, newFilePath, true);
     }
 
     /// <summary>
@@ -84,9 +87,9 @@ public abstract class Connector
     /// See ComicInfo.xml
     /// </summary>
     /// <returns>XML-string</returns>
-    protected static string CreateComicInfo(Publication publication, Chapter chapter, Logger? logger)
+    protected static string GetComicInfoXmlString(Publication publication, Chapter chapter, Logger? logger)
     {
-        logger?.WriteLine("Connector", $"Creating ComicInfo.Xml for {publication.sortName} Chapter {chapter.volumeNumber} {chapter.chapterNumber}");
+        logger?.WriteLine("Connector", $"Creating ComicInfo.Xml for {publication.sortName} {publication.internalId} {chapter.volumeNumber}-{chapter.chapterNumber}");
         XElement comicInfo = new XElement("ComicInfo",
             new XElement("Tags", string.Join(',',publication.tags)),
             new XElement("LanguageISO", publication.originalLanguage),
@@ -102,16 +105,16 @@ public abstract class Connector
     /// Checks if a chapter-archive is already present
     /// </summary>
     /// <returns>true if chapter is present</returns>
-    public bool ChapterIsDownloaded(Publication publication, Chapter chapter)
+    public bool CheckChapterIsDownloaded(Publication publication, Chapter chapter)
     {
-        return File.Exists(CreateFullFilepath(publication, chapter));
+        return File.Exists(GetArchiveFilePath(publication, chapter));
     }
 
     /// <summary>
     /// Creates full file path of chapter-archive
     /// </summary>
     /// <returns>Filepath</returns>
-    protected string CreateFullFilepath(Publication publication, Chapter chapter)
+    protected string GetArchiveFilePath(Publication publication, Chapter chapter)
     {
         return Path.Join(downloadLocation, publication.folderName, $"{chapter.fileName}.cbz");
     }
@@ -121,9 +124,8 @@ public abstract class Connector
     /// </summary>
     /// <param name="imageUrl"></param>
     /// <param name="fullPath"></param>
-    /// <param name="downloadClient">DownloadClient of the connector</param>
     /// <param name="requestType">Requesttype for ratelimit</param>
-    protected static void DownloadImage(string imageUrl, string fullPath, DownloadClient downloadClient, byte requestType)
+    private void DownloadImage(string imageUrl, string fullPath, byte requestType)
     {
         DownloadClient.RequestResult requestResult = downloadClient.MakeRequest(imageUrl, requestType);
         byte[] buffer = new byte[requestResult.result.Length];
@@ -136,12 +138,11 @@ public abstract class Connector
     /// </summary>
     /// <param name="imageUrls">List of URLs to download Images from</param>
     /// <param name="saveArchiveFilePath">Full path to save archive to (without file ending .cbz)</param>
-    /// <param name="downloadClient">DownloadClient of the connector</param>
     /// <param name="comicInfoPath">Path of the generate Chapter ComicInfo.xml, if it was generated</param>
     /// <param name="requestType">RequestType for RateLimits</param>
-    protected static void DownloadChapterImages(string[] imageUrls, string saveArchiveFilePath, DownloadClient downloadClient, byte requestType, Logger? logger, string? comicInfoPath = null)
+    protected void DownloadChapterImages(string[] imageUrls, string saveArchiveFilePath, byte requestType, string? comicInfoPath = null)
     {
-        logger?.WriteLine("Connector", "Downloading Images");
+        logger?.WriteLine("Connector", $"Downloading Images for {saveArchiveFilePath}");
         //Check if Publication Directory already exists
         string directoryPath = Path.GetDirectoryName(saveArchiveFilePath)!;
         if (!Directory.Exists(directoryPath))
@@ -159,13 +160,14 @@ public abstract class Connector
         {
             string[] split = imageUrl.Split('.');
             string extension = split[^1];
-            DownloadImage(imageUrl, Path.Join(tempFolder, $"{chapter++}.{extension}"), downloadClient, requestType);
+            logger?.WriteLine("Connector", $"Downloading Image {chapter + 1}/{imageUrls.Length}");
+            DownloadImage(imageUrl, Path.Join(tempFolder, $"{chapter++}.{extension}"), requestType);
         }
         
         if(comicInfoPath is not null)
             File.Copy(comicInfoPath, Path.Join(tempFolder, "ComicInfo.xml"));
         
-        logger?.WriteLine("Connector", "Creating archive");
+        logger?.WriteLine("Connector", $"Creating archive {saveArchiveFilePath}");
         //ZIP-it and ship-it
         ZipFile.CreateFromDirectory(tempFolder, saveArchiveFilePath);
         Directory.Delete(tempFolder, true); //Cleanup
@@ -227,6 +229,7 @@ public abstract class Connector
                 catch (HttpRequestException e)
                 {
                     logger?.WriteLine(this.GetType().ToString(), e.Message);
+                    logger?.WriteLine(this.GetType().ToString(), $"Waiting {_rateLimit[requestType] * 2}");
                     Thread.Sleep(_rateLimit[requestType] * 2);
                 }
             }

Tranga/Connectors/MangaDex.cs

@@ -38,6 +38,7 @@ public class MangaDex : Connector
         int offset = 0; //"Page"
         int total = int.MaxValue; //How many total results are there, is updated on first request
         HashSet<Publication> publications = new();
+        int loadedPublicationData = 0;
         while (offset < total) //As long as we haven't requested all "Pages"
         {
             //Request next Page
@@ -58,6 +59,7 @@ public class MangaDex : Connector
             //Loop each Manga and extract information from JSON
             foreach (JsonNode? mangeNode in mangaInResult)
             {
+                logger?.WriteLine(this.GetType().ToString(), $"Getting publication data. {++loadedPublicationData}/{total}");
                 JsonObject manga = (JsonObject)mangeNode!;
                 JsonObject attributes = manga["attributes"]!.AsObject();
                 
@@ -142,12 +144,13 @@ public class MangaDex : Connector
             }
         }
 
+        logger?.WriteLine(this.GetType().ToString(), $"Done getting publications (title={publicationTitle})");
         return publications.ToArray();
     }
 
     public override Chapter[] GetChapters(Publication publication, string language = "")
     {
-        logger?.WriteLine(this.GetType().ToString(), $"Getting Chapters {publication.sortName} (language={language})");
+        logger?.WriteLine(this.GetType().ToString(), $"Getting Chapters for {publication.sortName} {publication.internalId} (language={language})");
         const int limit = 100; //How many values we want returned at once
         int offset = 0; //"Page"
         int total = int.MaxValue; //How many total results are there, is updated on first request
@@ -197,12 +200,13 @@ public class MangaDex : Connector
         {
             NumberDecimalSeparator = "."
         };
+        logger?.WriteLine(this.GetType().ToString(), $"Done getting Chapters for {publication.internalId}");
         return chapters.OrderBy(chapter => Convert.ToSingle(chapter.chapterNumber, chapterNumberFormatInfo)).ToArray();
     }
 
     public override void DownloadChapter(Publication publication, Chapter chapter)
     {
-        logger?.WriteLine(this.GetType().ToString(), $"Download Chapter {publication.sortName} {chapter.volumeNumber}-{chapter.chapterNumber}");
+        logger?.WriteLine(this.GetType().ToString(), $"Downloading Chapter-Info {publication.sortName} {publication.internalId} {chapter.volumeNumber}-{chapter.chapterNumber}");
         //Request URLs for Chapter-Images
         DownloadClient.RequestResult requestResult =
             downloadClient.MakeRequest($"https://api.mangadex.org/at-home/server/{chapter.url}?forcePort443=false'", (byte)RequestType.AtHomeServer);
@@ -221,17 +225,18 @@ public class MangaDex : Connector
             imageUrls.Add($"{baseUrl}/data/{hash}/{image!.GetValue<string>()}");
 
         string comicInfoPath = Path.GetTempFileName();
-        File.WriteAllText(comicInfoPath, CreateComicInfo(publication, chapter, logger));
+        File.WriteAllText(comicInfoPath, GetComicInfoXmlString(publication, chapter, logger));
         
         //Download Chapter-Images
-        DownloadChapterImages(imageUrls.ToArray(), CreateFullFilepath(publication, chapter), downloadClient, (byte)RequestType.AtHomeServer, logger, comicInfoPath);
+        DownloadChapterImages(imageUrls.ToArray(), GetArchiveFilePath(publication, chapter), (byte)RequestType.AtHomeServer, comicInfoPath);
     }
 
     private string? GetCoverUrl(string publicationId, string? posterId)
     {
+        logger?.WriteLine(this.GetType().ToString(), $"Getting CoverUrl for {publicationId}");
         if (posterId is null)
         {
-            logger?.WriteLine(this.GetType().ToString(), $"No posterId");
+            logger?.WriteLine(this.GetType().ToString(), $"No posterId, aborting");
             return null;
         }
         
@@ -247,6 +252,7 @@ public class MangaDex : Connector
         string fileName = result["data"]!["attributes"]!["fileName"]!.GetValue<string>();
 
         string coverUrl = $"https://uploads.mangadex.org/covers/{publicationId}/{fileName}";
+        logger?.WriteLine(this.GetType().ToString(), $"Got Cover-Url for {publicationId} -> {coverUrl}");
         return coverUrl;
     }
 
@@ -264,40 +270,10 @@ public class MangaDex : Connector
             return null;
 
         string author = result["data"]!["attributes"]!["name"]!.GetValue<string>();
+        logger?.WriteLine(this.GetType().ToString(), $"Got author {authorId} -> {author}");
         return author;
     }
 
-    public override void DownloadCover(Publication publication)
-    {
-        logger?.WriteLine(this.GetType().ToString(), $"Download cover {publication.sortName}");
-        //Check if Publication already has a Folder and cover
-        string publicationFolder = Path.Join(downloadLocation, publication.folderName);
-        if(!Directory.Exists(publicationFolder))
-            Directory.CreateDirectory(publicationFolder);
-        DirectoryInfo dirInfo = new (publicationFolder);
-        if (dirInfo.EnumerateFiles().Any(info => info.Name.Contains("cover.")))
-        {
-            logger?.WriteLine(this.GetType().ToString(), $"Cover exists {publication.sortName}");
-            return;
-        }
-
-        if (publication.posterUrl is null || publication.posterUrl!.Contains("http"))
-        {
-            logger?.WriteLine(this.GetType().ToString(), $"No Poster-URL in publication");
-            return;
-        }
-
-        //Get file-extension (jpg, png)
-        string[] split = publication.posterUrl.Split('.');
-        string extension = split[^1];
-
-        string outFolderPath = Path.Join(downloadLocation, publication.folderName);
-        Directory.CreateDirectory(outFolderPath);
-        
-        //Download cover-Image
-        DownloadImage(publication.posterUrl, Path.Join(downloadLocation, publication.folderName, $"cover.{extension}"), this.downloadClient, (byte)RequestType.AtHomeServer);
-    }
-
     private string SaveImage(string url)
     {
         string[] split = url.Split('/');
@@ -311,6 +287,7 @@ public class MangaDex : Connector
         using MemoryStream ms = new();
         coverResult.result.CopyTo(ms);
         File.WriteAllBytes(saveImagePath, ms.ToArray());
+        logger?.WriteLine(this.GetType().ToString(), $"Saving image to {saveImagePath}");
         return filename;
     }
 }

Tranga/Publication.cs

@@ -42,9 +42,21 @@ public readonly struct Publication
         this.status = status;
         this.publicationId = publicationId;
         this.folderName = string.Concat(LegalCharacters.Matches(sortName));
+        while (this.folderName.EndsWith('.'))
+            this.folderName = this.folderName.Substring(0, this.folderName.Length - 1);
         string onlyLowerLetters = string.Concat(this.sortName.ToLower().Where(Char.IsLetter));
         this.internalId = Convert.ToBase64String(Encoding.ASCII.GetBytes($"{onlyLowerLetters}{this.year}"));
     }
+
+    public void SaveSeriesInfoJson(string downloadDirectory)
+    {
+        string publicationFolder = Path.Join(downloadDirectory, this.folderName);
+        if(!Directory.Exists(publicationFolder))
+            Directory.CreateDirectory(publicationFolder);
+        string seriesInfoPath = Path.Join(publicationFolder, "series.json");
+        if(!File.Exists(seriesInfoPath))
+            File.WriteAllText(seriesInfoPath,this.GetSeriesInfoJson());
+    }
     
     /// <returns>Serialized JSON String for series.json</returns>
     public string GetSeriesInfoJson()

Tranga/TaskExecutor.cs

@@ -37,7 +37,7 @@ public static class TaskExecutor
         switch (trangaTask.task)
         {
             case TrangaTask.Task.DownloadNewChapters:
-                DownloadNewChapters(connector!, (Publication)trangaTask.publication!, trangaTask.language, ref taskManager._chapterCollection);
+                DownloadNewChapters(connector!, (Publication)trangaTask.publication!, trangaTask.language, ref taskManager._chapterCollection, taskManager.settings);
                 break;
             case TrangaTask.Task.UpdateChapters:
                 UpdateChapters(connector!, (Publication)trangaTask.publication!, trangaTask.language, ref taskManager._chapterCollection);
@@ -90,7 +90,7 @@ public static class TaskExecutor
     /// <param name="publication">Publication to check</param>
     /// <param name="language">Language to receive chapters for</param>
     /// <param name="chapterCollection"></param>
-    private static void DownloadNewChapters(Connector connector, Publication publication, string language, ref Dictionary<Publication, List<Chapter>> chapterCollection)
+    private static void DownloadNewChapters(Connector connector, Publication publication, string language, ref Dictionary<Publication, List<Chapter>> chapterCollection, TrangaSettings settings)
     {
         //Check if Publication already has a Folder
         string publicationFolder = Path.Join(connector.downloadLocation, publication.folderName);
@@ -98,11 +98,9 @@ public static class TaskExecutor
             Directory.CreateDirectory(publicationFolder);
         List<Chapter> newChapters = UpdateChapters(connector, publication, language, ref chapterCollection);
 
-        connector.DownloadCover(publication);
+        connector.CloneCoverFromCache(publication, settings);
         
-        string seriesInfoPath = Path.Join(publicationFolder, "series.json");
-        if(!File.Exists(seriesInfoPath))
-            File.WriteAllText(seriesInfoPath,publication.GetSeriesInfoJson());
+        publication.SaveSeriesInfoJson(connector.downloadLocation);
 
         foreach(Chapter newChapter in newChapters)
             connector.DownloadChapter(publication, newChapter);
@@ -122,7 +120,7 @@ public static class TaskExecutor
         chapterCollection.TryAdd(publication, newChaptersList); //To ensure publication is actually in collection
         
         Chapter[] newChapters = connector.GetChapters(publication, language);
-        newChaptersList = newChapters.Where(nChapter => !connector.ChapterIsDownloaded(publication, nChapter)).ToList();
+        newChaptersList = newChapters.Where(nChapter => !connector.CheckChapterIsDownloaded(publication, nChapter)).ToList();
         
         return newChaptersList;
     }

Tranga/TaskManager.cs

@@ -48,11 +48,10 @@ public class TaskManager
 
     public void UpdateSettings(string? downloadLocation, string? komgaUrl, string? komgaAuth)
     {
-        Komga? komga = null;
-        if (komgaUrl is not null && komgaAuth is not null)
-            komga = new Komga(komgaUrl, komgaAuth, null);
-        settings.downloadLocation = downloadLocation ?? settings.downloadLocation;
-        settings.komga = komga ?? komga;
+        if (komgaUrl is not null && komgaAuth is not null && komgaUrl.Length > 0 && komgaAuth.Length > 0)
+            settings.komga = new Komga(komgaUrl, komgaAuth, null);
+        if (downloadLocation is not null && downloadLocation.Length > 0)
+            settings.downloadLocation = downloadLocation;
         ExportData();
     }
 
@@ -141,14 +140,11 @@ public class TaskManager
         TrangaTask newTask;
         if (task == TrangaTask.Task.UpdateKomgaLibrary)
         {
-            newTask = new TrangaTask(task, null, null, reoccurrence, language);
-            
-            //Check if same task already exists
-            // ReSharper disable once SimplifyLinqExpressionUseAll readabilty
-            if (!_allTasks.Any(trangaTask => trangaTask.task == task))
-            {
-                _allTasks.Add(newTask);
-            }
+            newTask = new TrangaTask(task, null, null, reoccurrence);
+            logger?.WriteLine(this.GetType().ToString(), $"Removing old {task}-Task.");
+            //Only one UpdateKomgaLibrary Task
+            _allTasks.RemoveWhere(trangaTask => trangaTask.task is TrangaTask.Task.UpdateKomgaLibrary);
+            _allTasks.Add(newTask);
         }
         else
         {

Tranga/TrangaSettings.cs

@@ -14,6 +14,8 @@ public class TrangaSettings
 
     public TrangaSettings(string downloadLocation, string workingDirectory, Komga? komga)
     {
+        if (downloadLocation.Length < 1 || workingDirectory.Length < 1)
+            throw new ArgumentException("Download-location and working-directory paths can not be empty!");
         this.workingDirectory = workingDirectory;
         this.downloadLocation = downloadLocation;
         this.komga = komga;

Website/index.html

@@ -4,108 +4,121 @@
   <meta charset="UTF-8">
   <title>Tranga</title>
   <link rel="stylesheet" href="style.css">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </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>
-    <content>
-      <div id="addPublication">
-        <p>+</p>
+  <wrapper>
+    <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>
+      <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-tags id="publicationViewerTags"></publication-tags>
+            <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-interactions>
+              <publication-starttask>Start Task ▶️</publication-starttask>
+              <publication-delete>Delete Task ❌</publication-delete>
+              <publication-add>Add Task ➕</publication-add>
+            </publication-interactions>
+          </publication-information>
+        </publication-viewer>
+      </popup>
+      <popup id="settingsPopup">
+        <blur-background id="blurBackgroundSettingsPopup"></blur-background>
+        <settings>
+          <span style="font-weight: bold; text-align: center; font-size: 16pt;">Settings</span>
+          <div>
+            <p class="title">Download Location:</p>
+            <span id="downloadLocation"></span>
+          </div>
+          <div>
+            <p class="title">API-URI</p>
+            <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
+          </div>
+          <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">
+            <label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01:00" step="10">
+            <input type="submit" value="Update" onclick="UpdateKomgaSettings()">
+          </komga-settings>
+        </settings>
+      </popup>
+    </viewport>
+    <footer>
+      <div>
+        <img src="media/running.svg" alt="running"><div id="tasksRunningTag">0</div>
       </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>
-    <popup id="settingsPopup">
-      <blur-background id="blurBackgroundSettingsPopup"></blur-background>
-      <settings>
-        <span style="font-weight: bold; text-align: center; font-size: 16pt;">Settings</span>
-        <div>
-          <p class="title">Download Location:</p>
-          <span id="downloadLocation"></span>
-        </div>
-        <div>
-          <p class="title">API-URI</p>
-          <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
-        </div>
-        <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">
-          <label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01:00" step="10">
-          <input type="submit" value="Update" onclick="UpdateKomgaSettings()">
-        </komga-settings>
-      </settings>
-    </popup>
-  </viewport>
-  <footer>
-    <div>
-      <img src="media/running.svg" alt="running"><div id="tasksRunningTag">0</div>
-    </div>
-    <div>
-      <img src="media/queue.svg" alt="queue"><div id="tasksQueuedTag">0</div>
-    </div>
-    <div>
-      <img src="media/tasks.svg" alt="queue"><div id="totalTasksTag">0</div>
-    </div>
-    <p id="madeWith">Made with Blåhaj 🦈</p>
-  </footer>  
+      <div>
+        <img src="media/queue.svg" alt="queue"><div id="tasksQueuedTag">0</div>
+      </div>
+      <div>
+        <img src="media/tasks.svg" alt="queue"><div id="totalTasksTag">0</div>
+      </div>
+      <p id="madeWith">Made with Blåhaj 🦈</p>
+    </footer> 
+  </wrapper>
+  <footer-tag-popup>
+    <footer-tag-content>
+      <footer-tag-task-name>Test</footer-tag-task-name>
+    </footer-tag-content>
+  </footer-tag-popup>
+  
   <script src="apiConnector.js"></script>
   <script src="interaction.js"></script>
 </body>

Website/interaction.js

@@ -14,10 +14,12 @@ const publicationViewerPopup = document.querySelector("#publicationViewerPopup")
 const publicationViewerWindow = document.querySelector("publication-viewer");
 const publicationViewerDescription = document.querySelector("#publicationViewerDescription");
 const publicationViewerName = document.querySelector("#publicationViewerName");
+const publicationViewerTags = document.querySelector("#publicationViewerTags");
 const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor");
 const pubviewcover = document.querySelector("#pubviewcover");
 const publicationDelete = document.querySelector("publication-delete");
 const publicationAdd = document.querySelector("publication-add");
+const publicationTaskStart = document.querySelector("publication-starttask");
 const closetaskpopup = document.querySelector("#closePopupImg");
 const settingDownloadLocation = document.querySelector("#downloadLocation");
 const settingKomgaUrl = document.querySelector("#komgaUrl");
@@ -29,6 +31,8 @@ const settingApiUri = document.querySelector("#settingApiUri");
 const tagTasksRunning = document.querySelector("#tasksRunningTag");
 const tagTasksQueued = document.querySelector("#tasksQueuedTag");
 const tagTasksTotal = document.querySelector("#totalTasksTag");
+const tagTaskPopup = document.querySelector("footer-tag-popup");
+const tagTasksPopupContent = document.querySelector("footer-tag-content");
 
 settingsCog.addEventListener("click", () => OpenSettings());
 document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => HideSettings());
@@ -37,6 +41,7 @@ document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", ()
 document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
 publicationDelete.addEventListener("click", () => DeleteTaskClick());
 publicationAdd.addEventListener("click", () => AddTaskClick());
+publicationTaskStart.addEventListener("click", () => StartTaskClick());
 settingApiUri.addEventListener("keypress", (event) => {
     if(event.key === "Enter"){
         apiUri = settingApiUri.value;
@@ -49,6 +54,12 @@ searchPublicationQuery.addEventListener("keypress", (event) => {
         NewSearch();
     }
 });
+tagTasksRunning.addEventListener("mouseover", (event) => ShowRunningTasks(event));
+tagTasksRunning.addEventListener("mouseout", () => CloseTasksPopup());
+tagTasksQueued.addEventListener("mouseover", (event) => ShowQueuedTasks(event));
+tagTasksQueued.addEventListener("mouseout", () => CloseTasksPopup());
+tagTasksTotal.addEventListener("mouseover", (event) => ShowAllTasks(event));
+tagTasksTotal.addEventListener("mouseout", () => CloseTasksPopup());
 
 let availableConnectors;
 GetAvailableControllers()
@@ -68,6 +79,11 @@ function NewSearch(){
     selectRecurrence.disabled = true;
     connectorSelect.disabled = true;
     searchPublicationQuery.disabled = true;
+    //Waitcursor
+    document.body.style.cursor = "wait";
+    selectRecurrence.style.cursor = "wait";
+    connectorSelect.style.cursor = "wait";
+    searchPublicationQuery.style.cursor = "wait";
 
     //Empty previous results
     selectPublication.replaceChildren();
@@ -86,6 +102,11 @@ function NewSearch(){
             selectRecurrence.disabled = false;
             connectorSelect.disabled = false;
             searchPublicationQuery.disabled = false;
+            //Cursor
+            document.body.style.cursor = "initial";
+            selectRecurrence.style.cursor = "initial";
+            connectorSelect.style.cursor = "initial";
+            searchPublicationQuery.style.cursor = "initial";
         });
 }
 
@@ -122,6 +143,12 @@ function AddTaskClick(){
     HidePublicationPopup();
 }
 
+function StartTaskClick(){
+    var toEditTask = tasks.filter(task => task.publication.internalId == toEditId)[0];
+    StartTask("DownloadNewChapters", toEditTask.connectorName, toEditId);
+    HidePublicationPopup();
+}
+
 function ResetContent(){
     //Delete everything
     tasksContent.replaceChildren();
@@ -136,8 +163,6 @@ function ResetContent(){
     tasksContent.appendChild(add);
 }
 function ShowPublicationViewerWindow(publicationId, event, add){
-
-
     //Show popup
     publicationViewerPopup.style.display = "block";
     
@@ -155,6 +180,7 @@ function ShowPublicationViewerWindow(publicationId, event, add){
     //Edit information inside the window
     var publication = publications.filter(pub => pub.internalId === publicationId)[0];
     publicationViewerName.innerText = publication.sortName;
+    publicationViewerTags.innerText = publication.tags.join(", ");
     publicationViewerDescription.innerText = publication.description;
     publicationViewerAuthor.innerText = publication.author;
     pubviewcover.src = `imageCache/${publication.coverFileNameInCache}`;
@@ -162,12 +188,14 @@ function ShowPublicationViewerWindow(publicationId, event, add){
     
     //Check what action should be listed
     if(add){
-        publicationAdd.style.display = "block";
+        publicationAdd.style.display = "initial";
         publicationDelete.style.display = "none";
+        publicationTaskStart.style.display = "none";
     }
     else{
         publicationAdd.style.display = "none";
-        publicationDelete.style.display = "block";
+        publicationDelete.style.display = "initial";
+        publicationTaskStart.style.display = "initial";
     }
 }
 
@@ -214,11 +242,15 @@ function GetSettingsClick(){
     
     GetSettings().then(json => {
         settingDownloadLocation.innerText = json.downloadLocation;
-        if(json.komga != null)
+        if(json.komga != null) {
             settingKomgaUrl.placeholder = json.komga.baseUrl;
+            settingKomgaUser.placeholder = "Configured";
+            settingKomgaPass.placeholder = "***";
+        }
     });
     
     GetKomgaTask().then(json => {
+        settingKomgaTime.value = json[0].reoccurrence;
         if(json.length > 0)
             settingKomgaConfigured.innerText = "✅";
         else
@@ -227,17 +259,78 @@ function GetSettingsClick(){
 }
 
 function UpdateKomgaSettings(){
-    var auth = utf8_to_b64(`${settingKomgaUser.value}:${settingKomgaPass.value}`);
-    console.log(auth);
-    UpdateSettings("", settingKomgaUrl.value, auth);
+    if(settingKomgaUser.value != "" && settingKomgaPass != ""){
+        var auth = utf8_to_b64(`${settingKomgaUser.value}:${settingKomgaPass.value}`);
+        console.log(auth);
+
+        if(settingKomgaUrl.value != "")
+            UpdateSettings("", settingKomgaUrl.value, auth);
+        else
+            UpdateSettings("", settingKomgaUrl.placeholder, auth);
+    }
     CreateTask("UpdateKomgaLibrary", settingKomgaTime.value, "","","");
-    setTimeout(() => GetSettingsClick(), 500);
+    setTimeout(() => GetSettingsClick(), 100);
 }
 
 function utf8_to_b64( str ) {
     return window.btoa(unescape(encodeURIComponent( str )));
 }
 
+
+function ShowRunningTasks(event){
+    GetRunningTasks()
+        .then(json => {
+            tagTasksPopupContent.replaceChildren();
+            json.forEach(task => {
+                console.log(task);
+                if(task.publication != null){
+                    var taskname = document.createElement("footer-tag-task-name");
+                    taskname.innerText = task.publication.sortName;
+                    tagTasksPopupContent.appendChild(taskname);
+                }
+            });
+            if(tagTasksPopupContent.children.length > 0){
+                tagTaskPopup.style.display = "block";
+                tagTaskPopup.style.left = `${tagTasksRunning.offsetLeft - 20}px`;
+            }
+        });
+}
+
+function ShowQueuedTasks(event){
+    GetQueue()
+        .then(json => {
+            tagTasksPopupContent.replaceChildren();
+            json.forEach(task => {
+                var taskname = document.createElement("footer-tag-task-name");
+                taskname.innerText = task.publication.sortName;
+                tagTasksPopupContent.appendChild(taskname);
+            });
+            if(json.length > 0){
+                tagTaskPopup.style.display = "block";
+                tagTaskPopup.style.left = `${tagTasksQueued.offsetLeft- 20}px`;
+            }
+        });
+}
+function ShowAllTasks(event){
+    GetDownloadTasks()
+        .then(json => {
+            tagTasksPopupContent.replaceChildren();
+            json.forEach(task => {
+                var taskname = document.createElement("footer-tag-task-name");
+                taskname.innerText = task.publication.sortName;
+                tagTasksPopupContent.appendChild(taskname);
+            });
+            if(json.length > 0){
+                tagTaskPopup.style.display = "block";
+                tagTaskPopup.style.left = `${tagTasksTotal.offsetLeft - 20}px`;
+            }
+        });
+}
+
+function CloseTasksPopup(){
+    tagTaskPopup.style.display = "none";
+}
+
 //Resets the tasks shown
 ResetContent();
 //Get Tasks and show them

Website/style.css

@@ -1,5 +1,5 @@
 :root{
-    --background-color: #eee;
+    --background-color: #030304;
     --second-background-color: #fff;
     --primary-color: #f5a9b8;
     --secondary-color: #5bcefa;
@@ -11,15 +11,19 @@
 body{
     padding: 0;
     margin: 0;
-    display: flex;
-    flex-flow: column;
-    flex-wrap: nowrap;
     height: 100vh;
     background-color: var(--background-color);
     font-family: "Inter", sans-serif;
     overflow-x: hidden;
 }
 
+wrapper {
+    display: flex;
+    flex-flow: column;
+    flex-wrap: nowrap;
+    height: 100vh;
+}
+
 background-placeholder{
     background-color: var(--second-background-color);
     opacity: 1;
@@ -49,6 +53,7 @@ titlebox {
 }
 
 titlebox span{
+    cursor: default;
     font-size: 24pt;
     font-weight: bold;
     background: linear-gradient(150deg, var(--primary-color), var(--accent-color));
@@ -60,6 +65,7 @@ titlebox span{
 titlebox img {
     height: 100%;
     margin-right: 10px;
+    cursor: grab;
 }
 
 spacer{
@@ -115,6 +121,7 @@ footer > div {
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
+    cursor: pointer;
 }
 
 footer > div > *{
@@ -126,6 +133,7 @@ footer > div > *{
     flex-grow: 1;
     text-align: right;
     margin-right: 20px;
+    cursor: url("media/blahaj.png"), grab;
 }
 
 content {
@@ -229,7 +237,7 @@ publication::after{
     left: 0; top: 0;
     border-radius: 5px;
     width: 100%; height: 100%;
-    background: linear-gradient(rgba(0,0,0,0.7), rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.2));
+    background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2));
 }
 
 publication-information {
@@ -372,17 +380,13 @@ addtask-settings addtask-setting{
 publication-viewer{
     display: block;
     width: 450px;
-    height: 300px;
     position: absolute;
     top: 200px;
     left: 400px;
     background-color: var(--accent-color);
     border-radius: 5px;
     overflow: hidden;
-}
-
-publication-viewer{
-    padding: 30px;
+    padding: 15px;
 }
 
 publication-viewer::after{
@@ -390,7 +394,8 @@ publication-viewer::after{
     position: absolute;
     left: 0; top: 0;
     border-radius: 5px;
-    width: 100%; height: 100%;
+    width: 100%;
+    height: 100%;
     background: rgba(0,0,0,0.8);
     backdrop-filter: blur(3px);
 }
@@ -406,16 +411,32 @@ publication-viewer img {
     z-index: 0;
 }
 
-publication-viewer publication-information publication-name{
+publication-viewer publication-information > * {
     margin: 5px 0;
 }
 
-publication-viewer publication-information publication-author {
-    margin: 5px 0;
+publication-viewer publication-information publication-name {
+    width: initial;
+    overflow-x: scroll;
+    white-space: nowrap;
+    scrollbar-width: none;
+}
+
+publication-viewer publication-information publication-tags::before {
+    content: "Tags";
+    display: block;
+    font-weight: bolder;
+}
+
+publication-viewer publication-information publication-tags {
+    overflow-x: scroll;
+    white-space: nowrap;
+    scrollbar-width: none;
 }
 
 publication-viewer publication-information publication-author::before {
     content: "Author: ";
+    font-weight: bolder;
 }
 
 publication-viewer publication-information publication-description::before {
@@ -427,24 +448,71 @@ publication-viewer publication-information publication-description::before {
 publication-viewer publication-information publication-description {
     font-size: 12pt;
     margin: 5px 0;
-    max-height: 200px;
+    height: 145px;
     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-interactions {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    align-items: start;
+    width: 100%;
 }
 
-publication-viewer publication-information publication-add {
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
-    color: limegreen;
-    margin: 20px;
+publication-viewer publication-information publication-interactions > * {
+    margin: 0 10px;
     font-size: 16pt;
+    cursor: pointer;
+}
+
+publication-viewer publication-information publication-interactions publication-starttask {
+    color: var(--secondary-color);
+}
+
+publication-viewer publication-information publication-interactions publication-delete {
+    color: red;
+}
+
+publication-viewer publication-information publication-interactions publication-add {
+    color: limegreen;
+}
+
+footer-tag-popup {
+    display: none;
+    padding: 2px 4px;
+    position: fixed;
+    bottom: 58px;
+    left: 20px;
+    background-color: var(--second-background-color);
+    z-index: 8;
+    border-radius: 5px;
+    max-height: 400px;
+}
+
+footer-tag-content{
+    position: relative;
+    max-height: 400px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    overflow-y: scroll;
+}
+
+footer-tag-content > * {
+    margin: 2px 0;
+}
+
+footer-tag-popup::before{
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    border-right: 10px solid var(--second-background-color);
+    border-left: 10px solid transparent;
+    border-top: 10px solid var(--second-background-color);
+    border-bottom: 10px solid transparent;
+    left: 0px;
+    bottom: -17px;
+    border-radius: 0 0 0 5px;
 }

docker-compose.yaml

@@ -1,4 +1,5 @@
-services:
+version: '3'
+services:
   tranga-api:
     image: glax/tranga-api:latest
     container_name: tranga-api