gtfs-to-html 2.2.0 → 2.3.2

package/public/js/timetable-map.js

@@ -4,7 +4,9 @@
 const maps = {};
 
 function formatRoute(route) {
-  const html = route.route_url ? $('<a>').attr('href', route.route_url) : $('<div>');
+  const html = route.route_url
+    ? $('<a>').attr('href', route.route_url)
+    : $('<div>');
 
   html.addClass('route-item text-sm mb-2');
 
@@ -32,21 +34,14 @@ function formatStopPopup(feature) {
     .appendTo(html);
 
   if (feature.properties.stop_code ?? false) {
-    $('<label>')
-      .addClass('mr-1')
-      .text('Stop Code:')
-      .appendTo(html);
+    $('<label>').addClass('mr-1').text('Stop Code:').appendTo(html);
 
-    $('<strong>')
-      .text(feature.properties.stop_code)
-      .appendTo(html);
+    $('<strong>').text(feature.properties.stop_code).appendTo(html);
   }
 
-  $('<div>')
-    .text('Routes Served:')
-    .appendTo(html);
+  $('<div>').text('Routes Served:').appendTo(html);
 
-  $(html).append(routes.map(route => formatRoute(route)));
+  $(html).append(routes.map((route) => formatRoute(route)));
 
   return html.prop('outerHTML');
 }
@@ -80,7 +75,7 @@ function createMap(id, geojson) {
     style: 'mapbox://styles/mapbox/light-v10',
     center: bounds.getCenter(),
     zoom: 12,
-    preserveDrawingBuffer: true
+    preserveDrawingBuffer: true,
   });
 
   map.scrollZoom.disable();
@@ -92,9 +87,9 @@ function createMap(id, geojson) {
         top: 40,
         bottom: 40,
         left: 20,
-        right: 40
+        right: 40,
       },
-      duration: 0
+      duration: 0,
     });
 
     // Find the index of the first symbol layer in the map style
@@ -107,91 +102,103 @@ function createMap(id, geojson) {
     }
 
     // Add route line outline first
