diff options
| author | Daniel Friesel <derf@finalrewind.org> | 2021-08-21 12:11:35 +0200 |
|---|---|---|
| committer | Daniel Friesel <derf@finalrewind.org> | 2021-08-21 12:11:35 +0200 |
| commit | f5a6a5927bfcc4a2b82c34db5041bfe3a49b95e6 (patch) | |
| tree | d9508512ae32be6ecc865607539c16566db2756e | |
| parent | 8a04cf20c5d6dc577a7de7745cbeb292bf78529d (diff) | |
refresh departure list every minute0.2.0
| -rwxr-xr-x | bin/nvm | 6 | ||||
| -rw-r--r-- | static/js/geolocation.js | 12 | ||||
| -rw-r--r-- | static/js/reload.js | 13 | ||||
| -rw-r--r-- | templates/departure_list.html | 81 | ||||
| -rw-r--r-- | templates/departures_page.html | 35 |
5 files changed, 83 insertions, 64 deletions
@@ -350,7 +350,11 @@ async def show_departure_board(request, eva=None): departures = sorted(departures, key=lambda departure: departure.sort_by) - departure_board = env.get_template("departure_list.html") + if request.query.get("ajax", False): + departure_board = env.get_template("departure_list.html") + else: + departure_board = env.get_template("departures_page.html") + return web.Response( body=departure_board.render( title=station_name, diff --git a/static/js/geolocation.js b/static/js/geolocation.js index aba8b10..eeb535f 100644 --- a/static/js/geolocation.js +++ b/static/js/geolocation.js @@ -1,14 +1,14 @@ document.addEventListener("DOMContentLoaded", function() { const geoLocationButton = document.getElementById('geolocationsearch'); - const mkTextNode = function(className, textContent) { + const mkTextNode = (className, textContent) => { const node = document.createElement("span"); node.className = className; node.textContent = textContent; return node } - const processResult = function(results) { + const processResult = (results) => { const list = document.createElement("ul"); list.className = "stops"; @@ -73,7 +73,7 @@ document.addEventListener("DOMContentLoaded", function() { geoLocationButton.replaceWith(list); }; - const processLocation = function(loc) { + const processLocation = (loc) => { fetch('/geolocation', { method: 'POST', headers: { @@ -86,7 +86,7 @@ document.addEventListener("DOMContentLoaded", function() { }).then(response => response.json()).then(processResult); }; - const showError = function(header, text, code) { + const showError = (header, text, code) => { const errnode = document.createElement("div"); const errhead = document.createElement("strong"); const errtext = document.createTextNode(text); @@ -105,7 +105,7 @@ document.addEventListener("DOMContentLoaded", function() { geoLocationButton.replaceWith(errnode); } - const processError = function(error) { + const processError = (error) => { if (error.code == error.PERMISSION_DENIED) { showError('Standortanfrage nicht möglich.', 'Vermutlich fehlen die Rechte im Browser oder der Android Location Service ist deaktiviert.', 'geolocation.error.PERMISSION_DENIED'); } else if (error.code == error.POSITION_UNAVAILABLE) { @@ -117,7 +117,7 @@ document.addEventListener("DOMContentLoaded", function() { } }; - const getGeoLocation = function() { + const getGeoLocation = () => { geoLocationButton.textContent = "Suche Haltestellen ..."; geoLocationButton.disabled = true; navigator.geolocation.getCurrentPosition(processLocation, processError); diff --git a/static/js/reload.js b/static/js/reload.js new file mode 100644 index 0000000..9bdc7c0 --- /dev/null +++ b/static/js/reload.js @@ -0,0 +1,13 @@ +document.addEventListener("DOMContentLoaded", function() { + const departureList = document.getElementById('departurelist'); + + const showDepartures = (departureText) => { + departureList.innerHTML = departureText; + }; + + const fetchDepartures = () => { + fetch(window.location.href + '?ajax=1').then(response => response.text()).then(showDepartures); + }; + + setInterval(fetchDepartures, 60000); +}); diff --git a/templates/departure_list.html b/templates/departure_list.html index a9cda01..66e2900 100644 --- a/templates/departure_list.html +++ b/templates/departure_list.html @@ -1,59 +1,26 @@ -<!DOCTYPE html> -<html lang="de"> -<head> - <title>{{ title }}</title> - {% include 'header.html' %} -</head> -<body> - -{% include 'navbar.html' %} - -<div class="container"> - <div class="content"> - {% if warning %} - <div class="content"> - <div class="warning"> - <strong>{{ warning["lead"] }}</strong> - {{ warning["body"] }} - <div class="errcode">{{ warning["code"] }}</div> - </div> - </div> +{% for departure in departures %} + <li class="{{ departure.classes }}" onclick="location.href='https://dbf.finalrewind.org/map/{{ departure.tripId }}/0?from={{ departure.quoted_stop_name }}';"> + <span class="line {{ departure.line.css_class }}">{{ departure.line.name }}</span> + {% if departure.suffix %} + <span class="destsuffix">{{ departure.suffix }}</span> {% endif %} - {% if not departures %} - <div class="globalnote">Keine Abfahrten innerhalb der nächsten zwei Stunden</div> + <span class="dest" aria-label="nach {{ departure.direction }}">{{ departure.direction }} + </span> + {% if departure.cancelled and departure.plannedWhen %} + <span class="time" aria-label="fällt aus, planmäßige Abfahrt um {{ departure.plannedWhen }}"> + <span class="delay">fällt aus</span> + {{ departure.plannedWhen.strftime("%H:%M") }} + </span> + {% else %} + <span class="time" aria-label="Abfahrtszeit: {{ departure.relativeWhen }}"> + {% if departure.delay %} + <span class="delay" aria-label="{{ departure.delay }} Minuten Verspätung">({{ departure.delay }})</span> + {% endif %} + {{ departure.relativeWhen }} + </span> {% endif %} - <ul class="departures"> - {% for departure in departures %} - <li class="{{ departure.classes }}" onclick="location.href='https://dbf.finalrewind.org/map/{{ departure.tripId }}/0?from={{ departure.quoted_stop_name }}';"> - <span class="line {{ departure.line.css_class }}">{{ departure.line.name }}</span> - {% if departure.suffix %} - <span class="destsuffix">{{ departure.suffix }}</span> - {% endif %} - <span class="dest" aria-label="nach {{ departure.direction }}">{{ departure.direction }} - </span> - {% if departure.cancelled and departure.plannedWhen %} - <span class="time" aria-label="fällt aus, planmäßige Abfahrt um {{ departure.plannedWhen }}"> - <span class="delay">fällt aus</span> - {{ departure.plannedWhen.strftime("%H:%M") }} - </span> - {% else %} - <span class="time" aria-label="Abfahrtszeit: {{ departure.relativeWhen }}"> - {% if departure.delay %} - <span class="delay" aria-label="{{ departure.delay }} Minuten Verspätung">({{ departure.delay }})</span> - {% endif %} - {{ departure.relativeWhen }} - </span> - {% endif %} - {% if departure.platform %} - <span class="platform" aria-label="Gleis/Bussteig {{ departure.platform }}">{{ departure.platform }}</span> - {% endif %} - </li> - {% endfor %} - </ul> - </div> -</div> - -{% include 'footer.html' %} - -</body> -</html> + {% if departure.platform %} + <span class="platform" aria-label="Gleis/Bussteig {{ departure.platform }}">{{ departure.platform }}</span> + {% endif %} + </li> +{% endfor %} diff --git a/templates/departures_page.html b/templates/departures_page.html new file mode 100644 index 0000000..52733c4 --- /dev/null +++ b/templates/departures_page.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="de"> +<head> + <title>{{ title }}</title> + {% include 'header.html' %} + <script src="/static/v1/js/reload.js"></script> +</head> +<body> + +{% include 'navbar.html' %} + +<div class="container"> + <div class="content"> + {% if warning %} + <div class="content"> + <div class="warning"> + <strong>{{ warning["lead"] }}</strong> + {{ warning["body"] }} + <div class="errcode">{{ warning["code"] }}</div> + </div> + </div> + {% endif %} + {% if not departures %} + <div class="globalnote">Keine Abfahrten innerhalb der nächsten zwei Stunden</div> + {% endif %} + <ul class="departures" id="departurelist"> + {% include 'departure_list.html' %} + </ul> + </div> +</div> + +{% include 'footer.html' %} + +</body> +</html> |