mirror of
https://github.com/Daniongithub/ER-TPL.git
synced 2025-10-02 15:10:48 +00:00
New stuff
This commit is contained in:
GitHub
126
start_menu/servizi/start-livebus/css/style.css
Normal file
126
start_menu/servizi/start-livebus/css/style.css
Normal file
@@ -0,0 +1,126 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
padding: 20px;
|
||||
background-color: #282828;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
h3 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#data-container {
|
||||
margin-top: 20px;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: #333;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin-top: 20px;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: #333;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-container input {
|
||||
flex: 1 1 200px;
|
||||
padding: 10px 15px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.3s ease;
|
||||
background-color: gray;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.filter-container input:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
font-size: 15px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: slategray;
|
||||
color: white;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
background-color: dimgray;
|
||||
color: white;
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background-color: darkgray;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filter-container input button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
font-family: inherit;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
a {
|
||||
color: orange;
|
||||
}
|
||||
BIN
start_menu/servizi/start-livebus/img/favicon.ico
Normal file
BIN
start_menu/servizi/start-livebus/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
start_menu/servizi/start-livebus/img/start.png
Normal file
BIN
start_menu/servizi/start-livebus/img/start.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
29
start_menu/servizi/start-livebus/index.html
Normal file
29
start_menu/servizi/start-livebus/index.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
|
||||
<title>Start Romagna - Autobus in tempo reale</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="shortcut icon" href="img/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<center><img src="img/start.png" alt="Start Romagna" width="10%"></center>
|
||||
<h1>Autobus in tempo reale</h1>
|
||||
<h3 id="clock">00:00:00</h3>
|
||||
<!-- Contenitore per i filtri per ogni colonna -->
|
||||
<div class="filter-container">
|
||||
<input type="text" id="filterZona" placeholder="Filtra per zona" />
|
||||
<input type="text" id="filterLinea" placeholder="Filtra per linea" />
|
||||
<input type="text" id="filterVeicolo" placeholder="Filtra per veicolo" />
|
||||
<input type="text" id="filterCodiceFermata" placeholder="Filtra per codice fermata" />
|
||||
<button type="button" id="resetFilters" onclick="clearFilters()">Reset</button>
|
||||
</div>
|
||||
|
||||
<div id="data-container"><p style="text-align: center; color: white;">Caricamento in corso, attendere prego...</p></div>
|
||||
|
||||
<p style="text-align: center; color: white;">Copyright (C) 2025 ER-TPL Team - <a href="https://ertpl.pages.dev" target="_blank">ertpl.pages.dev</a> - code by EmmeV (Vichingo455) <a href="https://git.vichingo455.freeddns.org/emmev-code/start-livebus" target="_blank">Codice Sorgente</a></p>
|
||||
<p style="text-align: center; color: white;">Start Romagna, Start e il logo Start Romagna sono marchi registrati e protetti da copyright da Start Romagna SpA. Vengono usati in questa pagina solo per riferimento.</p>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
98
start_menu/servizi/start-livebus/js/script.js
Normal file
98
start_menu/servizi/start-livebus/js/script.js
Normal file
@@ -0,0 +1,98 @@
|
||||
// Funzione per applicare il filtro su ogni colonna
|
||||
function applyFilter() {
|
||||
const filterZona = document.getElementById('filterZona').value.toLowerCase();
|
||||
const filterLinea = document.getElementById('filterLinea').value.toLowerCase();
|
||||
const filterVeicolo = document.getElementById('filterVeicolo').value.toLowerCase();
|
||||
const filterCodiceFermata = document.getElementById('filterCodiceFermata').value.toLowerCase();
|
||||
|
||||
const table = document.querySelector('table');
|
||||
const rows = table.querySelectorAll('tr');
|
||||
|
||||
rows.forEach((row, index) => {
|
||||
// Non applicare il filtro sulla prima riga (intestazione)
|
||||
if (index === 0) return;
|
||||
|
||||
const cells = row.getElementsByTagName('td');
|
||||
let match = true;
|
||||
|
||||
// Verifica ogni cella rispetto al filtro per la colonna
|
||||
if (cells[0] && !cells[0].textContent.toLowerCase().includes(filterZona)) match = false;
|
||||
if (cells[1] && !cells[1].textContent.toLowerCase().includes(filterLinea)) match = false;
|
||||
if (cells[4] && !cells[4].textContent.toLowerCase().includes(filterVeicolo)) match = false;
|
||||
if (cells[3] && !cells[3].textContent.toLowerCase().includes(filterCodiceFermata)) match = false;
|
||||
|
||||
// Mostra o nascondi la riga in base al filtro
|
||||
row.style.display = match ? '' : 'none';
|
||||
});
|
||||
}
|
||||
fetchData(); // Primo fetch
|
||||
// Fetch dei dati ogni 30 secondi (30 000 millisecondi)
|
||||
timer = setInterval(() => {
|
||||
fetchData();
|
||||
}, 30000);
|
||||
// Fetch dei dati e creazione della tabella
|
||||
function fetchData() {
|
||||
fetch('https://api.vichingo455.freeddns.org/infobus/')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const container = document.getElementById('data-container');
|
||||
container.innerHTML = ''; // Svuota il div prima di aggiungere la tabella
|
||||
|
||||
// Crea la tabella
|
||||
const table = document.createElement('table');
|
||||
|
||||
// Aggiungi l'intestazione della tabella
|
||||
const header = table.createTHead();
|
||||
const headerRow = header.insertRow();
|
||||
headerRow.insertCell().textContent = 'Zona';
|
||||
headerRow.insertCell().textContent = 'Linea';
|
||||
headerRow.insertCell().textContent = 'Fermata';
|
||||
headerRow.insertCell().textContent = 'Codice Fermata';
|
||||
headerRow.insertCell().textContent = 'Veicolo';
|
||||
headerRow.insertCell().textContent = ' ';
|
||||
headerRow.insertCell().textContent = 'Ultimo Aggiornamento';
|
||||
|
||||
// Aggiungi i dati alla tabella
|
||||
const tbody = table.createTBody();
|
||||
data.forEach(row => {
|
||||
const rowElement = tbody.insertRow();
|
||||
row.forEach(cellData => {
|
||||
const cell = rowElement.insertCell();
|
||||
cell.textContent = cellData;
|
||||
});
|
||||
});
|
||||
|
||||
// Aggiungi la tabella alla pagina
|
||||
container.appendChild(table);
|
||||
// Preserva il filtro
|
||||
applyFilter();
|
||||
})
|
||||
.catch(err => {
|
||||
//console.error("Errore nel caricamento dati:", err);
|
||||
document.getElementById('data-container').innerHTML = `<p>Errore nel caricamento dei dati. Potrebbe essere un problema di rete, o un problema con la nostra API. Per favore <a href="#" onclick="fetchData()">riprova adesso</a> o riprova più tardi.</p>`;
|
||||
});
|
||||
}
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||||
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
function clearFilters() {
|
||||
// Pulisci tutti i filtri
|
||||
document.getElementById("filterZona").value = "";
|
||||
document.getElementById("filterLinea").value = "";
|
||||
document.getElementById("filterVeicolo").value = "";
|
||||
document.getElementById("filterCodiceFermata").value = "";
|
||||
// Esegui la funzione per applicare i filtri (per sicurezza)
|
||||
applyFilter();
|
||||
}
|
||||
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
// Applica il filtro ogni volta che l'utente digita
|
||||
document.getElementById('filterZona').addEventListener('input', applyFilter);
|
||||
document.getElementById('filterLinea').addEventListener('input', applyFilter);
|
||||
document.getElementById('filterVeicolo').addEventListener('input', applyFilter);
|
||||
document.getElementById('filterCodiceFermata').addEventListener('input', applyFilter);
|
||||
Reference in New Issue
Block a user