gtfs-to-html 2.2.0 → 2.3.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "gtfs-to-html",
-  "version": "2.2.0",
+  "version": "2.3.2",
   "private": false,
-  "description": "Build human readable transit timetables as HTML or PDF from GTFS",
+  "description": "Build human readable transit timetables as HTML, PDF or CSV from GTFS",
   "keywords": [
     "transit",
     "gtfs",
@@ -38,30 +38,48 @@
     "@turf/helpers": "^6.5.0",
     "@turf/simplify": "^6.5.0",
     "archiver": "^5.3.0",
-    "chalk": "^4.1.2",
-    "cli-table": "^0.3.6",
+    "chalk": "^5.0.0",
+    "cli-table": "^0.3.11",
     "copy-dir": "^1.3.0",
-    "express": "^4.17.1",
-    "gtfs": "^3.1.2",
+    "csv-stringify": "^6.0.4",
+    "express": "^4.17.2",
+    "gtfs": "^3.2.2",
     "js-beautify": "^1.14.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.1",
     "morgan": "^1.10.0",
-    "pretty-error": "^3.0.4",
+    "pretty-error": "^4.0.0",
     "pug": "^3.0.2",
-    "puppeteer": "^10.4.0",
+    "puppeteer": "^13.0.1",
     "sanitize-filename": "^1.6.3",
     "sqlstring": "^2.3.2",
     "timer-machine": "^1.1.0",
     "toposort": "^2.0.2",
     "untildify": "^4.0.0",
-    "yargs": "^17.2.1"
+    "yargs": "^17.3.1"
   },
   "devDependencies": {
-    "eslint": "^8.0.1",
-    "eslint-config-xo": "^0.39.0"
+    "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-xo": "^0.39.0",
+    "husky": "^7.0.4",
+    "prettier": "^2.5.1",
+    "pretty-quick": "^3.1.3"
   },
   "engines": {
     "node": ">= 12.14.0"
+  },
+  "release-it": {
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/keep-a-changelog": {
+        "filename": "CHANGELOG.md"
+      }
+    }
+  },
+  "prettier": {
+    "singleQuote": true
   }
 }

package/public/css/timetable_styles.css

@@ -3,7 +3,11 @@ body {
   color: #666;
 }
 
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
   color: #333;
 }
 
@@ -79,7 +83,7 @@ a:hover {
 }
 
 .timetable .table-container::-webkit-scrollbar-track {
-  background-color: rgba(57, 57, 57, .2);
+  background-color: rgba(57, 57, 57, 0.2);
   border-radius: 4px;
 }
 
@@ -105,47 +109,47 @@ a:hover {
   padding: 0;
 }
 
