Merge branch 'main' of https://github.com/Daniongithub/ER-TPL

index.html

@@ -50,8 +50,9 @@
         <div class="riga">
             <h2 class="piccolospazio">Ravenna:</h2>
             <p class="piccolospazio">
+                <a class="novita" href="/start_menu/servizi/start-fermatebus/index.html">Visualizzatore fermate</a>: MEGA-UPDATE, il bacino di Ravenna possiede 4 filtri diversi, che poi verranno spiegati nelle <a class="novita" href="/start_menu/servizi/start-fermatebus/info.html">info</a>. <br>I risultati vengono anche ordinati in base al criterio di ricerca.
                 Migliorie generali.<br>
-                <a class="novita" href="/start_menu/servizi/start-fermatebus/index.html">Visualizzatore fermate</a>: aggiunte <a class="novita" href="/start_menu/servizi/start-fermatebus/info.html">informazioni</a> e cambiato titolo scheda fermata.<br>
+                Visualizzatore fermate: aggiunte <a class="novita" href="/start_menu/servizi/start-fermatebus/info.html">informazioni</a> e cambiato titolo scheda fermata.<br>
                 Visualizzatore fermate: versione mobile migliorata, rimosso parametro "Soppressa"<br>poichè ridondante con "Stato attuale" quando accade.<br>
                 In arrivo: "37251-37258 MAN Lion's City 12E".
             </p>
@@ -68,5 +69,6 @@
             <div><a href="chisiamo.html" class="link">Chi siamo</a> - <span id="email"><button class="bottone" onclick="mostraemail()">Contattaci</button></span></div>
         </div>
     </footer>
+    <script src="/scripts/ertpl.js"></script>
 </body>
 </html>

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

@@ -3,7 +3,14 @@
         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;
     }
@@ -30,6 +37,7 @@ input{
     margin-top: 10px;
     cursor: pointer;
     display: inline-block;
+    padding: 2px;
 }
 
 table {
@@ -112,6 +120,10 @@ a {
     border: 1px solid #727070;
 }
 
+#bacino{
+    margin-top: 10px;
+}
+
 footer {
     position: relative;
     bottom: 0;
@@ -127,4 +139,20 @@ footer {
     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;
 }

start_menu/servizi/start-fermatebus/index.html

@@ -23,13 +23,32 @@
     <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="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>

start_menu/servizi/start-fermatebus/js/cercafermata.js

@@ -13,7 +13,7 @@ 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>
         `;
 
@@ -26,6 +26,11 @@ function populateSearchResults(results, selectedOption) {
     });
 }
 
+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,10 +76,44 @@ 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;
 
+    const urlFermate = `https://api.vichingo455.freeddns.org/fermateapi/bacino?selectedOption=${selectedOption}`;
+
+    const radiobuttons = document.getElementById('radios');
     const ricerca = document.getElementById('ricerca');
     ricerca.removeAttribute('style');
 
@@ -57,16 +121,22 @@ document.getElementById('bacino').addEventListener('change', function(event) {
     
     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>';
-
-        fetch(`https://api.vichingo455.freeddns.org/fermateapi/bacino?selectedOption=${selectedOption}`)
+        if(selectedOption != "ra"){
+            radiobuttons.setAttribute("style", "display: none;");
+        }
+        fetch(urlFermate)
         .then(res => res.json())
         .then(data => {
             allOptions = data;