Added a counter for the number of vehicles in the search.

start_menu/servizi/start-livebus/js/script.js

@@ -1,3 +1,4 @@
+const apiurl = 'https://api.vichingo455.freeddns.org/infobus/';
 // Funzione per applicare il filtro su ogni colonna
 function applyFilter() {
     const filterZona = document.getElementById('filterZona').value.toLowerCase();
@@ -9,9 +10,6 @@ function applyFilter() {
     const rows = table.querySelectorAll('tr');
 
     rows.forEach((row, index) => {
-      // Non applicare il filtro sulla prima riga (intestazione)
-      if (index === 0) return;
-
       const cells = row.getElementsByTagName('td');
       let match = true;
 
@@ -25,6 +23,15 @@ function applyFilter() {
       row.style.display = match ? '' : 'none';
     });
   }
+  function numeromezzi() {
+    const table = document.getElementById('tabella');
+    //let nummezzi = table.tBodies[0].rows.length;
+    const rows = table.querySelectorAll('tbody tr');
+    const visibili = Array.from(rows).filter(row => {
+      return window.getComputedStyle(row).display !== 'none';
+    });
+    document.getElementById('nummezzi').innerHTML = visibili.length;
+  }
   fetchData(); // Primo fetch
   // Fetch dei dati ogni 30 secondi (30 000 millisecondi)
   timer = setInterval(() => {
@@ -32,7 +39,7 @@ function applyFilter() {
   }, 30000);
   // Fetch dei dati e creazione della tabella
   function fetchData() {
-    fetch('https://api.vichingo455.freeddns.org/infobus/')
+    fetch(apiurl)
     .then(response => response.json())
     .then(data => {
       const container = document.getElementById('data-container');
@@ -42,26 +49,27 @@ function applyFilter() {
       const table = document.createElement('table');
 
       // Aggiungi l'intestazione della tabella
-      var th = document.createElement('th');
-      var tr = document.createElement('tr');
+      let th = document.createElement('th');
+      const thead = document.createElement('thead');
+      const tbody = document.createElement('tbody');
       th.innerHTML='Zona';
-      tr.appendChild(th);
+      thead.appendChild(th);
       th = document.createElement('th');
       th.innerHTML='Linea';
-      tr.appendChild(th);
+      thead.appendChild(th);
       th = document.createElement('th');
       th.innerHTML='Fermata';
-      tr.appendChild(th);
+      thead.appendChild(th);
       th = document.createElement('th');
       th.innerHTML='Codice fermata';
-      tr.appendChild(th);
+      thead.appendChild(th);
       th = document.createElement('th');
       th.innerHTML='Veicolo';
-      tr.appendChild(th);
+      thead.appendChild(th);
       th = document.createElement('th');
       th.innerHTML='Ultimo aggiornamento';
-      tr.appendChild(th);
-      table.appendChild(tr);
+      thead.appendChild(th);
+      table.appendChild(thead);
 
       // Aggiungi i dati alla tabella
       data.forEach(row => {
@@ -73,13 +81,15 @@ function applyFilter() {
             rowt.appendChild(cell);
           }
         });
-        table.appendChild(rowt);
+        tbody.appendChild(rowt);
       });
-
+      table.appendChild(tbody);
       // Aggiungi la tabella alla pagina
       container.appendChild(table);
+      table.id = "tabella";
       // Preserva il filtro
       applyFilter();
+      numeromezzi();
     })
     .catch(err => {
       //console.error("Errore nel caricamento dati:", err);
@@ -101,6 +111,7 @@ function applyFilter() {
     document.getElementById("filterCodiceFermata").value = "";
     // Esegui la funzione per applicare i filtri (per sicurezza)
     applyFilter();
+    numeromezzi();
   }
 
   setInterval(updateClock, 1000);
@@ -110,3 +121,7 @@ document.getElementById('filterZona').addEventListener('input', applyFilter);
 document.getElementById('filterLinea').addEventListener('input', applyFilter);
 document.getElementById('filterVeicolo').addEventListener('input', applyFilter);
 document.getElementById('filterCodiceFermata').addEventListener('input', applyFilter);
+document.getElementById('filterZona').addEventListener('input', numeromezzi);
+document.getElementById('filterLinea').addEventListener('input', numeromezzi);
+document.getElementById('filterVeicolo').addEventListener('input', numeromezzi);
+document.getElementById('filterCodiceFermata').addEventListener('input', numeromezzi);