-.timetable table>thead>tr>th,
-.timetable table>tbody>tr>th,
-.timetable table>tfoot>tr>th,
-.timetable table>thead>tr>td,
-.timetable table>tbody>tr>td,
-.timetable table>tfoot>tr>td {
+.timetable table > thead > tr > th,
+.timetable table > tbody > tr > th,
+.timetable table > tfoot > tr > th,
+.timetable table > thead > tr > td,
+.timetable table > tbody > tr > td,
+.timetable table > tfoot > tr > td {
   padding: 8px;
   line-height: 1.42857143;
   vertical-align: top;
   border: 1px solid #dddddd;
 }
 
-.timetable table>thead>tr>th {
+.timetable table > thead > tr > th {
   vertical-align: top;
   border-bottom: 2px solid #dddddd;
 }
 
-.timetable table>caption+thead>tr:first-child>th,
-.timetable table>colgroup+thead>tr:first-child>th,
-.timetable table>thead:first-child>tr:first-child>th,
-.timetable table>caption+thead>tr:first-child>td,
-.timetable table>colgroup+thead>tr:first-child>td,
-.timetable table>thead:first-child>tr:first-child>td {
+.timetable table > caption + thead > tr:first-child > th,
+.timetable table > colgroup + thead > tr:first-child > th,
+.timetable table > thead:first-child > tr:first-child > th,
+.timetable table > caption + thead > tr:first-child > td,
+.timetable table > colgroup + thead > tr:first-child > td,
+.timetable table > thead:first-child > tr:first-child > td {
   border-top: 0;
 }
 
-.timetable table>tbody+tbody {
+.timetable table > tbody + tbody {
   border-top: 2px solid #dddddd;
 }
 
-.timetable table>thead>tr>th,
-.timetable table>thead>tr>td {
+.timetable table > thead > tr > th,
+.timetable table > thead > tr > td {
   border-bottom-width: 2px;
 }
 
-.timetable table>tbody>tr:nth-of-type(odd) {
+.timetable table > tbody > tr:nth-of-type(odd) {
   background-color: #f9f9f9;
 }
 
 .table-responsive {
-  min-height: .01%;
+  min-height: 0.01%;
   overflow-x: auto;
 }
 
@@ -158,24 +162,26 @@ a:hover {
 }
 
 .route-color-swatch {
-  width: 26px;
+  min-width: 26px;
   height: 26px;
-  border-radius: 50%;
+  border-radius: 13px;
   text-align: center;
   line-height: 26px;
   font-size: 14px;
-  letter-spacing: -1px;
+  letter-spacing: -0.5px;
+  padding: 0 5px;
 }
 
 .route-color-swatch-large {
-  width: 40px;
+  min-width: 40px;
   height: 40px;
-  border-radius: 50%;
+  border-radius: 20px;
   text-align: center;
   line-height: 40px;
   font-size: 20px;
   font-weight: bold;
   letter-spacing: -1px;
+  padding: 0 8px;
 }
 
 @media screen and (max-width: 767px) {
@@ -187,45 +193,45 @@ a:hover {
     border: 1px solid #ddd;
   }
 
-  .table-responsive>table {
+  .table-responsive > table {
     margin-bottom: 0;
   }
 
-  .table-responsive>table>thead>tr>th,
-  .table-responsive>table>tbody>tr>th,
-  .table-responsive>table>tfoot>tr>th,
-  .table-responsive>table>thead>tr>td,
-  .table-responsive>table>tbody>tr>td,
-  .table-responsive>table>tfoot>tr>td {
+  .table-responsive > table > thead > tr > th,
+  .table-responsive > table > tbody > tr > th,
+  .table-responsive > table > tfoot > tr > th,
+  .table-responsive > table > thead > tr > td,
+  .table-responsive > table > tbody > tr > td,
+  .table-responsive > table > tfoot > tr > td {
     white-space: nowrap;
   }
 
-  .table-responsive>.table-bordered {
+  .table-responsive > .table-bordered {
     border: 0;
   }
 
-  .table-responsive>.table-bordered>thead>tr>th:first-child,
-  .table-responsive>.table-bordered>tbody>tr>th:first-child,
-  .table-responsive>.table-bordered>tfoot>tr>th:first-child,
-  .table-responsive>.table-bordered>thead>tr>td:first-child,
-  .table-responsive>.table-bordered>tbody>tr>td:first-child,
-  .table-responsive>.table-bordered>tfoot>tr>td:first-child {
+  .table-responsive > .table-bordered > thead > tr > th:first-child,
+  .table-responsive > .table-bordered > tbody > tr > th:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+  .table-responsive > .table-bordered > thead > tr > td:first-child,
+  .table-responsive > .table-bordered > tbody > tr > td:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
     border-left: 0;
   }
 
-  .table-responsive>.table-bordered>thead>tr>th:last-child,
-  .table-responsive>.table-bordered>tbody>tr>th:last-child,
-  .table-responsive>.table-bordered>tfoot>tr>th:last-child,
-  .table-responsive>.table-bordered>thead>tr>td:last-child,
-  .table-responsive>.table-bordered>tbody>tr>td:last-child,
-  .table-responsive>.table-bordered>tfoot>tr>td:last-child {
+  .table-responsive > .table-bordered > thead > tr > th:last-child,
+  .table-responsive > .table-bordered > tbody > tr > th:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+  .table-responsive > .table-bordered > thead > tr > td:last-child,
+  .table-responsive > .table-bordered > tbody > tr > td:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
     border-right: 0;
   }
 
-  .table-responsive>.table-bordered>tbody>tr:last-child>th,
-  .table-responsive>.table-bordered>tfoot>tr:last-child>th,
-  .table-responsive>.table-bordered>tbody>tr:last-child>td,
-  .table-responsive>.table-bordered>tfoot>tr:last-child>td {
+  .table-responsive > .table-bordered > tbody > tr:last-child > th,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+  .table-responsive > .table-bordered > tbody > tr:last-child > td,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
     border-bottom: 0;
   }
 

package/public/js/system-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');
 
@@ -26,13 +28,10 @@ function formatRoutePopup(features) {
   const html = $('<div>');
 
   if (features.length > 1) {
-    $('<div>')
-      .addClass('popup-title')
-      .text('Routes')
-      .appendTo(html);
+    $('<div>').addClass('popup-title').text('Routes').appendTo(html);
   }
 
-  $(html).append(features.map(feature => formatRoute(feature.properties)));
+  $(html).append(features.map((feature) => formatRoute(feature.properties)));
 
   return html.prop('outerHTML');
 }
@@ -67,7 +66,7 @@ function createSystemMap(id, geojson) {
     container: id,
     style: 'mapbox://styles/mapbox/light-v10',
     center: bounds.getCenter(),
-    zoom: 12
+    zoom: 12,
   });
   const routes = {};
 
@@ -81,7 +80,7 @@ function createSystemMap(id, geojson) {
   map.on('load', () => {
     map.fitBounds(bounds, {
       padding: 20,
-      duration: 0
+      duration: 0,
     });
 
     // Find the index of the first symbol layer in the map style
@@ -96,71 +95,79 @@ function createSystemMap(id, geojson) {
     // Add white outlines to routes first
     for (const routeId of Object.keys(routes)) {
       routeBackgroundLayerIds.push(`${routeId}outline`);
-      map.addLayer({
-        id: `${routeId}outline`,
-        type: 'line',
-        source: {
-          type: 'geojson',
-          data: geojson
-        },
-        paint: {
-          'line-color': '#FFFFFF',
-          'line-opacity': 1,
-          'line-width': 6
+      map.addLayer(
+        {
+          id: `${routeId}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: ['==', 'route_id', routeId],
         },
-        layout: {
-          'line-join': 'round',
-          'line-cap': 'round'
-        },
-        filter: ['==', 'route_id', routeId]
-      }, firstSymbolId);
+        firstSymbolId
+      );
     }
 
     // Add route lines next
     for (const routeId of Object.keys(routes)) {
       routeLayerIds.push(routeId);
       const routeColor = routes[routeId].route_color || defaultRouteColor;
-      map.addLayer({
-        id: routeId,
-        type: 'line',
-        source: {
-          type: 'geojson',
-          data: geojson
+      map.addLayer(
+        {
+          id: routeId,
+          type: 'line',
+          source: {
+            type: 'geojson',
+            data: geojson,
+          },
+          paint: {
+            'line-color': routeColor,
+            'line-opacity': 1,
+            'line-width': 2,
+          },
+          layout: {
+            'line-join': 'round',
+            'line-cap': 'round',
+          },
+          filter: ['==', 'route_id', routeId],
         },
-        paint: {
-          'line-color': routeColor,
-          'line-opacity': 1,
-          'line-width': 2
-        },
-        layout: {
-          'line-join': 'round',
-          'line-cap': 'round'
-        },
-        filter: ['==', 'route_id', routeId]
-      }, firstSymbolId);
+        firstSymbolId
+      );
     }
 
-    map.on('mousemove', event => {
+    map.on('mousemove', (event) => {
       const features = map.queryRenderedFeatures(event.point, {
-        layers: [...routeLayerIds, ...routeBackgroundLayerIds]
+        layers: [...routeLayerIds, ...routeBackgroundLayerIds],
       });
       if (features.length > 0) {
         map.getCanvas().style.cursor = 'pointer';
-        highlightRoutes(_.uniq(features.map(feature => feature.properties.route_id)));
+        highlightRoutes(
+          _.uniq(features.map((feature) => feature.properties.route_id))
+        );
       } else {
         map.getCanvas().style.cursor = '';
         unHighlightRoutes();
       }
     });
 
-    map.on('click', event => {
+    map.on('click', (event) => {
       // Set bbox as 5px reactangle 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: routeLayerIds
+        layers: routeLayerIds,
       });
 
       if (!features || features.length === 0) {
@@ -168,11 +175,8 @@ function createSystemMap(id, geojson) {
       }
 
       const routeFeatures = _.orderBy(
-        _.uniqBy(
-          features,
-          feature => feature.properties.route_short_name
-        ),
-        feature => Number.parseInt(feature.properties.route_short_name, 10)
+        _.uniqBy(features, (feature) => feature.properties.route_short_name),
+        (feature) => Number.parseInt(feature.properties.route_short_name, 10)
       );
 
       new mapboxgl.Popup()
@@ -183,13 +187,19 @@ function createSystemMap(id, geojson) {
 
     function highlightRoutes(routeIds, zoom) {
       for (const layerId of routeBackgroundLayerIds) {
-        const color = routeIds.includes(layerId.replace(/outline/, '')) ? '#FFFD7E' : '#FFFFFF';
-        const width = routeIds.includes(layerId.replace(/outline/, '')) ? 12 : 6;
+        const color = routeIds.includes(layerId.replace(/outline/, ''))
+          ? '#FFFD7E'
+          : '#FFFFFF';
+        const width = routeIds.includes(layerId.replace(/outline/, ''))
+          ? 12
+          : 6;
         map.setPaintProperty(layerId, 'line-color', color);
         map.setPaintProperty(layerId, 'line-width', width);
       }
 
-      const highlightedFeatures = geojson.features.filter(feature => routeIds.includes(feature.properties.route_id));
+      const highlightedFeatures = geojson.features.filter((feature) =>
+        routeIds.includes(feature.properties.route_id)
+      );
 
       if (highlightedFeatures.length === 0) {
         return;
@@ -197,10 +207,10 @@ function createSystemMap(id, geojson) {
 
       if (zoom) {
         const zoomBounds = getBounds({
-          features: highlightedFeatures
+          features: highlightedFeatures,
         });
         map.fitBounds(zoomBounds, {
-          padding: 20
+          padding: 20,
         });
       }
     }
@@ -218,7 +228,7 @@ function createSystemMap(id, geojson) {
 
     // On table hover, highlight route on map
     $(() => {
-      $('.overview-list a').hover(event => {
+      $('.overview-list a').hover((event) => {
         const routeIdString = $(event.target).parents('a').data('route-ids');
         if (routeIdString) {
           const routeIds = routeIdString.toString().split(',');
@@ -226,7 +236,10 @@ function createSystemMap(id, geojson) {
         }
       });
 
-      $('.overview-list').hover(() => {}, () => unHighlightRoutes(true));
+      $('.overview-list').hover(
+        () => {},
+        () => unHighlightRoutes(true)
+      );
     });
   });