laradb

git clone git://bebou.netlib.re/laradb
Log | Files | Refs |

commit 453e61f4f895c9b13466bc027784762abfad652f
parent 3abf458857165edb57e5947c4586e5d2340fec3f
Auteurice: martlem <contact@martinlemaire.fr>
Date:   Tue, 12 Nov 2024 18:16:14 +0100

sortTable() O(n²) → O(n); replaceAll('-','.')

Diffstat:
M
src/static/script.js
 | 
123
++++++++++++++++++++++++++++++++++++++++++++-----------------------------------
M
src/static/style.css
 | 
7
++++---

2 files changed, 72 insertions(+), 58 deletions(-)
diff --git a/src/static/script.js b/src/static/script.js
@@ -129,70 +129,83 @@ rows.forEach(row => {
 });
 }
 
+let sortDirection = "asc";
 
+function sortTable(n) {
+	n = n - 1;
+
+	const table = document.querySelector("table");
+	const rows = Array.from(table.rows).slice(1); 
+
+	console.log(n);
+
+	rows.sort((rowA, rowB) => {
+		let cellA, cellB;
+
+		if (n === 1 || n === 2) {
+			cellA = rowA.cells[n].getAttribute('data-date');
+			cellB = rowB.cells[n].getAttribute('data-date');
+		} else if (n === 3) {
+			cellA = parseInt(rowA.cells[n].textContent) || 0;
+			cellB = parseInt(rowB.cells[n].textContent) || 0;
+		} else {
+			cellA = rowA.cells[n].textContent.trim().toLowerCase();
+			cellB = rowB.cells[n].textContent.trim().toLowerCase();
+		}
+
+		if (cellA < cellB) {
+			return sortDirection === "asc" ? -1 : 1;
+		}
+		if (cellA > cellB) {
+			return sortDirection === "asc" ? 1 : -1;
+		}
+		return 0;
+	});
+
+	sortDirection = sortDirection === "asc" ? "desc" : "asc";
+
+	rows.forEach(row => table.appendChild(row));
+}
 
+function convertDate(dateInput) {
+	if (/^\d{4}-\d{2}-\d{2}$/.test(dateInput)) {
+		const [year, month, day] = dateInput.split("-");
+		return [`${year}${month}${day}`, `${day}.${month}.${year}`];
 
-// https://www.w3schools.com/howto/howto_js_sort_table.asp
-function sortTable(n) {
-	n = n-1
-  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
-  table = document.querySelector("table");
-  switching = true;
-  // Set the sorting direction to ascending:
-  dir = "asc";
-  /* Make a loop that will continue until
-  no switching has been done: */
-  while (switching) {
-    // Start by saying: no switching is done:
-    switching = false;
-    rows = table.rows;
-    /* Loop through all table rows (except the
-    first, which contains table headers): */
-    for (i = 1; i < (rows.length - 1); i++) {
-      // Start by saying there should be no switching:
-      shouldSwitch = false;
-      /* Get the two elements you want to compare,
-      one from current row and one from the next: */
-      x = rows[i].getElementsByTagName("TD")[n];
-      y = rows[i + 1].getElementsByTagName("TD")[n];
-      /* Check if the two rows should switch place,
-      based on the direction, asc or desc: */
-      if (dir == "asc") {
-        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
-          // If so, mark as a switch and break the loop:
-          shouldSwitch = true;
-          break;
-        }
-      } else if (dir == "desc") {
-        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
-          // If so, mark as a switch and break the loop:
-          shouldSwitch = true;
-          break;
-        }
-      }
-    }
-    if (shouldSwitch) {
-      /* If a switch has been marked, make the switch
-      and mark that a switch has been done: */
-      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
-      switching = true;
-      // Each time a switch is done, increase this count by 1:
-      switchcount ++;
-    } else {
-      /* If no switching has been done AND the direction is "asc",
-      set the direction to "desc" and run the while loop again. */
-      if (switchcount == 0 && dir == "asc") {
-        dir = "desc";
-        switching = true;
-      }
-    }
-  }
+	} else if (/^\d{4}-\d{2}$/.test(dateInput)) {
+		const [year, month] = dateInput.split("-");
+		return [`${year}${month}00`, `${month}.${year}`];
+
+	} else if (/^\d{4}$/.test(dateInput)) {
+		return [dateInput + "0000", dateInput];
+
+	} else {
+		return [dateInput, dateInput];
+	}
 }
+
+const formatDate = () => {
+
+    document.querySelectorAll('.start-date, .end-date').forEach((e) => {
+	if (e.children.length > 0){
+	let span = e.querySelector('span')
+	e.setAttribute('data-date',convertDate(span.innerText)[0])
+    span.innerText = convertDate(span.innerText)[1]
+}
+	else {
+	e.setAttribute('data-date',convertDate(e.innerText)[0])
+    e.innerText = convertDate(e.innerText)[1]
+
+}
+    })
+}
+
 const path = window.location.pathname;
 
 switch (path) {
   case '/table.html':
 	onClickTable()
+	formatDate()
     break;
 
   case '/timeline.html':
diff --git a/src/static/style.css b/src/static/style.css
@@ -8,7 +8,7 @@
    	--corps-L:2rem;
    	--indent:2rem;
    	--interligne:1.2rem;
-    --marker-size:2rem;
+    --marker-size:.5rem;
    	--largeur-bordure-cellule:1px;
    	--largeur:16px;
    	--arrondi:5px;
@@ -59,7 +59,7 @@ thead td{text-align:left}
 #TABLEAU tr td{width:calc(var(--largeur) * 10)}
 #TABLEAU tr td.numeros{width:calc(var(--largeur) * 4)}
 #TABLEAU tr td:first-of-type{width:min(calc(var(--largeur) * 30), 100vw);}
-#TABLEAU td.start-date, #TABLEAU td.end-date{width:11ch}
+#TABLEAU td.start-date, #TABLEAU td.end-date{width:11ch; content:attr('data-date')}
 #TABLEAU td.number-of-issues {width:5ch}
 
 #TABLEAU tr.show {display:flex;flex-direction:column;flex-wrap:wrap;}
@@ -70,7 +70,7 @@ thead td{text-align:left}
     border-left:none;
     border-top:1px solid black
 }
-tr:not(.show) td.number-of-issues {text-align:right}
+tr:not(.show) td.start-date, tr:not(.show) td.end-date, tr:not(.show) td.number-of-issues {text-align:right}
 
 #TABLEAU tr:not(.show) td:not(:first-of-type) {padding: 0 5px}
 #TABLEAU tr.show td {}
@@ -216,6 +216,7 @@ height:calc(100vh);
 border-left:1px solid var(--noir);
 z-index:0;
 }
+#TIMELINE tbody tr, #TABLEAU tbody tr{border-bottom:1px solid transparent;border-top:1px solid transparent}
 #TIMELINE tbody tr:hover, #TABLEAU tbody tr:hover{border-bottom:1px solid var(--noir);border-top:1px solid var(--noir)}
 section.large * {max-width:960px;margin:0;font-size:var(--corps-L); line-height:calc(var(--corps-L) * 1.2)}
 section.large {margin:var(--interligne)}