fade

index.html

@@ -61,11 +61,6 @@
                 <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 id="options">
@@ -81,10 +76,10 @@
             <table id="issuesTable">
                 <thead>
                     <tr>
-                        <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>
+                        <th id='titre' onclick="trierTableau('titre')">Sujet</th>
+                        <th id='votes' onclick="trierTableau('votes')">Votes</th>
+                        <th id='auteur' onclick="trierTableau('auteur')">Ouvert par</th>
+                        <th id='date' onclick="trierTableau('date')">Mis à jour</th>
                     </tr>
                 </thead>
                 <tbody>

script.js

@@ -12,6 +12,11 @@ const prefixeAppli = 'laboiteareves';
 const inputDescriptions = document.getElementById("inputDescriptions");
 const tableBody = document.querySelector("#issuesTable tbody");
 
+const etatTri = {
+    cle: null, // La clé actuellement triée
+    croissant: true // Par défaut, tri croissant
+};
+
 // Labels
 const typesLabels = [
 
@@ -57,7 +62,7 @@ const typesLabels = [
     }
 ];
 
-let labelsActifs = ['help','idée','bug'];
+let labelsActifs = ['help','idée'];
 const tousLesSpanLabels = document.querySelectorAll('#choixLabels span');
 
 //Lancement de l'appli
@@ -66,6 +71,7 @@ const tousLesSpanLabels = document.querySelectorAll('#choixLabels span');
     preparerlesInputLabel();
     fetchIssues();
     toggleDescriptions();
+    trierTableau(etatTri.cle);   
 }
 lancementAppli();
 
@@ -78,6 +84,13 @@ async function verifierLocalStorage() {
 
     valeurARecuperer = localStorage.getItem(prefixeAppli+'-'+'descriptions');
     inputDescriptions.checked = valeurARecuperer === 'true';
+
+    valeurARecuperer = localStorage.getItem(prefixeAppli+'-'+'trierPar');
+    etatTri.cle = valeurARecuperer || 'date';
+
+
+    valeurARecuperer = localStorage.getItem(prefixeAppli+'-'+'triCroissant');
+    etatTri.croissant = valeurARecuperer != 'false';
     
 }
 
@@ -112,20 +125,21 @@ async function fetchIssues() {
         }
         let issues = await response.json();
 
-        // Filtrer les tickets fermés, et ranger les ouverts par ordre chronologique inversé
         issues = issues
-        .filter(issue => issue.state !== 'closed') // Suppression des issues fermées
-        .sort((a, b) => {
-            // Priorité aux issues avec 'épinglé' dans leur label
-            const aPinned = a.labels.some(label => label.toLowerCase().includes('épinglé'));
-            const bPinned = b.labels.some(label => label.toLowerCase().includes('épinglé'));
-    
-            if (aPinned && !bPinned) return -1; // 'a' doit être avant 'b'
-            if (!aPinned && bPinned) return 1;  // 'b' doit être avant 'a'
-    
-            // Sinon, tri par dernière réponse
-            return new Date(b.updated_at) - new Date(a.updated_at);
+            .filter(issue => issue.state !== 'closed') // Suppression des issues fermées
+            .filter(issue => !issue.labels.some(label => label.toLowerCase() === 'bug')) // Suppression des issues avec label "bug"
+            .sort((a, b) => {
+                // Priorité aux issues avec 'épinglé' dans leur label
+                const aPinned = a.labels.some(label => label.toLowerCase().includes('épinglé'));
+                const bPinned = b.labels.some(label => label.toLowerCase().includes('épinglé'));
+
+                if (aPinned && !bPinned) return -1; // 'a' doit être avant 'b'
+                if (!aPinned && bPinned) return 1;  // 'b' doit être avant 'a'
+
+                // Sinon, tri par dernière réponse
+                return new Date(b.updated_at) - new Date(a.updated_at);
         });
+
     
 
 
@@ -146,9 +160,19 @@ function displayIssues(issues) {
     issues.forEach(issue => {
 
         let description = issue.description;
-        // Limiter à 150 caractères la description
-        if (description.length > 150) {
-            description = `${description.slice(0, 150)} ...`;
+        // Limiter à 200 caractères la description
+        if (description.length > 200) {
+            description = `${description.slice(0, 200)} ...`;
+
+            // Découper les 20 derniers caractères et construire la chaîne avec styles
+            if (description.length > 50) {
+                const mainText = description.slice(0, -50); // Texte principal sans les 20 derniers
+                const fadingText = description.slice(-50); // Les 20 derniers caractères
+                description = `
+                <span class="text-main">${mainText}</span>
+                <span class="text-fade">${fadingText}</span>
+                `;
+            }
         }
         
         // Récupération du label
@@ -285,16 +309,16 @@ function filtreTickets() {
 
 }
 
-const etatTri = {
-    cle: null, // La clé actuellement triée
-    croissant: true // Par défaut, tri croissant
-};
 
-function trierTableau(cle,entete) {
+
+function trierTableau(cle) {
+
     console.log('Tri par', cle);
 
+    let entete = document.getElementById(cle);
+
     const entetes = document.querySelectorAll('#issuesTable th');
-    entetes.forEach(enteteCourante => {
+    entetes.forEach(enteteCourante => {        
         enteteCourante.classList.remove('actif');
     });
     entete.classList.add('actif');
@@ -313,6 +337,10 @@ function trierTableau(cle,entete) {
         etatTri.croissant = true;
     }
 
+    localStorage.setItem(prefixeAppli+'-'+'trierPar',etatTri.cle);
+    localStorage.setItem(prefixeAppli+'-'+'triCroissant',etatTri.croissant);
+
+
     // Trier les lignes en fonction du label 'épinglé' et des valeurs
     lignes.sort((a, b) => {
         // Vérifier si l'un des éléments est "épinglé"

style.css

@@ -200,6 +200,17 @@ thead>tr, thead>tr:hover {
     background-color: transparent;
 }
 
+.description {
+    font-size: 0.8em;
+}
+
+.text-fade {
+    display: inline;
+    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
 .nodescriptions .description {
     display: none;
 }