INC - Feature: ReadAll && Add to download queue

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)

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 
 {

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'){%>