Commit 6f113283 authored by Sharp Hall's avatar Sharp Hall

Try to be intelligent about which vehicles are shown

parent cfd6f545
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<head> <head>
<title>SEPTA</title> <title>SEPTA</title>
<link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bundle.js"></script> <script src="bundle.js"></script>
</head> </head>
<body> <body>
......
...@@ -8,7 +8,9 @@ import { point } from '@turf/helpers'; ...@@ -8,7 +8,9 @@ import { point } from '@turf/helpers';
import _ from 'lodash'; import _ from 'lodash';
var COMING_THRESHOLD = 90; var COMING_ANGLE = 65;
var DISTANCE_THRESHOLD = 2;
var NEAR_THRESHOLD = 0.3;
var septaRoutes = {}; var septaRoutes = {};
...@@ -17,7 +19,7 @@ var nearbyStops = []; ...@@ -17,7 +19,7 @@ var nearbyStops = [];
var selectedRoutes = []; var selectedRoutes = [];
var flatDistanceSorted = []; var flatDistanceSorted = [];
var currentLocation = {latitude: 39.948242, longitude: -75.221204}; var currentLocation = {latitude: 39.952583, longitude: -75.165222};
function milesFromObj(ref, septaObj) { function milesFromObj(ref, septaObj) {
return haversine(ref, {latitude: parseFloat(septaObj.lat), return haversine(ref, {latitude: parseFloat(septaObj.lat),
...@@ -56,13 +58,29 @@ var refreshDisplay = _.debounce(function () { ...@@ -56,13 +58,29 @@ var refreshDisplay = _.debounce(function () {
vehicle.distance = milesFromObj(currentLocation, vehicle); vehicle.distance = milesFromObj(currentLocation, vehicle);
var p = point([parseFloat(vehicle.lng), parseFloat(vehicle.lat)]); var p = point([parseFloat(vehicle.lng), parseFloat(vehicle.lat)]);
vehicle.bearing = bearing(p, here, {final: true}); vehicle.bearing = bearing(p, here, {final: true});
vehicle.coming = (vehicle.heading - vehicle.bearing + 360) % 360; vehicle.alignment = (vehicle.heading - vehicle.bearing + 360) % 360;
if (vehicle.distance < NEAR_THRESHOLD) {
vehicle.coming = vehicle.alignment < COMING_ANGLE || vehicle.alignment > 360 - COMING_ANGLE;
vehicle.going = vehicle.alignment > 180 - COMING_ANGLE && vehicle.alignment < 180 + COMING_ANGLE;
} else {
vehicle.coming = vehicle.alignment < 90 || vehicle.alignment > 270;
vehicle.going = !vehicle.coming;
}
}); });
}); });
flatDistanceSorted = _.sortBy(_.filter(_.flatten(_.values(septaRoutes)), v => { return selectedRoutes.includes(v.route) || selectedRoutes === []; }), flatDistanceSorted = _.sortBy(_.filter(_.flatten(_.values(septaRoutes)), v => { return selectedRoutes.includes(v.route) || selectedRoutes === []; }),
function (vehicle) { function (vehicle) {
return vehicle.distance; return vehicle.distance;
}); });
flatDistanceSorted = _.filter(flatDistanceSorted, (vehicle) => {
if (vehicle.distance > DISTANCE_THRESHOLD) {
return false;
}
if (vehicle.distance < NEAR_THRESHOLD) {
return true;
}
return vehicle.coming;
});
console.log(flatDistanceSorted); console.log(flatDistanceSorted);
ReactDOM.render(<VehicleList vehicleList={flatDistanceSorted} />, ReactDOM.render(<VehicleList vehicleList={flatDistanceSorted} />,
document.getElementById('routelist')); document.getElementById('routelist'));
...@@ -116,18 +134,20 @@ class Vehicle extends React.Component { ...@@ -116,18 +134,20 @@ class Vehicle extends React.Component {
} }
var nice_directions = Vehicle.NICE_DIRECTIONS[this.props.vehicleData.Direction]; var nice_directions = Vehicle.NICE_DIRECTIONS[this.props.vehicleData.Direction];
var className = "vehicle"; var className = "vehicle";
if (this.props.vehicleData.coming < COMING_THRESHOLD || var directionHint = "";
this.props.vehicleData.coming > 360 - COMING_THRESHOLD || if (this.props.vehicleData.coming) {
this.props.vehicleData.distance < 0.2) {
className += " coming"; className += " coming";
} else if (this.props.vehicleData.coming > 180 - COMING_THRESHOLD && directionHint = "incoming ";
this.props.vehicleData.coming < 180 + COMING_THRESHOLD) { } else if (this.props.vehicleData.going) {
className += " going"; className += " going";
} }
className += " route-" + this.props.vehicleData.route; className += " route-" + this.props.vehicleData.route;
return ( return (
<div className={className}> <div className={className}>
{this.props.vehicleData.VehicleID} {this.props.vehicleData.route} {nice_directions} {distance} away towards {this.props.vehicleData.destination} <div className="route-identifier">{this.props.vehicleData.route}</div>
<div className="route-distance">{directionHint}{distance} away</div>
<div className="route-directions">{nice_directions} towards {this.props.vehicleData.destination}</div>
<div className="route-vehicle-id">{this.props.vehicleData.VehicleID}</div>
</div> </div>
); );
} }
......
@import url('https://fonts.googleapis.com/css?family=Manjari&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manjari&display=swap');
body { body {
background: #888888; background: #222222;
font-family: 'Manjari', sans-serif; font-family: 'Manjari', sans-serif;
} }
.vehicle { .vehicle {
margin: 4px; margin: 4px;
padding: 4px; padding: 4px;
background: #dddddd; background: #cccccc;
vertical-align:center;
overflow:auto;
} }
.coming { .coming {
...@@ -29,3 +32,12 @@ body { ...@@ -29,3 +32,12 @@ body {
.route-NHSL { .route-NHSL {
background: #a033b3; background: #a033b3;
} }
.vehicle {
}
.route-identifier {
float: left;
font-size: 36pt;
margin:5px;
min-width: 1.2em;
height: auto;
}
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