From b6d87fd7eb4c5dca106c463f36bb6e4e193cf6a8 Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 24 Oct 2018 20:38:05 -0700 Subject: [PATCH 01/10] adding toggle --- src/Map.jsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/Map.jsx b/src/Map.jsx index bfee390..3831f81 100644 --- a/src/Map.jsx +++ b/src/Map.jsx @@ -103,6 +103,7 @@ class Map extends Component { showStops: true, selectedStops: [], subroute: null, + liveMap: false, }; } @@ -221,10 +222,24 @@ class Map extends Component { }; this.setState({ geojson: newGeojson }); } - + toggleLiveMap(event) { + const { liveMap } = this.state; + console.log(event); + debugger; // eslint-disable-line + if (liveMap) { + this.setNewStateTime(new Date()); + this.setState({ liveMap: event.target.value }); + } + } renderControlPanel() { return (
+
+ this.toggleLiveMap(event)} + /> +

Time

Date: Wed, 7 Nov 2018 20:53:09 -0800 Subject: [PATCH 02/10] adding live mode --- src/Map.jsx | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/Map.jsx b/src/Map.jsx index 3831f81..6be8f93 100644 --- a/src/Map.jsx +++ b/src/Map.jsx @@ -20,6 +20,7 @@ import muniRoutesGeoJson from './res/muniRoutes.geo.json'; import Checkbox from './Checkbox'; const notAlpha = /[^a-zA-Z]/g; +const liveDataInterval = 15000; /* Sort by putting letters before numbers and treat number strings as integers. @@ -222,24 +223,16 @@ class Map extends Component { }; this.setState({ geojson: newGeojson }); } - toggleLiveMap(event) { - const { liveMap } = this.state; - console.log(event); - debugger; // eslint-disable-line - if (liveMap) { + + fetchLiveData() { + setTimeout(() => { this.setNewStateTime(new Date()); - this.setState({ liveMap: event.target.value }); - } + }, liveDataInterval); } + renderControlPanel() { return (
-
- this.toggleLiveMap(event)} - /> -

Time

this.setNewStateTime(newTime)} />
+
+

Live Mode

+ this.setState({ liveMap: event.target.value })} + /> +

Stops

From 050951f478169c914bec84720c347de0a49095ab Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 7 Nov 2018 21:00:58 -0800 Subject: [PATCH 03/10] adding live mode --- src/Map.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Map.jsx b/src/Map.jsx index 6be8f93..9713e92 100644 --- a/src/Map.jsx +++ b/src/Map.jsx @@ -244,7 +244,7 @@ class Map extends Component {

Live Mode

this.setState({ liveMap: event.target.value })} + onChange={() => this.setState({ liveMap: !this.state.liveMap })} />
From bfbd43bdc6a7e932b70be35e20525bce9ffc077c Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 2 Jan 2019 13:32:42 -0500 Subject: [PATCH 04/10] moving to util class --- src/Map.jsx | 60 ++--------------------------------------------------- src/Util.js | 50 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 58 deletions(-) create mode 100644 src/Util.js diff --git a/src/Map.jsx b/src/Map.jsx index 97b8571..49d6955 100644 --- a/src/Map.jsx +++ b/src/Map.jsx @@ -18,70 +18,13 @@ import { } from './Route'; import muniRoutesGeoJson from './res/muniRoutes.geo.json'; import Checkbox from './Checkbox'; - +import { Stop, sortAlphaNumeric} from './Util'; const notAlpha = /[^a-zA-Z]/g; const liveDataInterval = 15000; -/* -Sort by putting letters before numbers and treat number strings as integers. -Calling Array.prototype.sort() without a compare function sorts elements as -strings by Unicode code point order, e.g. [2, 12, 13, 9, 1, 27].sort() returns -[1, 12, 13, 2, 27, 9] -*/ -function sortAlphaNumeric(a, b) { - const aRoute = a.properties.name; - const bRoute = b.properties.name; - const aInteger = parseInt(aRoute, 10); - const bInteger = parseInt(bRoute, 10); - const aAlpha = aRoute.replace(notAlpha, ''); - const bAlpha = bRoute.replace(notAlpha, ''); - - // special case for K/T and K-OWL - if (aRoute === 'K/T' && bRoute === 'K-OWL') return -1; - if (aRoute === 'K-OWL' && bRoute === 'K/T') return 1; - - if (Number.isNaN(aInteger) && Number.isNaN(bInteger)) { - return aAlpha < bAlpha ? -1 : 1; - } else if (Number.isNaN(aInteger)) { - return -1; - } else if (Number.isNaN(bInteger)) { - return 1; - } else if (aInteger === bInteger) { - return aAlpha < bAlpha ? -1 : 1; - } - return aInteger - bInteger; -} - // make a copy of routes and sort const sortedRoutes = muniRoutesGeoJson.features.slice(0).sort(sortAlphaNumeric); -/* -* Stop class used to handle info about selected stops -*/ -class Stop { - constructor(stop) { - this.stop = stop; - } - isUndefined() { - return typeof this.stop === 'undefined'; - } - setCoordinates(coordinates) { - this.stop = { - lon: coordinates[0], - lat: coordinates[1], - }; - } - getCoordinateArray() { - return [this.stop.lon, this.stop.lat]; - } - /** - * sees if two stops are equal by evaluating their coordinates - */ - equals(stop) { - return this.stop.lon === stop.lon && this.stop.lat === stop.lat; - } -} - class Map extends Component { constructor() { super(); @@ -125,6 +68,7 @@ class Map extends Component { startTime: Number(newStateTime) - 15000, endTime: Number(newStateTime), agency: 'muni', + }, null, (err) => { diff --git a/src/Util.js b/src/Util.js new file mode 100644 index 0000000..da1b403 --- /dev/null +++ b/src/Util.js @@ -0,0 +1,50 @@ +/* +* Stop class used to handle info about selected stops +*/ +export class Stop { + constructor(stop) { + this.stop = stop; + } + isUndefined() { + return typeof this.stop === 'undefined'; + } + setCoordinates(coordinates) { + this.stop = { + lon: coordinates[0], + lat: coordinates[1], + }; + } + getCoordinateArray() { + return [this.stop.lon, this.stop.lat]; + } + /** + * sees if two stops are equal by evaluating their coordinates + */ + equals(stop) { + return this.stop.lon === stop.lon && this.stop.lat === stop.lat; + } +} + +export function sortAlphaNumeric(a, b) { + const aRoute = a.properties.name; + const bRoute = b.properties.name; + const aInteger = parseInt(aRoute, 10); + const bInteger = parseInt(bRoute, 10); + const aAlpha = aRoute.replace(notAlpha, ''); + const bAlpha = bRoute.replace(notAlpha, ''); + + // special case for K/T and K-OWL + if (aRoute === 'K/T' && bRoute === 'K-OWL') return -1; + if (aRoute === 'K-OWL' && bRoute === 'K/T') return 1; + + if (Number.isNaN(aInteger) && Number.isNaN(bInteger)) { + return aAlpha < bAlpha ? -1 : 1; + } else if (Number.isNaN(aInteger)) { + return -1; + } else if (Number.isNaN(bInteger)) { + return 1; + } else if (aInteger === bInteger) { + return aAlpha < bAlpha ? -1 : 1; + } + return aInteger - bInteger; +} \ No newline at end of file From 71fd32dd484748086f526e54c704aa2ff32ffe23 Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 2 Jan 2019 13:57:16 -0500 Subject: [PATCH 05/10] moving to util class --- src/Map.jsx | 4 ++-- src/Util.js | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Map.jsx b/src/Map.jsx index 49d6955..486860d 100644 --- a/src/Map.jsx +++ b/src/Map.jsx @@ -18,8 +18,8 @@ import { } from './Route'; import muniRoutesGeoJson from './res/muniRoutes.geo.json'; import Checkbox from './Checkbox'; -import { Stop, sortAlphaNumeric} from './Util'; -const notAlpha = /[^a-zA-Z]/g; +import { Stop, sortAlphaNumeric } from './Util'; + const liveDataInterval = 15000; // make a copy of routes and sort diff --git a/src/Util.js b/src/Util.js index da1b403..5a29008 100644 --- a/src/Util.js +++ b/src/Util.js @@ -26,6 +26,7 @@ export class Stop { } export function sortAlphaNumeric(a, b) { + const notAlpha = /[^a-zA-Z]/g; const aRoute = a.properties.name; const bRoute = b.properties.name; const aInteger = parseInt(aRoute, 10); @@ -47,4 +48,4 @@ export function sortAlphaNumeric(a, b) { return aAlpha < bAlpha ? -1 : 1; } return aInteger - bInteger; -} \ No newline at end of file +} From 0e9f8ea26033c644abcaf15abf0042529d52734e Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 2 Jan 2019 14:17:18 -0500 Subject: [PATCH 06/10] cleaning up merge --- src/ControlPanel.jsx | 43 ++++++--------------------- src/Map.jsx | 69 ++------------------------------------------ 2 files changed, 11 insertions(+), 101 deletions(-) diff --git a/src/ControlPanel.jsx b/src/ControlPanel.jsx index c53634c..61b9507 100644 --- a/src/ControlPanel.jsx +++ b/src/ControlPanel.jsx @@ -4,40 +4,7 @@ import Toggle from 'react-toggle'; import propTypes from 'prop-types'; import Checkbox from './Checkbox'; import muniRoutesGeoJson from './res/muniRoutes.geo.json'; -// import Map from './Map'; - -const notAlpha = /[^a-zA-Z]/g; - -/* -Sort by putting letters before numbers and treat number strings as integers. -Calling Array.prototype.sort() without a compare function sorts elements as -strings by Unicode code point order, e.g. [2, 12, 13, 9, 1, 27].sort() returns -[1, 12, 13, 2, 27, 9] -*/ -function sortAlphaNumeric(a, b) { - const aRoute = a.properties.name; - const bRoute = b.properties.name; - const aInteger = parseInt(aRoute, 10); - const bInteger = parseInt(bRoute, 10); - const aAlpha = aRoute.replace(notAlpha, ''); - const bAlpha = bRoute.replace(notAlpha, ''); - - // special case for K/T and K-OWL - if (aRoute === 'K/T' && bRoute === 'K-OWL') return -1; - if (aRoute === 'K-OWL' && bRoute === 'K/T') return 1; - - if (Number.isNaN(aInteger) && Number.isNaN(bInteger)) { - return aAlpha < bAlpha ? -1 : 1; - } else if (Number.isNaN(aInteger)) { - return -1; - } else if (Number.isNaN(bInteger)) { - return 1; - } else if (aInteger === bInteger) { - return aAlpha < bAlpha ? -1 : 1; - } - return aInteger - bInteger; -} - +import { sortAlphaNumeric } from './Util'; // make a copy of routes and sort const sortedRoutes = muniRoutesGeoJson.features.slice(0).sort(sortAlphaNumeric); @@ -47,6 +14,7 @@ class ControlPanel extends Component { super(); this.state = { currentStateTime: new Date(Date.now()), + liveMap: false, }; } @@ -78,6 +46,13 @@ class ControlPanel extends Component { onChange={newTime => this.setNewStateTime(newTime)} />
+
+

Live Mode

+ this.setState({ liveMap: !this.state.liveMap })} + /> +

