Fix: eagerload series.sets i admin og API (MissingGreenlet i async mode)
This commit is contained in:
@@ -1,110 +1,146 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Admin — Kort i {{ set_code }}{% endblock %}
|
||||
{% block title %}Admin — {{ set.code }} kort{% endblock %}
|
||||
{% block content %}
|
||||
<h1>🃏 Kort i <span class="tag">{{ set_code }}</span></h1>
|
||||
<p style="color:var(--text-muted);margin-bottom:16px;">Tilføj eller fjern kort fra dette set.</p>
|
||||
<a href="/admin/sets" style="color:var(--text-muted);text-decoration:none;font-size:0.9rem;">← Sæt</a>
|
||||
<h1 style="margin-top:12px;">
|
||||
<span class="tag">{{ set.code }}</span>
|
||||
{{ set.name }}
|
||||
</h1>
|
||||
<p style="color:var(--text-muted);margin-bottom:16px;">{{ set.serie.name }}</p>
|
||||
|
||||
<div class="card" style="margin-bottom:24px;">
|
||||
<h2>Tilføj nyt kort</h2>
|
||||
<form id="create-card-form" style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;">
|
||||
<input type="text" name="number" placeholder="Nummer (f.eks. 068)" required>
|
||||
<input type="text" name="name" placeholder="Navn (f.eks. Garchomp EX)" required>
|
||||
<input type="text" name="type" placeholder="Type (f.eks. Colorless)">
|
||||
<input type="text" name="rarity" placeholder="Sjældenhed (f.eks. Rare)">
|
||||
<input type="number" name="hp" placeholder="HP">
|
||||
<input type="text" name="stage" placeholder="Stage (f.eks. Basic)">
|
||||
<input type="text" name="image_url" placeholder="Billede URL" style="grid-column:span 2;">
|
||||
<textarea name="description" placeholder="Beskrivelse" rows="2" style="grid-column:span 2;"></textarea>
|
||||
<button type="submit" class="btn btn-primary" style="grid-column:span 2;">Tilføj kort</button>
|
||||
</form>
|
||||
<p id="card-msg" style="font-size:0.85rem;margin-top:8px;"></p>
|
||||
<div style="display:flex;gap:24px;flex-wrap:wrap;margin:20px 0;">
|
||||
<div class="card" style="flex:1;min-width:280px;">
|
||||
<h3>Opret kort</h3>
|
||||
<form onsubmit="createCard(event)" style="display:flex;flex-direction:column;gap:10px;margin-top:12px;">
|
||||
<input type="text" id="card-number" placeholder="Nummer (f.eks. 050)" required>
|
||||
<input type="text" id="card-name" placeholder="Navn (f.eks. Raichu)" required>
|
||||
<input type="text" id="card-image" placeholder="Billede URL (valgfri)">
|
||||
<button class="btn btn-primary">Opret</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card" style="flex:1;min-width:280px;">
|
||||
<h3>CSV-import</h3>
|
||||
<p style="font-size:0.85rem;color:var(--text-muted);margin:8px 0;">
|
||||
Kolonner: <code>set_code,number,name,image</code>
|
||||
<br><a href="/api/admin/templates/cards.csv" style="color:var(--accent);">Download skabelon</a>
|
||||
</p>
|
||||
<form onsubmit="importCards(event)" style="display:flex;flex-direction:column;gap:10px;">
|
||||
<input type="file" id="cards-csv" accept=".csv" required>
|
||||
<button class="btn btn-primary">Importer</button>
|
||||
</form>
|
||||
<div id="cards-import-result" style="margin-top:8px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Eksisterende kort</h2>
|
||||
<div id="card-list">Indlæser...</div>
|
||||
<a href="/admin/sets" class="btn btn-outline" style="margin-top:16px;">← Tilbage til serier</a>
|
||||
<h2>Kort i {{ set.code }}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>#</th><th>Navn</th><th>Kode</th><th>Billede</th><th>Upload</th><th>Handling</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for card in set.cards %}
|
||||
<tr id="card-{{ card.id }}">
|
||||
<td style="font-weight:600;">{{ card.number }}</td>
|
||||
<td><a href="/card/{{ set.code }}/{{ card.number }}" style="color:var(--text);">{{ card.name }}</a></td>
|
||||
<td><span class="tag">{{ card.full_code }}</span></td>
|
||||
<td>
|
||||
{% if card.image_url %}
|
||||
<a href="{{ card.image_url }}" target="_blank">
|
||||
<img src="{{ card.image_url }}" alt="{{ card.name }}"
|
||||
style="height:40px;border-radius:4px;">
|
||||
</a>
|
||||
{% else %}
|
||||
<span style="color:var(--text-muted);font-size:0.8rem;">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<form onsubmit="uploadImage(event, {{ card.id }})" style="display:flex;gap:6px;align-items:center;">
|
||||
<input type="file" accept="image/*" style="width:auto;font-size:0.8rem;padding:4px;">
|
||||
<button class="btn btn-outline btn-sm">↑</button>
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger btn-sm" onclick="deleteCard({{ card.id }})">Slet</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% if set.cards|length == 0 %}
|
||||
<div class="card" style="text-align:center;color:var(--text-muted);margin-top:16px;">
|
||||
<p>Ingen kort i {{ set.code }} endnu.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
const SET_CODE = '{{ set_code }}';
|
||||
|
||||
async function loadCards() {
|
||||
try {
|
||||
const res = await fetch('/api/admin/sets/' + SET_CODE + '/cards');
|
||||
const cards = await res.json();
|
||||
const container = document.getElementById('card-list');
|
||||
|
||||
if (cards.length === 0) {
|
||||
container.innerHTML = '<div class="card"><p style="color:var(--text-muted);">Ingen kort i dette set endnu.</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '<div style="overflow-x:auto;"><table><thead><tr><th>#</th><th>Kode</th><th>Navn</th><th>Type</th><th>Sjældenhed</th><th style="width:60px;"></th></tr></thead><tbody>';
|
||||
cards.forEach(c => {
|
||||
html += '<tr>' +
|
||||
'<td>' + c.number + '</td>' +
|
||||
'<td><span class="tag">' + c.full_code + '</span></td>' +
|
||||
'<td>' + c.name + '</td>' +
|
||||
'<td>' + (c.type || '—') + '</td>' +
|
||||
'<td>' + (c.rarity || '—') + '</td>' +
|
||||
'<td><button class="btn btn-danger btn-sm" onclick="deleteCard(' + c.id + ')">✕</button></td>' +
|
||||
'</tr>';
|
||||
});
|
||||
html += '</tbody></table></div>';
|
||||
container.innerHTML = html;
|
||||
} catch(e) {
|
||||
document.getElementById('card-list').innerHTML = '<p style="color:var(--accent);">Kunne ikke indlæse kort</p>';
|
||||
async function createCard(e) {
|
||||
e.preventDefault();
|
||||
const number = document.getElementById('card-number').value.trim();
|
||||
const name = document.getElementById('card-name').value.trim();
|
||||
const image = document.getElementById('card-image').value.trim() || null;
|
||||
if (!number || !name) return;
|
||||
const res = await fetch('/api/admin/sets/{{ set.code }}/cards', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({number, name, image})
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.ok) {
|
||||
location.reload();
|
||||
} else {
|
||||
alert(data.detail || 'Fejl');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteCard(id) {
|
||||
if (!confirm('Slet dette kort?')) return;
|
||||
try {
|
||||
const res = await fetch('/api/admin/cards/' + id, { method: 'DELETE' });
|
||||
if (res.ok) {
|
||||
loadCards();
|
||||
} else {
|
||||
alert('Kunne ikke slette');
|
||||
}
|
||||
} catch(e) {
|
||||
const res = await fetch('/api/admin/cards/' + id, {method: 'DELETE'});
|
||||
const data = await res.json();
|
||||
if (data.ok) {
|
||||
document.getElementById('card-' + id).remove();
|
||||
} else {
|
||||
alert('Fejl ved sletning');
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('create-card-form').addEventListener('submit', async (e) => {
|
||||
async function importCards(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const msg = document.getElementById('card-msg');
|
||||
try {
|
||||
const res = await fetch('/api/admin/sets/' + SET_CODE + '/cards', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
number: form.number.value,
|
||||
name: form.name.value,
|
||||
type: form.type.value || null,
|
||||
rarity: form.rarity.value || null,
|
||||
hp: form.hp.value ? parseInt(form.hp.value) : null,
|
||||
stage: form.stage.value || null,
|
||||
description: form.description.value || null,
|
||||
image_url: form.image_url.value || null,
|
||||
}),
|
||||
});
|
||||
if (res.ok) {
|
||||
form.reset();
|
||||
msg.style.color = 'var(--text)';
|
||||
msg.textContent = '✅ Kort tilføjet';
|
||||
loadCards();
|
||||
} else {
|
||||
const err = await res.json();
|
||||
msg.style.color = 'var(--accent)';
|
||||
msg.textContent = '❌ ' + (err.detail || 'Fejl');
|
||||
const file = document.getElementById('cards-csv').files[0];
|
||||
if (!file) return;
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
const res = await fetch('/api/admin/cards/import', {method: 'POST', body: form});
|
||||
const data = await res.json();
|
||||
const el = document.getElementById('cards-import-result');
|
||||
if (data.ok) {
|
||||
el.innerHTML = '<p style="color:green;">✓ ' + data.created + ' kort oprettet</p>';
|
||||
if (data.errors.length) {
|
||||
el.innerHTML += '<p style="color:var(--accent);">' + data.errors.join('<br>') + '</p>';
|
||||
}
|
||||
} catch(e) {
|
||||
msg.style.color = 'var(--accent)';
|
||||
msg.textContent = '❌ Kunne ikke forbinde';
|
||||
setTimeout(() => location.reload(), 1500);
|
||||
} else {
|
||||
el.innerHTML = '<p style="color:var(--accent);">Fejl ved import</p>';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadCards();
|
||||
async function uploadImage(e, cardId) {
|
||||
e.preventDefault();
|
||||
const file = e.target.querySelector('input[type="file"]').files[0];
|
||||
if (!file) return;
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
const res = await fetch('/api/admin/cards/' + cardId + '/upload', {
|
||||
method: 'POST',
|
||||
body: form
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.ok) {
|
||||
location.reload();
|
||||
} else {
|
||||
alert(data.detail || 'Fejl ved upload');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user