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.
178 lines
9.0 KiB
178 lines
9.0 KiB
{% extends 'base.html' %} |
|
{% block content %} |
|
{% load temps_format %} |
|
<div class="container-fluid mt-4"> |
|
<div class="row"> |
|
<div class="col-12"> |
|
<div class="card shadow mb-4"> |
|
<div class="card-header py-3"> |
|
<h6 class="m-0 font-weight-bold text-primary">Liste des courses</h6> |
|
</div> |
|
<div class="card-body"> |
|
<ul class="list-group"> |
|
{% for course in courses %} |
|
<li class="list-group-item d-flex justify-content-between align-items-center"> |
|
<div class="row align-items-center col-xs-12 col-lg-4"> |
|
<span>{{ course.nom }}<br/>{{ course.date|format_date }}<br/>{{ course.scan_count }} scan{% if course.scan_count > 1 %}s{% endif %}</span> |
|
{% if course.type == 'unique' %} |
|
<span class="badge badge-primary ml-2 mr-1">Unique</span> |
|
{% elif course.type == 'multi' %} |
|
<span class="badge badge-info ml-2 mr-1">Multi</span> |
|
{% endif %} |
|
{% if course.status == 'not_started' %} |
|
<span class="badge badge-danger ml-1 mr-1">En attente</span> |
|
{% elif course.status == 'ongoing' %} |
|
<span class="badge badge-success ml-1 mr-1">En cours</span> |
|
{% elif course.status == 'finished' %} |
|
<span class="badge badge-secondary ml-1 mr-1">Terminée</span> |
|
{% endif %} |
|
</div> |
|
<div> |
|
<a href="{% url 'course_detail' course.id %}" class="btn btn-primary btn-sm mr-2"> |
|
<i class="fas fa-eye" title="Détails de la course"></i> |
|
</a> |
|
<a href="{% url 'scan' %}?course_id={{ course.id }}" class="btn btn-info btn-sm mr-2"> |
|
<i class="fas fa-qrcode" title="Accès au mode scan"></i> |
|
</a> |
|
<button class="btn btn-danger btn-sm btn-delete-course" data-course-id="{{ course.id }}" data-course-nom="{{ course.nom }}" title="Supprimer la course" data-toggle="modal" data-target="#deleteCourseModal"> |
|
<i class="fas fa-trash-alt"></i> |
|
</button> |
|
</div> |
|
</li> |
|
{% empty %} |
|
<li class="list-group-item">Aucune course enregistrée.</li> |
|
{% endfor %} |
|
</ul> |
|
</div> |
|
<div class="card-body d-flex"> |
|
<button class="btn btn-success mb-2" id="btnNewCourse"> |
|
<i class="fas fa-plus" title="Créer une nouvelle course"></i> |
|
|
|
<i class="fas fa-running" title="Créer une nouvelle course"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Modal de confirmation de suppression --> |
|
<div class="modal fade" id="deleteCourseModal" tabindex="-1" role="dialog" aria-labelledby="deleteCourseModalLabel" aria-hidden="true"> |
|
<div class="modal-dialog" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title" id="deleteCourseModalLabel">Confirmer la suppression</h5> |
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|
<span aria-hidden="true">×</span> |
|
</button> |
|
</div> |
|
<div class="modal-body"> |
|
<p id="deleteCourseModalText">Voulez-vous vraiment supprimer cette course ? Cette action est irréversible.</p> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button> |
|
<button type="button" class="btn btn-danger" id="confirmDeleteCourseBtn">Supprimer</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div class="col-12"> |
|
<div id="newCourseModal" class="modal" tabindex="-1" role="dialog" style="display:none;"> |
|
<div class="modal-dialog" role="document"> |
|
<div class="modal-content"> |
|
<form id="newCourseForm" method="post"> |
|
{% csrf_token %} |
|
<div class="modal-header"> |
|
<h5 class="modal-title">Créer une nouvelle course</h5> |
|
<button type="button" class="close" id="closeModal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|
</div> |
|
<div class="modal-body"> |
|
<div class="form-group"> |
|
<label for="courseName">Nom de la course</label> |
|
<input type="text" class="form-control" name="nom" id="courseName" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="courseType">Type de course</label> |
|
<select class="form-control" name="type" id="courseType" required> |
|
<option value="unique">Unique</option> |
|
<option value="multi">Multi</option> |
|
</select> |
|
</div> |
|
<div id="newCourseError" class="alert alert-danger" style="display:none;"></div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="submit" class="btn btn-success">Créer la course</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
{% block extra_js %} |
|
<script> |
|
// Suppression d'une course avec confirmation via modal |
|
var courseIdToDelete = null; |
|
var courseNomToDelete = ''; |
|
document.querySelectorAll('.btn-delete-course').forEach(function(btn) { |
|
btn.addEventListener('click', function() { |
|
courseIdToDelete = this.getAttribute('data-course-id'); |
|
courseNomToDelete = this.getAttribute('data-course-nom'); |
|
document.getElementById('deleteCourseModalText').textContent = `Voulez-vous vraiment supprimer la course "${courseNomToDelete}" ? Cette action est irréversible.`; |
|
// Le modal est affiché automatiquement par data-toggle="modal" |
|
}); |
|
}); |
|
document.getElementById('confirmDeleteCourseBtn').onclick = function() { |
|
if (!courseIdToDelete) return; |
|
fetch(`/course/${courseIdToDelete}/delete/`, { |
|
method: 'POST', |
|
headers: { |
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value, |
|
'X-Requested-With': 'XMLHttpRequest' |
|
} |
|
}) |
|
.then(r => r.json()) |
|
.then(data => { |
|
if (data.success) { |
|
window.location.reload(); |
|
} else { |
|
alert(data.error || 'Erreur lors de la suppression.'); |
|
} |
|
}); |
|
// Fermer le modal |
|
$('#deleteCourseModal').modal('hide'); |
|
}; |
|
document.getElementById('btnNewCourse').onclick = function() { |
|
document.getElementById('newCourseModal').style.display = 'block'; |
|
}; |
|
document.getElementById('closeModal').onclick = function() { |
|
document.getElementById('newCourseModal').style.display = 'none'; |
|
}; |
|
document.getElementById('newCourseForm').onsubmit = function(e) { |
|
e.preventDefault(); |
|
const nom = document.getElementById('courseName').value; |
|
const type = document.getElementById('courseType').value; |
|
const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value; |
|
fetch('', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/x-www-form-urlencoded', |
|
'X-Requested-With': 'XMLHttpRequest' |
|
}, |
|
body: `csrfmiddlewaretoken=${encodeURIComponent(csrf)}&nom=${encodeURIComponent(nom)}&type=${encodeURIComponent(type)}` |
|
}) |
|
.then(response => response.json()) |
|
.then(data => { |
|
if (data.success) { |
|
// Redirige vers la vue principale (reload la page) |
|
window.location.href = '/'; |
|
} else { |
|
document.getElementById('newCourseError').textContent = data.error; |
|
document.getElementById('newCourseError').style.display = 'block'; |
|
} |
|
}); |
|
}; |
|
</script> |
|
{% endblock %} |
|
</div> |
|
</div> |
|
</div> |
|
{% endblock %}
|
|
|