Filtro per linea businservizio

seta_menu/businservizio/css/style.css

@@ -31,7 +31,7 @@ table {
 }
 
 td.uguale{
-    min-width: 50%;
+    width: 50%;
 }
 
 th {

seta_menu/businservizio/index.html

@@ -26,7 +26,7 @@
         </nav>
     </header>
     <h1>Visualizzatore bus in servizio SETA Modena</h1>
-    <div class="content-background">
+    <div id="content-background" class="content-background">
         <h3>Ordina per:</h3>
         <div class="select-container">
             <select id="linea" autocomplete="off">

seta_menu/businservizio/js/script.js

@@ -1,7 +1,9 @@
 const lineaSelect = document.getElementById('linea');
 const modelloSelect = document.getElementById('modello');
+const contentBackground = document.getElementById('content-background');
 
 let allresults = [];
+const urlList="https://setaapi.serverissimo.freeddns.org/busesinservice";
 
 //Reperire modelli e numeri linea
 
@@ -18,7 +20,6 @@ fetch(urlRoutes)
     })
     .then(data => {
         allresults = data;
-        console.log(allresults);
         allresults.forEach(route => {
         const option = document.createElement('option');
         option.value = route;
@@ -44,8 +45,8 @@ fetch(urlModels)
     })
     .catch(error => console.error('Errore nel caricamento dei dati:', error));
 caricadati();
+var refreshGeneraleID=setInterval(caricadati, 60000);
 function caricadati(){
-    const urlList="https://setaapi.serverissimo.freeddns.org/busesinservice";
     fetch(urlList)
     .then(response => {
         if (!response.ok) throw new Error("Errore nel caricamento dei dati.");
@@ -104,4 +105,77 @@ function caricadati(){
     });
 }
 
-setInterval(caricadati, 60000);
+//FILTRI
+//Filtro per linea
+lineaSelect.addEventListener('change', function(event) {
+    const eventConst=event;
+    caricaFiltratiLinea(eventConst);
+    setInterval(function dummyFunc(){caricaFiltratiLinea(eventConst);}, 60000);
+    clearInterval(refreshGeneraleID);
+    if(document.getElementById("reimposta-filtro")==undefined){
+        const reimpostaFiltro = document.createElement('p');
+        reimpostaFiltro.setAttribute("style","margin-bottom: 0; font-size: 14px;");
+        reimpostaFiltro.setAttribute("id","reimposta-filtro");
+        reimpostaFiltro.innerHTML = `
+                <a href="" class="biancosott">Reimposta il filtro</a>
+            `;
+        contentBackground.appendChild(reimpostaFiltro);
+    }
+});
+
+function caricaFiltratiLinea(event){
+    fetch(urlList)
+    .then(response => {
+        if (!response.ok) throw new Error("Errore nel caricamento dei dati.");
+        return response.json();
+    })
+    .then(data=>{
+        const selectedOption = event.target.value;
+        currentSelectedOption = selectedOption;
+        const container = document.getElementById('tabella-container');
+        container.innerHTML = '';
+
+        // Creo tabella
+        const table = document.createElement('table');
+
+        // Intestazione
+        const thead = document.createElement('thead');
+        thead.innerHTML = `
+                    <tr>
+                        <th class="linea">Linea</th>
+                        <th class="direzione">Direzione</th>
+                        <th class="orario">Veicolo</th>
+                        <th class="stato">Modello veicolo</th>
+                        <th class="veicolo">Ora si trova a</th>
+                    </tr>
+                `;
+        table.appendChild(thead);
+        data.features.forEach(elements => {
+            // Extract only the numeric part
+            const number = elements.properties.linea.match(/\d+/g);
+            if(number==selectedOption){
+                const tbody = document.createElement('tbody');
+                const element = elements.properties;
+                const tr = document.createElement('tr');
+                if(element.next_stop==null){
+                    var posizione="";
+                }else{
+                    var posizione=element.next_stop;
+                }
+                tr.innerHTML = `
+                    <td>${element.linea}</td>
+                    <td>${element.route_desc}</td>
+                    <td><a href="infoveicolo.html?id=${element.vehicle_code}" class="bianco">${element.vehicle_code}</a></td>
+                    <td>${element.model}</td>
+                    <td>${posizione}</td>
+                `;
+                tbody.appendChild(tr);
+                table.appendChild(tbody);
+
+                container.appendChild(table);
+            }else{
+                container.appendChild(table);
+            }
+        });
+    });
+}