Sync files from main repo, new version.

css/style.css

@@ -1,19 +1,19 @@
-:root {
-    --primary-color: #afafaf;
-    --accent-color: #0074d9;
-    --bg-color: #2e2d2d;
-    --white: #ffffff;
-    --light-gray: #848991;
-    --border-color: #727070;
-    --text-color: #ffffff;
-    --black: #000000;
-}
-
 @media (max-width: 768px) {
     .search-result {
         display: block !important;
         width: 95.5% !important;
     }
+    #radios{
+        display: table !important;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    #radios div{
+        margin-top: 8px;
+    }
+    #tabella-container{
+        overflow-x: scroll;
+    }
 }
 
 body {
@@ -23,6 +23,10 @@ body {
     font-family: Titillium Web;
 }
 
+input{
+    margin-top: 5px;
+}
+
 .search-result {
     border: 2px solid white;
     border-radius: 8px;
@@ -33,11 +37,11 @@ body {
     margin-top: 10px;
     cursor: pointer;
     display: inline-block;
+    padding: 2px;
 }
 
 table {
     border-collapse: collapse;
-    border-radius: 8px;
     width: 85%;
     margin: auto;
     margin-top: 1rem;
@@ -47,8 +51,7 @@ th {
     background-color: lightslategray;
 }
 
-th,
+th, td {
-td {
     border: 2px solid #444;
     padding: 8px;
     text-align: left;
@@ -59,7 +62,7 @@ tr:nth-child(even) {
 }
 
 .bus-card-red {
-    background-color: rgb(241, 120, 120) !important;
+    background-color: red !important;
 }
 
 header {
@@ -114,7 +117,11 @@ a {
     padding: 10px;
     font-size: 16px;
     border-radius: 6px;
-    border: 1px solid var(--border-color);
+    border: 1px solid #727070;
+}
+
+#bacino{
+    margin-top: 10px;
 }
 
 footer {
@@ -123,3 +130,29 @@ footer {
 	left: 0;
     width: 100%;
 }
+
+.info{
+    color: white;
+}
+
+.lista li{
+    list-style-type: disc;
+    list-style-position: inside;
+    margin-bottom: 10px;
+}
+#radios{
+    margin-top: 15px;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: center;
+}
+
+div#radios div{
+    display: flex;
+    align-items: center;
+    width: auto;
+    margin-left: 8px;
+    padding: 8px;
+    border: 2px #404040 solid;
+    border-radius: 8px;
+}

fermata.html

@@ -14,16 +14,18 @@
     <header>
         <nav>
             <ul>
-                <li><a href="index.html"><p>Home</p></a></li>
+                <li><a href="#" onclick="window.close();"><h1 style="font-size: 100%;font-weight: 500;">Chiudi</h1></a></li>
             </ul>
         </nav>
     </header>
     <h2>Informazioni fermata <span id="fermata-span"></span></h2>
     <div id="tabella-container">Caricamento dati...</div>
+    <p style="color: orange;">Attenzione: i dati qui visualizzati sono direttamente ottenuti da Start Romagna,<br>pertanto eventuali imprecisioni o errori non sono a carico nostro.</p>
     <footer>
-        <p>Copyright (C) 2025 ER-TPL Team - <a href="https://ertpl.pages.dev" target="_blank">ertpl.pages.dev</a> - code by Il Dani <a href="https://git.vichingo455.freeddns.org/daniele/start-fermatebus" target="_blank">Codice Sorgente</a><br>
+        <p>Copyright &copy; 2025 ER-TPL Team - <a href="https://ertpl.pages.dev" target="_blank">ertpl.pages.dev</a> - code by Il Dani <a href="https://github.com/Daniongithub/startfermate" target="_blank">codice sorgente</a><br>
         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>
     </footer>
+    <p>Versione API: <span id="ver"></span></p>
     <script src="js/fermata.js"></script>
 </body>
 </html>

index.html

@@ -21,21 +21,41 @@
         </nav>
     </header>
     <h1>Visualizzatore fermate START Romagna</h1>
+    <a class="info" href="info.html">Informazioni sul servizio</a><br>
     <label for="bacino">Bacino:</label>
-    <select id="bacino">
+    <select id="bacino" autocomplete="off">
-        <option value="" selected>--Scegli un'opzione--</option>
+        <option value="n" selected>--Scegli un'opzione--</option>
         <option value="ra">Ravenna</option>
         <option value="rn">Rimini</option>
         <option value="fc">Forlì-Cesena</option>
     </select>
+    <div id="ricerca" style="display: none;">
+        <div id="radios" style="display: none;">
+            <p>Seleziona un filtro:</p>
             <div>
+                <label for="text">Nome fermata</label>
+                <input type="radio" name="filtro" id="text" autocomplete="off" checked>
+            </div>
+            <div>
+                <label for="lungo">Cod. fermata lungo</label>
+                <input type="radio" name="filtro" id="lungo" autocomplete="off">
+            </div>
+            <div>
+                <label for="breve">Cod. fermata breve</label>
+                <input type="radio" name="filtro" id="breve" autocomplete="off">
+            </div>
+            <div>
+                <label for="tid">Target ID</label>
+                <input type="radio" name="filtro" id="tid" autocomplete="off">
+            </div>
+        </div>
         <label for="searchBar">Cerca fermata:</label>
         <input type="text" id="searchBar" placeholder="Cerca una fermata...">
     </div>
     <div id="searchResults"></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 <a href="https://git.vichingo455.freeddns.org/daniele/start-fermatebus" target="_blank">Codice Sorgente</a><br>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>
+			<p>Copyright &copy; 2025 ER-TPL Team - <a href="https://ertpl.pages.dev" target="_blank">ertpl.pages.dev</a> - code by Il Dani <a href="https://github.com/Daniongithub/startfermate" target="_blank">codice sorgente</a><br>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>
 		</div>
     </footer>
     <script src="js/cercafermata.js"></script>

info.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>START Romagna - Visualizza fermata</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="shortcut icon" href="img/favicon.ico">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header>
+        <nav>
+            <ul>
+                <li><a href="/index.html"><h1 style="font-size: 100%;font-weight: 500;">Home</h1></a></li>
+                <li><a href="/ravenna_menu/ravenna.html"><h1 style="font-size: 100%;font-weight: 500;">Ravenna</h1></a></li>
+                <li><a href="/start_menu/start.html"><h1 style="font-size: 100%;font-weight: 500;">START Romagna</h1></a></li>
+                <li><a href="/start_menu/servizi/start-fermatebus/index.html"><h1 style="font-size: 100%;font-weight: 500;">Torna indietro</h1></a></li>
+            </ul>
+        </nav>
+    </header>
+    <h1>Note e informazioni sul visualizzatore fermate</h1>
+    <h3>Come leggere il codice fermata e inserirlo sul sito:</h3>
+    <p><em>Questa sezione sarà scritta entro o poco oltre l'inizio del servizio scolastico</em></p>
+    <h3>Note varie:</h3>
+    <ul class="lista">
+        <li>I dati qui visualizzati sono direttamente ottenuti da Start Romagna,<br>pertanto eventuali imprecisioni o errori non sono a carico nostro.</li>
+        <li>Per le linee di Ravenna sono state incluse le varianti (es. 1B, 4C, 70/...), esse si basano sul tipo di capolinea in base agli orari.<br>Non conoscendo FC e RN, è impossibile replicare ciò senza errori (se vuoi aiutarci, scrivici nella mail di <a href="/chisiamo.html">chi siamo</a>).</li>
+        <li>Un particolare accenno è dedicato alle linee "barrate", esempio 4/, 80/... Esse compariranno quando una linea è "limitata" come da orario oppure,<br>come abbiamo notato in vita reale, quando una corsa tipo il 70 e l'80 vengono soppresse spesso le dividono a metà e si fermano in stazione.</li>
+        <li>Ci tenevo (io, Il Dani) a precisare che queste varianti possono non essere sempre corrette, in tal caso mi scuso in anticipo, ma almene avete un dettaglio in più,<br>perchè start mette solo il numero linea su Infobus.</li>
+    </ul>
+    <footer>
+        <div>
+			<p>Copyright &copy; 2025 ER-TPL Team - <a href="https://ertpl.pages.dev" target="_blank">ertpl.pages.dev</a> - code by Il Dani <a href="https://github.com/Daniongithub/startfermate" target="_blank">codice sorgente</a><br>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>
+		</div>
+    </footer>
+</body>
+</html>

js/cercafermata.js

@@ -13,19 +13,24 @@ function populateSearchResults(results, selectedOption) {
         div.innerHTML = `
             <div>
                 <h3>${item.nome}</h3>
-                <p>Palina: ${item.palina}, Target ID: ${item.targetID}</p>
+                <p>Fermata: ${item.palina}, Target ID: ${item.targetID}</p>
             </div>
         `;
 
         div.addEventListener('click', () => {
             const url = `fermata.html?palina=${encodeURIComponent(item.palina)}&targetID=${encodeURIComponent(item.targetID)}&selectedOption=${encodeURIComponent(selectedOption)}`;
-            window.location.href = url;
+            window.open(url, "_blank");
         });
 
         searchResultsContainer.appendChild(div);
     });
 }
 
+function getFermatadaBreve(codice){
+    const middle = String(codice).padStart(4, "0");
+    return `7${middle}0`;
+}
+
 function filterOptions(query, data) {
     const q = query.toLowerCase();
     return data.filter(item =>
@@ -35,6 +40,31 @@ function filterOptions(query, data) {
     );
 }
 
+function filtraTesto(query, data){
+    const q = query.toLowerCase();
+    return data
+    .filter(item => (item.nome || '').toLowerCase().includes(q))
+    .sort((a, b) => (a.nome || '').localeCompare(b.nome || ''));
+}
+
+function filtraLungo(query, data){
+    const q = query.toLowerCase();
+    return data
+    .filter(item => (item.palina || '').toLowerCase().includes(q))
+    .sort((a, b) => (a.palina || '').localeCompare(b.palina || ''));
+}
+
+function filtraBreve(query, data){
+    const cod = getFermatadaBreve(query);
+    return filtraLungo(cod, data);
+}
+
+function filtraTID(query, data){
+    const q = query.toLowerCase();
+    return data
+    .filter(item => (item.targetID || '').toLowerCase().includes(q))
+    .sort((a, b) => (a.targetID || '').localeCompare(b.targetID || ''));
+}
 
 let allOptions = [];
 let currentSelectedOption = '';
@@ -46,20 +76,67 @@ searchBar.addEventListener('input', function() {
     populateSearchResults(filteredOptions, currentSelectedOption);
 });
 
+searchBar.addEventListener('input', function() {
+    const query = searchBar.value;
+    let filteredOptions;
+
+    if (currentSelectedOption !== "ra") {
+        filteredOptions = filterOptions(query, allOptions);
+    } else {
+        if (document.getElementById('text').checked){
+            filteredOptions = filtraTesto(query, allOptions);
+        }
+        else if (document.getElementById('lungo').checked){
+            filteredOptions = filtraLungo(query, allOptions);
+        }
+        else if (document.getElementById('breve').checked){
+            filteredOptions = filtraBreve(query, allOptions);
+        }
+        else if(document.getElementById('tid').checked){
+            filteredOptions = filtraTID(query, allOptions);
+        }
+    }
+    populateSearchResults(filteredOptions, currentSelectedOption);
+});
+
+const radios = document.querySelectorAll('#radios input[type="radio"]');
+radios.forEach(radio => {
+    radio.addEventListener('change', () => {
+        searchBar.value = '';
+        document.getElementById('searchResults').innerHTML = '';
+    });
+});
+
 document.getElementById('bacino').addEventListener('change', function(event) {
     const selectedOption = event.target.value;
     currentSelectedOption = selectedOption;
 
-    if (!selectedOption) {
+    const urlFermate = `https://api.vichingo455.freeddns.org/fermateapi/bacino?selectedOption=${selectedOption}`;
+
+    const radiobuttons = document.getElementById('radios');
+    const ricerca = document.getElementById('ricerca');
+    ricerca.removeAttribute('style');
+
+    document.getElementById('searchBar').value = "";
+    
+    if(selectedOption == "n"){
+        ricerca.setAttribute("style", "display: none;");
+        radiobuttons.setAttribute("style", "display: none;");
         allOptions = [];
         document.getElementById('searchResults').innerHTML = '';
         return;
     }
+    else if(selectedOption == "ra"){
+        radiobuttons.removeAttribute('style')
+    }
 
+    if(selectedOption != "n"){
         const resultsContainer = document.getElementById('searchResults');
         resultsContainer.innerHTML = '<p>Caricamento lista fermate in corso...</p>';
-
+        if(selectedOption != "ra"){
-    fetch(`http://localhost:3005/bacino?selectedOption=${selectedOption}`)
+            radiobuttons.setAttribute("style", "display: none;");
+        }
+        fetch(urlFermate)
         .then(res => res.json())
         .then(data => {
             allOptions = data;
@@ -69,4 +146,5 @@ document.getElementById('bacino').addEventListener('change', function(event) {
             resultsContainer.innerHTML = '<p>Errore nel caricamento delle fermate.</p>';
             console.error('Errore:', err);
         });
+    }
 });

js/fermata.js

@@ -3,8 +3,7 @@ const palina = params.get('palina');
 const targetID = params.get('targetID');
 const selectedOption = params.get('selectedOption');
 
-//const urlBackend = `https://api.vichingo455.freeddns.org/start-fermatebus.json/w?param=${targetID}&param2=${selectedOption}&palina=${palina}`;
+const urlBackend = `https://api.vichingo455.freeddns.org/fermateapi/fermata?param=${targetID}&param2=${selectedOption}&palina=${palina}`;
-const urlBackend = `http://localhost:3005/fermata?param=${targetID}&param2=${selectedOption}&palina=${palina}`;
 function caricadati(){
     fetch(urlBackend)
     .then(res => res.json())
@@ -12,10 +11,15 @@ function caricadati(){
         const fermata_span = document.getElementById('fermata-span');
         if (data[0] && data[0].fermata !== undefined) {
             fermata_span.innerHTML = `"${data[0].fermata}"`;
+            document.title = `Fermata ${data[0].fermata}`
         }
         const container = document.getElementById('tabella-container');
         container.innerHTML = '';
 
+        fetch('https://api.vichingo455.freeddns.org/fermateapi/versione')
+        .then(res => res.text())
+        .then(versione => document.getElementById("ver").innerHTML = versione);
+        
         if (!data || data.length === 0) {
             container.innerHTML = '<h3>Nessuna linea in arrivo.</h3>';
             return;
@@ -33,7 +37,6 @@ function caricadati(){
                         <th>Orario</th>
                         <th>Stato attuale</th>
                         <th>Veicolo</th>
-                        <th>Soppressa</th>
                     </tr>
                 `;
         table.appendChild(thead);
@@ -51,7 +54,6 @@ function caricadati(){
                         <td>${item.orario}</td>
                         <td>${item.stato}</td>
                         <td>${item.mezzo}</td>
-                        <td>${item.soppressa ? 'Sì' : 'No'}</td>
                     `;
             tbody.appendChild(tr);
         });
@@ -67,4 +69,5 @@ function caricadati(){
 
 caricadati();
 
+
 setInterval(caricadati, 60000);