libewa/kvv

A departure screen made to look like the departure boards in the Stadtbahntunnel in Karlsruhe.

Why?

A new justification could be: "Because THEY won't give it to us". A new tender demands the new departure boards have a public web view, but that it should not replace them, or even be able to.

The true story is, that I wanted a project to implement Transitous. And since, through multiple system errors, it has been apparent that the departure boards run Windows 10 (hopefully LTSC) and (削除) Google Chrome (削除ここまで) Microsoft Edge, I thought: Why not? Why shouldn't I implement a departure board in HTML, CSS and JavaScript?

Architecture overview

• index.html: The UI is implemented with HTML table and template

• assets/css/: All styling files are located here.

  • style.css: The main stylesheet, containing the overall layout and styling of the departure board.
  • autocomplete.css: The stylesheet for the autocomplete dropdown.
  • line-icon.css: Styles icons according to the line data from Träwelling ([line-colors-api])
    Note that circle and pill are the same.

• motis-api.js: Contains two functions: getDepartures(stopId, n) and getAutocomplete(input). Both return a promise resolving to an array of the corresponding Transitous API types. This could reeeally benefit from some TypeScript.

• populateTable.js: This could be considered the main AJAX script. It uses (削除) a timer (削除ここまで) an interval to update the clock and the departures once every minute. For this, it contains the important function insertRow(line, dest, departure, isRealTime). This function expects:

  1. A Träwelling line row. This object is currently constructed inside of update() as a JSON literal
  2. A string containing the expected transport's headsign (e.g. "Wolfartsweier über Hbf")
  3. A Date instance to the expected departure, real-time if available
  4. A boolean whether the departure time is real-time (true) or as scheduled (false). In the real-world source, relative time is only used in the last 10 minutes and only using real-time data.

  insertRow does not return anything, but immediately inserts the row into the body of the #departures table.

  update(), as mentioned, constructs the line object and also clears the table before calling both insertRow and updateClock. It is directly registered as the interval callback.

• autocomplete.js: This handles entry into the search field, adding autocompletion and handling the selection of an autocomplete entry.