From 38fca5a78328cf2507b35cfc59ea4345ed6edda0 Mon Sep 17 00:00:00 2001
From: ronreg-ribdev <56719257+ronreg-ribdev@users.noreply.github.com>
Date: Mon, 1 Jun 2020 02:48:17 -0700
Subject: [PATCH] Improve elevator widget

---
 src/js/components/root.js | 79 ++++++++++++++++++++++++---------------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/js/components/root.js b/src/js/components/root.js
index 8fd786b..f931642 100644
--- a/src/js/components/root.js
+++ b/src/js/components/root.js
@@ -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>
     )