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

Show detours; force reload when document becomes visible

parent 9c639a4f
<html>
<head>
<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">
</head>
<body>
<div id="app"><div class="notice">Please wait! Loading!</div>
<script src="bundle.js?1"></script>
<script src="bundle.js?2"></script>
</body>
</html>
......@@ -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 (
<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 {
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(
<VehicleList vehicleList={vehicles} routeList={selectedRoutes} />
<VehicleList detours={detours} vehicleList={vehicles} routeList={selectedRoutes} />
);
}
}
......@@ -246,6 +338,11 @@ class VehicleList extends React.Component {
:
<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 ?
<div>
{this.props.vehicleList.map(vehicle => (
......
......@@ -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;
}
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