CrossApp/main/templates/dossards.html

{% 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 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">
                    <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">&times;</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-3.6.0.min.js' %}"></script>
<script src="{% static 'bootstrap/bootstrap.bundle.min.js' %}"></script>
<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() {
    // Empêche la double initialisation de DataTables
    var table;
    if (!$.fn.DataTable.isDataTable('#coureursTable')) {
        table = $('#coureursTable').DataTable({
            pageLength: 50,
        });
    } else {
        table = $('#coureursTable').DataTable();
    }

    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 %}