Christian Krakau-Louis
227 lines
9.4 KiB
HTML
227 lines
9.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="max-w-6xl mx-auto p-4">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-irish-green mb-2">QR Code Management</h1>
|
|
<p class="text-gray-600">Create and manage QR code sets for your pub quiz events</p>
|
|
</div>
|
|
|
|
<form method="get" action="/qr/" class="mb-6 flex flex-col sm:flex-row sm:items-end gap-3">
|
|
<div>
|
|
<label for="league_filter" class="block text-sm font-medium text-gray-700">League</label>
|
|
<select id="league_filter" name="league_id" onchange="this.form.submit()"
|
|
class="mt-1 border border-gray-300 rounded-md px-3 py-2 bg-white focus:outline-none focus:ring-2 focus:ring-irish-green">
|
|
{% for league in leagues %}
|
|
<option value="{{ league.id }}" {% if selected_league and selected_league.id == league.id %}selected{% endif %}>
|
|
{{ league.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<!-- QR Set Creation -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-bold text-irish-green mb-4">Create QR Set</h2>
|
|
<p class="text-sm text-gray-500 mb-4">
|
|
Create a new set of QR codes for your pub quiz event with points and achievements.
|
|
</p>
|
|
|
|
<form id="qrSetForm" action="/qr/sets" method="post" class="space-y-4">
|
|
<input type="hidden" name="league_id" value="{{ selected_league.id }}">
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700">Set Name</label>
|
|
<input type="text" name="name" id="name" 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., Irish Rover Quiz Night">
|
|
</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="Weekly quiz with 1st, 2nd, and 3rd place prizes" rows="3"></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">
|
|
Create QR Set
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- QR Set Examples -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-bold text-irish-green mb-4">Common Templates</h2>
|
|
<p class="text-sm text-gray-500 mb-4">
|
|
Quickly create QR code sets using these pre-defined templates
|
|
</p>
|
|
|
|
<div class="space-y-3">
|
|
<div class="border rounded-md p-3 hover:bg-gray-50 cursor-pointer"
|
|
onclick="useTemplate('Standard Pub Quiz',
|
|
'Contains QR codes for 1st place (25 points), 2nd place (15 points), 3rd place (10 points), and 4th place (5 points)')">
|
|
<h3 class="font-medium">Standard Pub Quiz</h3>
|
|
<p class="text-xs text-gray-500">1st, 2nd, 3rd and 4th place</p>
|
|
</div>
|
|
|
|
<div class="border rounded-md p-3 hover:bg-gray-50 cursor-pointer"
|
|
onclick="useTemplate('Trivia Night',
|
|
'Special trivia night with QR codes for winners and achievement codes for trivia categories')">
|
|
<h3 class="font-medium">Trivia Night</h3>
|
|
<p class="text-xs text-gray-500">With category achievements</p>
|
|
</div>
|
|
|
|
<div class="border rounded-md p-3 hover:bg-gray-50 cursor-pointer"
|
|
onclick="useTemplate('Weekly League',
|
|
'Complete set for tracking weekly league progress with placements and special achievements')">
|
|
<h3 class="font-medium">Weekly League</h3>
|
|
<p class="text-xs text-gray-500">For ongoing competitions</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<p class="text-xs text-gray-500">
|
|
Click a template to pre-fill the form. You can customize it before creating.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-bold text-irish-green mb-4">Quick Actions</h2>
|
|
<p class="text-sm text-gray-500 mb-4">
|
|
Generate individual QR codes or access your created sets
|
|
</p>
|
|
|
|
<div class="space-y-3">
|
|
<a href="#"
|
|
class="block border border-dashed border-gray-300 rounded-md p-4 hover:bg-gray-50 text-center"
|
|
id="quickQrBtn">
|
|
<i class="fas fa-qrcode text-irish-green text-2xl mb-2"></i>
|
|
<p class="font-medium">Generate Quick QR</p>
|
|
<p class="text-xs text-gray-500">Create a single QR code</p>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Quick QR Modal (hidden by default) -->
|
|
<div id="quickQrModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold">Generate Quick QR Code</h3>
|
|
<button id="closeModal" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="quickQrForm" class="space-y-4">
|
|
<div>
|
|
<label for="qr-points" class="block text-sm font-medium text-gray-700">Points</label>
|
|
<input type="number" id="qr-points" name="points" min="0" value="10"
|
|
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2">
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit" class="bg-irish-green text-white px-4 py-2 rounded-md">
|
|
Generate
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="qr-result" class="hidden mt-4 text-center">
|
|
<div id="qr-image" class="mx-auto mb-2"></div>
|
|
<p class="text-sm">Right-click to save the QR code</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Existing QR Sets -->
|
|
<div class="mt-10">
|
|
<h2 class="text-2xl font-bold text-irish-green mb-4">Your QR Sets</h2>
|
|
|
|
{% if qr_sets %}
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
{% for qr_set in qr_sets %}
|
|
<div class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden">
|
|
<div class="border-b px-6 py-4">
|
|
<h3 class="font-bold">{{ qr_set.name }}</h3>
|
|
{% if qr_set.description %}
|
|
<p class="text-sm text-gray-600 mt-1">{{ qr_set.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<div class="text-sm text-gray-500">
|
|
<p>Created: {{ qr_set.created_at.strftime('%Y-%m-%d') }}</p>
|
|
<p>League: {{ qr_set.league.name if qr_set.league else "Default League" }}</p>
|
|
<p>QR Codes: {% if qr_set.qr_codes %}{{ qr_set.qr_codes | length }}{% else %}0{% endif %}</p>
|
|
</div>
|
|
<div class="mt-4 flex justify-between">
|
|
<a href="/qr/sets/{{ qr_set.id }}" class="text-irish-green hover:underline">
|
|
<i class="fas fa-eye mr-1"></i> View
|
|
</a>
|
|
<a href="/qr/sets/{{ qr_set.id }}/pdf" class="text-irish-green hover:underline">
|
|
<i class="fas fa-file-pdf mr-1"></i> Generate PDF
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="bg-gray-50 border border-gray-200 rounded-md p-6 text-center">
|
|
<i class="fas fa-info-circle text-gray-400 text-3xl mb-3"></i>
|
|
<p class="text-gray-600">You haven't created any QR sets yet. Create your first set using the form above.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Template selection
|
|
function useTemplate(name, description) {
|
|
document.getElementById('name').value = name;
|
|
document.getElementById('description').value = description;
|
|
}
|
|
|
|
// Quick QR Modal
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const quickQrBtn = document.getElementById('quickQrBtn');
|
|
const quickQrModal = document.getElementById('quickQrModal');
|
|
const closeModal = document.getElementById('closeModal');
|
|
const quickQrForm = document.getElementById('quickQrForm');
|
|
const qrResult = document.getElementById('qr-result');
|
|
const qrImage = document.getElementById('qr-image');
|
|
|
|
quickQrBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
quickQrModal.classList.remove('hidden');
|
|
});
|
|
|
|
closeModal.addEventListener('click', function() {
|
|
quickQrModal.classList.add('hidden');
|
|
qrResult.classList.add('hidden');
|
|
});
|
|
|
|
// Close modal when clicking outside
|
|
quickQrModal.addEventListener('click', function(e) {
|
|
if (e.target === quickQrModal) {
|
|
quickQrModal.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
quickQrForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const points = document.getElementById('qr-points').value;
|
|
const leagueId = '{{ selected_league.id }}';
|
|
|
|
// Generate QR code
|
|
qrImage.innerHTML = '<img src="/qr/generate/' + points + '?league_id=' + leagueId + '" alt="QR Code" class="mx-auto" />';
|
|
qrResult.classList.remove('hidden');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|