Nuova schermata ulteriori informazioni bus in servizio seta

seta_menu/businservizio/css/style.css

@@ -30,6 +30,10 @@ table {
     margin-top: 18px;
 }
 
+td.uguale{
+    min-width: 50%;
+}
+
 th {
     background-color: rgb(204, 132, 0);
 }
@@ -43,7 +47,13 @@ th,td {
 }
 
 .bus-card-red {
-    background-color: rgb(241, 120, 120) !important;
+    background-color: rgb(55,0,0) !important;
+}
+.bus-card-yellow {
+    background-color: rgb(65, 65, 0) !important;
+}
+.bus-card-green {
+    background-color: rgb(0, 55, 0) !important;
 }
 
 hr{
@@ -82,18 +92,6 @@ nav {
     text-align: center;
     flex-shrink: 0;
 }
-
-nav#corsie-nav ul{
-    justify-content: center;
-}
-nav#corsie-nav ul li a{
-    color: white;
-    text-decoration: underline;
-}
-nav#corsie-nav ul li{
-    margin-left: 8px;
-    margin-right: 7px;
-}
 nav ul li {
     margin-left: 20px;
     margin-right: 20px;
@@ -169,54 +167,16 @@ select,input{
     padding-bottom: 0px;
 }
 
-input{
-    height: 46.8px;
-}
-
-#searchBar {
-    padding: 10px;
-    font-size: 16px;
-    border-radius: 6px;
-    border: 1px solid var(--border-color);
-    width: 280px;
-}
-#stopCodeBar {
-    padding: 10px;
-    font-size: 16px;
-    border-radius: 6px;
-    border: 1px solid var(--border-color);
-    width: 280px;
-}
-img{
-    height:300px;
-}
-
 @media (max-width: 768px) {
     .search-result {
         display: block;
         width: 95.5%;
-    }    
-    table.image-table {
-        width: 100%;
-    }
-
-    table.image-table td {
-        display: block;
-        width: 100%;
-    }
-
-    table.image-table img {
-        margin-bottom: 10px;
-    }
-    .container {
-        flex-direction: column;
     }
     th,td {
         font-size: 70%;
     }
-    nav#corsie-nav ul li a{
-        font-size: 75%;
-        margin: 0;
+    p.scaled{
+        font-size: 70%;
     }
     table {
         margin-top: 10px;
@@ -227,12 +187,6 @@ img{
     h2.noreduction{
         margin-bottom: 16px;
     }
-    #searchBar {
-        width: 80%;
-    }
-    #stopCodeBar {
-        width: 80%;
-    }
     hr{
         margin-bottom:19px;
     }

seta_menu/businservizio/index.html

@@ -37,7 +37,8 @@
             </select>
         </div>
     </div>
-    <div id="tabella-container">Caricamento dati...</div>
+    <p class="scaled">E' possibile cliccare sul numero del mezzo per ulteriori informazioni.</p>
+    <div id="tabella-container"><div style="height: 12px;"></div>Caricamento dati...</div>
     <footer>
         <div>
 			<p>Copyright (C) 2025 ER-TPL Team - <a href="https://ertpl.pages.dev" target="_blank">ertpl.pages.dev</a> - code by Il Dani & SetaModenaFanpage <a href="https://github.com/Leocraft1/SetaAPI" target="_blank">Codice Sorgente</a> - I loghi SETA Spa sono marchi registrati e sono inseriti in questo sito solo a scopo di illustrazione.</p>

seta_menu/businservizio/infoveicolo.html

@@ -14,23 +14,21 @@
     <header>
         <nav style="display: flex;">
             <ul>
-                <li><a href="/seta_menu/cercaorario/index.html"><h1 style="font-size: 100%;font-weight: 500;">Torna indietro</h1></a></li>
+                <li><a href="/seta_menu/businservizio/index.html"><h1 style="font-size: 100%;font-weight: 500;">Torna indietro</h1></a></li>
             </ul>
             <ul style="flex:1;justify-content: right;">
                 <li><a href=""><h1 style="font-size: 100%;font-weight: 500;">Aggiorna</h1></a></li>
             </ul>
         </nav>
     </header>
-    <h2>Informazioni fermata "<span id="fermata-span"></span>"</h2>
+    <h2>Informazioni veicolo numero: <span id="numero-span"></span></h2>
     <nav id="corsie-nav"></nav>
     <div id="tabella-container">Caricamento dati...</div>
-    <p>Il ritardo viene espresso rispetto all'orario previsto. Quello indicato, se disponibile, è l'orario di arrivo in tempo reale.</p>
-    <p>E' possibile cliccare sul numero del mezzo per vedere la sua posizione sulla mappa.</p>
     <footer>
         <div>
 			<p>Copyright (C) 2025 ER-TPL Team - <a href="https://ertpl.pages.dev" target="_blank">ertpl.pages.dev</a> - code by Il Dani & SetaModenaFanpage <a href="https://github.com/Leocraft1/SetaAPI" target="_blank">Codice Sorgente</a> - I loghi SETA Spa sono marchi registrati e sono inseriti in questo sito solo a scopo di illustrazione.</p>
 		</div>
     </footer>
-    <script src="js/fermata.js"></script>
+    <script src="js/infoveicolo.js"></script>
 </body>
 </html>

seta_menu/businservizio/js/fermata.js

@@ -1,132 +0,0 @@
-const params = new URLSearchParams(window.location.search);
-const nome = params.get('name');
-const codice = params.get('code');
-
-//Sets stop name
-const fermata_span = document.getElementById('fermata-span');
-fermata_span.textContent=nome;
-//Set corsie per stazione o autostazione
-const corsie_nav = document.getElementById('corsie-nav');
-if(nome.includes("STAZIONE FS")){
-    corsie_nav.innerHTML = `
-        <ul>
-            <li>
-                <a href="/seta_menu/cercaorario/altrecorsie.html?location=STAZIONE FS">Altre corsie</a>
-            </li>
-        </ul>`;
-}
-if(nome.includes("MODENA AUTOSTAZIONE")){
-    corsie_nav.innerHTML = `
-        <ul>
-            <li>
-                <a href="/seta_menu/cercaorario/altrecorsie.html?location=MODENA AUTOSTAZIONE">Altre corsie</a>
-            </li>
-        </ul>`;
-}
-if(nome.includes("GARIBALDI")){
-    corsie_nav.innerHTML = `
-        <ul>
-            <li>
-                <a href="/seta_menu/cercaorario/altrecorsie.html?location=GARIBALDI">Altre corsie</a>
-            </li>
-        </ul>`;
-}
-
-const urlBackend = `https://setaapi.serverissimo.freeddns.org/arrivals/${codice}`;
-//const urlBackend = `http://localhost:5001/arrivals/${codice}`;
-function caricadati(){
-    fetch(urlBackend)
-    .then(response => {
-        if (!response.ok) throw new Error("Errore nel caricamento dei dati.");
-        return response.json();
-    })
-    .then(data => {
-        item = data.arrival;
-    })
-    .then(data => {
-        
-        const container = document.getElementById('tabella-container');
-        container.innerHTML = '';
-
-        if (element.error=="no arrivals scheduled in next 90 minutes") {
-            container.innerHTML = '<h3>Nessuna corsa programmata nei prossimi 90 minuti.</h3>';
-            return;
-        }
-        // 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">Orario (Rit/Ant)</th>
-                        <th class="stato">Stato corsa</th>
-                        <th class="veicolo">Veicolo</th>
-                        <th class="location">Ora si trova a</th>
-                    </tr>
-                `;
-        table.appendChild(thead);
-
-        // Corpo tabella
-        const tbody = document.createElement('tbody');
-        element.services.forEach(item => {
-            const tr = document.createElement('tr');
-            if(element.type=="planned"){
-                var stato="Prevista";
-            }else{
-                var stato="In tempo reale";
-            }if(element.next_stop==null){
-                var posizione="";
-            }else{
-                var posizione=element.next_stop;
-            }
-            if(element.delay==undefined){
-                tr.innerHTML = `
-                        <td>${element.service}</td>
-                        <td>${element.destination}</td>
-                        <td>${element.arrival}</td>
-                        <td>${stato}</td>
-                        <td><a href="https://wimb.setaweb.it/qm/index.html?id=${element.busnum}" class="bianco">${element.busnum}</a></td>
-                        <td>${posizione}</td>
-                    `;
-                tbody.appendChild(tr);
-            }else{
-                if(element.delay>0){
-                    tr.innerHTML = `
-                        <td>${element.service}</td>
-                        <td>${element.destination}</td>
-                        <td>${element.arrival} (+${element.delay})</td>
-                        <td>${stato}</td>
-                        <td><a href="https://wimb.setaweb.it/qm/index.html?id=${element.busnum}" class="bianco">${element.busnum}</a></td>
-                        <td>${posizione}</td>
-                    `;
-                    tbody.appendChild(tr);
-                }else{
-                    tr.innerHTML = `
-                        <td>${element.service}</td>
-                        <td>${element.destination}</td>
-                        <td>${element.arrival} (${element.delay})</td>
-                        <td>${stato}</td>
-                        <td><a href="https://wimb.setaweb.it/qm/index.html?id=${element.busnum}" class="bianco">${element.busnum}</a></td>
-                        <td>${posizione}</td>
-                    `;
-                    tbody.appendChild(tr);
-                }
-            }
-            
-        });
-        table.appendChild(tbody);
-
-        container.appendChild(table);
-    })
-    .catch(err => {
-        console.error('Errore nel caricamento dati:', err);
-        document.getElementById('tabella-container').textContent = 'Errore nel caricamento dati.';
-    });
-}
-
-caricadati();
-
-setInterval(caricadati, 60000);

seta_menu/businservizio/js/infoveicolo.js

@@ -0,0 +1,196 @@
+const params = new URLSearchParams(window.location.search);
+const id = params.get('id');
+
+//Sets stop name
+const numero_span = document.getElementById('numero-span');
+numero_span.textContent=id;
+
+const urlBackend = `https://setaapi.serverissimo.freeddns.org/vehicleinfo/${id}`;
+//const urlBackend = `http://localhost:5001/arrivals/${codice}`;
+function caricadati(){
+    var item=[];
+    fetch(urlBackend)
+    .then(response => {
+        if (!response.ok) throw new Error("Errore di risposta nel caricamento dei dati, probabilmente il server API è offline.");
+        return response.json();
+    })
+    .then(data => {
+        item = data;
+    })
+    .then(data => {
+        
+        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" colspan="2" style="text-align:center;">Informazioni veicolo:</th>
+                    </tr>
+                `;
+        table.appendChild(thead);
+
+        // Corpo tabella
+        const tbody = document.createElement('tbody');
+        item.features.forEach(element => {
+            const bus = element.properties;
+            var tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td class="uguale">Linea:</td>
+                    <td>${bus.linea}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Direzione:</td>
+                    <td>${bus.route_desc}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Tipo linea:</td>
+                    <td>${bus.service_tag}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            //Ritardo col +
+            if(bus.delay>0){
+                bus.delay="+"+bus.delay;
+            }
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Ritardo/Anticipo: (+/-)</td>
+                    <td>${bus.delay}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Numero mezzo:</td>
+                    <td>${bus.vehicle_code}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Modello:</td>
+                    <td>${bus.model}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Targa:</td>
+                    <td>${bus.plate_num}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            //Si o no pedana
+            if(bus.pedana==1){
+                bus.pedana="Sì";
+            }else{
+                bus.pedana="No";
+            }
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Pedana?:</td>
+                    <td>${bus.pedana}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Ora si trova a:</td>
+                    <td>${bus.wp_desc}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Codice percorso:</td>
+                    <td>${bus.route_code}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Codice corsa:</td>
+                    <td>${bus.journey_code}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            //Colore sfondo conta passeggeri
+            if(bus.num_passeggeri<=bus.posti_totali/4){
+                tr = document.createElement('tr');
+                tr.innerHTML = `
+                    <tr>
+                        <td class="bus-card-green">Numero passeggeri a bordo:</td>
+                        <td class="bus-card-green">${bus.num_passeggeri}</td>
+                    </tr>
+                `;
+                tbody.appendChild(tr);
+            }else if(bus.num_passeggeri<=bus.posti_totali/1.8){
+                tr = document.createElement('tr');
+                tr.innerHTML = `
+                    <tr>
+                        <td class="bus-card-yellow">Numero passeggeri a bordo:</td>
+                        <td class="bus-card-yellow">${bus.num_passeggeri}</td>
+                    </tr>
+                `;
+                tbody.appendChild(tr);
+            }else{
+                tr = document.createElement('tr');
+                tr.innerHTML = `
+                    <tr>
+                        <td class="bus-card-red">Numero passeggeri a bordo:</td>
+                        <td class="bus-card-red">${bus.num_passeggeri}</td>
+                    </tr>
+                `;
+                tbody.appendChild(tr);
+            }
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Numero posti totali (in piedi + sedili):</td>
+                    <td>${bus.posti_totali}</td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            tr = document.createElement('tr');
+            tr.innerHTML = `
+                <tr>
+                    <td>Posizione:</td>
+                    <td><a href="https://wimb.setaweb.it/qm/index.html?id=${bus.vehicle_code}">GPS</a></td>
+                </tr>
+            `;
+            tbody.appendChild(tr);
+            
+        });
+        table.appendChild(tbody);
+        container.appendChild(table);
+    })
+    .catch(err => {
+        console.error('Errore nel caricamento dati:', err);
+        document.getElementById('tabella-container').textContent = "Errore nella sintassi dei dati ricevuti.";
+    });
+}
+
+caricadati();
+
+setInterval(caricadati, 60000);

seta_menu/businservizio/js/script.js

@@ -43,10 +43,9 @@ fetch(urlModels)
     });
     })
     .catch(error => console.error('Errore nel caricamento dei dati:', error));
-
-const urlList="https://setaapi.serverissimo.freeddns.org/busesinservice";
 caricadati();
 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.");
@@ -89,7 +88,7 @@ function caricadati(){
             tr.innerHTML = `
                 <td>${element.linea}</td>
                 <td>${element.route_desc}</td>
-                <td><a href="https://wimb.setaweb.it/qm/index.html?id=${element.vehicle_code}" class="bianco">${element.vehicle_code}</a></td>
+                <td><a href="infoveicolo.html?id=${element.vehicle_code}" class="bianco">${element.vehicle_code}</a></td>
                 <td>${element.model}</td>
                 <td>${posizione}</td>
             `;
@@ -103,4 +102,6 @@ function caricadati(){
         console.error('Errore nel caricamento dati:', err);
         document.getElementById('tabella-container').textContent = 'Errore nel caricamento dati.';
     });
-}
+}
+
+setInterval(caricadati, 60000);