-    map.addLayer({
-      id: 'route-line-outline',
-      type: 'line',
-      source: {
-        type: 'geojson',
-        data: geojson
-      },
-      paint: {
-        'line-color': '#FFFFFF',
-        'line-opacity': 1,
-        'line-width': 6
-      },
-      layout: {
-        'line-join': 'round',
-        'line-cap': 'round'
-      },
-      filter: ['!has', 'stop_id']
-    }, firstSymbolId);
-
-    map.addLayer({
-      id: 'route-line',
-      type: 'line',
-      source: {
-        type: 'geojson',
-        data: geojson
-      },
-      paint: {
-        'line-color': ['to-color', ['get', 'route_color'], defaultRouteColor],
-        'line-opacity': 1,
-        'line-width': 2
-      },
-      layout: {
-        'line-join': 'round',
-        'line-cap': 'round'
-      },
-      filter: ['!has', 'stop_id']
-    }, firstSymbolId);
-
-    map.addLayer({
-      id: 'stops',
-      type: 'circle',
-      source: {
-        type: 'geojson',
-        data: geojson
+    map.addLayer(
+      {
+        id: 'route-line-outline',
+        type: 'line',
+        source: {
+          type: 'geojson',
+          data: geojson,
+        },
+        paint: {
+          'line-color': '#FFFFFF',
+          'line-opacity': 1,
+          'line-width': 6,
+        },
+        layout: {
+          'line-join': 'round',
+          'line-cap': 'round',
+        },
+        filter: ['!has', 'stop_id'],
       },
-      paint: {
-        'circle-radius': {
-          stops: [
-            [9, 2],
-            [13, 4],
-            [15, 6]
-          ]
+      firstSymbolId
+    );
+
+    map.addLayer(
+      {
+        id: 'route-line',
+        type: 'line',
+        source: {
+          type: 'geojson',
+          data: geojson,
+        },
+        paint: {
+          'line-color': ['to-color', ['get', 'route_color'], defaultRouteColor],
+          'line-opacity': 1,
+          'line-width': 2,
         },
-        'circle-stroke-width': 1,
-        'circle-stroke-color': '#363636',
-        'circle-color': '#363636'
+        layout: {
+          'line-join': 'round',
+          'line-cap': 'round',
+        },
+        filter: ['!has', 'stop_id'],
       },
-      filter: ['has', 'stop_id']
-    }, firstSymbolId);
-
-    map.addLayer({
-      id: 'stops-highlighted',
-      type: 'circle',
-      source: {
-        type: 'geojson',
-        data: geojson
+      firstSymbolId
+    );
+
+    map.addLayer(
+      {
+        id: 'stops',
+        type: 'circle',
+        source: {
+          type: 'geojson',
+          data: geojson,
+        },
+        paint: {
+          'circle-radius': {
+            stops: [
+              [9, 2],
+              [13, 4],
+              [15, 6],
+            ],
+          },
+          'circle-stroke-width': 1,
+          'circle-stroke-color': '#363636',
+          'circle-color': '#363636',
+        },
+        filter: ['has', 'stop_id'],
       },
-      paint: {
-        'circle-radius': {
-          stops: [
-            [9, 3],
-            [13, 4],
-            [15, 7]
-          ]
+      firstSymbolId
+    );
+
+    map.addLayer(
+      {
+        id: 'stops-highlighted',
+        type: 'circle',
+        source: {
+          type: 'geojson',
+          data: geojson,
+        },
+        paint: {
+          'circle-radius': {
+            stops: [
+              [9, 3],
+              [13, 4],
+              [15, 7],
+            ],
+          },
+          'circle-stroke-width': 2,
+          'circle-stroke-color': '#666666',
+          'circle-color': '#888888',
         },
-        'circle-stroke-width': 2,
-        'circle-stroke-color': '#666666',
-        'circle-color': '#888888'
+        filter: ['==', 'stop_id', ''],
       },
-      filter: ['==', 'stop_id', '']
-    }, firstSymbolId);
+      firstSymbolId
+    );
 
-    map.on('mousemove', event => {
+    map.on('mousemove', (event) => {
       const features = map.queryRenderedFeatures(event.point, {
-        layers: ['stops']
+        layers: ['stops'],
       });
       if (features.length > 0) {
         map.getCanvas().style.cursor = 'pointer';
@@ -202,14 +209,14 @@ function createMap(id, geojson) {
       }
     });
 
-    map.on('click', event => {
+    map.on('click', (event) => {
       // Set bbox as 5px rectangle area around clicked point
       const bbox = [
         [event.point.x - 5, event.point.y - 5],
-        [event.point.x + 5, event.point.y + 5]
+        [event.point.x + 5, event.point.y + 5],
       ];
       const features = map.queryRenderedFeatures(bbox, {
-        layers: ['stops']
+        layers: ['stops'],
       });
 
       if (!features || features.length === 0) {
@@ -238,7 +245,7 @@ function createMap(id, geojson) {
     }
 
     // On table hover, highlight stop on map
-    $('th, td', $('#' + id + ' table')).hover(event => {
+    $('th, td', $('#' + id + ' table')).hover((event) => {
       let stopId;
       const table = $(event.target).parents('table');
       if (table.data('orientation') === 'vertical') {

package/public/js/timetable-menu.js

@@ -19,20 +19,44 @@ $(() => {
     }
 
     $('#day_list_selector input[name="dayList"]').each((index, element) => {
-      $(element).parents('label').toggleClass('text-white bg-blue-600', $(element).is(':checked'));
-      $(element).parents('label').toggleClass('text-gray-600 bg-gray-300', $(element).is(':not(:checked)'));
+      $(element)
+        .parents('label')
+        .toggleClass('text-white bg-blue-600', $(element).is(':checked'));
+      $(element)
+        .parents('label')
+        .toggleClass(
+          'text-gray-600 bg-gray-300',
+          $(element).is(':not(:checked)')
+        );
     });
 
-    $('#direction_name_selector input[name="directionName"]').each((index, element) => {
-      $(element).parents('label').toggleClass('text-white bg-blue-600', $(element).is(':checked'));
-      $(element).parents('label').toggleClass('text-gray-600 bg-gray-300', $(element).is(':not(:checked)'));
-    });
+    $('#direction_name_selector input[name="directionName"]').each(
+      (index, element) => {
+        $(element)
+          .parents('label')
+          .toggleClass('text-white bg-blue-600', $(element).is(':checked'));
+        $(element)
+          .parents('label')
+          .toggleClass(
+            'text-gray-600 bg-gray-300',
+            $(element).is(':not(:checked)')
+          );
+      }
+    );
 
     const dayList = $('#day_list_selector input[name="dayList"]:checked').val();
-    const directionName = $('#direction_name_selector input[name="directionName"]:checked').val();
+    const directionName = $(
+      '#direction_name_selector input[name="directionName"]:checked'
+    ).val();
 
     $('.timetable').hide();
-    const id = $('.timetable[data-day-list="' + dayList + '"][data-direction-name="' + directionName + '"]').attr('id');
+    const id = $(
+      '.timetable[data-day-list="' +
+        dayList +
+        '"][data-direction-name="' +
+        directionName +
+        '"]'
+    ).attr('id');
     showTimetable(id);
   }
 

package/views/default/formatting_functions.pug

@@ -11,23 +11,6 @@
     return summary;
   }
 
-  function formatTripName(trip, idx, timetable) {
-    let tripName = '';
-    if (timetable.routes.length > 1) {
-      tripName = trip.route_short_name;
-    } else if (trip.trip_short_name) {
-      tripName += trip.trip_short_name;
-    } else {
-      tripName += `Run #${idx + 1}`;
-    }
-  
-    if (timetableHasDifferentDays(timetable)) {
-      tripName += ` ${trip.dayList}`;
-    }
-  
-    return tripName;
-  }
-
   function formatRouteName(route) {
     const hasLongName = route.route_long_name !== '' && route.route_long_name !== null;
 

package/views/default/overview_full.pug

@@ -6,9 +6,9 @@ block extraHeader
   if config.showMap
     script(src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js" crossorigin="anonymous")
     script(src="https://unpkg.com/lodash@4.17.21/lodash.min.js" crossorigin="anonymous")
-    script(src="https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js")
+    script(src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js")
     script.
       mapboxgl.accessToken = '#{config.mapboxAccessToken}';
     script(src=`${config.assetPath}js/system-map.js`)
 
-    link(href="https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.css" rel="stylesheet")
+    link(href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet")

package/views/default/timetablepage_full.pug

@@ -9,10 +9,10 @@ block extraHeader
     script(src=`${config.assetPath}js/timetable-menu.js`)
 
   if config.showMap
-    script(src="https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js")
+    script(src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js")
     script.
       mapboxgl.accessToken = '#{config.mapboxAccessToken}';
     script(src=`${config.assetPath}js/timetable-map.js`)
 
-    link(href="https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.css" rel="stylesheet")
+    link(href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet")
 

package/www/blog/2021-11-06-CSV-Export.md

@@ -0,0 +1,26 @@
+---
+slug: timetables_as_csv
+title: New Feature - GTFS timetables as CSV
+author: Brendan Nee
+author_url: https://github.com/brendannee
+author_image_url: https://avatars3.githubusercontent.com/u/96217?s=400&v=4
+tags: [csv]
+---
+
+GTFS-to-HTML Version 2.3.0 adds support for exporting timetables as CSV. Setting the [outputFormat](https://gtfstohtml.com/docs/configuration#outputformat) configuration to `csv` will generate CSV files instead of HTML. One CSV file per timetable will be generated.
+
+An example of a CSV timetable:
+
+```
+,San Francisco Ferry Building,Vallejo Ferry Terminal,Mare Island Ferry Terminal
+Run #1,10:30am,11:30am,
+Run #2,11:30am,12:30pm,
+Run #3,1:50pm,2:50pm,
+Run #4,2:50pm,3:50pm,
+Run #5,4:10pm,5:10pm,5:25pm
+Run #6,5:10pm,6:10pm,6:25pm
+Run #7,6:30pm,7:30pm,
+Run #8,8:50pm,9:50pm,10:05pm
+```
+
+Timetables in CSV respect the `orientation` set in `timetables.txt` or `defaultOrientation` in `config.json`, they can be either `horizontal` or `vertical`.