Style cleanup

transitnownash · Jul 10, 2022 · a429f4a · a429f4a
1 parent 60c8e38
commit a429f4a
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 157 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -1,27 +1,3 @@
-.route-name {
-  border-radius: 10px;
-  background-color: #999;
-  color: #fff;
-  padding: 1rem;
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-  a:any-link {
-    text-decoration: none;
-    color: white;
-  }
-  .route-icon {
-    max-height: 2em;
-    margin-right: 0.5rem;
-    padding-right: 0.5rem;
-    border-right: 1px dotted #fff;
-  }
-}
-
-.route-alert-icon {
-  float: right;
-  font-size: 1.5rem;
-}
-
 .stop-name {
   text-align: center;
   font-weight: bold;
@@ -30,13 +6,13 @@
   background-color: purple;
   color: white;
   padding: 1rem;
-  a {
+  a:any-link {
     color: white
   }
 }
 
 .navbar-dark.bg-dark {
-  a {
+  a:any-link {
     text-decoration: none;
   }
 }

diff --git a/src/components/ErrorBoundry.js b/src/components/ErrorBoundry.js
@@ -10,13 +10,13 @@ class ErrorBoundary extends React.Component {
     };
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(_error) {
     // Update state so the next render will show the fallback UI.
-    this.setState('error', error)
     return { hasError: true };
   }
 
   componentDidCatch(error, errorInfo) {
+    this.setState({error: error})
     // You can also log the error to an error reporting service
     console.error(error, errorInfo);
   }
@@ -31,7 +31,7 @@ class ErrorBoundary extends React.Component {
               <div className="card-header bg-danger text-light">Site Error</div>
               <div className="card-body">An unexpected error has ocurred. Try reloading the page or wait a few moments before trying again.</div>
               {this.state.error &&
-                (<div className="card-body"><div className="bg-light p-3" style={{fontFamily: 'monospace', whiteSpace: 'pre-wrap'}}>{JSON.stringify(this.state.error)}</div></div>)
+                (<div className="card-body"><div className="bg-light p-3" style={{fontFamily: 'monospace', whiteSpace: 'pre-wrap'}}>{JSON.stringify(this.state.error.message)}</div></div>)
               }
             </div>
           </div>

diff --git a/src/components/TitleBar.js b/src/components/TitleBar.js
@@ -19,7 +19,7 @@ function TitleBar({hide}) {
         <nav className="my-2 my-md-0 mr-md-3">
           <Link className="p-2 text-light" to="/about"><FontAwesomeIcon icon={faInfoCircle} fixedWidth={true} /> About</Link>
           <Link className="p-2 text-light" to="/routes"><FontAwesomeIcon icon={faRoute} fixedWidth={true} /> Routes</Link>
-          <a className="p-2 text-light" href="https://github.com/transitnownash/wego-bus-map" target="_blank" rel="noreferrer"><FontAwesomeIcon icon={faGithub} fixedWidth={true} /> View on GitHub</a>
+          <a className="p-2 text-light" href="https://github.com/transitnownash/wego-bus-map" target="_blank" rel="noreferrer"><FontAwesomeIcon icon={faGithub} fixedWidth={true} /> GitHub</a>
         </nav>
         <Link className="btn btn-outline-light" to="/">Return to App</Link>
       </div>

diff --git a/src/components/TransitRouteHeader.js b/src/components/TransitRouteHeader.js
@@ -0,0 +1,59 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+import busIcon from '../resources/bus.svg'
+import trainIcon from '../resources/train.svg'
+import { isHexLight } from '../util'
+import { OverlayTrigger } from 'react-bootstrap'
+import { Tooltip } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
+import './TransitRouteHeader.scss'
+
+function TransitRouteHeader({route, alerts, showRouteType}) {
+
+  const routeStyle = {
+    backgroundColor: '#' + route.route_color,
+    color: isHexLight(route.route_color) ? '#000' : '#FFF'
+  }
+
+  let vehicleIcon = busIcon
+  if (route.route_type === "2") {
+    vehicleIcon = trainIcon
+  }
+
+  return(
+    <div className="transit-route-header d-flex" style={routeStyle} title={route.route_desc}>
+      {showRouteType && (
+        <div>
+          <img className="me-2" style={{height: '1.5rem'}} src={vehicleIcon} alt="Icon" title={'Route Type: ' + route.route_type } />
+        </div>
+      )}
+      <div className="flex-grow-1 align-bottom">
+        <Link to={'/routes/' + route.route_short_name}>{route.route_short_name} - {route.route_long_name}</Link>
+      </div>
+      <div>
+        {alerts.length > 0 && (
+          <div className="ms-2">
+            <OverlayTrigger placement={'top'} overlay={<Tooltip>{alerts.length > 1 ? alerts.length + ' alerts' : '1 alert'}</Tooltip>}>
+              <FontAwesomeIcon icon={faExclamationTriangle} fixedWidth={true}></FontAwesomeIcon>
+            </OverlayTrigger>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+TransitRouteHeader.propTypes = {
+  route: PropTypes.object.isRequired,
+  alerts: PropTypes.array,
+  showRouteType: PropTypes.bool
+}
+
+TransitRouteHeader.defaultProps = {
+  alerts: [],
+  showRouteType: false
+}
+
+export default TransitRouteHeader
diff --git a/src/components/TransitRouteHeader.scss b/src/components/TransitRouteHeader.scss
@@ -0,0 +1,12 @@
+.transit-route-header {
+  border-radius: 10px;
+  background-color: #999;
+  color: #fff;
+  padding: 1rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  a:any-link {
+    text-decoration: none;
+    color: white;
+  }
+}
diff --git a/src/components/VehicleMarkerPopup.js b/src/components/VehicleMarkerPopup.js
@@ -2,38 +2,21 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Popup } from 'react-leaflet'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBus, faMap, faMapSigns, faCompass, faTachometer, faClock, faSpinner, faWarning } from '@fortawesome/free-solid-svg-icons'
+import { faBus, faMap, faMapSigns, faCompass, faTachometer, faClock, faSpinner } from '@fortawesome/free-solid-svg-icons'
 import { formatBearing, formatSpeed, formatTimestamp } from './../util.js'
 import { Link } from 'react-router-dom'
+import TransitRouteHeader from './TransitRouteHeader.js'
 
 function VehicleMarkerPopup({trip, route, bearing, speed, timestamp, metadata, agency, tripId, alerts}) {
-    const routeHeaderStyle = {
-      'backgroundColor': '#' + route.route_color,
-      'color': 'white'
-    }
-
-    const trip_headsign = (trip.trip_headsign)
-      ? trip.trip_headsign
-      : (<FontAwesomeIcon icon={faSpinner} spin={true}></FontAwesomeIcon>)
-    ;
+  const trip_headsign = (trip.trip_headsign)
+    ? trip.trip_headsign
+    : (<FontAwesomeIcon icon={faSpinner} spin={true}></FontAwesomeIcon>)
+  ;
 
   return(
     <Popup>
       <div className="popup-content">
-        <div className="route-name mb-1 d-flex" style={routeHeaderStyle}>
-          <div className="flex-grow-1">
-            <Link to={'/routes/' + route.route_short_name}>
-              {route.route_short_name} - {route.route_long_name}
-            </Link>
-          </div>
-          {(typeof alerts !== 'undefined') &&
-              (
-                <div className="ms-2">
-                  <FontAwesomeIcon icon={faWarning}></FontAwesomeIcon>
-                </div>
-              )
-            }
-        </div>
+        <TransitRouteHeader route={route} alerts={alerts} showRouteType={false}></TransitRouteHeader>
         <table className="table table-borderless table-sm" style={{minWidth: '250px'}}>
           <tbody>
             <tr>

diff --git a/src/components/VehicleMarkerTooltip.js b/src/components/VehicleMarkerTooltip.js
@@ -2,32 +2,19 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Tooltip } from 'react-leaflet'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBus, faMap, faWarning } from '@fortawesome/free-solid-svg-icons'
+import { faBus, faMap } from '@fortawesome/free-solid-svg-icons'
 import L from 'leaflet'
+import TransitRouteHeader from './TransitRouteHeader'
 
 function VehicleMarkerTooltip({route, metadata, alerts}) {
   if (L.Browser.mobile) {
     return
   }
 
-  const routeHeaderStyle = {
-    'backgroundColor': '#' + route.route_color,
-    'color': 'white'
-  }
-
   return(
     <Tooltip>
       <div className="tooltip-content">
-        <div className="route-name mb-1 d-flex" style={routeHeaderStyle}>
-          {route.route_short_name} - {route.route_long_name}
-          {(typeof alerts !== 'undefined') &&
-            (
-              <div className="ms-2">
-                <FontAwesomeIcon icon={faWarning}></FontAwesomeIcon>
-              </div>
-            )
-          }
-        </div>
+        <TransitRouteHeader route={route} alerts={alerts} showRouteType={false}></TransitRouteHeader>
         <table className="table table-borderless table-sm mb-0">
           <tbody>
             <tr>

diff --git a/src/controllers/TransitRoute.js b/src/controllers/TransitRoute.js
@@ -8,13 +8,10 @@ import LoadingScreen from '../components/LoadingScreen'
 import TransitMap from '../components/TransitMap'
 import TripTable from '../components/TripTable'
 import Footer from '../components/Footer'
-import busMarkerIcon from '../resources/bus.svg'
-import trainMarkerIcon from '../resources/train.svg'
-import { getJSON, formatPositionData, isHexLight } from './../util.js';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faWarning } from '@fortawesome/free-solid-svg-icons';
+import { getJSON, formatPositionData } from './../util.js';
 import AlertList from '../components/AlertList'
 import DataFetchError from '../components/DataFetchError'
+import TransitRouteHeader from '../components/TransitRouteHeader'
 
 const GTFS_BASE_URL = process.env.REACT_APP_GTFS_BASE_URL;
 const REFRESH_VEHICLE_POSITIONS_TTL = 7000;
@@ -94,22 +91,7 @@ function TransitRoute() {
     return(<NoMatch></NoMatch>)
   }
 
-  const routeStyle = {
-    backgroundColor: '#' + route.route_color,
-    color: isHexLight(route.route_color) ? '#000' : '#FFF'
-  }
-
-  const vehicle_icon = (route.route_type === '2') ? trainMarkerIcon : busMarkerIcon
   const routeAlerts = alerts.filter((a) => a.alert.informed_entity[0].route_id === route.route_short_name)
-  const route_alert_button = (routeAlerts.length > 0)
-    ? (
-        <div className="route-alert-icon">
-          <FontAwesomeIcon icon={faWarning}></FontAwesomeIcon>
-        </div>
-      )
-    : (
-        <></>
-      )
 
   // Extract unique shapes
   let shapes = route_trips.map((item, _index) => {
@@ -122,14 +104,8 @@ function TransitRoute() {
     <div>
       <TitleBar></TitleBar>
       <div className="container routes">
-        <div key={route.route_short_name}>
-          <div className="route-name" style={routeStyle} title={route.route_desc}>
-            <img className="route-icon" src={vehicle_icon} alt="Icon" />
-            {route.route_short_name} - {route.route_long_name}
-            {route_alert_button}
-          </div>
-        </div>
-        <TransitMap vehicleMarkers={vehicleMarkers} routes={[route]} agencies={agencies} routeShapes={shapes}></TransitMap>
+        <TransitRouteHeader route={route} alerts={routeAlerts} showRouteType={true}></TransitRouteHeader>
+        <TransitMap vehicleMarkers={vehicleMarkers} routes={[route]} agencies={agencies} routeShapes={shapes} alerts={routeAlerts}></TransitMap>
         <AlertList alerts={routeAlerts} routes={[route]}></AlertList>
         <TripTable route={route} routeTrips={route_trips}></TripTable>
       </div>

diff --git a/src/controllers/TransitRoutes.js b/src/controllers/TransitRoutes.js
@@ -1,16 +1,12 @@
 
 
 import React, { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
 import TitleBar from '../components/TitleBar'
 import LoadingScreen from '../components/LoadingScreen'
-import busMarkerIcon from '../resources/bus.svg'
-import trainMarkerIcon from '../resources/train.svg'
-import {getJSON, isHexLight} from './../util.js';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faWarning } from '@fortawesome/free-solid-svg-icons';
+import {getJSON} from './../util.js';
 import Footer from '../components/Footer'
 import DataFetchError from '../components/DataFetchError'
+import TransitRouteHeader from '../components/TransitRouteHeader'
 
 const GTFS_BASE_URL = process.env.REACT_APP_GTFS_BASE_URL;
 
@@ -51,34 +47,8 @@ function TransitRoutes() {
         <TitleBar></TitleBar>
         <div className="container routes">
           {routes.map((item, _index) => {
-            const routeStyle = {
-              backgroundColor: '#' + item.route_color,
-              color: isHexLight(item.route_color) ? '#000' : '#FFF'
-            }
-            const vehicle_icon = (item.route_type === '2') ? trainMarkerIcon : busMarkerIcon
             const routeAlerts = alerts.filter((a) => a.alert.informed_entity[0].route_id === item.route_short_name)
-            const route_alert_button = (routeAlerts.length > 0)
-              ? (
-                  <div className="route-alert-icon">
-                    <FontAwesomeIcon icon={faWarning}></FontAwesomeIcon>
-                  </div>
-                )
-              : (
-                <></>
-                )
-
-
-            return(
-              <div key={item.route_short_name}>
-                <div className="route-name" style={routeStyle} title={item.route_desc}>
-                  <Link to={"/routes/" + item.route_short_name}>
-                    <img className="route-icon" src={vehicle_icon} alt="Icon" />
-                    {item.route_short_name} - {item.route_long_name}
-                    {route_alert_button}
-                  </Link>
-                </div>
-              </div>
-            )
+            return(<TransitRouteHeader key={item.id} route={item} alerts={routeAlerts} showRouteType={true}></TransitRouteHeader>)
           })}
         </div>
         <Footer></Footer>