New stuff
This commit is contained in:
Curry141
GitHub
parent
cca866ff0f
commit
816edec0d7
|
|
@ -51,6 +51,7 @@
|
|||
<div class="riga">
|
||||
<h2 class="piccolospazio">Ravenna:</h2>
|
||||
<p class="piccolospazio">
|
||||
Aggiunti servizi Start.<br>
|
||||
Aggiunte altre foto di <a class="novita" href="/startravenna_bus/urbano/bredino.html">BredaMenarinibus M231CU CNG</a> (+ interni) e <a class="novita" href="/startravenna_bus/urbano/karsan.html">Karsan e-ATAK</a>. <br>
|
||||
Aggiunti <a class="novita" href="/startravenna_bus/suburbano/uwmh.html">Iveco Urbanway 12 Mild Hybrid CNG</a>.<br>
|
||||
Aggiornata la <a class="novita" href="/startravenna_bus/listamezzi.html">lista mezzi</a>.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
:root {
|
||||
--primary-color: #afafaf;
|
||||
--accent-color: #0074d9;
|
||||
--bg-color: #2e2d2d;
|
||||
--white: #ffffff;
|
||||
--light-gray: #848991;
|
||||
--border-color: #727070;
|
||||
--text-color: #ffffff;
|
||||
--black: #000000;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: 40px auto;
|
||||
padding: 30px;
|
||||
background-color: var(--bg-color);
|
||||
/*border-radius: 10px;*/
|
||||
/*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
form label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
form select,
|
||||
form button {
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
form button {
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
form button:hover {
|
||||
background-color: #005fa3;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
display: none;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--light-gray);
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #505050;
|
||||
}
|
||||
|
||||
.loading-message {
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>START Romagna - Monitor corse non garantite</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="shortcut icon" href="img/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<center><img src="img/start.png" alt="Start Romagna" width="10%"></center>
|
||||
<h1>Monitor corse non garantite</h1>
|
||||
</header>
|
||||
<main>
|
||||
<form id="formStazione">
|
||||
<label for="stazione">Bacino:</label>
|
||||
<select id="stazione" name="stazione">
|
||||
<option value="Ravenna">Ravenna</option>
|
||||
<option value="Rimini">Rimini</option>
|
||||
<option value="Forli-Cesena">Forlì-Cesena</option>
|
||||
</select>
|
||||
<button type="submit">Carica</button>
|
||||
</form>
|
||||
<table id="tabellaDati">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Linea</th>
|
||||
<th>Inizio</th>
|
||||
<th>Ora di Inizio</th>
|
||||
<th>Fine</th>
|
||||
<th>Ora di Fine</th>
|
||||
<th>Data</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="corpoTabella"></tbody>
|
||||
</table>
|
||||
</main>
|
||||
<footer>
|
||||
<p>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><br>
|
||||
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>
|
||||
</footer>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// VARIABILI DA MODIFICARE - VARIABLES TO MODIFY //
|
||||
const ApiUri = 'https://api.vichingo455.freeddns.org/start-corsesopp.json'; //JSON Dinamico - Dynamic JSON
|
||||
|
||||
// IMPORTANTE!! NON MODIFICARE SOTTO!! - IMPORTANT!! DO NOT MODIFY THE CODE BELOW!! //
|
||||
let ultimaRichiesta = null;
|
||||
let intervalloAggiornamento = null;
|
||||
const delay = ms => new Promise(res => setTimeout(res, ms));
|
||||
async function caricaDati(event = null, richiestaManuale = false) {
|
||||
if (event) event.preventDefault();
|
||||
const Bacino = document.getElementById("stazione").value;
|
||||
const corpo = document.getElementById("corpoTabella");
|
||||
const tabella = document.getElementById("tabellaDati");
|
||||
// Salva la richiesta corrente per i refresh automatici
|
||||
ultimaRichiesta = { Bacino };
|
||||
// Ottieni la data e l'ora di oggi
|
||||
const oggi = new Date();
|
||||
const anno = oggi.getFullYear();
|
||||
const mese = String(oggi.getMonth() + 1).padStart(2, '0'); // i mesi partono da 0
|
||||
const giorno = String(oggi.getDate()).padStart(2, '0');
|
||||
const Data = `${anno}-${mese}-${giorno}`;
|
||||
// Scrivi l'URL
|
||||
const url = `${ApiUri}/?Bacino=${Bacino}&Data=${Data}`;
|
||||
try {
|
||||
if (richiestaManuale) {
|
||||
tabella.style.display = "table";
|
||||
corpo.innerHTML = `<tr><td colspan="6" class="loading-message">Caricamento in corso...</td></tr>`;
|
||||
}
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
if (data.length === 0) {
|
||||
corpo.innerHTML = `<tr><td colspan="6" class="loading-message">Nessun dato disponibile.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
corpo.innerHTML = data.map(row =>
|
||||
`<tr>${row.map(col => `<td>${col}</td>`).join('')}</tr>`
|
||||
).join('');
|
||||
} catch (error) {
|
||||
console.error("Errore durante la richiesta:", error);
|
||||
if (richiestaManuale) {
|
||||
corpo.innerHTML = `<tr><td colspan="6" class="loading-message">Errore durante il caricamento dei dati. Per favore riprova.<br>PER GLI SVILUPPATORI: Controllare nella console del browser per i dettagli dell'errore.</td></tr>`;
|
||||
await delay(7000);
|
||||
tabella.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
function avviaAggiornamentoAutomatico() {
|
||||
if (intervalloAggiornamento) clearInterval(intervalloAggiornamento);
|
||||
intervalloAggiornamento = setInterval(() => {
|
||||
if (ultimaRichiesta) {
|
||||
caricaDati(null, false);
|
||||
}
|
||||
}, 30000); // ogni 30 secondi
|
||||
}
|
||||
document.getElementById("formStazione").addEventListener("submit", (e) => {
|
||||
caricaDati(e, true);
|
||||
avviaAggiornamentoAutomatico();
|
||||
});
|
||||
caricaStazioni();
|
||||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
|
|
@ -32,9 +32,12 @@
|
|||
<a href="/start_menu/startextra.html" class="button">Extraurbano</a>
|
||||
</div>
|
||||
<div style="height: 35px;"></div>
|
||||
<div>
|
||||
<div class="verticale">
|
||||
<a class="gbutton" href="/startravenna_bus/listamezzi.html">Lista mezzi</a>
|
||||
<a class="gbutton" href="/start_menu/servizi/start-livebus/">Autobus in tempo reale</a>
|
||||
<a class="gbutton" href="/start_menu/servizi/start-corsesopp/">Corse non garantite</a>
|
||||
</div>
|
||||
<p>I servizi "Autobus in tempo reale" e "Corse non garantite" fanno uso di dati forniti da servizi Start Romagna. <br>L'unica cosa che facciamo è ottenerli e impaginarli in maniera differente dai servizi Start, spesso perchè fatti male.</p>
|
||||
</div>
|
||||
<script src="/scripts/startsearch.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue