mirror of
https://github.com/Daniongithub/ER-TPL.git
synced 2025-10-02 12:10:48 +00:00
Improving search sytem.
This commit is contained in:
@@ -16,6 +16,10 @@ body {
|
|||||||
font-family: Titillium Web;
|
font-family: Titillium Web;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input{
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.search-result {
|
.search-result {
|
||||||
border: 2px solid white;
|
border: 2px solid white;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
@@ -23,12 +23,12 @@
|
|||||||
<h1>Visualizzatore fermate START Romagna</h1>
|
<h1>Visualizzatore fermate START Romagna</h1>
|
||||||
<label for="bacino">Bacino:</label>
|
<label for="bacino">Bacino:</label>
|
||||||
<select id="bacino">
|
<select id="bacino">
|
||||||
<option value="" selected>--Scegli un'opzione--</option>
|
<option value="n" selected>--Scegli un'opzione--</option>
|
||||||
<option value="ra">Ravenna</option>
|
<option value="ra">Ravenna</option>
|
||||||
<option value="rn">Rimini</option>
|
<option value="rn">Rimini</option>
|
||||||
<option value="fc">Forlì-Cesena</option>
|
<option value="fc">Forlì-Cesena</option>
|
||||||
</select>
|
</select>
|
||||||
<div>
|
<div id="ricerca" style="display: none;">
|
||||||
<label for="searchBar">Cerca fermata:</label>
|
<label for="searchBar">Cerca fermata:</label>
|
||||||
<input type="text" id="searchBar" placeholder="Cerca una fermata...">
|
<input type="text" id="searchBar" placeholder="Cerca una fermata...">
|
||||||
</div>
|
</div>
|
||||||
|
@@ -50,16 +50,23 @@ document.getElementById('bacino').addEventListener('change', function(event) {
|
|||||||
const selectedOption = event.target.value;
|
const selectedOption = event.target.value;
|
||||||
currentSelectedOption = selectedOption;
|
currentSelectedOption = selectedOption;
|
||||||
|
|
||||||
if (!selectedOption) {
|
const ricerca = document.getElementById('ricerca');
|
||||||
|
ricerca.removeAttribute('style');
|
||||||
|
|
||||||
|
document.getElementById('searchBar').value = "";
|
||||||
|
|
||||||
|
if(selectedOption == "n"){
|
||||||
|
ricerca.setAttribute("style", "display: none;");
|
||||||
allOptions = [];
|
allOptions = [];
|
||||||
document.getElementById('searchResults').innerHTML = '';
|
document.getElementById('searchResults').innerHTML = '';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const resultsContainer = document.getElementById('searchResults');
|
if(selectedOption != "n"){
|
||||||
resultsContainer.innerHTML = '<p>Caricamento lista fermate in corso...</p>';
|
const resultsContainer = document.getElementById('searchResults');
|
||||||
|
resultsContainer.innerHTML = '<p>Caricamento lista fermate in corso...</p>';
|
||||||
|
|
||||||
fetch(`https://api.vichingo455.freeddns.org/fermateapi/bacino?selectedOption=${selectedOption}`)
|
fetch(`https://api.vichingo455.freeddns.org/fermateapi/bacino?selectedOption=${selectedOption}`)
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
allOptions = data;
|
allOptions = data;
|
||||||
@@ -69,4 +76,5 @@ document.getElementById('bacino').addEventListener('change', function(event) {
|
|||||||
resultsContainer.innerHTML = '<p>Errore nel caricamento delle fermate.</p>';
|
resultsContainer.innerHTML = '<p>Errore nel caricamento delle fermate.</p>';
|
||||||
console.error('Errore:', err);
|
console.error('Errore:', err);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
@@ -1,76 +0,0 @@
|
|||||||
function populateSearchResults(results, selectedOption) {
|
|
||||||
const searchResultsContainer = document.getElementById('searchResults');
|
|
||||||
searchResultsContainer.innerHTML = '';
|
|
||||||
|
|
||||||
if (results.length === 0) {
|
|
||||||
searchResultsContainer.innerHTML = '<p>Nessun risultato trovato</p>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var w = 900;
|
|
||||||
var h = 600;
|
|
||||||
var l = Math.floor((screen.width-w)/2);
|
|
||||||
var t = Math.floor((screen.height-h)/2);
|
|
||||||
|
|
||||||
results.forEach(item => {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.className = 'search-result';
|
|
||||||
div.innerHTML = `
|
|
||||||
<div>
|
|
||||||
<h3>${item.nome}</h3>
|
|
||||||
<p>Palina: ${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.open(url, "","top=" + t + ",left=" + l + ",width=" + w + ",height=" + h + ",status=no,menubar=no,toolbar=no scrollbars=yes");
|
|
||||||
});
|
|
||||||
|
|
||||||
searchResultsContainer.appendChild(div);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterOptions(query, data) {
|
|
||||||
const q = query.toLowerCase();
|
|
||||||
return data.filter(item =>
|
|
||||||
(item.nome || '').toLowerCase().includes(q) ||
|
|
||||||
(item.palina || '').toLowerCase().includes(q) ||
|
|
||||||
(item.targetID || '').toLowerCase().includes(q)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
let allOptions = [];
|
|
||||||
let currentSelectedOption = '';
|
|
||||||
|
|
||||||
const searchBar = document.getElementById('searchBar');
|
|
||||||
searchBar.addEventListener('input', function() {
|
|
||||||
const query = searchBar.value;
|
|
||||||
const filteredOptions = filterOptions(query, allOptions);
|
|
||||||
populateSearchResults(filteredOptions, currentSelectedOption);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('bacino').addEventListener('change', function(event) {
|
|
||||||
const selectedOption = event.target.value;
|
|
||||||
currentSelectedOption = selectedOption;
|
|
||||||
|
|
||||||
if (!selectedOption) {
|
|
||||||
allOptions = [];
|
|
||||||
document.getElementById('searchResults').innerHTML = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const resultsContainer = document.getElementById('searchResults');
|
|
||||||
resultsContainer.innerHTML = '<p>Caricamento lista fermate in corso...</p>';
|
|
||||||
|
|
||||||
fetch(`https://api.vichingo455.freeddns.org/fermateapi/bacino?selectedOption=${selectedOption}`)
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(data => {
|
|
||||||
allOptions = data;
|
|
||||||
populateSearchResults(allOptions, selectedOption);
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
resultsContainer.innerHTML = '<p>Errore nel caricamento delle fermate.</p>';
|
|
||||||
console.error('Errore:', err);
|
|
||||||
});
|
|
||||||
});
|
|
Reference in New Issue
Block a user