tris

index.html

@@ -67,6 +67,13 @@
             </span>
 
         </div>
+
+        <div id="options">
+
+            <input type="checkbox" id="inputDescriptions" oninput="toggleDescriptions()">
+            <label for="inputDescriptions">Aperçu des messages</label>
+
+        </div>
         
         
 
@@ -74,10 +81,10 @@
             <table id="issuesTable">
                 <thead>
                     <tr>
-                        <th onclick="trierTableau('titre')">Sujet</th>
-                        <th onclick="trierTableau('votes')">Votes</th>
-                        <th onclick="trierTableau('auteur')">Ouvert par</th>
-                        <th onclick="trierTableau('date')">Dernier message</th>
+                        <th onclick="trierTableau('titre',this)">Sujet</th>
+                        <th onclick="trierTableau('votes',this)">Votes</th>
+                        <th onclick="trierTableau('auteur',this)">Ouvert par</th>
+                        <th onclick="trierTableau('date',this)">Mis à jour</th>
                     </tr>
                 </thead>
                 <tbody>

script.js

@@ -8,6 +8,10 @@ const apiUrl = `https://forge.apps.education.fr/api/v4/projects/${idProjet}/issu
 // Préfixe appli pour le localStorage
 const prefixeAppli = 'laboiteareves';
 
+
+const inputDescriptions = document.getElementById("inputDescriptions");
+const tableBody = document.querySelector("#issuesTable tbody");
+
 // Labels
 const typesLabels = [
 
@@ -61,14 +65,20 @@ const tousLesSpanLabels = document.querySelectorAll('#choixLabels span');
     await verifierLocalStorage();
     preparerlesInputLabel();
     fetchIssues();
+    toggleDescriptions();
 }
 lancementAppli();
 
 async function verifierLocalStorage() {
-    let valeurARecuperer = localStorage.getItem('labelsActifs');
+
+    let valeurARecuperer = localStorage.getItem(prefixeAppli+'-'+'labelsActifs');
     if (valeurARecuperer) {
         labelsActifs = Array.from(valeurARecuperer.split(','));
     }
+
+    valeurARecuperer = localStorage.getItem(prefixeAppli+'-'+'descriptions');
+    inputDescriptions.checked = valeurARecuperer === 'true';
+    
 }
 
 
@@ -123,8 +133,7 @@ async function fetchIssues() {
         displayIssues(issues);
 
     } catch (error) {
-        console.error("Erreur:", error);
-        const tableBody = document.querySelector("#issuesTable tbody");
+        console.error("Erreur:", error);        
         tableBody.innerHTML = `<tr><td colspan="4">Impossible de charger les tickets.</td></tr>`;
     }
 }
@@ -132,7 +141,6 @@ async function fetchIssues() {
 // Fonction pour afficher les tickets
 function displayIssues(issues) {
 
-    const tableBody = document.querySelector("#issuesTable tbody");
     tableBody.innerHTML = ""; // Vider le tableau
 
     issues.forEach(issue => {
@@ -178,10 +186,10 @@ function displayIssues(issues) {
         const row = document.createElement("tr");
         row.innerHTML = `
             <td>${spanLabel}<a class="titre" href="${issue.web_url}" target="_blank">${issue.title}</a>
-            <br>
+            <div class="description">
             ${description}
-            <br>
-            <a class="bouton" href="${issue.web_url}" target="_blank">Lire en entier et répondre</a>            
+            <a class="bouton" href="${issue.web_url}" target="_blank">Lire en entier et répondre</a>
+            </div>            
             </td>
             <td>${issue.upvotes} 👍</td>
             <td class="auteur"><img class="avatar" src="${issue.author.avatar_url}"> <a target="_blank" href="${issue.author.web_url}">${issue.author.name}</a></td>
@@ -250,7 +258,7 @@ function majLabelsActifs(){
     });
 
     filtreTickets();
-    localStorage.setItem('labelsActifs',labelsActifs.join(','));
+    localStorage.setItem(prefixeAppli+'-'+'labelsActifs',labelsActifs.join(','));
 
 }
 
@@ -264,7 +272,7 @@ function filtreTickets() {
     lignesDuTableau.forEach(ligne => {
 
         // On vérifie si le label est dans le tableau des labels actifs
-        const estActif = labelsActifs.includes(ligne.label) || label === 'épinglé';
+        const estActif = labelsActifs.includes(ligne.label) || ligne.label === 'épinglé';
 
         // On met à jour la classe hide selon
         if (estActif) {
@@ -282,9 +290,15 @@ const etatTri = {
     croissant: true // Par défaut, tri croissant
 };
 
-function trierTableau(cle) {
+function trierTableau(cle,entete) {
     console.log('Tri par', cle);
 
+    const entetes = document.querySelectorAll('#issuesTable th');
+    entetes.forEach(enteteCourante => {
+        enteteCourante.classList.remove('actif');
+    });
+    entete.classList.add('actif');
+
     const tableau = document.getElementById('issuesTable');
     const tbody = tableau.querySelector('tbody');
     const lignes = Array.from(tbody.querySelectorAll('tr'));
@@ -330,9 +344,15 @@ function trierTableau(cle) {
 }
 
 
+function toggleDescriptions(){
+    if (inputDescriptions.checked){
+        tableBody.classList.remove('nodescriptions');
+    } else {
+        tableBody.classList.add('nodescriptions');
+    }
+    localStorage.setItem(prefixeAppli+'-'+'descriptions',inputDescriptions.checked);
 
-
-
+}
 
 
 

style.css

@@ -100,10 +100,16 @@ main {
 }
 
 #choixLabels {
+    display: inline-block;
     text-align: center;
     font-weight: bold;
 }
 
+#options {
+    display: inline-block;
+    font-weight: bold;
+}
+
 /* Table styles */
 
 .table-container {
@@ -160,10 +166,16 @@ th {
     color: white;
     cursor: pointer;
     border: 1px #ffffff solid;
+    text-align: center;
 }
 
 th:hover {
     color: yellow;
+    background-color: #635bf7;
+}
+
+th.actif {
+    background-color: #5047f0;
 }
 
 th:first-child {
@@ -183,10 +195,14 @@ tr:hover {
     background-color: rgb(208, 255, 249);
 }
 
+
 thead>tr, thead>tr:hover {
     background-color: transparent;
 }
 
+.nodescriptions .description {
+    display: none;
+}
 
 .avatar {
     border-radius: 50%;