filtres

index.html

@@ -47,6 +47,28 @@
 
 
         </div>
+        <div id="choixLabels">
+
+            Filtrer les sujets
+
+            <span class="label">
+                <input type="checkbox" id="inputHelp" value="help" oninput="majLabelsActifs()">
+                <label for="inputHelp">help</label>
+            </span>
+            
+            <span class="label">
+                <input type="checkbox" id="inputIdee" value="idée" oninput="majLabelsActifs()">
+                <label for="inputIdee">idée</label>
+            </span>
+            
+            <span class="label">
+                <input type="checkbox" id="inputBug" value="bug" oninput="majLabelsActifs()">
+                <label for="inputBug">bug</label>
+            </span>
+
+        </div>
+        
+        
 
         <div class="table-container">
             <table id="issuesTable">

script.js

@@ -5,6 +5,8 @@
 const idProjet = 3318;
 // URL de l'API
 const apiUrl = `https://forge.apps.education.fr/api/v4/projects/${idProjet}/issues`;
+// Préfixe appli pour le localStorage
+const prefixeAppli = 'laboiteareves';
 
 // Labels
 const typesLabels = [
@@ -31,9 +33,42 @@ const typesLabels = [
     }
 ];
 
+let labelsActifs = ['help','idée','bug'];
+const tousLesSpanLabels = document.querySelectorAll('#choixLabels span');
 
 //Lancement de l'appli
-fetchIssues();
+    async function lancementAppli() { 
+    await verifierLocalStorage();
+    preparerlesInputLabel();
+    fetchIssues();
+}
+lancementAppli();
+
+async function verifierLocalStorage() {
+    let valeurARecuperer = localStorage.getItem('labelsActifs');
+    if (valeurARecuperer) {
+        labelsActifs = Array.from(valeurARecuperer.split(','));
+    }
+}
+
+
+function preparerlesInputLabel() {
+
+    tousLesSpanLabels.forEach(span => {
+
+        // Récupérer la case à cocher
+        const caseACocher = span.querySelector('input');
+        // Cocher la case
+        if (labelsActifs.includes(caseACocher.value)) {
+            caseACocher.checked=true;
+        }
+        // Affecter la bonne couleur
+        let couleur = typesLabels.find(item => item.nom === caseACocher.value).couleur;
+        span.style.backgroundColor = couleur;
+
+    });
+
+}
 
 // Fonction pour récupérer les tickets
 async function fetchIssues() {
@@ -76,6 +111,7 @@ function displayIssues(issues) {
         
         // Récupération du label
         const label = issue.labels[0] || '';
+               
         
 
         if (label) {
@@ -107,6 +143,16 @@ function displayIssues(issues) {
             <td class="auteur"><img class="avatar" src="${issue.author.avatar_url}"> <a target="_blank" href="${issue.author.web_url}">${issue.author.name}</a></td>
             <td>${new Date(issue.updated_at).toLocaleDateString()}</td>
         `;
+
+        if (label) {
+
+            row.label = label;
+            
+            if (!labelsActifs.includes(label)) {
+                row.classList.add('hide');
+            }
+        }
+
         tableBody.appendChild(row);
     });
 }
@@ -136,6 +182,52 @@ function ajouterTicket(label) {
 }
 
 
+// Fonction pour mettre à jour les labels actifs
+function majLabelsActifs(){
+
+    // On vide le tableau
+    labelsActifs = [];
+
+    // On le remplit
+    tousLesSpanLabels.forEach(span => {
+
+        // Récupérer la case à cocher
+        const caseACocher = span.querySelector('input');
+
+        // Ajouter le label au tableau
+        if (caseACocher.checked) {
+            labelsActifs.push(caseACocher.value);
+        }
+    });
+
+    filtreTickets();
+    localStorage.setItem('labelsActifs',labelsActifs.join(','));
+
+}
+
+
+// Fonction pour filtrer les tickets
+function filtreTickets() {
+
+    // On récupère les lignes
+    const lignesDuTableau = document.querySelectorAll('#issuesTable tr');
+
+    lignesDuTableau.forEach(ligne => {
+
+        // On vérifie si le label est dans le tableau des labels actifs
+        const estActif = labelsActifs.includes(ligne.label);
+
+        // On met à jour la classe hide selon
+        if (estActif) {
+            ligne.classList.remove('hide');
+        } else {
+            ligne.classList.add('hide');
+        }
+
+    });
+
+}
+
 
 
 

style.css

@@ -99,6 +99,11 @@ main {
     background-color: #0056b3;
 }
 
+#choixLabels {
+    text-align: center;
+    font-weight: bold;
+}
+
 /* Table styles */
 
 .table-container {
@@ -212,6 +217,8 @@ footer a, footer a:visited {
     color: #ffffff;
 }
 
+.hide {display: none !important;}
+
 /* Media Queries pour le responsive */
 @media screen and (max-width: 768px) {
     body {