mirror of
https://github.com/Daniongithub/ER-TPL.git
synced 2025-10-02 10:10:47 +00:00
New search system in Visualizzatore fermate service.
This commit is contained in:
@@ -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;
|
||||
@@ -134,7 +146,7 @@ footer {
|
||||
display: flex;
|
||||
justify-content: center ;
|
||||
}
|
||||
form#radios div{
|
||||
div#radios div{
|
||||
width: auto;
|
||||
margin-left: 10px;
|
||||
padding: 8px;
|
||||
|
@@ -2,7 +2,7 @@
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="filtroport" content="width=device-width, initial-scale=1.0">
|
||||
<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">
|
||||
@@ -23,14 +23,15 @@
|
||||
<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;">
|
||||
<!--<form id="radios" 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>
|
||||
@@ -47,7 +48,7 @@
|
||||
<label for="tid">Target ID</label>
|
||||
<input type="radio" name="filtro" id="tid" autocomplete="off">
|
||||
</div>
|
||||
</form>-->
|
||||
</div>
|
||||
<label for="searchBar">Cerca fermata:</label>
|
||||
<input type="text" id="searchBar" placeholder="Cerca una fermata...">
|
||||
</div>
|
||||
|
@@ -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,8 +26,8 @@ function populateSearchResults(results, selectedOption) {
|
||||
});
|
||||
}
|
||||
|
||||
function getFermatadaBreve(codbreve){
|
||||
const middle = String(codbreve).padStart(4, "0");
|
||||
function getFermatadaBreve(codice){
|
||||
const middle = String(codice).padStart(4, "0");
|
||||
return `7${middle}0`;
|
||||
}
|
||||
|
||||
@@ -40,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 = '';
|
||||
@@ -58,20 +83,37 @@ searchBar.addEventListener('input', function() {
|
||||
if (currentSelectedOption !== "ra") {
|
||||
filteredOptions = filterOptions(query, allOptions);
|
||||
} else {
|
||||
//placeholder: qui metteremo il filtro dettagliato per "ra"
|
||||
filteredOptions = filterOptions(query, allOptions);
|
||||
//TODO: implementare filtro "ra" custom
|
||||
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 radiobuttons = document.getElementById('radios');
|
||||
const urlFermate = `https://api.vichingo455.freeddns.org/fermateapi/bacino?selectedOption=${selectedOption}`;
|
||||
|
||||
const radiobuttons = document.getElementById('radios');
|
||||
const ricerca = document.getElementById('ricerca');
|
||||
ricerca.removeAttribute('style');
|
||||
|
||||
@@ -79,20 +121,22 @@ document.getElementById('bacino').addEventListener('change', function(event) {
|
||||
|
||||
if(selectedOption == "n"){
|
||||
ricerca.setAttribute("style", "display: none;");
|
||||
//radiobuttons.setAttribute("style", "display: none;");
|
||||
radiobuttons.setAttribute("style", "display: none;");
|
||||
allOptions = [];
|
||||
document.getElementById('searchResults').innerHTML = '';
|
||||
return;
|
||||
}
|
||||
/*else if(selectedOption == "ra"){
|
||||
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;
|
||||
|
Reference in New Issue
Block a user