Commit 8da93fbf authored by Sharp Hall's avatar Sharp Hall

Show detours; force reload when document becomes visible

parent 9c639a4f
<html> <html>
<head> <head>
<title>wheresepta</title> <title>wheresepta</title>
<link rel="stylesheet" href="style.css?1" type="text/css" /> <link rel="stylesheet" href="style.css?2" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<div id="app"><div class="notice">Please wait! Loading!</div> <div id="app"><div class="notice">Please wait! Loading!</div>
<script src="bundle.js?1"></script> <script src="bundle.js?2"></script>
</body> </body>
</html> </html>
...@@ -14,7 +14,7 @@ var NEAR_THRESHOLD = 0.3; ...@@ -14,7 +14,7 @@ var NEAR_THRESHOLD = 0.3;
var VEHICLE_STOP_THRESHOLD = 0.3; var VEHICLE_STOP_THRESHOLD = 0.3;
var STOP_DISTANCE_THRESHOLD = 0.2; var STOP_DISTANCE_THRESHOLD = 0.2;
var REFRESH_SECONDS = 25; var REFRESH_SECONDS = 25;
var DETOUR_RELOAD_SECONDS = 60 * 10;
var septaRoutes = {}; var septaRoutes = {};
...@@ -51,10 +51,67 @@ $(function () { ...@@ -51,10 +51,67 @@ $(function () {
function Notice(props) { function Notice(props) {
return ( return (
<div class="notice">{props.text}</div> <div className="notice">{props.text}</div>
);
}
function DetourData(props) {
return (
<div className="detour-data">
<div className="detour-data-header">{props.title}</div>
<div className="detour-data-value">{props.value}</div>
</div>
); );
} }
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 (
<div className="detour-info" key={detourInfo.current_message}>
<div className="detour-message">
{detourInfo.current_message}
</div>
{detourData.map(detourData => (<DetourData title={detourData.title}
value={detourData.value}
key={detourData.title} />))}
</div>
);
}
render() {
var className = "notice detour route-" + this.props.detour.route_id;
return (
<div className={className} onClick={this.toggle}>
<div className="detour-header">
Route {this.props.detour.route_id} detour
</div>
{this.state.opened ?
this.props.detour.route_info.map(this.renderDetour)
: <div>Tap to open.</div>}
</div>
);
}
}
class WhereSepta extends React.Component { class WhereSepta extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -63,8 +120,23 @@ class WhereSepta extends React.Component { ...@@ -63,8 +120,23 @@ class WhereSepta extends React.Component {
stops: [], stops: [],
vehicles: {}, vehicles: {},
location: null, 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() { pullNewData() {
...@@ -83,6 +155,23 @@ class WhereSepta extends React.Component { ...@@ -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() { componentDidMount() {
$.ajax({ $.ajax({
url: "stops.json", url: "stops.json",
...@@ -97,17 +186,19 @@ class WhereSepta extends React.Component { ...@@ -97,17 +186,19 @@ class WhereSepta extends React.Component {
}); });
} }
}); });
this.pullNewData(); this.refresh();
this.updateTimer = setInterval(() => this.pullNewData(), REFRESH_SECONDS * 1000);
this.geolocationWatch = navigator.geolocation.watchPosition((position) => this.setState({ this.geolocationWatch = navigator.geolocation.watchPosition((position) => this.setState({
location: {latitude: position.coords.latitude, longitude: position.coords.longitude} location: {latitude: position.coords.latitude, longitude: position.coords.longitude}
}) })
); );
document.addEventListener("visibilitychange", this.handleVisibilityChange);
} }
componentWillUnmount() { componentWillUnmount() {
clearInterval(this.updateTimer); clearInterval(this.updateTimer);
clearInterval(this.detourTimer);
navigator.geolocation.clearWatch(this.geolocationWatch); navigator.geolocation.clearWatch(this.geolocationWatch);
document.removeEventListener("visibilitychange", this.handleVisibilityChange);
} }
render() { render() {
...@@ -178,8 +269,9 @@ class WhereSepta extends React.Component { ...@@ -178,8 +269,9 @@ class WhereSepta extends React.Component {
return vehicle; return vehicle;
}) })
.value(); .value();
var detours = _.filter(this.state.detours, detour => selectedRoutes.includes(detour.route_id));
return( return(
<VehicleList vehicleList={vehicles} routeList={selectedRoutes} /> <VehicleList detours={detours} vehicleList={vehicles} routeList={selectedRoutes} />
); );
} }
} }
...@@ -246,6 +338,11 @@ class VehicleList extends React.Component { ...@@ -246,6 +338,11 @@ class VehicleList extends React.Component {
: :
<Notice text="You are not near any SEPTA stops." /> <Notice text="You are not near any SEPTA stops." />
} }
<div className="detours">
{this.props.detours.map(detour => (
<Detour detour={detour} key={detour.route_id} />
))}
</div>
{this.props.vehicleList.length > 0 ? {this.props.vehicleList.length > 0 ?
<div> <div>
{this.props.vehicleList.map(vehicle => ( {this.props.vehicleList.map(vehicle => (
......
...@@ -62,3 +62,19 @@ body { ...@@ -62,3 +62,19 @@ body {
.route-stop-name .route-distance { .route-stop-name .route-distance {
font-weight: normal; 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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment