(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: darkred;">Demolito</p>
|
||||
<p class="listamezzi" style="background-color: blue;">In altro deposito (FC, RN)</p>
|
||||
<br>
|
||||
<hr>
|
||||
<table class="lista-mezzi">
|
||||
<div>
|
||||
<table class="lista-mezzi">
|
||||
<th>Matricola</th>
|
||||
<th>Targa</th>
|
||||
<th>Mezzo</th>
|
||||
|
|
@ -1308,5 +1310,6 @@
|
|||
<td>Karsan e-ATAK</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue