diff --git a/index.html b/index.html index d6695b628e8e6fb3bf73748e70fa7001f33bde31..1afc275377d71531bd6bd21a4c435fd06daeb094 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,11 @@ wheresepta - +
Please wait! Loading!
- + diff --git a/main.js b/main.js index 0375bc7552836d58b0775e878d4cc1b52875547d..483dadcd4c6612843f870898be7ef922c05877e4 100644 --- a/main.js +++ b/main.js @@ -14,7 +14,7 @@ var NEAR_THRESHOLD = 0.3; var VEHICLE_STOP_THRESHOLD = 0.3; var STOP_DISTANCE_THRESHOLD = 0.2; var REFRESH_SECONDS = 25; - +var DETOUR_RELOAD_SECONDS = 60 * 10; var septaRoutes = {}; @@ -51,10 +51,67 @@ $(function () { function Notice(props) { return ( -
{props.text}
+
{props.text}
+ ); +} + +function DetourData(props) { + return ( +
+
{props.title}
+
{props.value}
+
); } +class Detour extends React.Component { + constructor(props) { + super(props); + this.state = { opened: false } + this.toggle = this.toggle.bind(this); + } + + toggle() { + this.setState({ opened: !this.state.opened }); + } + + + renderDetour(detourInfo) { + var detourData = _.filter([ + {title: "Direction", value: detourInfo.route_direction}, + {title: "Reason", value: detourInfo.reason}, + {title: "Start Location", value: detourInfo.start_location}, + {title: "End Location", value: detourInfo.end_location}, + {title: "Start Date/Time", value: detourInfo.start_date_time}, + {title: "End Date/Time", value: detourInfo.end_date_time}, + ], x => (x.value !== "")); + return ( +
+
+ {detourInfo.current_message} +
+ {detourData.map(detourData => ())} +
+ ); + } + + render() { + var className = "notice detour route-" + this.props.detour.route_id; + return ( +
+
+ Route {this.props.detour.route_id} detour +
+ {this.state.opened ? + this.props.detour.route_info.map(this.renderDetour) + :
Tap to open.
} +
+ ); + } +} + class WhereSepta extends React.Component { constructor(props) { super(props); @@ -63,8 +120,23 @@ class WhereSepta extends React.Component { stops: [], vehicles: {}, location: null, - loaded: false + loaded: false, + detours: [] }; + this.handleVisibilityChange = this.handleVisibilityChange.bind(this); + } + + refresh() { + if(this.updateTimer) { + clearInterval(this.updateTimer); + } + if(this.detourTimer) { + clearInterval(this.detourTimer); + } + this.pullNewData(); + this.loadDetours(); + this.updateTimer = setInterval(() => this.pullNewData(), REFRESH_SECONDS * 1000); + this.detourTimer = setInterval(() => this.loadDetours(), DETOUR_RELOAD_SECONDS * 1000); } pullNewData() { @@ -83,6 +155,23 @@ class WhereSepta extends React.Component { } } + loadDetours() { + $.ajax({ + url: "https://www3.septa.org/hackathon/BusDetours/", + jsonp: "callback", + dataType: "jsonp", + success: (newData) => { + this.setState({ + detours: newData + }) + } + }) + } + + handleVisibilityChange() { + if (document.visibilityState == "visible") { this.refresh() }; + } + componentDidMount() { $.ajax({ url: "stops.json", @@ -97,17 +186,19 @@ class WhereSepta extends React.Component { }); } }); - this.pullNewData(); - this.updateTimer = setInterval(() => this.pullNewData(), REFRESH_SECONDS * 1000); + this.refresh(); this.geolocationWatch = navigator.geolocation.watchPosition((position) => this.setState({ location: {latitude: position.coords.latitude, longitude: position.coords.longitude} }) ); + document.addEventListener("visibilitychange", this.handleVisibilityChange); } componentWillUnmount() { clearInterval(this.updateTimer); + clearInterval(this.detourTimer); navigator.geolocation.clearWatch(this.geolocationWatch); + document.removeEventListener("visibilitychange", this.handleVisibilityChange); } render() { @@ -178,8 +269,9 @@ class WhereSepta extends React.Component { return vehicle; }) .value(); + var detours = _.filter(this.state.detours, detour => selectedRoutes.includes(detour.route_id)); return( - + ); } } @@ -246,6 +338,11 @@ class VehicleList extends React.Component { : } +
+ {this.props.detours.map(detour => ( + + ))} +
{this.props.vehicleList.length > 0 ?
{this.props.vehicleList.map(vehicle => ( diff --git a/style.css b/style.css index 2b44e37ca4adb8ea828714dc428967b77e4851a1..07cff508bbe3fed221413b56a24feed97e247de6 100644 --- a/style.css +++ b/style.css @@ -62,3 +62,19 @@ body { .route-stop-name .route-distance { font-weight: normal; } + +.detour-header { + font-weight: bold; +} +.detour-info { + padding:4px; + background:#ffffff; + border: 2px #000000 solid; + margin: 4px; +} +.detour-data { + margin: 4px; +} +.detour-data-header { + font-weight: bold; +}