feat: highlight the already requested entries, closes #5

src/app.py

@@ -70,6 +70,14 @@ async def fetch_data(data: Dict[str, Any]) -> List[Dict[str, Any]]:
                 in_komga = komga.getSeries(
                     manga.title.english if manga.title.english else manga.title.romaji
                 )
+                requested = cache.fetch_one(
+                    query="SELECT manga_id, grabbed FROM manga_requests WHERE manga_id = ?",
+                    args=(manga.id,),
+                )
+                komga_request = False
+                if requested:
+                    komga_request = True
+
                 results.append(
                     {
                         "id": manga.id,
@@ -88,6 +96,7 @@ async def fetch_data(data: Dict[str, Any]) -> List[Dict[str, Any]]:
                         else "No description available",
                         "isAdult": manga.isAdult,
                         "in_komga": in_komga,
+                        "requested": komga_request,
                     }
                 )
 

src/static/style.css

@@ -167,6 +167,19 @@ body.nsfw-disabled .image-container.nsfw:hover img {
 
 }
 
+.card.requested {
+    border: 3px solid orange;
+    box-sizing: border-box;
+    /* disable the request button for entries in Komga */
+    /* only allow the info button to be clicked */
+    opacity: 0.3;
+}
+
+.card.manga.requested .request {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
 .card.komga .request {
     pointer-events: none;
     opacity: 0.5;

src/templates/index.html

@@ -51,7 +51,9 @@
     <div class="results">
         {% for result in results %}
 
-        <div class="card {{ result.type | lower }} {% if result.in_komga %}komga{% endif %}">
+        <div
+            class="card {{ result.type | lower }} {% if result.in_komga %}komga{% endif %} {% if result.requested %}requested{% endif %}">
+
             <div class="image-container {{ 'nsfw' if result.isAdult else '' }}">
 
                 <img src="{{ result.image }}" alt="Cover">
@@ -255,11 +257,11 @@
                 body: JSON.stringify(query)
             })
                 .then(res => res.json())
-                .then(data => {
+                .then((data) => {
                     displayResults(data);
                     loadingElement.style.display = "none"; // Hide loading animation
                 })
-                .catch(err => {
+                .catch((err) => {
                     console.error("Search failed", err);
                     loadingElement.style.display = "none"; // Hide loading animation
                 });
@@ -273,6 +275,7 @@
                 const card = document.createElement('div');
                 card.className = `card ${result.in_komga ? 'komga' : ''}`;
                 card.className += ` ${result.type.toLowerCase()}`;
+                card.className += ` ${result.requested ? 'requested' : ''}`;
 
                 const imageContainer = document.createElement('div');
                 imageContainer.className = `image-container ${result.isAdult ? 'nsfw' : ''}`;
@@ -307,6 +310,9 @@
                 if (result.in_komga) {
                     requestButton.disabled = true;
                 }
+                if (result.requested) {
+                    requestButton.disabled = true;
+                }
 
                 actions.appendChild(infoButton);
                 actions.appendChild(requestButton);