(WIP) Ricerca in base alla matricola
This commit is contained in:
parent
e610b65a59
commit
01aace85e1
|
|
@ -0,0 +1,51 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"matricola": "10108",
|
||||||
|
"compagnia": "START Romagna",
|
||||||
|
"settore" : "Extraurbano",
|
||||||
|
"modello" : "Scania De Simon IL.3",
|
||||||
|
"link": "https://ertpl.pages.dev/startravenna_bus/extraurbano/desimon.html#10108"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"matricola": "10109",
|
||||||
|
"compagnia": "START Romagna",
|
||||||
|
"settore" : "Extraurbano",
|
||||||
|
"modello" : "Scania De Simon IL.3",
|
||||||
|
"link": "https://ertpl.pages.dev/startravenna_bus/extraurbano/desimon.html#10109"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"matricola": "10110",
|
||||||
|
"compagnia": "START Romagna",
|
||||||
|
"settore" : "Extraurbano",
|
||||||
|
"modello" : "Scania De Simon IL.3",
|
||||||
|
"link": "https://ertpl.pages.dev/startravenna_bus/extraurbano/desimon.html#10110"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"matricola": "10111",
|
||||||
|
"compagnia": "START Romagna",
|
||||||
|
"settore" : "Extraurbano",
|
||||||
|
"modello" : "Scania De Simon IL.3",
|
||||||
|
"link": "https://ertpl.pages.dev/startravenna_bus/extraurbano/desimon.html#10111"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"matricola": "10112",
|
||||||
|
"compagnia": "START Romagna",
|
||||||
|
"settore" : "Extraurbano",
|
||||||
|
"modello" : "Scania De Simon IL.3",
|
||||||
|
"link": "https://ertpl.pages.dev/startravenna_bus/extraurbano/desimon.html#10112"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"matricola": "10113",
|
||||||
|
"compagnia": "START Romagna",
|
||||||
|
"settore" : "Extraurbano",
|
||||||
|
"modello" : "Scania De Simon IL.3",
|
||||||
|
"link": "https://ertpl.pages.dev/startravenna_bus/extraurbano/desimon.html#10113"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"matricola": "10114",
|
||||||
|
"compagnia": "START Romagna",
|
||||||
|
"settore" : "Extraurbano",
|
||||||
|
"modello" : "Scania De Simon IL.3",
|
||||||
|
"link": "https://ertpl.pages.dev/startravenna_bus/extraurbano/desimon.html#10114"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="it">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Cerca su ER-TPL</title>
|
||||||
|
<link rel="stylesheet" href="/style.css">
|
||||||
|
<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">
|
||||||
|
<link rel="shortcut icon" href="https://drive-vichingo455.duckdns.org/apps/files_sharing/publicpreview/dydYxaqMrKce3Zj?file=/Immagini%20sito/atcma.png" type="image/x-icon">
|
||||||
|
<style>
|
||||||
|
.product-card {
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #282828;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
#bus-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
#searchBar {
|
||||||
|
padding: 10px;
|
||||||
|
width: 300px;
|
||||||
|
margin: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><h1 style="color:red;">ATTENZIONE! Il sito è ancora in fase di sviluppo e molte pagine non funzionano o portano a collegamenti sbagliati!</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/index.html"><h1 style="font-size: 100%;font-weight: 500;">Home</h1></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<h1>Cerca una matricola</h1>
|
||||||
|
<p>In questa pagina puoi cercare un veicolo in base alla sua matricola. <br>Inoltre, potrai cliccare sopra al bus per andare alla sua pagina apposita.</p>
|
||||||
|
<input type="text" id="searchBar" placeholder="Inserisci la matricola...">
|
||||||
|
<div id="bus-container"></div>
|
||||||
|
<script src="/search.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
const searchBar = document.getElementById('searchBar');
|
||||||
|
const productsContainer = document.getElementById('bus-container');
|
||||||
|
let allProducts = [];
|
||||||
|
|
||||||
|
const url = 'bus.json'; // cambia con il tuo URL
|
||||||
|
|
||||||
|
fetch(url)
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) throw new Error("Errore nel caricamento dei dati.");
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
allProducts = data;
|
||||||
|
//renderProducts(allProducts);
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Errore nel caricamento dei dati:', error));
|
||||||
|
|
||||||
|
searchBar.addEventListener('input', () => {
|
||||||
|
if (searchBar.value == '') {
|
||||||
|
productsContainer.innerHTML = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const searchTerm = searchBar.value.toLowerCase();
|
||||||
|
const filtered = allProducts.filter(bus =>
|
||||||
|
bus.matricola.toLowerCase().includes(searchTerm)
|
||||||
|
);
|
||||||
|
renderProducts(filtered);
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderProducts(products) {
|
||||||
|
productsContainer.innerHTML = '';
|
||||||
|
products.forEach(bus => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = 'product-card';
|
||||||
|
div.innerHTML = `
|
||||||
|
<a href="${bus.link}">
|
||||||
|
<h3>${bus.matricola}</h3>
|
||||||
|
<p>${bus.compagnia} - ${bus.settore}</p>
|
||||||
|
<p>${bus.modello}</p>
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
productsContainer.appendChild(div);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -27,8 +27,10 @@
|
||||||
<p class="listamezzi" style="background-color: orangered;">Dismesso</p>
|
<p class="listamezzi" style="background-color: orangered;">Dismesso</p>
|
||||||
<p class="listamezzi" style="background-color: darkred;">Demolito</p>
|
<p class="listamezzi" style="background-color: darkred;">Demolito</p>
|
||||||
<p class="listamezzi" style="background-color: blue;">In altro deposito (FC, RN)</p>
|
<p class="listamezzi" style="background-color: blue;">In altro deposito (FC, RN)</p>
|
||||||
|
<br>
|
||||||
<hr>
|
<hr>
|
||||||
<table class="lista-mezzi">
|
<div>
|
||||||
|
<table class="lista-mezzi">
|
||||||
<th>Matricola</th>
|
<th>Matricola</th>
|
||||||
<th>Targa</th>
|
<th>Targa</th>
|
||||||
<th>Mezzo</th>
|
<th>Mezzo</th>
|
||||||
|
|
@ -1308,5 +1310,6 @@
|
||||||
<td>Karsan e-ATAK</td>
|
<td>Karsan e-ATAK</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue