Christian Krakau-Louis
276 lines
13 KiB
HTML
276 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="max-w-6xl mx-auto p-4">
|
|
<div class="mb-8">
|
|
<div class="flex items-center">
|
|
<a href="/qr{% if qr_set.league_id %}/?league_id={{ qr_set.league_id }}{% endif %}" class="text-irish-green hover:underline mr-4">
|
|
<i class="fas fa-arrow-left"></i> Back to Dashboard
|
|
</a>
|
|
<h1 class="text-3xl font-bold text-irish-green">{{ qr_set.name }}</h1>
|
|
</div>
|
|
{% if qr_set.description %}
|
|
<p class="text-gray-600 mt-2">{{ qr_set.description }}</p>
|
|
{% endif %}
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
{{ qr_set.league.name if qr_set.league else "Default League" }} • Created on {{ qr_set.created_at.strftime('%Y-%m-%d') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<!-- QR Code Creation -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-bold text-irish-green mb-4">Add QR Code</h2>
|
|
<p class="text-sm text-gray-500 mb-4">
|
|
Create QR codes for points and achievements in this set
|
|
</p>
|
|
|
|
<form id="qrCodeForm" action="/qr/sets/{{ qr_set.id }}/codes" method="post" class="space-y-4">
|
|
<div>
|
|
<label for="title" class="block text-sm font-medium text-gray-700">Title</label>
|
|
<input type="text" name="title" id="title" required
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green"
|
|
placeholder="e.g., 1st Place, Most Creative, etc.">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="points" class="block text-sm font-medium text-gray-700">Points</label>
|
|
<input type="number" name="points" id="points" step="0.1" min="0" value="10"
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="achievement_name" class="block text-sm font-medium text-gray-700">Achievement (Optional)</label>
|
|
<input type="text" name="achievement_name" id="achievement_name"
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green"
|
|
placeholder="e.g., Quiz Champion, Top Scorer">
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<input type="checkbox" name="is_achievement_only" id="is_achievement_only" class="h-4 w-4 text-irish-green focus:ring-irish-green border-gray-300 rounded">
|
|
<label for="is_achievement_only" class="ml-2 block text-sm text-gray-700">
|
|
Achievement only (no points)
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="description" class="block text-sm font-medium text-gray-700">Description (Optional)</label>
|
|
<textarea name="description" id="description"
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green"
|
|
placeholder="Description of this QR code" rows="2"></textarea>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-4 rounded transition">
|
|
Add QR Code
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Common QR Code Templates -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-bold text-irish-green mb-4">Quick Templates</h2>
|
|
<p class="text-sm text-gray-500 mb-4">
|
|
Click to quickly add common QR code types to this set
|
|
</p>
|
|
|
|
<div class="space-y-3">
|
|
<button class="w-full border border-gray-200 rounded-md p-3 hover:bg-gray-50 text-left"
|
|
onclick="useQRTemplate('1st Place', 25, 'First Place Winner', false, 'First place award (25 points)')">
|
|
<div class="flex items-center">
|
|
<div class="bg-yellow-500 rounded-full h-6 w-6 flex items-center justify-center mr-3">
|
|
<i class="fas fa-trophy text-white text-xs"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-medium">1st Place (25 points)</h3>
|
|
<p class="text-xs text-gray-500">Top winner award</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button class="w-full border border-gray-200 rounded-md p-3 hover:bg-gray-50 text-left"
|
|
onclick="useQRTemplate('2nd Place', 15, 'Second Place Winner', false, 'Second place award (15 points)')">
|
|
<div class="flex items-center">
|
|
<div class="bg-gray-400 rounded-full h-6 w-6 flex items-center justify-center mr-3">
|
|
<i class="fas fa-medal text-white text-xs"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-medium">2nd Place (15 points)</h3>
|
|
<p class="text-xs text-gray-500">Runner-up award</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button class="w-full border border-gray-200 rounded-md p-3 hover:bg-gray-50 text-left"
|
|
onclick="useQRTemplate('3rd Place', 10, 'Third Place Winner', false, 'Third place award (10 points)')">
|
|
<div class="flex items-center">
|
|
<div class="bg-amber-700 rounded-full h-6 w-6 flex items-center justify-center mr-3">
|
|
<i class="fas fa-award text-white text-xs"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-medium">3rd Place (10 points)</h3>
|
|
<p class="text-xs text-gray-500">Third place award</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button class="w-full border border-gray-200 rounded-md p-3 hover:bg-gray-50 text-left"
|
|
onclick="useQRTemplate('Estimate Winner', 0, 'Closest Guess Award', true, 'Achievement for closest estimate')">
|
|
<div class="flex items-center">
|
|
<div class="bg-blue-500 rounded-full h-6 w-6 flex items-center justify-center mr-3">
|
|
<i class="fas fa-bullseye text-white text-xs"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-medium">Estimate Winner</h3>
|
|
<p class="text-xs text-gray-500">Achievement only (no points)</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Set Actions -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-bold text-irish-green mb-4">QR Set Actions</h2>
|
|
<p class="text-sm text-gray-500 mb-4">
|
|
Create printable PDFs and admin codes for this set
|
|
</p>
|
|
|
|
<div class="space-y-4">
|
|
<a href="/qr/sets/{{ qr_set.id }}/pdf" class="block bg-irish-green text-white text-center font-bold py-3 px-4 rounded hover:opacity-90 transition">
|
|
<i class="fas fa-file-pdf mr-2"></i> Generate PDF
|
|
</a>
|
|
|
|
<div class="border rounded-md p-4">
|
|
<h3 class="font-medium mb-2">Admin QR Code</h3>
|
|
<p class="text-xs text-gray-500 mb-3">
|
|
Use this special QR code to link all codes in this set to an event. Print this on each page.
|
|
</p>
|
|
<div class="text-center">
|
|
<img src="/qr/sets/{{ qr_set.id }}/generate-admin" alt="Admin QR Code" class="mx-auto h-32">
|
|
</div>
|
|
<p class="text-xs text-center mt-2">Scan to link all QR codes to an event</p>
|
|
</div>
|
|
|
|
<div class="mt-6 pt-6 border-t">
|
|
<h3 class="font-medium text-red-600">Danger Zone</h3>
|
|
<p class="text-xs text-gray-500 mt-1 mb-3">These actions cannot be undone</p>
|
|
<button id="deleteSetBtn" class="text-red-600 border border-red-600 rounded px-3 py-1 text-sm hover:bg-red-50">
|
|
<i class="fas fa-trash-alt mr-1"></i> Delete Set
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Codes List -->
|
|
<div class="mt-10">
|
|
<h2 class="text-2xl font-bold text-irish-green mb-4">QR Codes in this Set</h2>
|
|
|
|
{% if qr_codes %}
|
|
<div class="bg-white shadow overflow-hidden rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
QR Code
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Details
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Points
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Achievement
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{% for qr_code in qr_codes %}
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<img src="/qr/code/{{ qr_code.code }}" alt="QR Code" class="h-16 w-16">
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm font-medium text-gray-900">{{ qr_code.title or "Untitled" }}</div>
|
|
<div class="text-xs text-gray-500 mt-1">
|
|
Code: {{ qr_code.code[:10] }}...
|
|
</div>
|
|
{% if qr_code.description %}
|
|
<div class="text-xs text-gray-500 mt-1">{{ qr_code.description }}</div>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-2 inline-flex text-sm leading-5 font-semibold rounded-full {{ 'bg-green-100 text-green-800' if qr_code.points > 0 else 'bg-gray-100 text-gray-800' }}">
|
|
{{ qr_code.points }} pts
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{% if qr_code.achievement_name %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
<i class="fas fa-award mr-1"></i>
|
|
{{ qr_code.achievement_name }}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-gray-400">None</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
{% if qr_code.used %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
|
|
Redeemed
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
Available
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<a href="{{ base_url }}/redeem/{{ qr_code.code }}" target="_blank" class="text-irish-green hover:underline">
|
|
<i class="fas fa-external-link-alt mr-1"></i> View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="bg-gray-50 border border-gray-200 rounded-md p-6 text-center">
|
|
<i class="fas fa-qrcode text-gray-400 text-3xl mb-3"></i>
|
|
<p class="text-gray-600">No QR codes in this set yet. Add your first QR code using the form.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// QR Code template function
|
|
function useQRTemplate(title, points, achievement, isAchievementOnly, description) {
|
|
document.getElementById('title').value = title;
|
|
document.getElementById('points').value = points;
|
|
document.getElementById('achievement_name').value = achievement;
|
|
document.getElementById('is_achievement_only').checked = isAchievementOnly;
|
|
document.getElementById('description').value = description;
|
|
|
|
// Scroll to the form
|
|
document.getElementById('qrCodeForm').scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
// Delete Set confirmation
|
|
document.getElementById('deleteSetBtn').addEventListener('click', function() {
|
|
if (confirm('Are you sure you want to delete this entire set? This action cannot be undone.')) {
|
|
// Send delete request - this would need an endpoint implementation
|
|
alert('Delete functionality will be implemented in a future update');
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|