Application de gestion de courses avec génération de dossards avec QRcode et scan des coureurs à l'arrivée.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

78 lines
3.3 KiB

{% extends 'base.html' %}
{% block content %}
<div class="container-fluid mt-4">
<h1 class="h3 mb-4 text-gray-800">Course : {{ course.nom }} ({{ course.date }})</h1>
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Gestion de la course</h6>
</div>
<div class="card-body">
<form method="post">
{% csrf_token %}
{% if not is_started %}
<button type="submit" name="start" class="btn btn-success">Départ</button>
{% elif not is_finished %}
<button type="submit" name="finish" class="btn btn-danger">Fin course</button>
{% else %}
<span class="badge badge-secondary">Course terminée</span>
{% endif %}
</form>
</div>
</div>
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex justify-content-between align-items-center">
<h6 class="m-0 font-weight-bold text-primary">Arrivées</h6>
<div>
<a href="{% url 'export_csv' course.id %}" class="btn btn-outline-primary btn-sm mr-2">Export CSV</a>
<a href="{% url 'export_pdf' course.id %}" class="btn btn-outline-danger btn-sm">Export PDF</a>
</div>
</div>
<div class="card-body">
<table class="table table-striped" id="arriveesTable">
<thead>
<tr>
<th>Rang</th>
<th>Nom</th>
<th>Classe</th>
<th>Temps</th>
</tr>
</thead>
<tbody>
{% for a in arrivees %}
<tr>
<td>{{ a.rang }}</td>
<td>{{ a.coureur.nom }}</td>
<td>{{ a.coureur.classe }}</td>
<td>{{ a.temps }}</td>
</tr>
{% empty %}
<tr><td colspan="4">Aucun coureur arrivé.</td></tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
const courseId = "{{ course.id }}";
const wsScheme = window.location.protocol === "https:" ? "wss" : "ws";
const wsUrl = `${wsScheme}://${window.location.host}/ws/course/${courseId}/`;
const socket = new WebSocket(wsUrl);
socket.onmessage = function(e) {
// Recharge juste le tbody via AJAX
fetch(window.location.href, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
.then(response => response.text())
.then(html => {
const table = document.getElementById('arriveesTable').getElementsByTagName('tbody')[0];
table.innerHTML = html;
});
};
</script>
{% endblock %}