8 changed files with 202 additions and 60 deletions
Binary file not shown.
@ -1,32 +1,140 @@
@@ -1,32 +1,140 @@
|
||||
{% extends 'base.html' %} |
||||
{% load static %} |
||||
{% block content %} |
||||
<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">Importer le fichier CSV</h6> |
||||
<div class="card-header py-3 d-flex align-items-center justify-content-between"> |
||||
<h6 class="m-0 font-weight-bold text-primary">Liste des coureurs</h6> |
||||
<div> |
||||
<label for="filterClasse" class="mb-0 mr-2">Filtrer par classe :</label> |
||||
<select id="filterClasse" class="form-control d-inline-block" style="width:auto;"> |
||||
<option value="">Toutes</option> |
||||
{% for classe in classes %} |
||||
<option value="{{ classe }}">{{ classe }}</option> |
||||
{% endfor %} |
||||
</select> |
||||
</div> |
||||
</div> |
||||
<div class="card-body"> |
||||
<form method="post" enctype="multipart/form-data"> |
||||
{% csrf_token %} |
||||
{{ form.as_p }} |
||||
<button type="submit" class="btn btn-success">Générer PDF |
||||
<i class="fas fa-file-pdf" title="G\00e9n\00e9rer PDF"></i> |
||||
</button> |
||||
</form> |
||||
{% if error %} |
||||
<div class="alert alert-danger mt-3">{{ error }}</div> |
||||
{% endif %} |
||||
{% if progress %} |
||||
<div class="alert alert-info mt-3">{{ progress }}</div> |
||||
{% endif %} |
||||
{% if pdf_url %} |
||||
<a href="{{ pdf_url }}" class="btn btn-primary mt-3">T\00e9l\00e9charger le PDF</a> |
||||
{% endif %} |
||||
<div class="table-responsive"> |
||||
<table id="coureursTable" class="table table-bordered table-striped"> |
||||
<thead> |
||||
<tr> |
||||
<th>Nom</th> |
||||
<th>Prénom</th> |
||||
<th>Classe</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{% for c in coureurs %} |
||||
<tr data-id="{{ c.id }}"> |
||||
<td>{{ c.nom }}</td> |
||||
<td>{{ c.prenom }}</td> |
||||
<td>{{ c.classe }}</td> |
||||
</tr> |
||||
{% endfor %} |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
<!-- BOUTON pour ouvrir le modal --> |
||||
<div class="card-footer text-right"> |
||||
<button class="btn btn-success" id="openDossardsModal"> |
||||
<i class="fas fa-file-pdf"></i> <span id="mainDossardsCountText">Générer 0 dossards</span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- Modal pour le formulaire dossards --> |
||||
<div class="modal fade" id="dossardsModal" tabindex="-1" role="dialog" aria-labelledby="dossardsModalLabel" aria-hidden="true"> |
||||
<div class="modal-dialog" role="document"> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h5 class="modal-title" id="dossardsModalLabel">Configuration des dossards</h5> |
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
||||
<span aria-hidden="true">×</span> |
||||
</button> |
||||
</div> |
||||
<div class="modal-body"> |
||||
<form method="post" id="dossardsForm" action="{% url 'dossards' %}"> |
||||
{% csrf_token %} |
||||
<input type="hidden" name="coureur_ids" id="coureurIdsInput"> |
||||
<div class="form-row"> |
||||
<div class="form-group col-6"> |
||||
<label for="rowsInput">Étiquettes par colonne</label> |
||||
<input type="number" class="form-control" id="rowsInput" name="rows" min="1" value="2" required> |
||||
</div> |
||||
<div class="form-group col-6"> |
||||
<label for="colsInput">Étiquettes par ligne</label> |
||||
<input type="number" class="form-control" id="colsInput" name="cols" min="1" value="2" required> |
||||
</div> |
||||
</div> |
||||
<button type="submit" class="btn btn-success">Générer PDF |
||||
<i class="fas fa-file-pdf" title="Générer PDF"></i> |
||||
</button> |
||||
</form> |
||||
{% if error %} |
||||
<div class="alert alert-danger mt-3">{{ error }}</div> |
||||
{% endif %} |
||||
{% if progress %} |
||||
<div class="alert alert-info mt-3">{{ progress }}</div> |
||||
{% endif %} |
||||
{% if pdf_url %} |
||||
<a href="{{ pdf_url }}" class="btn btn-primary mt-3">T\00e9l\00e9charger le PDF</a> |
||||
{% endif %} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{% block extra_js %} |
||||
<script src="{% static 'jquery/jquery.dataTables.min.js' %}"></script> |
||||
<script src="{% static 'bootstrap/dataTables.bootstrap4.min.js' %}"></script> |
||||
<script src="{% static 'jquery/datatables.fr.js' %}"></script> |
||||
<script> |
||||
$(document).ready(function() { |
||||
var table = $('#coureursTable').DataTable({ |
||||
pageLength: 50, |
||||
}); |
||||
function updateMainDossardsCount() { |
||||
var count = table.rows({search:'applied'}).count(); |
||||
$('#mainDossardsCountText').text('Générer ' + count + ' dossards'); |
||||
} |
||||
updateMainDossardsCount(); |
||||
table.on('draw', updateMainDossardsCount); |
||||
$('#filterClasse').on('change', updateMainDossardsCount); |
||||
$('#filterClasse').on('change', function() { |
||||
var val = $(this).val(); |
||||
if(val) { |
||||
table.column(2).search('^'+val+'$', true, false).draw(); |
||||
} else { |
||||
table.column(2).search('').draw(); |
||||
} |
||||
}); |
||||
|
||||
// Ouvre le modal au clic sur le bouton |
||||
$('#openDossardsModal').on('click', function(e) { |
||||
e.preventDefault(); |
||||
$('#dossardsModal').modal('show'); |
||||
}); |
||||
|
||||
// Prépare la soumission du formulaire pour n'envoyer que les IDs filtrés |
||||
$('#dossardsForm').on('submit', function(e) { |
||||
var ids = []; |
||||
table.rows({search:'applied'}).every(function(){ |
||||
var row = this.node(); |
||||
var id = $(row).data('id'); |
||||
if (id) ids.push(id); |
||||
}); |
||||
$('#coureurIdsInput').val(ids.join(',')); |
||||
// Ferme le modal juste après la soumission |
||||
$('#dossardsModal').modal('hide'); |
||||
// continue submit |
||||
}); |
||||
}); |
||||
</script> |
||||
{% endblock %} |
||||
{% endblock %} |
||||
Loading…
Reference in new issue