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

Improve elevator widget

Browse Source
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 { class ElevatorWidget extends Component {
render() { render() {
return (<div> 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">
Elevator info <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>); </div>);
} }
} }
@ -39,14 +41,13 @@ class TimeScheduleWidget extends Component {
} }
} }
class RoutePlanner extends Component {
export class Root extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = store.state; this.state = {
store.setStateHandler((newState) => { fromStation: null,
this.setState(newState); toStation: null,
}); };
} }
stationSearch() { stationSearch() {
@ -64,7 +65,7 @@ export class Root extends Component {
} }
renderStationOptions() { renderStationOptions() {
const stations = this.state.stations || []; const stations = this.props.stations;
return _.map(stations, (station) => { return _.map(stations, (station) => {
const abbr = station.abbr; const abbr = station.abbr;
const name = station.name; const name = station.name;
@ -87,32 +88,48 @@ export class Root extends Component {
</form>); </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() { render() {
return ( return (
<BrowserRouter> <BrowserRouter>
<div className="absolute h-100 w-100 bg-gray0-d ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl"> <div className="absolute h-100 w-100 bg-gray0-d ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl">
<HeaderBar/> <HeaderBar/>
<Route exact path="/~bartinfo/elevators" render={ () => <ElevatorWidget/> }/> <Route exact path="/~bartinfo/elevators" render={ () => <ElevatorWidget/> }/>
<Route exact path="/~bartinfo" render={ () => { <Route exact path="/~bartinfo" render={ () =>
return ( <RoutePlanner
<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"> stations={this.state.stations || []}
<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>
)}}
/>
</div> </div>
</BrowserRouter> </BrowserRouter>
) )