feat: add second site to display requests, with colors displaying status, add fetch function,

2025-05-09 18:13:26 +02:00
parent 7246b7a969
commit 11d510566a
2 changed files with 162 additions and 5 deletions
--- a/src/templates/requests.html
+++ b/src/templates/requests.html
@@ -0,0 +1,112 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Requested Manga</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='magic.css') }}">
+
+</head>
+
+<body>
+    <h1>Requested Manga</h1>
+
+    <div style="margin-bottom: 1em; text-align: center;">
+        <button onclick="window.location.reload()">Refresh</button>
+        <button onclick="window.location.href='/'">Back to Index</button>
+    </div>
+
+    {% if results %}
+
+    <div class="results">
+        {% for result in results %}
+
+        <div class="card {{ result.type | lower }} {% if result.in_komga %}komga{% else %}requested{% endif %}">
+
+            <div class="image-container {{ 'nsfw' if result.isAdult else '' }}">
+
+                <img src="{{ result.image }}" alt="Cover">
+                {% if result.isAdult %}
+                <div class="adult-badge">18+</div>
+                {% endif %}
+            </div>
+
+            <p>{{ result.title }}</p>
+            <div class="actions">
+                <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 -->
+
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% endif %}
+
+    {% if requests %}
+
+    <div class="results">
+        {% for request in requests %}
+
+        <div class="card {{ request.type | lower }} {% if request.in_komga %}komga{% else %}requested{% endif %}">
+            <div class="image-container {{ 'nsfw' if request.isAdult else '' }}">
+
+                <img src="{{ request.image }}" alt="Cover">
+                {% if request.isAdult %}
+                <div class="adult-badge">18+</div>
+                {% endif %}
+            </div>
+
+            <p>{{ request.title }}</p>
+            <div class="actions">
+                <button onclick="showInfo({{ request | tojson | safe }})" class="info">Info</button>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% else %}
+    <p>No requests found.</p>
+    {% endif %}
+
+
+    <div id="infoModal" class="modal" style="display:none;">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <h2 id="modalTitle"></h2>
+            <p><strong>Status:</strong> <span id="modalStatus"></span></p>
+            <p><strong>Type:</strong> <span id="modalType"></span></p>
+            <p><strong>Genres:</strong> <span id="modalGenres"></span></p>
+            <p><strong>Tags:</strong> <span id="modalTags"></span></p>
+            <p><strong>Adult Content:</strong> <span id="modalAdult"></span></p>
+            <p><strong>Description:</strong></p>
+            <p id="modalDescription"></p>
+        </div>
+    </div>
+
+    <script>
+        function showInfo(data) {
+            const modal = document.getElementById("infoModal");
+            document.getElementById("modalTitle").textContent = data.title;
+            document.getElementById("modalStatus").textContent = data.status || "Unknown";
+            document.getElementById("modalType").textContent = data.type || "Unknown";
+            document.getElementById("modalGenres").textContent = (data.genres || []).join(", ");
+            document.getElementById("modalTags").textContent = (data.tags || []).join(", ");
+            document.getElementById("modalAdult").textContent = data.isAdult ? "Yes" : "No";
+            document.getElementById("modalDescription").innerHTML = data.description || "No description available.";
+            modal.style.display = "block";
+        }
+
+        function closeModal() {
+            document.getElementById("infoModal").style.display = "none";
+        }
+
+        // Close when clicking outside modal content
+        window.onclick = function (event) {
+            const modal = document.getElementById("infoModal");
+            if (event.target === modal) {
+                closeModal();
+            }
+        }
+    </script>
+</body>
+
+</html>