Files
KomPage/src/templates/requests.html

140 lines
5.3 KiB
HTML

<!doctype html>
<html>
<head>
<title>Requested Manga</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>Requested Manga</h1>
<div style="margin-bottom: 1em; text-align: center;">
<button class="refresh" onclick="window.location.reload()">Refresh</button>
<button class="index" onclick="window.location.href='/'">Back to Index</button>
</div>
<div class="results">
{% if results %}
{% for result in results %}
<div class="card {{ result.type | lower }} {% if result.grabbed %}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 %}
{% endif %}
</div>
{% if requests %}
<div class="results">
{% for request in requests %}
<div class="card {{ request.type | lower }} {% if request.grabbed %}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>
<button onclick="deleteEntry('{{ request.title | escape }}')" class="delete-button">Delete</button>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p>No requests found. This may be because the database disconnected. Please refresh using the button, if the message
persists, there are no requests</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) {
console.log("showInfo data:", data);
try {
const modal = document.getElementById("infoModal");
document.getElementById("modalTitle").textContent = data.title || "Unknown";
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";
} catch (error) {
console.error("Error displaying info:", error);
}
}
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();
}
}
function deleteEntry(title) {
console.log("Deleting entry with title:", title);
fetch(`/delete`, {
method: 'POST',
body: JSON.stringify({ title: title }), // Send title as part of a JSON object
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (response.ok) {
alert('Entry deleted successfully!');
window.location.reload(); // Refresh the page to update the list
} else {
alert('Failed to delete the entry.');
}
})
.catch(error => {
console.error('Error deleting entry:', error);
alert('An error occurred while deleting the entry.');
});
}
</script>
</body>
</html>