gtfs-to-html 2.9.3 → 2.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gtfs-to-html",
-  "version": "2.9.3",
+  "version": "2.9.4",
   "private": false,
   "description": "Build human readable transit timetables as HTML, PDF or CSV from GTFS",
   "keywords": [

package/views/default/css/timetable_styles.css

@@ -1,3 +1,8 @@
+@page {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
 /* Base styles */
 body {
   color: #666;
@@ -463,7 +468,6 @@ a:hover {
   max-width: 30%;
   background-color: #fff;
   border-radius: 3px;
-  bottom: 30px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   padding: 10px;
   position: absolute;
@@ -520,3 +524,153 @@ a:hover {
   width: 14px;
   height: 14px;
 }
+
+.timetable-page .timetable-alerts {
+  margin-bottom: 1.5rem;
+}
+
+.timetable-page .timetable-alerts .timetable-alerts-list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 0.25rem;
+}
+
+.timetable-page .timetable-alert {
+  background-color: rgb(224, 230, 245);
+  color: rgb(37 99 235);
+  padding: 0.75rem 1.25rem;
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.timetable-page .timetable-alerts .alert-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+
+.timetable-page .timetable-alerts .alert-header .route-list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
+.timetable-page .timetable-alerts .route-color-swatch {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 30px;
+  font-size: 12px;
+  flex-shrink: 0;
+  color: white;
+  font-weight: bold;
+}
+
+.timetable-page .timetable-alerts .alert-header .alert-title {
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.timetable-page .timetable-alerts .alert-body {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: start;
+}
+
+.timetable-page .timetable-alert-empty {
+  display: none;
+  background-color: rgb(224, 230, 245);
+  color: rgb(37 99 235);
+  padding: 0.75rem 1.25rem;
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+}
+
+@media print {
+  body {
+    -webkit-print-color-adjust: exact;
+    width: 100%;
+    margin: 0 auto;
+    font-size: 0.8rem;
+  }
+  
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p {
+    page-break-inside: avoid;
+    orphans: 3;
+    widows: 3;
+  }
+  
+  img,
+  table {
+    max-width: 100%;
+  }
+
+  .timetable-page h1 {
+    padding-top: 0;
+  }
+  
+  .timetable-page .timetable:not(:first-of-type) {
+    page-break-before: always;
+  }
+  
+  .timetable-page .timetable .table-container {
+    overflow: auto;
+    margin-bottom: 0;
+  }
+  
+  .timetable-page .timetable table > thead > tr > th,
+  .timetable-page .timetable table > tbody > tr > th,
+  .timetable-page .timetable table > tfoot > tr > th {
+    padding: 3px 5px;
+    line-height: 1.3;
+  }
+  
+  .timetable-page .timetable table > thead > tr > td,
+  .timetable-page .timetable table > tbody > tr > td,
+  .timetable-page .timetable table > tfoot > tr > td {
+    padding: 3px 5px;
+    line-height: 1;
+  }
+  
+  .timetable .table-container {
+    overflow: hidden;
+  }
+  
+  .timetable table {
+    page-break-after: auto;
+  }
+  
+  .timetable tr {
+    page-break-inside: avoid;
+    page-break-after: auto;
+  }
+  
+  .timetable td {
+    page-break-inside: avoid;
+    page-break-after: auto;
+  }
+  
+  .timetable thead {
+    display: table-header-group;
+  }
+  
+  .timetable tfoot {
+    display: table-footer-group;
+  }
+  
+  .timetable-page .map-legend {
+    display: none;
+  }
+}

package/views/default/formatting_functions.pug

@@ -37,14 +37,11 @@
   }
 
   function prepareMapData(timetablePage, config) {
-    const routes = {}
-    const stops = {}
-    const tripIds = []
+    const routeData = {}
+    const stopData = {}
     const geojsons = {}
 
     for (const timetable of timetablePage.consolidatedTimetables) {
-      tripIds.push(...timetable.orderedTrips.map(trip => trip.trip_id))
-
       const minifiedGeojson = {
         type: 'FeatureCollection',
         features: []
@@ -53,11 +50,11 @@
       for (const feature of timetable.geojson.features) {
         if (feature.geometry.type.toLowerCase() === 'point') {
           for (const route of feature.properties.routes) {
-            routes[route.route_id] = route
+            routeData[route.route_id] = route
           }
 
           const stop = _.pick(feature.properties, ['stop_id', 'stop_code', 'stop_name'])
-          stops[stop.stop_id] = stop
+          stopData[stop.stop_id] = stop
 
           feature.properties = {
             route_ids: feature.properties.routes.map(route => route.route_id),
@@ -79,11 +76,15 @@
     }
 
     return {
-      geojsons,
-      tripIds: _.uniq(tripIds),
-      routes,
-      stops,
-      gtfsRealtimeUrls: _.pick(config.agencies.find(agency => agency.realtimeVehiclePositions?.url), ['realtimeAlerts', 'realtimeTripUpdates', 'realtimeVehiclePositions']),
+      pageData: {
+        routeIds: _.uniq(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.routes.map(route => route.route_id))),
+        tripIds: _.uniq(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.orderedTrips.map(trip => trip.trip_id))),
+        stopIds: Object.keys(stopData),
+        geojsons,
+        gtfsRealtimeUrls: _.pick(config.agencies.find(agency => agency.realtimeVehiclePositions?.url), ['realtimeAlerts', 'realtimeTripUpdates', 'realtimeVehiclePositions']),
+      },
+      routeData,
+      stopData,
     }
   }
 

package/views/default/js/timetable-alerts.js

@@ -0,0 +1,180 @@
+/* global window, document, $, mapboxgl, Pbf, stopData, routeData, routeIds, tripIds, stopIds, gtfsRealtimeUrls */
+/* eslint no-var: "off", prefer-arrow-callback: "off", no-unused-vars: "off" */
+
+let gtfsRealtimeAlertsInterval;
+
+async function fetchGtfsRealtime(url, headers) {
+  const response = await fetch(url, {
+    headers: { ...(headers ?? {}) },
+  });
+
+  if (!response.ok) {
+    throw new Error(response.status);
+  }
+
+  const bufferRes = await response.arrayBuffer();
+  const pdf = new Pbf(new Uint8Array(bufferRes));
+  const obj = FeedMessage.read(pdf);
+  return obj.entity;
+}
+
+function formatAlertAsHtml(
+  alert,
+  affectedRouteIdsInTimetable,
+  affectedStopsIdsInTimetable,
+) {
+  const $alert = $('<div>').addClass('timetable-alert');
+
+  const $routeList = $('<div>').addClass('route-list');
+
+  for (const routeId of affectedRouteIdsInTimetable) {
+    const route = routeData[routeId];
+
+    if (!route) {
+      continue;
+    }
+
+    $('<div>')
+      .addClass('route-color-swatch')
+      .css('background-color', route.route_color || '#000000')
+      .css('color', route.route_text_color || '#FFFFFF')
+      .text(route.route_short_name)
+      .appendTo($routeList);
+  }
+
+  const $alertHeader = $('<div>')
+    .addClass('alert-header')
+    .append($routeList)
+    .append(
+      $('<div>')
+        .addClass('alert-title')
+        .text(alert.alert.header_text.translation[0].text),
+    );
+
+  const $alertBody = $('<div>')
+    .addClass('alert-body')
+    .append($('<div>').text(alert.alert.description_text.translation[0].text));
+
+  if (alert.alert.url?.translation?.[0].text) {
+    $('<a>')
+      .attr('href', alert.alert.url.translation[0].text)
+      .addClass('btn-blue btn-sm')
+      .text('More Info')
+      .appendTo($alertBody);
+  }
+
+  if (affectedStopsIdsInTimetable.length > 0) {
+    const $stopList = $('<ul>');
+
+    for (const stopId of affectedStopsIdsInTimetable) {
+      const stop = stopData[stopId];
+
+      if (!stop) {
+        continue;
+      }
+
+      $('<li>')
+        .append($('<div>').addClass('stop-name').text(stop.stop_name))
+        .appendTo($stopList);
+    }
+
+    $('<div>').text('Stops Affected:').append($stopList).appendTo($alertBody);
+
+    $stopList.prependTo($alertBody);
+  }
+
+  $alertHeader.appendTo($alert);
+  $alertBody.appendTo($alert);
+
+  return $alert;
+}
+
+jQuery(function ($) {
+  async function updateAlerts() {
+    const realtimeAlerts = gtfsRealtimeUrls?.realtimeAlerts;
+
+    if (!realtimeAlerts) {
+      return;
+    }
+
+    try {
+      const alerts = await fetchGtfsRealtime(
+        realtimeAlerts.url,
+        realtimeAlerts.headers,
+      );
+
+      const formattedAlerts = [];
+
+      for (const alert of alerts) {
+        const affectedRouteIds = alert.alert.informed_entity
+          .filter(
+            (entity) => entity.route_id !== undefined && entity.route_id !== '',
+          )
+          .map((entity) => entity.route_id);
+        const affectedRouteIdsInTimetable = routeIds.filter((routeId) =>
+          affectedRouteIds.includes(routeId),
+        );
+
+        const affectedStopIds = [
+          ...new Set([
+            alert.alert.informed_entity
+              .filter(
+                (entity) =>
+                  entity.stop_id !== undefined && entity.stop_id !== '',
+              )
+              .map((entity) => entity.stop_id),
+          ]),
+        ];
+
+        const affectedStopsIdsInTimetable = stopIds.filter((stopId) =>
+          affectedStopIds.includes(stopId),
+        );
+
+        // Hide alerts that don't affect any stops or routes
+        if (
+          affectedStopsIdsInTimetable.length === 0 &&
+          affectedRouteIdsInTimetable.length === 0
+        ) {
+          continue;
+        }
+
+        try {
+          formattedAlerts.push(
+            formatAlertAsHtml(
+              alert,
+              affectedRouteIdsInTimetable,
+              affectedStopsIdsInTimetable,
+            ),
+          );
+        } catch (error) {
+          console.error(error);
+        }
+      }
+
+      // Remove previously posted GTFS-RT alerts
+      $('.timetable-alerts-list .timetable-alert').remove();
+
+      if (formattedAlerts.length > 0) {
+        // Remove the empty message if present
+        $('.timetable-alert-empty').hide();
+
+        for (const alert of formattedAlerts) {
+          $('.timetable-alerts-list').append(alert);
+        }
+      } else {
+        // Replace the empty message if present
+        $('.timetable-alert-empty').show();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  if (!gtfsRealtimeAlertsInterval && gtfsRealtimeUrls?.realtimeAlerts?.url) {
+    const alertUpdateInterval = 60 * 1000; // Every Minute
+    updateAlerts();
+    gtfsRealtimeAlertsInterval = setInterval(() => {
+      updateAlerts();
+    }, alertUpdateInterval);
+  }
+});

package/views/default/js/timetable-map.js

@@ -1,4 +1,4 @@
-/* global window, document, $, mapboxgl, Pbf, stops, routes, tripIds, gtfsRealtimeUrls, geojsons */
+/* global window, document, $, mapboxgl, Pbf, stopData, routeData, routeIds, tripIds, geojsons, gtfsRealtimeUrls */
 /* eslint no-var: "off", prefer-arrow-callback: "off", no-unused-vars: "off" */
 
 const maps = {};
@@ -102,7 +102,7 @@ function formatStopPopup(feature, stop) {
   $(html).append(
     $('<div>')
       .addClass('route-list')
-      .html(routeIds.map((routeId) => formatRoute(routes[routeId]))),
+      .html(routeIds.map((routeId) => formatRoute(routeData[routeId]))),
   );
 
   $('<a>')
@@ -201,7 +201,7 @@ function getVehiclePopupHtml(vehiclePosition, vehicleTripUpdate) {
       if (stoptimeUpdate.arrival) {
         const secondsToArrival =
           stoptimeUpdate.arrival.time - Date.now() / 1000;
-        const stopName = stops[stoptimeUpdate.stop_id]?.stop_name;
+        const stopName = stopData[stoptimeUpdate.stop_id]?.stop_name;
 
         // Don't show arrivals in the past or non-timepoints
         if (secondsToArrival > 0 && stopName) {
@@ -384,7 +384,6 @@ async function updateArrivals() {
       $('.vehicle-legend-item').hide();
       return;
     }
-
     $('.vehicle-legend-item').show();
 
     const routeVehiclePositions = vehiclePositions.filter((vehiclePosition) => {
@@ -407,6 +406,12 @@ async function updateArrivals() {
         return false;
       }
 
+      // If vehiclePosition includes route_id, use that to filter
+      if (vehiclePosition.vehicle.trip.route_id) {
+        return routeIds.includes(vehiclePosition.vehicle.trip.route_id);
+      }
+
+      // Otherwise, fall back to using trip_id to filter
       return tripIds.includes(vehiclePosition.vehicle.trip.trip_id);
     });
 
@@ -692,7 +697,7 @@ function createMap(id) {
 
       new mapboxgl.Popup()
         .setLngLat(feature.geometry.coordinates)
-        .setHTML(formatStopPopup(feature, stops[feature.properties.stop_id]))
+        .setHTML(formatStopPopup(feature, stopData[feature.properties.stop_id]))
         .addTo(map);
     });
 

package/views/default/timetablepage.pug

@@ -13,8 +13,15 @@ include formatting_functions.pug
 
   include timetable_menu.pug
 
+  if config.hasGtfsRealtimeAlerts
+    .timetable-alerts
+      h2 Service Alerts
+      .timetable-alerts-list
+        .timetable-alert-empty
+          | There are no service alerts at this time.
+
   each timetable in timetablePage.consolidatedTimetables
-    .timetable(id=`timetable_id_${formatHtmlId(timetable.timetable_id)}` data-day-list=timetable.dayList data-direction-name=timetable.direction_name data-timetable-id=timetable.timetable_id data-direction-id=timetable.direction_id data-route-id=timetable.route_ids.join('_'))
+    .timetable(id=`timetable_id_${formatHtmlId(timetable.timetable_id)}` data-day-list=timetable.dayList data-direction-name=timetable.direction_name data-timetable-id=`${formatHtmlId(timetable.timetable_id)}` data-direction-id=timetable.direction_id data-route-id=timetable.route_ids.join('_'))
       if config.showRouteTitle
         .timetable-label
           h2= `${timetable.timetable_label} | ${timetable.dayListLong}`
@@ -61,5 +68,5 @@ include formatting_functions.pug
 
   if config.showMap
     script.
-        const { geojsons, tripIds, routes, stops, gtfsRealtimeUrls } = !{JSON.stringify(prepareMapData(timetablePage, config))};
+        const { routeData, stopData, pageData: { routeIds, tripIds,  stopIds, geojsons, gtfsRealtimeUrls } } = !{JSON.stringify(prepareMapData(timetablePage, config))};
         createMaps();

package/views/default/timetablepage_full.pug

@@ -8,18 +8,19 @@ block extraHeader
   if config.menuType === 'radio'
     script(src=`${config.assetPath}js/timetable-menu.js`)
 
+  if (config.hasGtfsRealtime && config.showMap) || config.hasGtfsRealtimeAlerts
+    script(src=`${config.assetPath}js/pbf.js`)
+    script(src=`${config.assetPath}js/gtfs-realtime.browser.proto.js`)
+
   if config.showMap
     link(href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css" rel="stylesheet")
-
-    if config.hasGtfsRealtime
-      script(src=`${config.assetPath}js/pbf.js`)
-      script(src=`${config.assetPath}js/gtfs-realtime.browser.proto.js`)
     script(src="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js")
     script.
       mapboxgl.accessToken = '#{config.mapboxAccessToken}';
     script(src=`${config.assetPath}js/timetable-map.js`)
 
+  if config.hasGtfsRealtimeAlerts
+    script(src=`${config.assetPath}js/timetable-alerts.js`)
+
   link(rel="stylesheet" href=`${config.assetPath}css/timetable_styles.css`)
-  if config.outputFormat === 'pdf'
-    link(rel="stylesheet" href=`${config.assetPath}css/timetable_pdf_styles.css`)
 

package/views/default/css/timetable_pdf_styles.css

@@ -1,69 +0,0 @@
-body {
-  -webkit-print-color-adjust: exact;
-  width: 100%;
-  margin: 0 auto;
-  font-size: 0.8rem;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-p {
-  page-break-inside: avoid;
-  orphans: 3;
-  widows: 3;
-}
-
-img,
-table {
-  max-width: 100%;
-}
-
-.timetable-page .timetable:not(:first-of-type) {
-  page-break-before: always;
-}
-
-.timetable-page .timetable .table-container {
-  overflow: auto;
-  margin-bottom: 0;
-}
-
-.timetable-page .timetable table > thead > tr > th,
-.timetable-page .timetable table > tbody > tr > th,
-.timetable-page .timetable table > tfoot > tr > th {
-  padding: 3px 5px;
-}
-
-.timetable-page .timetable table > thead > tr > td,
-.timetable-page .timetable table > tbody > tr > td,
-.timetable-page .timetable table > tfoot > tr > td {
-  padding: 1px 5px;
-  line-height: 1;
-}
-
-.timetable .table-container {
-  overflow: hidden;
-}
-.timetable table {
-  page-break-after: auto;
-}
-.timetable tr {
-  page-break-inside: avoid;
-  page-break-after: auto;
-}
-.timetable td {
-  page-break-inside: avoid;
-  page-break-after: auto;
-}
-.timetable thead {
-  display: table-header-group;
-}
-.timetable tfoot {
-  display: table-footer-group;
-}
-
-.timetable-page .map-legend {
-  display: none;
-}