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

start_menu/servizi/start-livebus/css/style.css

@@ -61,6 +61,17 @@ p {
   box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
 }
 
+.num {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  max-width: 150px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #333;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
 table {
   border-collapse: separate; 
   border-spacing: 0;

start_menu/servizi/start-livebus/index.html

@@ -37,9 +37,10 @@
       <button type="button" id="resetFilters" onclick="clearFilters()">Reset</button>
     </div>
   </div>
-
+  <div class="num">
+    <p>Numero mezzi: <span id="nummezzi"></span></p>
+  </div>
   <div id="data-container"><p style="text-align: center; color: white;">Caricamento in corso, attendere prego...</p></div>
-
   <p style="text-align: center; color: white;">Copyright (C) 2025 ER-TPL Team - <a href="https://ertpl.pages.dev" target="_blank">ertpl.pages.dev</a> - code by EmmeV (Vichingo455) <a href="https://git.vichingo455.freeddns.org/emmev-code/start-livebus" target="_blank">Codice Sorgente</a></p>
   <p style="text-align: center; color: white;">Start Romagna, Start e il logo Start Romagna sono marchi registrati e protetti da copyright da Start Romagna SpA. Vengono usati in questa pagina solo per riferimento.</p>
   <script src="js/script.js"></script>

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');
+      let th = document.createElement('th');
-      var tr = document.createElement('tr');
+      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);
+      thead.appendChild(th);
-      table.appendChild(tr);
+      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);