gtfs-to-html 2.9.0 → 2.9.2

package/views/default/css/timetable_styles.css

@@ -0,0 +1,522 @@
+/* Base styles */
+body {
+  color: #666;
+  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-feature-settings: normal;
+  line-height: inherit;
+  margin: 0;
+}
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: inherit;
+  font-weight: inherit;
+  color: #333;
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Timetable Styles */
+
+.timetable-page {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  .timetable-page {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .timetable-page {
+    max-width: 768px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media (min-width: 1024px) {
+  .timetable-page {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .timetable-page {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .timetable-page {
+    max-width: 1536px;
+  }
+}
+
+.timetable-page h1 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  padding-top: 1rem;
+  gap: 0.24rem;
+  display: flex;
+  align-items: center;
+}
+
+.timetable-page h2 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.timetable-page h3 {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.timetable-page .effective-date {
+  margin-top: 0.5rem;
+  color: rgb(75 85 99);
+}
+
+.timetable-page .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.timetable-page .hidden {
+  display: none;
+}
+
+.timetable-page .timetable .timetable-label {
+  margin-bottom: 0.5rem;
+}
+
+.timetable-page .timetable .timetable-footer {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .timetable-page .timetable .timetable-footer {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* Menu Styles */
+
+.timetable-page .timetable-simple-menu {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.timetable-page .timetable-jump-menu {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .timetable-page .timetable-jump-menu {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.timetable-page .timetable-jump-menu a {
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+
+.timetable-page .timetable-radio-menu {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .timetable-page .timetable-radio-menu {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.timetable-page .timetable-radio-menu label {
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+
+.timetable-page .menu-type-radio .timetable {
+  display: none;
+}
+
+.timetable-page .btn-blue {
+  color: rgb(255 255 255);
+  padding: 0.75rem 1.5rem;
+  background-color: rgb(37 99 235);
+  border-radius: 0.375rem;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.timetable-page .btn-blue:hover {
+  background-color: rgb(29 78 216);
+  text-decoration: none;
+}
+
+.timetable-page .btn-gray {
+  color: rgb(75 85 99);
+  padding: 0.75rem 1.5rem;
+  background-color: rgb(209 213 219);
+  border-radius: 0.375rem;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.timetable-page .btn-gray:hover {
+  background-color: rgb(201, 206, 213);
+  text-decoration: none;
+}
+
+.timetable-page .btn-sm {
+  padding: 0.25rem 1rem;
+  border-radius: 0.25rem;
+}
+
+.timetable-page .timetable {
+  margin-bottom: 2.5rem;
+}
+
+.timetable-page .timetable .table-vertical .stop-header {
+  text-align: center;
+  line-height: 1.15;
+}
+
+.timetable-page .timetable .run-header {
+  text-align: center;
+  line-height: 1.15;
+}
+
+.timetable-page .timetable .run-footer {
+  text-align: center;
+}
+
+.timetable-page .timetable .run-footer .continues-as-route {
+  font-weight: bold;
+}
+
+.timetable-page .timetable .stop-code {
+  font-weight: normal;
+}
+
+.timetable-page .timetable .stop-time {
+  text-align: center;
+}
+
+.timetable-page .timetable .stop-time.pm {
+  font-weight: bold;
+}
+
+.timetable-page .timetable a.symbol {
+  padding-left: 4px;
+  color: #212529;
+  text-decoration: none;
+}
+
+.timetable-page .timetable .trip-frequency {
+  text-align: center;
+  font-weight: bold;
+}
+
+.timetable-page .timetable .city-row {
+  font-size: 1.5em;
+  color: #415d86;
+}
+
+.timetable-page .timetable th.city-column {
+  font-size: 1.5em;
+  text-align: center;
+}
+
+.timetable-page .timetable .table-container {
+  overflow-x: scroll;
+  margin: 20px 0;
+}
+
+.timetable-page .timetable .table-container::-webkit-scrollbar {
+  -webkit-appearance: none;
+  height: 8px;
+}
+
+.timetable-page .timetable .table-container::-webkit-scrollbar-track {
+  background-color: rgba(57, 57, 57, 0.2);
+  border-radius: 4px;
+}
+
+.timetable-page .timetable .table-container::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(156, 156, 156, 0.8);
+}
+
+.timetable-page .timetable .table-container table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+.timetable-page .timetable thead tr {
+  background: #bae6fd;
+}
+
+.timetable-page .timetable thead tr,
+.timetable-page .timetable thead tr a {
+  color: #222222;
+}
+
+.timetable-page .timetable th {
+  text-align: left;
+}
+
+.timetable-page .timetable td,
+.timetable-page .timetable th {
+  padding: 0;
+}
+
+.timetable-page .timetable table > thead > tr > th,
+.timetable-page .timetable table > tbody > tr > th,
+.timetable-page .timetable table > tfoot > tr > th,
+.timetable-page .timetable table > thead > tr > td,
+.timetable-page .timetable table > tbody > tr > td,
+.timetable-page .timetable table > tfoot > tr > td {
+  padding: 8px;
+  line-height: 1.42857143;
+  vertical-align: top;
+  border: 1px solid #dddddd;
+}
+
+.timetable-page .timetable table > thead > tr > th {
+  vertical-align: top;
+  border-bottom: 2px solid #dddddd;
+}
+
+.timetable-page .timetable table > caption + thead > tr:first-child > th,
+.timetable-page .timetable table > colgroup + thead > tr:first-child > th,
+.timetable-page .timetable table > thead:first-child > tr:first-child > th,
+.timetable-page .timetable table > caption + thead > tr:first-child > td,
+.timetable-page .timetable table > colgroup + thead > tr:first-child > td,
+.timetable-page .timetable table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+
+.timetable-page .timetable table > tbody + tbody {
+  border-top: 2px solid #dddddd;
+}
+
+.timetable-page .timetable table > thead > tr > th,
+.timetable-page .timetable table > thead > tr > td {
+  border-bottom-width: 2px;
+}
+
+.timetable-page .timetable table > tbody > tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}
+
+.timetable-page .table-horizontal tbody tr th.stop-name-container {
+  min-width: 175px;
+}
+
+@media screen and (min-width: 768px) {
+  .timetable-page .table-horizontal tbody tr th.stop-name-container {
+    min-width: 250px;
+  }
+}
+
+.timetable-page .table-hourly {
+  width: auto;
+}
+
+.timetable-page .timetable .table-vertical .trip-row .trip-notes {
+  text-wrap: nowrap;
+}
+
+.timetable-page .route-color-swatch {
+  min-width: 29px;
+  height: 29px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 26px;
+  font-size: 12px;
+  letter-spacing: -0.5px;
+  padding: 0 5px;
+  flex: none;
+  flex-shrink: 0;
+}
+
+.timetable-page .route-color-swatch-large {
+  min-width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 46px;
+  font-size: 20px;
+  font-weight: bold;
+  letter-spacing: -1px;
+  padding: 0 6px;
+  flex: none;
+  flex-shrink: 0;
+}
+
+/* Map Styles */
+
+.timetable-page .map-container {
+  position: relative;
+}
+
+.timetable-page .map {
+  min-height: 350px;
+}
+
+@media screen and (min-width: 768px) {
+  .timetable-page .map {
+    min-height: 450px;
+  }
+}
+
+.timetable-page .map .mapboxgl-popup-content .popup-title {
+  margin: 0 20px 5px 0;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.timetable-page .map .mapboxgl-popup-content .popup-label {
+  margin-right: 0.25rem;
+}
+
+.timetable-page .map .mapboxgl-popup-content .route-list {
+  margin-bottom: 0.5rem;
+}
+
+.timetable-page .map .mapboxgl-popup-content .map-route-item {
+  display: flex;
+  align-items: center;
+  font-size: 0.75rem;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+  gap: 0.5rem;
+}
+
+.timetable-page .map .mapboxgl-popup-content .map-route-item:hover {
+  text-decoration: none;
+}
+
+.timetable-page
+  .map
+  .mapboxgl-popup-content
+  a.map-route-item
+  .underline-hover:hover {
+  text-decoration: underline;
+}
+
+.timetable-page .map .mapboxgl-popup-content .mapboxgl-popup-close-button {
+  padding: 0 5px;
+}
+
+.timetable-page .map-legend {
+  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;
+  left: 10px;
+  bottom: 35px;
+  z-index: 1;
+}
+
+.timetable-page .map-legend .legend-item {
+  padding: 5px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  gap: 4px;
+}
+
+.timetable-page .map-legend .legend-item .legend-icon {
+  width: 22px;
+  padding-top: 3px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.timetable-page .map-legend .legend-item .legend-text {
+  font-size: 12px;
+}
+
+.timetable-page .stop-marker {
+  background: #ffffff;
+  border: 2px solid #3f4a5c;
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+}
+
+.timetable-page .vehicle-marker {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #d52f3e;
+  border: 1px solid #50161c;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.timetable-page .vehicle-marker .vehicle-marker-arrow {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 14px;
+  height: 14px;
+}

package/views/default/formatting_functions.pug

@@ -0,0 +1,104 @@
+-
+  function formatFrequencyWarning(frequencies) {
+    let warning = 'Trip times shown below are an example only. ';
+    frequencies.forEach((frequency, idx) => {
+      if (idx === 0) {
+        warning += 'This route runs every ';
+      } else {
+        warning += ' and ';
+      }
+      warning += `${frequency.headway_min} minutes between ${frequency.start_formatted_time} and ${frequency.end_formatted_time}`;
+    });
+    warning += '.';
+    return warning;
+  }
+
+  function getAgencyTimetableGroups(timetablePages, agencies) {
+    const agencyIds = [];
+    for (const timetablePage of timetablePages) {
+      agencyIds.push(...timetablePage.agency_ids);
+    }
+
+    const uniqueAgencyIds = _.uniq(_.compact(agencyIds));
+
+    if (uniqueAgencyIds.length === 0) {
+      return [{
+        agency: _.first(agencies),
+        timetablePages
+      }];
+    }
+
+    return _.orderBy(uniqueAgencyIds.map(agencyId => {
+      return {
+        agency: agencies.find(agency => agency.agency_id === agencyId) || _.first(agencies),
+        timetablePages: timetablePages.filter(timetablePage => timetablePage.agency_ids.includes(agencyId))
+      };
+    }), timetableGroup => timetableGroup.agency.agency_name.toLowerCase());
+  }
+
+  function prepareMapData(timetablePage, config) {
+    const routes = {}
+    const stops = {}
+    const tripIds = []
+    const geojsons = {}
+
+    for (const timetable of timetablePage.consolidatedTimetables) {
+      tripIds.push(...timetable.orderedTrips.map(trip => trip.trip_id))
+
+      const minifiedGeojson = {
+        type: 'FeatureCollection',
+        features: []
+      }
+
+      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
+          }
+
+          const stop = _.pick(feature.properties, ['stop_id', 'stop_code', 'stop_name'])
+          stops[stop.stop_id] = stop
+
+          feature.properties = {
+            route_ids: feature.properties.routes.map(route => route.route_id),
+            stop_id: feature.properties.stop_id,
+          }
+        } else if (feature.geometry.type.toLowerCase() === 'linestring') {
+          feature.properties = {
+            route_color: feature.properties.route_color
+          }
+        } else if (feature.geometry.type.toLowerCase() === 'multilinestring') {
+          feature.properties = {
+            route_color: feature.properties.route_color
+          }
+        }
+        minifiedGeojson.features.push(feature)
+      }
+
+      geojsons[formatHtmlId(timetable.timetable_id)] = minifiedGeojson
+    }
+
+    return {
+      geojsons,
+      tripIds: _.uniq(tripIds),
+      routes,
+      stops,
+      gtfsRealtimeUrls: _.pick(config.agencies.find(agency => agency.realtimeVehiclePositions?.url), ['realtimeAlerts', 'realtimeTripUpdates', 'realtimeVehiclePositions']),
+    }
+  }
+
+  function getRouteColorsAsCss(route) {
+    if (route && route.route_color) {
+      return `background: #${route.route_color}; color: #${route.route_text_color ?? 'ffffff'};`
+    }
+
+    return ''
+  }
+
+  function formatRouteName(route) {
+    if (route.route_long_name === null || route.route_long_name === '') {
+      return `Route ${route.route_short_name}`;
+    }
+
+    return route.route_long_name;
+  }