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 @@
<head>
<title>SEPTA</title>
<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>
</head>
<body>
......
......@@ -8,7 +8,9 @@ import { point } from '@turf/helpers';
import _ from 'lodash';
var COMING_THRESHOLD = 90;
var COMING_ANGLE = 65;
var DISTANCE_THRESHOLD = 2;
var NEAR_THRESHOLD = 0.3;
var septaRoutes = {};
......@@ -17,7 +19,7 @@ var nearbyStops = [];
var selectedRoutes = [];
var flatDistanceSorted = [];
var currentLocation = {latitude: 39.948242, longitude: -75.221204};
var currentLocation = {latitude: 39.952583, longitude: -75.165222};
function milesFromObj(ref, septaObj) {
return haversine(ref, {latitude: parseFloat(septaObj.lat),
......@@ -56,13 +58,29 @@ var refreshDisplay = _.debounce(function () {
vehicle.distance = milesFromObj(currentLocation, vehicle);
var p = point([parseFloat(vehicle.lng), parseFloat(vehicle.lat)]);
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 === []; }),
function (vehicle) {
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);
ReactDOM.render(<VehicleList vehicleList={flatDistanceSorted} />,
document.getElementById('routelist'));
......@@ -116,18 +134,20 @@ class Vehicle extends React.Component {
}
var nice_directions = Vehicle.NICE_DIRECTIONS[this.props.vehicleData.Direction];
var className = "vehicle";
if (this.props.vehicleData.coming < COMING_THRESHOLD ||
this.props.vehicleData.coming > 360 - COMING_THRESHOLD ||
this.props.vehicleData.distance < 0.2) {
var directionHint = "";
if (this.props.vehicleData.coming) {
className += " coming";
} else if (this.props.vehicleData.coming > 180 - COMING_THRESHOLD &&
this.props.vehicleData.coming < 180 + COMING_THRESHOLD) {
directionHint = "incoming ";
} else if (this.props.vehicleData.going) {
className += " going";
}
className += " route-" + this.props.vehicleData.route;
return (
<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>
);
}
......
@import url('https://fonts.googleapis.com/css?family=Manjari&display=swap');
body {
background: #888888;
background: #222222;
font-family: 'Manjari', sans-serif;
}
.vehicle {
margin: 4px;
padding: 4px;
background: #dddddd;
background: #cccccc;
vertical-align:center;
overflow:auto;
}
.coming {
......@@ -29,3 +32,12 @@ body {
.route-NHSL {
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