feat: add ability to display info even if title in komga, fix requests, fix not all results showing up, fixes #11 fixes #10 fixes #8

src/app.py

@@ -70,7 +70,6 @@ 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
                 )
-                print(in_komga, manga.title.english)
                 results.append(
                     {
                         "id": manga.id,
@@ -81,7 +80,7 @@ async def fetch_data(data: Dict[str, Any]) -> List[Dict[str, Any]]:
                         if manga.coverImage
                         else "https://demofree.sirv.com/nope-not-here.jpg",
                         "status": manga.status,
-                        "type": manga.type,
+                        "type": manga.format,
                         "genres": manga.genres or [],
                         "tags": [tag.name for tag in (manga.tags or [])],
                         "description": manga.description.replace("<br>", "\n")
@@ -106,7 +105,7 @@ async def get_genres():
     async with httpx.AsyncClient() as client:
         try:
             response = await client.post(
-                f"https://graphql.anilist.co",
+                "https://graphql.anilist.co",
                 json={"query": GENRES_QUERY},
             )
             response.raise_for_status()
@@ -124,7 +123,7 @@ async def get_tags():
     async with httpx.AsyncClient() as client:
         try:
             response = await client.post(
-                f"https://graphql.anilist.co",
+                "https://graphql.anilist.co",
                 json={"query": TAGS_QUERY},
             )
             response.raise_for_status()
@@ -139,7 +138,6 @@ async def get_tags():
 @app.route("/search", methods=["POST"])
 async def search():
     data = await request.get_json()
-    print(data)
     results = await fetch_data(data)
     if not results:
         return jsonify({"error": "No results found"}), 404
@@ -154,13 +152,12 @@ async def index():
 @app.route("/request", methods=["POST"])
 async def log_request():
     data = await request.get_json()
-    item = data.get("title")
+    item = data.get("item")
     if item:
         asynccache = KomCache()
-        manga_title = data.get("title")
         asynccache.insert(
-            "INSERT INTO manga_requests (manga_id, manga_title) VALUES (?, ?)",
+            "INSERT INTO manga_requests (manga_id) VALUES (?)",
-            (item, manga_title),
+            (item,),
         )
         return jsonify({"status": "success"})
     return jsonify({"status": "failed"}), 400

src/static/style.css

@@ -155,11 +155,19 @@ body.nsfw-disabled .image-container.nsfw:hover img {
     /* Implement design here */
 }
 
+/* ========== KOMGA SPECIFIC STYLES ========== */
+
+
 .card.komga {
     border: 3px solid green;
     box-sizing: border-box;
     /* disable the request button for entries in Komga */
-    pointer-events: none;
+    /* only allow the info button to be clicked */
-    opacity: 0.5;
+    opacity: 0.3;
 
 }
+
+.card.komga .request {
+    pointer-events: none;
+    opacity: 0.5;
+}

src/templates/index.html

@@ -37,7 +37,13 @@
                 <input type="checkbox" id="toggleNSFW" />
                 Show NSFW content
             </label>
+            <label style="margin-left: 1em;">
+                <input type="checkbox" id="toggleNovels" checked />
+                Show Novels
+            </label>
+
         </div>
+
     </div>
 
     {% if results %}
@@ -45,7 +51,7 @@
     <div class="results">
         {% for result in results %}
 
-        <div class="card {% if result.in_komga %}komga{% endif %}">
+        <div class="card {{ result.type | lower }} {% if result.in_komga %}komga{% endif %}">
             <div class="image-container {{ 'nsfw' if result.isAdult else '' }}">
 
                 <img src="{{ result.image }}" alt="Cover">
@@ -56,7 +62,7 @@
 
             <p>{{ result.title }}</p>
             <div class="actions">
-                <button onclick="showInfo({{ result | tojson | safe }})" , class="info">Info</button>
+                <button onclick="showInfo({{ result | tojson | safe }})" class="info">Info</button>
                 <!-- if entry has in_komga == true, do not show the request button, else show it -->
                 {% if not result.in_komga %}
                 <button onclick="sendRequest('{{ result.id }}')" class="request">Request</button>
@@ -86,6 +92,10 @@
         </div>
     </div>
 
+    <div id="loading" style="display: none; text-align: center; margin-top: 1em;">
+        <p>Loading...</p>
+    </div>
+
     <script>
         function sendRequest(item) {
             fetch("/request", {
@@ -113,13 +123,14 @@
         }
 
         document.addEventListener("DOMContentLoaded", () => {
-            const checkbox = document.getElementById("toggleNSFW");
+            const nsfwCheckbox = document.getElementById("toggleNSFW");
+            const novelsCheckbox = document.getElementById("toggleNovels");
             const body = document.body;
 
             body.classList.add("nsfw-disabled");
 
-            checkbox.addEventListener("change", () => {
+            nsfwCheckbox.addEventListener("change", () => {
-                const enabled = checkbox.checked;
+                const enabled = nsfwCheckbox.checked;
                 body.classList.toggle("nsfw-disabled", !enabled);
                 body.classList.toggle("nsfw-enabled", enabled);
 
@@ -129,6 +140,13 @@
                 });
             });
 
+            novelsCheckbox.addEventListener("change", () => {
+                const enabled = novelsCheckbox.checked;
+                document.querySelectorAll('.card.novel').forEach(card => {
+                    card.style.display = enabled ? '' : 'none';
+                });
+            });
+
             fetchOptions("/api/genres", "genre");
             fetchOptions("/api/tags", "tag");
         });
@@ -228,14 +246,23 @@
                 tags: selectedTags
             };
 
+            const loadingElement = document.getElementById("loading");
+            loadingElement.style.display = "block"; // Show loading animation
+
             fetch("/search", {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify(query)
             })
                 .then(res => res.json())
-                .then(data => displayResults(data))
+                .then(data => {
-                .catch(err => console.error("Search failed", err));
+                    displayResults(data);
+                    loadingElement.style.display = "none"; // Hide loading animation
+                })
+                .catch(err => {
+                    console.error("Search failed", err);
+                    loadingElement.style.display = "none"; // Hide loading animation
+                });
         }
 
         function displayResults(data) {
@@ -245,6 +272,7 @@
             data.forEach(result => {
                 const card = document.createElement('div');
                 card.className = `card ${result.in_komga ? 'komga' : ''}`;
+                card.className += ` ${result.type.toLowerCase()}`;
 
                 const imageContainer = document.createElement('div');
                 imageContainer.className = `image-container ${result.isAdult ? 'nsfw' : ''}`;
@@ -275,6 +303,11 @@
                 requestButton.textContent = 'Request';
                 requestButton.onclick = () => sendRequest(result.id);
 
+                // Disable request button if the result is in Komga
+                if (result.in_komga) {
+                    requestButton.disabled = true;
+                }
+
                 actions.appendChild(infoButton);
                 actions.appendChild(requestButton);