add live updating table
All checks were successful
Create and publish a Docker image / build-and-push-image (push) Successful in 9m20s

This commit is contained in:
Nicholas Orlowsky 2026-01-14 23:18:35 -05:00
parent 2ca76548d6
commit 6773e6ae30
No known key found for this signature in database
GPG key ID: A9F3BA4C0AA7A70B
7 changed files with 210 additions and 124 deletions

View file

@ -18,6 +18,7 @@
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
<script>
window.onload = function () {
setTimeout(() => {

View file

@ -1,11 +1,5 @@
{%- import "route_symbol.html" as scope -%}
<style>
.trip-desc {
display: flex;
justify-content: start;
}
</style>
{%- import "stop_table.html" as stop_table -%}
<div style="display: flex; align-items: center;">
<h1>{{ stop.name }}</h1>
@ -20,7 +14,6 @@
{% endfor %}
</div>
{#{% if let libseptastic::stop::StopType::MultiPlatform(platforms) = stop.platforms %}
<div>
<p>Platforms at this station:</p>
@ -30,45 +23,6 @@
</div>
{% endif %}#}
<table class="train-direction-table">
<tr>
<th>ROUTE</th>
<th>DESTINATION</th>
<th>BOARDING AREA</th>
<th>TIME</th>
<th>VEHICLE</th>
</tr>
{% for trip in trips %}
<tr>
<td>
{% call scope::route_symbol(trip.trip.route) %}
</td>
<td>
<p>{{ trip.trip.direction.direction_destination }}</p>
</td>
<td>
<p>{{ trip.perspective_stop.platform.name }}</p>
</td>
{% if let Tracked(tracked_trip) = trip.trip.tracking_data %}
<td style="color: #008800">
<p style="font-size: small;">{{ &trip.perspective_stop.get_arrival_time(&tracked_trip) | format_time }}</p>
<p style="font-size: x-small; font-style: italic;">{{ ( trip.perspective_stop.get_arrival_time(&tracked_trip) - current_time) / 60 }} mins</p>
</td>
{% else %}
<td>
<p style="font-size: small;">{{ trip.perspective_stop.arrival_time | format_time }}</p>
<p style="font-size: x-small; font-style: italic;">{{ (trip.perspective_stop.arrival_time - current_time) / 60 }} mins</p>
</td>
{% endif %}
{% if let Tracked(tracked_trip) = trip.trip.tracking_data %}
<td>
{{ tracked_trip.vehicle_ids.join(", ") }}
</td>
{% else %}
<td>
-
</td>
{% endif %}
</tr>
{% endfor %}
</table>
<div hx-get="/stop/{{ stop.id }}/table" hx-trigger="every 5s">
{% call stop_table::stop_table(trips, current_time) %}
</div>

View file

@ -0,0 +1,51 @@
{%- import "route_symbol.html" as scope -%}
{% macro stop_table(trips, current_time) %}
<table class="train-direction-table">
<tr>
<th>ROUTE</th>
<th>DESTINATION</th>
<th>BOARDING AREA</th>
<th>TIME</th>
<th>VEHICLE</th>
</tr>
{% for trip in trips %}
<tr>
<td>
{% call scope::route_symbol(trip.trip.route) %}
</td>
<td>
<p>{{ trip.trip.direction.direction_destination }}</p>
</td>
<td>
<p>{{ trip.perspective_stop.platform.name }}</p>
</td>
{% if let Tracked(tracked_trip) = trip.trip.tracking_data %}
<td style="color: #008800">
<p style="font-size: small;">{{ &trip.perspective_stop.get_arrival_time(&tracked_trip) | format_time }}</p>
<p style="font-size: x-small; font-style: italic;">{{ ( trip.perspective_stop.get_arrival_time(&tracked_trip) - current_time) / 60 }} mins</p>
</td>
{% else %}
<td>
<p style="font-size: small;">{{ trip.perspective_stop.arrival_time | format_time }}</p>
<p style="font-size: x-small; font-style: italic;">{{ (trip.perspective_stop.arrival_time - current_time) / 60 }} mins</p>
</td>
{% endif %}
{% if let Tracked(tracked_trip) = trip.trip.tracking_data %}
<td>
{{ tracked_trip.vehicle_ids.join(", ") }}
</td>
{% else %}
<td>
-
</td>
{% endif %}
</tr>
{% endfor %}
<tr>
<td colspan="5">
<p>Updated at: {{ current_time | format_time_with_seconds }}</p>
</td>
</tr>
</table>
{% endmacro %}

View file

@ -0,0 +1,3 @@
{%- import "stop_table.html" as stop_table -%}
{% call stop_table::stop_table(trips, current_time) %}