Stops

{ - if (err) { - console.warn(err); - } - }, - { force: true }, - ); - } /** * given the two selected stop sids, returns a line segment * between them @@ -172,47 +148,6 @@ class Map extends Component { }, liveDataInterval); } - renderControlPanel() { - return ( -
-
-

Time

- this.setNewStateTime(newTime)} - /> -
-
-

Live Mode

- this.setState({ liveMap: !this.state.liveMap })} - /> -
-
-

Stops

- this.setState({ showStops: !this.state.showStops })} - /> -
-
-

Routes

-
-
    - {sortedRoutes.map(route => ( - this.filterRoutes(checkedRoute)} - key={route.id} - /> - ))} -
-
- ); - } - renderMap() { const onViewportChange = viewport => this.setState({ viewport }); const { trynState } = this.props.trynState || {}; From 8e52c4da916178152e0a99a42d3ff98d6f9ee449 Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 16 Jan 2019 19:26:58 -0800 Subject: [PATCH 07/10] saving control panel work --- src/ControlPanel.jsx | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/ControlPanel.jsx b/src/ControlPanel.jsx index 61b9507..af01206 100644 --- a/src/ControlPanel.jsx +++ b/src/ControlPanel.jsx @@ -15,27 +15,23 @@ class ControlPanel extends Component { this.state = { currentStateTime: new Date(Date.now()), liveMap: false, + liveDataInterval:15000, }; } setNewStateTime(newStateTime) { + const {fetchLiveData} = this.props; this.setState({ currentStateTime: newStateTime }); - this.props.relay.refetch( - { - startTime: Number(newStateTime) - 15000, - endTime: Number(newStateTime), - agency: 'muni', - }, - null, - (err) => { - if (err) { - console.warn(err); - } - }, - { force: true }, - ); - } + fetchLiveData(new Date()); + handleLiveData(newStateTime) { + const {liveDataInterval,liveMap} = this.state; + const {fetchLiveData} = this.props; + this.setState({ liveData: !liveData,currentStateTime:newStateTime }); + setTimeout(() => { + fetchLiveData(new Date()); + }, liveDataInterval); + } render() { return (
@@ -50,7 +46,7 @@ class ControlPanel extends Component {

Live Mode

this.setState({ liveMap: !this.state.liveMap })} + onChange={() =>this.handleLiveData} />
From 8a1d36078fa7dc555d8067759fbe79b4cb4f9a10 Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 16 Jan 2019 21:20:52 -0800 Subject: [PATCH 08/10] pushing changes --- src/ControlPanel.jsx | 29 ++++++++++-------- src/Map.jsx | 73 ++++++++++++++++++++++++++++++++++++-------- 2 files changed, 76 insertions(+), 26 deletions(-) diff --git a/src/ControlPanel.jsx b/src/ControlPanel.jsx index af01206..bbb1e5b 100644 --- a/src/ControlPanel.jsx +++ b/src/ControlPanel.jsx @@ -8,6 +8,7 @@ import { sortAlphaNumeric } from './Util'; // make a copy of routes and sort const sortedRoutes = muniRoutesGeoJson.features.slice(0).sort(sortAlphaNumeric); +const liveDataInterval = 15000; class ControlPanel extends Component { constructor() { @@ -15,24 +16,25 @@ class ControlPanel extends Component { this.state = { currentStateTime: new Date(Date.now()), liveMap: false, - liveDataInterval:15000, }; } setNewStateTime(newStateTime) { - const {fetchLiveData} = this.props; this.setState({ currentStateTime: newStateTime }); - fetchLiveData(new Date()); + this.props.fetchData(newStateTime, liveDataInterval); + } - handleLiveData(newStateTime) { - const {liveDataInterval,liveMap} = this.state; - const {fetchLiveData} = this.props; - this.setState({ liveData: !liveData,currentStateTime:newStateTime }); + handleLiveData() { setTimeout(() => { - fetchLiveData(new Date()); + this.setNewStateTime(new Date()); }, liveDataInterval); } + render() { + const { liveMap } = this.state; + if (liveMap) { + this.handleLiveData(); + } return (
@@ -46,14 +48,14 @@ class ControlPanel extends Component {

Live Mode

this.handleLiveData} + onChange={() => this.setState({ liveMap: !liveMap })} />

Stops

this.setState({ showStops: !this.state.showStops })} + onChange={() => this.props.toggleStops()} />
@@ -64,7 +66,7 @@ class ControlPanel extends Component { this.props.filter(checkedRoute)} + handleCheckboxChange={checkedRoute => this.props.filterRoutes(checkedRoute)} key={route.id} /> ))} @@ -75,8 +77,9 @@ class ControlPanel extends Component { } ControlPanel.propTypes = { - relay: propTypes.element.isRequired, - filter: propTypes.element.isRequired, + filterRoutes: propTypes.element.isRequired, + toggleStops: propTypes.element.isRequired, + fetchData: propTypes.element.isRequired, }; export default ControlPanel; diff --git a/src/Map.jsx b/src/Map.jsx index 1c7a579..be8c09e 100644 --- a/src/Map.jsx +++ b/src/Map.jsx @@ -14,15 +14,40 @@ import { getVehicleMarkersLayer, getSubRoutesLayer, } from './Route'; -import { Stop } from './Util'; import ControlPanel from './ControlPanel'; -const liveDataInterval = 15000; +/* +* Stop class used to handle info about selected stops +*/ +class Stop { + constructor(stop) { + this.stop = stop; + } + isUndefined() { + return typeof this.stop === 'undefined'; + } + setCoordinates(coordinates) { + this.stop = { + lon: coordinates[0], + lat: coordinates[1], + }; + } + getCoordinateArray() { + return [this.stop.lon, this.stop.lat]; + } + /** + * sees if two stops are equal by evaluating their coordinates + */ + equals(stop) { + return this.stop.lon === stop.lon && this.stop.lat === stop.lat; + } +} class Map extends Component { constructor() { super(); this.filterRoutes = this.filterRoutes.bind(this); + this.toggleStops = this.toggleStops.bind(this); this.state = { // Viewport settings that is shared between mapbox and deck.gl viewport: { @@ -94,7 +119,6 @@ class Map extends Component { } if (stops.length === 0 || (stops.length === 1 && !stops[0].equals(stopInfo))) { - console.log(`Stop Sid: ${stopInfo.sid}`); stops.push(stopInfo); } if (stops.length === 2) { @@ -142,10 +166,25 @@ class Map extends Component { }; this.setState({ geojson: newGeojson }); } - fetchLiveData() { - setTimeout(() => { - this.setNewStateTime(new Date()); - }, liveDataInterval); + + toggleStops() { + this.setState({ showStops: !this.state.showStops }); + } + fetchData(newStateTime, liveDataInterval) { + this.props.relay.refetch( + { + startTime: Number(newStateTime) - liveDataInterval, + endTime: Number(newStateTime), + agency: 'muni', + }, + null, + (err) => { + if (err) { + console.warn(err); + } + }, + { force: true }, + ); } renderMap() { @@ -156,11 +195,17 @@ class Map extends Component { viewport, geojson, subroute, selectedStops, } = this.state; const subRouteLayer = subroute && getSubRoutesLayer(subroute); + // selectedRouteNames comes from GeoJSON file const selectedRouteNames = new Set(); this.selectedRoutes .forEach(route => selectedRouteNames.add(route.properties.name)); + // maps API route name to GeoJSON route name + const routeNameMapping = { + KT: 'K/T', + }; + // eslint-disable-next-line no-console const routeLayers = (routes || []) - .filter(route => selectedRouteNames.has(route.rid)) + .filter(route => selectedRouteNames.has(routeNameMapping[route.rid] || route.rid)) .reduce((layers, route) => [ ...layers, this.state.showStops @@ -172,6 +217,7 @@ class Map extends Component { subRouteLayer, ...getVehicleMarkersLayer(route, info => this.displayVehicleInfo(info)), ], []); + // eslint-disable-next-line no-console routeLayers.push(getRoutesLayer(geojson)); return (
@@ -217,7 +259,11 @@ class Map extends Component { {this.renderMap()}
- + this.fetchData(liveDataInterval)} + />
@@ -230,6 +276,7 @@ Map.propTypes = { propTypes.string, propTypes.arrayOf(propTypes.object), ).isRequired, + relay: propTypes.element.isRequired, }; export default createRefetchContainer( From 30f605c63d94211e5e6fd21fae56b0a4412980c8 Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 30 Jan 2019 19:28:50 -0800 Subject: [PATCH 09/10] fixing eslint spacing issue --- src/Map.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Map.jsx b/src/Map.jsx index e0d3463..455c89b 100644 --- a/src/Map.jsx +++ b/src/Map.jsx @@ -170,7 +170,7 @@ class Map extends Component { toggleStops() { this.setState({ showStops: !this.state.showStops }); } - + fetchData(newStateTime, liveDataInterval) { this.props.relay.refetch( { From e4dd89193fc0029264bbc923d40ce6a907668b1b Mon Sep 17 00:00:00 2001 From: chris Date: Sun, 3 Feb 2019 23:16:45 -0800 Subject: [PATCH 10/10] fixing syntax error. Still getting CORS --- src/Map.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Map.jsx b/src/Map.jsx index 455c89b..6d1c3ba 100644 --- a/src/Map.jsx +++ b/src/Map.jsx @@ -263,7 +263,8 @@ class Map extends Component { this.fetchData(liveDataInterval)} + fetchData={(newStateTime, liveDataInterval) => + this.fetchData(newStateTime, liveDataInterval)} />