111 lines
3 KiB
HTML
111 lines
3 KiB
HTML
{%- import "route_symbol.html" as scope -%}
|
|
<style>
|
|
.train-direction-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-family: sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.train-direction-table th,
|
|
.train-direction-table td {
|
|
border: 1px solid #000;
|
|
padding: 4px 8px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.train-direction-table th {
|
|
background-color: #f0f0f0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.highlight-row td,
|
|
.highlight-row th {
|
|
background-color: #d0ebff !important;
|
|
}
|
|
|
|
.highlight-col {
|
|
background-color: #d0ebff !important;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll(".train-direction-table").forEach((table) => {
|
|
table.addEventListener("click", (e) => {
|
|
const cell = e.target.closest("td, th");
|
|
if (!cell) return;
|
|
|
|
// Clear previous highlights
|
|
table.querySelectorAll("tr").forEach(row => row.classList.remove("highlight-row"));
|
|
table.querySelectorAll("td, th").forEach(c => c.classList.remove("highlight-col"));
|
|
|
|
const row = cell.parentNode;
|
|
const colIndex = Array.from(cell.parentNode.children).indexOf(cell);
|
|
|
|
// If it's the first column (row header)
|
|
if (cell.cellIndex === 0 && cell.tagName === "TD") {
|
|
row.classList.add("highlight-row");
|
|
}
|
|
// If it's a column header
|
|
else if (row.parentNode.tagName === "THEAD") {
|
|
table.querySelectorAll("tr").forEach(r => {
|
|
const cell = r.children[colIndex];
|
|
if (cell) cell.classList.add("highlight-col");
|
|
});
|
|
}
|
|
// If it's a center cell
|
|
else {
|
|
row.classList.add("highlight-row");
|
|
table.querySelectorAll("tr").forEach(r => {
|
|
const cell = r.children[colIndex];
|
|
if (cell) cell.classList.add("highlight-col");
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div style="background-color: #ff0000; color: #ffffff; padding: 15px; margin-bottom: 15px; margin-top: 15px;">
|
|
This website is not run by SEPTA. As such, schedules may not be
|
|
completely accurate.
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center;">
|
|
{% call scope::route_symbol(route) %}
|
|
<h1 style="margin-left: 15px;">{{ route.name }}</h1>
|
|
</div>
|
|
|
|
{% for timetable in timetables %}
|
|
<h2>{{ timetable.direction.direction | capitalize }} to {{ timetable.direction.direction_destination }}</h2>
|
|
<div class="tscroll">
|
|
<table class="train-direction-table" style="margin-top: 5px;">
|
|
<thead>
|
|
<tr>
|
|
<th>Stop</th>
|
|
{% for trip_id in timetable.trip_ids %}
|
|
<th>{{ trip_id }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in timetable.rows %}
|
|
<tr>
|
|
<td>{{ row.stop_name }}</td>
|
|
{% for time in row.times %}
|
|
<td>
|
|
{% if let Some(t) = time %}
|
|
{{ t | format_time }}
|
|
{% else %}
|
|
--
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endfor %}
|