Je veux pouvoir ouvrir le sous menu à plusieurs endroit dans mon code, actuellement il ne s'ouvre que dans .escrimeblois
avec <div class="addp">
            <button style="font-size: 30px">+</button>
          <div id="submenu" style="display: none;">
            <input type="text" id="search" placeholder="Rechercher...">
            <ul id="escrimeurs-list"></ul>
    </div>
je veux implémenter cette div .addp dans  <section class="escrime-other"></section> et dans <section class="escrime-arb"></section>
avec un sous menu de la meme manière qu'en haut. Si la classe est escrime-other je parcourerais le résultat d'un autre fetch fetch('/get_escrimeurs_other')
et si la classe est escrime-arb je parcourerais le résultat d'un autre fetch fetch('/get_escrimeurs_arb')

Adapte le code html et javascript pour que le sous menu s'affiche dans les deux autres sections et en fonction de la classe de la section demande a fetch u
autre source.

Voici le code actuelle : 



document.addEventListener('DOMContentLoaded', function () {
    const addButton = document.querySelector('.addp button');
    const submenu = document.getElementById('submenu');
    const escrimeursList = document.getElementById('escrimeurs-list');
    const searchInput = document.getElementById('search');
    
    addButton.addEventListener('click', function (event) {
        event.preventDefault();
        submenu.style.display = submenu.style.display === 'none' ? 'block' : 'none';
        fetch('/get_escrimeurs')
        .then(response => response.json())
        .then(escrimeurs => {
            escrimeursList.innerHTML = ''; // Clear the previous list
            escrimeurs.forEach(escrimeur => {
                const listItem = document.createElement('div');
                listItem.setAttribute('data-prenom', escrimeur.prenomE.toLowerCase());
                listItem.setAttribute('data-nom', escrimeur.nomE.toLowerCase());
                listItem.setAttribute('data-licence', escrimeur.numeroLicenceE);
                listItem.textContent = `${escrimeur.prenomE} ${escrimeur.nomE} ${escrimeur.numeroLicenceE}`;
                listItem.addEventListener('click', function () {
                    ajouterEscrimeurACompetition(escrimeur.numeroLicenceE);
                    submenu.style.display = 'none';
                });
                escrimeursList.appendChild(listItem);
            });
            
        });
        
        searchInput.addEventListener('input', function () {
        });

        
        
        function ajouterEscrimeurACompetition(escrimeurId) {
            fetch(`/ajouter_escrimeur_competition/${competitionId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ numeroLicenceE: escrimeurId })
            })
            .then(response => {
                if (response.ok) {
                    console.log('Escrimeur ajouté à la compétition avec succès.');
                localStorage.setItem('confirmation', 'Escrimeur ajouté à la compétition avec succès.');
                location.reload();
            } else {
                console.error('Erreur lors de l\'ajout de l\'escrimeur à la compétition.');
            }
        })
        .catch(error => {
            console.error('Erreur lors de la requête pour ajouter l\'escrimeur à la compétition:', error);
        });
    }
    
    const confirmation = localStorage.getItem('confirmation');
    if (confirmation) {
        showConfirmation(confirmation);
        localStorage.removeItem('confirmation');
    }
});


function edit(id) {
    var p = document.getElementById(id);
    var text = p.innerText;
    p.innerHTML = `<input type="text" id="${id}-input" value="${text}" style="width: 300px;"> <button onclick="validateField('${id}')">Valider</button>`;
}

function validateField(id) {
    var input = document.getElementById(id + '-input');
    var text = input.value;
    var p = document.getElementById(id);
    p.innerHTML = text;
    updateDatabase(id, text)
}

function updateDatabase(field, value) {
    fetch('/update_database', {
        method: 'POST',
        
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ field: field, value: value, competitionId: competitionId }),
    })
    .then(response => {
        if (response.ok) {
            console.log('Champ mis à jour avec succès dans la base de données.');
            showConfirmation('Champ mis à jour avec succès');
        } else {
            console.error('Erreur lors de la mise à jour du champ dans la base de données.');
        }
    })
    .catch(error => {
        console.error('Erreur lors de la requête pour mettre à jour le champ dans la base de données:', error);
    });
}

function showConfirmation(message) {
    var confirmation = document.createElement('div');
    confirmation.className = 'confirmation';
    confirmation.innerText = message;
    document.body.appendChild(confirmation);
    
    setTimeout(function() {
        confirmation.style.opacity = '0';
    }, 2000);
    
    setTimeout(function() {
        document.body.removeChild(confirmation);
    }, 4000);
}




searchInput.addEventListener('input', function () {
    const searchTerm = searchInput.value.toLowerCase();
    const listItems = Array.from(escrimeursList.children);
    
    listItems.forEach(item => {
        const prenom = item.getAttribute('data-prenom');
        const nom = item.getAttribute('data-nom');
        const licence = item.getAttribute('data-licence');
        const isMatch = prenom.includes(searchTerm) || nom.includes(searchTerm) || licence.includes(searchTerm);
        item.style.display = isMatch ? 'block' : 'none';
    });
});


// function verifierParticipants() {
    //     var nb_participants_blois = document.getElementById('nb_participants_blois').textContent;
    //     var nb_participants_other = document.getElementById('nb_participants_other').textContent;
    //     var nb_arbitres = document.getElementById('nb_arbitres').textContent;
    
    //     if (nb_participants_blois + nb_participants_other < 6 || nb_arbitres < 2) {
        //         alert('Il faut au moins 6 escrimeurs et 2 arbitres pour créer les poules.');
        //         event.preventDefault();
        //     }
// }
});

{% extends 'base.html' %} {% block content %}
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='gestion_participants.css') }}"
/>
<script>
  var competitionId = "{{ competition.idComp }}";
</script>
<script src="{{ url_for('static', filename='js/gestionParticipant.js') }}"></script>
{% include 'progress-bar.html' %}
<section class="content">
  <section class="section-infopr">
    <div class="infotitre">
      <h2>INFORMATIONS PRINCIPALE</h2>
    </div>
    <section class="infopr">
      <div class="labelp">
        <p>Titre :</p>
        <p>Organisateur :</p>
        <p>Lieu :</p>
        <p>Date :</p>
        <p>Heure :</p> 
      </div>
      <div class="valeurp">
        <p id="nomComp">{{ competition.nomComp }}</p>
        <p id="descComp">{{ competition.descComp }}</p>
        <p id="lieu">{{ competition.lieu.nomLieu }}</p>
        <p id="dateComp">{{ competition.dateComp }}</p>
        <p id="heureComp">{{ competition.heureComp }}</p> <!-- Nouvelle ligne pour l'heure -->
      </div>
      <div class="actionsp">
        <img src="{{ url_for('static', filename='../static/img/edit.png') }}" onclick="editField('nomComp')" />
        <img src="{{ url_for('static', filename='../static/img/edit.png') }}" onclick="editField('descComp')" />
        <img src="{{ url_for('static', filename='../static/img/edit.png') }}" onclick="editField('lieu')" />
        <img src="{{ url_for('static', filename='../static/img/edit.png') }}" onclick="editField('dateComp')" />
        <img src="{{ url_for('static', filename='../static/img/edit.png') }}" onclick="editField('heureComp')" /> <!-- Nouvelle ligne pour l'heure -->
      </div>
    </section>
  </section>
  <section class="gestion-participants">
    <div class="infotitre">
      <h2>GESTION PARTICIPANTS</h2>
    </div>
    <section class="container-section-participants">
      <section class="escrimeblois">
        <div class="subtitreparticipant">
          <h3>Tireurs du Club de l’Escrime de Blois</h3>
          <p class="nb">{{ nb_participants_blois }}</p>
        </div>
        <div class="gestion-participants-list">
          {% if participants_blois %} {% for participant in participants_blois
          %}
          <div class="gestionp">
            <div class="participant">
              <p>{{ participant.prenomE }}</p>
              <p>{{ participant.nomE }}</p>
              <p>|</p>
              <p>{{ participant.Categorie.nomCategorie }}</p>
            </div>
            <div class="suppd">
              <form
                action="{{ url_for('delete_participant', id_comp = competition.idComp,id=participant.numeroLicenceE) }}"
                method="post"
              >
                <button style="font-size: 30px" type="submit">-</button>
              </form>
            </div>
          </div>
          {% endfor %} {% else %}
          <p class="nullparticipant">Aucun participant de l'escrime de Blois</p>
          {% endif %}
          <div class="addp">
            <button style="font-size: 30px">+</button>
          <div id="submenu" style="display: none;">
            <input type="text" id="search" placeholder="Rechercher...">
            <ul id="escrimeurs-list"></ul>
    </div>
            </div>
          </div>
        </div>
      </section>

      <section class="escrime-other">
        <div class="subtitreparticipant">
          <h3>Tireurs d’autres club</h3>
          <p class="nb">{{ nb_participants_other }}</p>
        </div>
        <div class="gestion-participants-list">
          {% if participants_other %} {% for participant in participants_other
          %}
          <div class="gestionp">
            <div class="participant">
              <p>{{ participant.prenomE }}</p>
              <p>{{ participant.nomE }}</p>
              <p>|</p>
              <p>{{ participant.Categorie.nomCategorie }}</p>
            </div>
            <div class="suppd">
              <form
                action="{{ url_for('delete_participant', id_comp = competition.idComp,id=participant.numeroLicenceE) }}"
                method="post"
              >
                <button style="font-size: 30px" type="submit">-</button>
              </form>
            </div>
          </div>
          {% endfor %} {% else %}
          <p class="nullparticipant">Aucun participant d'autres clubs</p>
          {% endif %}
          <div class="addp">
            <form
              action="{{ url_for('add_participant', id_comp=competition.idComp) }}"
              method="post"
            >
              <button style="font-size: 30px" type="submit">+</button>
            </form>
          </div>
        </div>
      </section>
      <section class="escrime-arb">
        <div class="subtitreparticipant">
          <h3>Arbitres</h3>
          <p class="nb">{{ nb_participants_other }}</p>
        </div>
        <div class="gestion-participants-list">
          {% if participants_other %}
            {% for participant in participants_other %}
            <div class ="gestionp">
            <div class="participant">
              <p>{{ participant.prenomE }}</p>
              <p>{{ participant.nomE }}</p>
              <p>|</p>
              <p>{{ participant.Categorie.nomCategorie }}</p>
            </div>
            <div class="suppd">
              <form
                action="{{ url_for('delete_participant', id_comp = competition.idComp,id=participant.numeroLicenceE) }}"
                method="post"
              >
                <button style="font-size: 30px" type="submit">-</button>
              </form>
            </div>
            </div>
            {% endfor %}
          {% else %}
            <p class = "nullparticipant">Aucun arbitres pour le moment</p>
          {% endif %}
          <div class="addp">
            <form action="{{ url_for('add_participant', id_comp=competition.idComp) }}" method="post">
              <button style="font-size: 30px;" type="submit">+</button>
            </form>
          </div>
        </div>
      </section>
    </section>
  </section>
  <div class="center">
    <div class="btndiv">
      <a href="{{ url_for('home_default') }}" class="btn-annuler">ANNULER</a>
      <a href="{{ url_for('home_default') }}" class="btn-publier"
        >CREER LES POULES</a
      >
    </div>
  </div>

  {% endblock %}
</section>