From e2d30784e6c70574aad4bed812ac9d23bbba93d6 Mon Sep 17 00:00:00 2001
From: masterhc <cris_ferreira_pires@hotmail.com>
Date: Wed, 5 Jun 2024 20:54:31 +0100
Subject: [PATCH] INC - Feature: ReadAll && Add to download queue

---
 controllers/api.js  |  3 +++
 public/css/home.css | 32 ++++++++++++++++++++++++++++++--
 views/mangaPage.ejs | 20 +++++++++++++++++++-
 3 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/controllers/api.js b/controllers/api.js
index 5677e2c..7f85fa9 100644
--- a/controllers/api.js
+++ b/controllers/api.js
@@ -126,6 +126,9 @@ exports.manga = async (req, res)=>
         const sortedChapters = chaptersRead.sort((a, b) => a.chapterNum - b.chapterNum);
         const sortedAndFilteredChapters = sortedChapters.filter(item=> item.lastImageRead && !item.completely);
         const lastChapterWithReadImages=sortedAndFilteredChapters.shift();
+        const isMangaFullyRead = lastChapterWithReadImages?.chNum >= manga.List.pop().num || lastCompletelyRead?.chNum >= manga.List.pop().num;
+        manga['fullyRead'] = isMangaFullyRead;
+        manga['isDownloaded'] = false  //TODO
         let chapterNumToContinue = getChapterNumToContinue(lastCompletelyRead, lastChapterWithReadImages, manga.List);
         if(!manga.List.some(item=> item.num==chapterNumToContinue)) chapterNumToContinue = Math.trunc(chapterNumToContinue);
         if(lastCompletelyRead  || lastChapterWithReadImages)
diff --git a/public/css/home.css b/public/css/home.css
index 82684c4..957ae1d 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -417,10 +417,38 @@ button:hover
   overflow: hidden; 
   text-overflow: ellipsis;
 }
-.infoCard > img
+.infoCard > .avatar > .dl
+{
+  left: -2.5em;
+  position: relative;
+  top: .4em;
+  color: var(--purple-heart-500);
+}
+.infoCard > .avatar > .markAll
+{
+  color: var(--purple-heart-500);
+  left: -1.35em;
+  top: .4em;
+}
+.infoCard > .avatar
+{
+  width: 40vw;
+  height: calc(100% - 2em);
+  margin: 1em;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.infoCard > .avatar > .dl:hover
+{
+  color:var(--accent)
+}
+.infoCard >  .avatar > img
 {
   border-radius: 5px;
-  margin:10px;
+  width: 100%;
+  height: 100%;
 }
 .infoCard > .infoText > a 
 {
diff --git a/views/mangaPage.ejs b/views/mangaPage.ejs
index 1b7112b..092f3c1 100644
--- a/views/mangaPage.ejs
+++ b/views/mangaPage.ejs
@@ -1,5 +1,23 @@
 <div class="infoCard">
-    <img src="<%=data.img%> " alt="<%= data.title %> Cover Image">
+    <div class="avatar">
+        <img src="<%=data.img%> " alt="<%= data.title %> Cover Image">
+        <% if(!data.fullyRead){%>
+            <span 
+                class="material-symbols-outlined markAsRead markAll"
+            >       
+                new_label
+            </span>
+        <%} else { %> 
+            <span 
+                class="material-symbols-outlined readMarker markAll readMarkerComplete fill"
+            >
+                beenhere
+            </span>
+            <%} %> 
+        <span class="material-symbols-outlined dl <%= data.isDownloaded ? 'fill' : '' %>">
+            download
+        </span>
+    </div>
     <div class="infoText">
         <a href="<%=data.link%>" target="_blank"></a> 
             <% if(data.Status=='Ongoing'){%>