122 lines
3.6 KiB
HTML
122 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Train Schedule</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 20px;
|
||
|
|
background-color: #f4f4f4;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
color: #0056b3;
|
||
|
|
}
|
||
|
|
.train {
|
||
|
|
background: white;
|
||
|
|
padding: 15px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
th, td {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 10px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
th {
|
||
|
|
background: #007bff;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>Train Schedule</h1>
|
||
|
|
<div id="train-container"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const rawData = [
|
||
|
|
[
|
||
|
|
[59400, 148403369],
|
||
|
|
"Gdynia Cisowa 3:36 3:37",
|
||
|
|
"Gdynia Chylonia 3:39 3:40",
|
||
|
|
"Gdańsk Stocznia 4:22 4:22",
|
||
|
|
"Gdańsk Główny 4:25 4:26",
|
||
|
|
"Gdańsk Śródmieście 4:28 4:28",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
[59486, 148403414],
|
||
|
|
"Gdynia Cisowa 23:35 23:35",
|
||
|
|
"Gdynia Chylonia 23:37 23:38",
|
||
|
|
"Gdynia Leszczynki 23:39 23:40",
|
||
|
|
"Gdańsk Stocznia 0:20 0:20",
|
||
|
|
"Gdańsk Główny 0:23 0:23",
|
||
|
|
],
|
||
|
|
];
|
||
|
|
|
||
|
|
function parseTrainData(data) {
|
||
|
|
return data.map(train => {
|
||
|
|
const [trainInfo, ...stations] = train;
|
||
|
|
const [trainId, trainCode] = trainInfo;
|
||
|
|
|
||
|
|
const parsedStations = stations.map(station => {
|
||
|
|
const parts = station.match(/^(.*?)(\d{1,2}:\d{1,2}) (\d{1,2}:\d{1,2})$/);
|
||
|
|
return parts ? {
|
||
|
|
name: parts[1].trim(),
|
||
|
|
arrival: parts[2],
|
||
|
|
departure: parts[3]
|
||
|
|
} : null;
|
||
|
|
}).filter(Boolean);
|
||
|
|
|
||
|
|
return { trainId, trainCode, stations: parsedStations };
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function displayTrains() {
|
||
|
|
const trains = parseTrainData(rawData);
|
||
|
|
const container = document.getElementById("train-container");
|
||
|
|
container.innerHTML = "";
|
||
|
|
|
||
|
|
trains.forEach(train => {
|
||
|
|
const trainDiv = document.createElement("div");
|
||
|
|
trainDiv.classList.add("train");
|
||
|
|
trainDiv.innerHTML = `<h2>Train ID: ${train.trainId} (Code: ${train.trainCode})</h2>`;
|
||
|
|
|
||
|
|
const table = document.createElement("table");
|
||
|
|
table.innerHTML = `
|
||
|
|
<tr>
|
||
|
|
<th>Station</th>
|
||
|
|
<th>Arrival</th>
|
||
|
|
<th>Departure</th>
|
||
|
|
</tr>
|
||
|
|
`;
|
||
|
|
|
||
|
|
train.stations.forEach(station => {
|
||
|
|
const row = document.createElement("tr");
|
||
|
|
row.innerHTML = `
|
||
|
|
<td>${station.name}</td>
|
||
|
|
<td>${station.arrival}</td>
|
||
|
|
<td>${station.departure}</td>
|
||
|
|
`;
|
||
|
|
table.appendChild(row);
|
||
|
|
});
|
||
|
|
|
||
|
|
trainDiv.appendChild(table);
|
||
|
|
container.appendChild(trainDiv);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
displayTrains();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|