greg
/
bart-tile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve elevator widget

This commit is contained in:
ronreg-ribdev 2020-06-01 02:48:17 -07:00
parent 3ade81e666
commit 38fca5a783
1 changed files with 48 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/js/components/root.js
View File

@ -5,8 +5,10 @@ import { HeaderBar } from "./lib/header-bar.js"
class ElevatorWidget extends Component {
render() {
return (<div>
Elevator info
return (<div className="cf w-100 flex flex-column pa4 ba-m ba-l ba-xl b--gray2 br1 h-100 h-100-minus-40-s h-100-minus-40-m h-100-minus-40-l h-100-minus-40-xl f9 white-d overflow-x-hidden">
<h1 className="mt0 f8 fw4">BART Info - Elevator status</h1>
<Link to="/~bartinfo">Route planner</Link>
No elevators are known to be out of service.
</div>);
}
}
@ -39,14 +41,13 @@ class TimeScheduleWidget extends Component {
}
}
export class Root extends Component {
class RoutePlanner extends Component {
constructor(props) {
super(props);
this.state = store.state;
store.setStateHandler((newState) => {
this.setState(newState);
});
this.state = {
fromStation: null,
toStation: null,
};
}
stationSearch() {
@ -64,7 +65,7 @@ export class Root extends Component {
}
renderStationOptions() {
const stations = this.state.stations || [];
const stations = this.props.stations;
return _.map(stations, (station) => {
const abbr = station.abbr;
const name = station.name;
@ -87,32 +88,48 @@ export class Root extends Component {
</form>);
}
render() {
return (
<div className="cf w-100 flex flex-column pa4 ba-m ba-l ba-xl b--gray2 br1 h-100 h-100-minus-40-s h-100-minus-40-m h-100-minus-40-l h-100-minus-40-xl f9 white-d overflow-x-hidden">
<h1 className="mt0 f8 fw4">BART Info</h1>
<Link to="/~bartinfo/elevators">Elevator information</Link>
<div style={{display: "grid", gridTemplateColumns: "66% 34%", gridGap: "10px" }}>
<div className="topinfo" style={{gridColumn: "1 / 2"}}>
<TimeScheduleWidget/>
</div>
<div className="map" style={{gridColumn: "1", gridRow: "2"}}>
<img src="/~bartinfo/img/BART-Map-Weekday-Saturday.png" />
</div>
<div className="searchsidebar" style={{gridColumn: "2", gridRow: "2"}}>
Search scheduled trains:
{ this.renderStationForm() }
</div>
</div>
</div>
);
}
}
export class Root extends Component {
constructor(props) {
super(props);
this.state = store.state;
store.setStateHandler((newState) => {
this.setState(newState);
});
}
render() {
return (
<BrowserRouter>
<div className="absolute h-100 w-100 bg-gray0-d ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl">
<HeaderBar/>
<Route exact path="/~bartinfo/elevators" render={ () => <ElevatorWidget/> }/>
<Route exact path="/~bartinfo" render={ () => {
return (
<div className="cf w-100 flex flex-column pa4 ba-m ba-l ba-xl b--gray2 br1 h-100 h-100-minus-40-s h-100-minus-40-m h-100-minus-40-l h-100-minus-40-xl f9 white-d overflow-x-hidden">
<h1 className="mt0 f8 fw4">BART Info</h1>
<Link to="/~bartinfo/elevators">Elevator information</Link>
<div style={{display: "grid", gridTemplateColumns: "66% 34%", gridGap: "10px" }}>
<div className="topinfo" style={{gridColumn: "1 / 2"}}>
<TimeScheduleWidget/>
</div>
<div className="map" style={{gridColumn: "1", gridRow: "2"}}>
<img src="/~bartinfo/img/BART-Map-Weekday-Saturday.png" />
</div>
<div className="searchsidebar" style={{gridColumn: "2", gridRow: "2"}}>
Search scheduled trains:
{ this.renderStationForm() }
</div>
</div>
</div>
)}}
/>
<HeaderBar/>
<Route exact path="/~bartinfo/elevators" render={ () => <ElevatorWidget/> }/>
<Route exact path="/~bartinfo" render={ () =>
<RoutePlanner
stations={this.state.stations || []}
/> } />
</div>
</BrowserRouter>
)