Commit add43955 authored by Sharp Hall's avatar Sharp Hall

Add loading notice. Use query params to force reload of script, style

parent 8525192a
<html>
<head>
<title>wheresepta</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="style.css?1" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bundle.js"></script>
</head>
<body>
<div id="app"></div>
<div id="app"><div class="notice">Please wait! Loading!</div>
<script src="bundle.js?1"></script>
</body>
</html>
......@@ -55,7 +55,8 @@ class WhereSepta extends React.Component {
routeInfo: {},
stops: [],
vehicles: {},
location: null
location: null,
loaded: false
};
}
......@@ -67,7 +68,8 @@ class WhereSepta extends React.Component {
dataType: "jsonp",
success: (newData) => {
this.setState({
vehicles: markRoutes(newData.routes[0])
vehicles: markRoutes(newData.routes[0]),
loaded: true
});
}
});
......@@ -106,6 +108,9 @@ class WhereSepta extends React.Component {
if (location === null) {
return(<LocationSharingNotice />);
}
if (!this.state.loaded) {
return(<div className="notice">Please wait! Loading!</div>);
}
var here = point([location.longitude, location.latitude]);
// find close stops
var selectedRoutes = _.chain(this.state.stops)
......@@ -166,8 +171,9 @@ class WhereSepta extends React.Component {
return vehicle;
})
.value();
return(<VehicleList vehicleList={vehicles} routeList={selectedRoutes} />);
return(
<VehicleList vehicleList={vehicles} routeList={selectedRoutes} />
);
}
}
......@@ -201,7 +207,9 @@ class Vehicle extends React.Component {
<div className={className}>
<div className="route-identifier">{this.props.vehicleData.route}</div>
{ this.props.vehicleData.stopName ?
<div className="route-stop-name">{this.props.vehicleData.stopName}</div>
<div className="route-stop-name">{this.props.vehicleData.stopName + ' '}
<span className="route-distance">({distance})</span>
</div>
: <div className="route-distance">{directionHint}{distance} away</div>
}
<div className="route-directions">{nice_directions} towards {this.props.vehicleData.destination}</div>
......@@ -221,7 +229,7 @@ class VehicleList extends React.Component {
<div>
<div id="route-list">
{routeMarkers.map(routeMarker => (
<span className={routeMarker.className}>{routeMarker.routeName}</span>
<span className={routeMarker.className} key={routeMarker.routeName}>{routeMarker.routeName}</span>
))}
</div>
<div>
......
......@@ -5,7 +5,7 @@ body {
font-family: 'Montserrat', sans-serif;
}
.vehicle, .locationSharingNotice {
.vehicle, .locationSharingNotice, .notice {
margin: 4px;
padding: 4px;
background: #cccccc;
......@@ -57,4 +57,8 @@ body {
margin:5px;
min-width: 1.5em;
height: auto;
font-weight: bold;
}
.route-stop-name .route-distance {
font-weight: normal;
}
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