From 05604e32b6f18b0cd45a4459c5ff6cbca0276f03 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Mon, 10 Sep 2018 23:34:56 +0100
Subject: [PATCH] Select building, show view/edit

---
 app/src/frontend/app.js           | 38 ++++++++++++++------
 app/src/frontend/building-edit.js | 35 +++++++++---------
 app/src/frontend/building-view.js | 59 ++++++++++++++++---------------
 app/src/frontend/header.js        |  4 +--
 app/src/frontend/legend.js        | 10 +++---
 app/src/frontend/map.js           | 33 ++++++++++-------
 app/src/frontend/welcome.js       |  2 +-
 7 files changed, 105 insertions(+), 76 deletions(-)

diff --git a/app/src/frontend/app.js b/app/src/frontend/app.js
index 13e4f557..b2080e3f 100644
--- a/app/src/frontend/app.js
+++ b/app/src/frontend/app.js
@@ -3,35 +3,45 @@ import { Route, Switch } from 'react-router-dom';
 
 import AboutPage from './about';
 import BetaBanner from './beta-banner';
-import Header from './header';
-import Login from './login';
+import BuildingEdit from './building-edit';
+import BuildingView from './building-view';
 import ColouringMap from './map';
+import Header from './header';
+import Legend from './legend';
+import Login from './login';
+import MyAccountPage from './my-account';
 import SignUp from './signup';
 import Welcome from './welcome';
-import Legend from './legend';
 
 import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import './main.css'
-import MyAccountPage from './my-account';
 
 
 class App extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { user: props.user };
+        this.state = {
+            user: props.user,
+            building: props.building,
+        };
         this.login = this.login.bind(this);
         this.logout = this.logout.bind(this);
+        this.selectBuilding = this.selectBuilding.bind(this);
     }
 
     login(user) {
-        console.log(user)
         this.setState({user: user});
     }
 
-    logout(user) {
+    logout() {
         this.setState({user: undefined});
     }
 
+    selectBuilding(building) {
+        console.log(building)
+        this.setState({building: building})
+    }
+
     render() {
         return (
             <Fragment>
@@ -39,15 +49,23 @@ class App extends React.Component {
                 <Header user={this.state.user} />
                 <main className="beta">
                     <Switch>
-                        <Route path="/(maps)?(/\w+)?(.html)?" render={props => (
+                        <Route path="/(map|building)?(/\w+)?(.html)?" render={props => (
                             <Fragment>
                                 <Switch>
                                     <Route exact path="/">
                                         <Welcome />
                                     </Route>
-                                    <Route exact path="/maps/:map.html" component={Legend} />
+                                    <Route exact path="/map/:map.html" component={Legend} />
+                                    <Route exact path="/building/:building.html">
+                                        <BuildingView {...this.state.building} />
+                                    </Route>
+                                    <Route exact path="/building/:building/edit.html">
+                                        <BuildingEdit {...this.state.building} />
+                                    </Route>
                                 </Switch>
-                                <ColouringMap {...props} />
+                                <ColouringMap {...props}
+                                              building={this.state.building}
+                                              selectBuilding={this.selectBuilding} />
                             </Fragment>
                         ) } />
                         <Route exact path="/about.html" component={AboutPage} />
diff --git a/app/src/frontend/building-edit.js b/app/src/frontend/building-edit.js
index c9c4aaac..c2cb5b48 100644
--- a/app/src/frontend/building-edit.js
+++ b/app/src/frontend/building-edit.js
@@ -1,6 +1,7 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
-const BuildingEdit = () => (
+const BuildingEdit = (props) => (
   <div id="legend" className="info-container">
     <h2 className="h2">Edit building data</h2>
     <form action="building-view.html" method="GET">
@@ -10,17 +11,17 @@ const BuildingEdit = () => (
                 data-toggle="collapse"
                 data-target="#data-list-location">Location</legend>
             <div id="data-list-location" className="data-list collapse show">
-                <label for="">Building name</label>
+                <label htmlFor="">Building name</label>
                 <input className="form-control" type="text" value="" />
-                <label for="">Building number</label>
+                <label htmlFor="">Building number</label>
                 <input className="form-control" type="text" value="" />
-                <label for="">Street</label>
+                <label htmlFor="">Street</label>
                 <input className="form-control" type="text" value="" />
-                <label for="">Address line 2</label>
+                <label htmlFor="">Address line 2</label>
                 <input className="form-control" type="text" value="" />
-                <label for="">Town</label>
+                <label htmlFor="">Town</label>
                 <input className="form-control" type="text" value="" />
-                <label for="">Postcode</label>
+                <label htmlFor="">Postcode</label>
                 <input className="form-control" type="text" value="" />
             </div>
         </fieldset>
@@ -30,15 +31,15 @@ const BuildingEdit = () => (
                 data-toggle="collapse"
                 data-target="#data-list-age">Age</legend>
             <div id="data-list-age" className="data-list collapse">
-                <label for="">Year built (best estimate)</label>
+                <label htmlFor="">Year built (best estimate)</label>
                 <input className="form-control" type="number" step="1" value="2018" />
-                <label for="">Year built (upper estimate)</label>
+                <label htmlFor="">Year built (upper estimate)</label>
                 <input className="form-control" type="number" step="1" value="2018" />
-                <label for="">Year built (lower estimate)</label>
+                <label htmlFor="">Year built (lower estimate)</label>
                 <input className="form-control" type="number" step="1" value="2018" />
-                <label for="">Facade date</label>
+                <label htmlFor="">Facade date</label>
                 <input className="form-control" type="number" step="1" value="" />
-                <label for="">Source</label>
+                <label htmlFor="">Source</label>
                 <input className="form-control" type="text" />
             </div>
         </fieldset>
@@ -48,11 +49,11 @@ const BuildingEdit = () => (
                 data-toggle="collapse"
                 data-target="#data-list-size">Size</legend>
             <div id="data-list-size" className="data-list collapse">
-                <label for="">Attic storeys</label>
+                <label htmlFor="">Attic storeys</label>
                 <input className="form-control" type="number" step="1" value="0" />
-                <label for="">Core storeys</label>
+                <label htmlFor="">Core storeys</label>
                 <input className="form-control" type="number" step="1" value="3" />
-                <label for="">Basement storeys</label>
+                <label htmlFor="">Basement storeys</label>
                 <input className="form-control" type="number" step="1" value="1" />
             </div>
         </fieldset>
@@ -62,14 +63,14 @@ const BuildingEdit = () => (
                 data-toggle="collapse"
                 data-target="#data-list-like">Like Me!</legend>
             <div id="data-list-like" className="data-list collapse">
-                <label for="">Like this building?</label>
+                <label htmlFor="">Like this building?</label>
                 <div className="form-check">
                 <input className="form-check-input position-static" type="checkbox" checked />
                 </div>
             </div>
         </fieldset>
         <div className="buttons-container">
-            <a href="/building/id" className="btn btn-secondary">Cancel</a>
+            <Link to={`/building/${props.id}.html`} className="btn btn-secondary">Cancel</Link>
             <button type="submit" className="btn btn-primary">Save</button>
         </div>
     </form>
diff --git a/app/src/frontend/building-view.js b/app/src/frontend/building-view.js
index dfd501fd..e947b3aa 100644
--- a/app/src/frontend/building-view.js
+++ b/app/src/frontend/building-view.js
@@ -1,30 +1,31 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
-const BuildingView = () => (
-    <div id="legend" class="info-container">
-        <h2 class="h2">Building data</h2>
-        <section class="data-section">
-            <h3 class="h3 bullet-prefix location toggled-on"
+const BuildingView = (props) => (
+    <div id="legend" className="info-container">
+        <h2 className="h2">Building data</h2>
+        <section className="data-section">
+            <h3 className="h3 bullet-prefix location toggled-on"
                 data-toggle="collapse"
                 data-target="#data-list-location">
                 Location
             </h3>
-            <p class="data-intro">
+            <p className="data-intro">
 
                 Section introduction of up to roughly 100 characters will take
                 approx&shy;imately this much space.
 
                 <a href="#">Read more</a>.
             </p>
-            <dl id="data-list-location" class="data-list collapse show">
+            <dl id="data-list-location" className="data-list collapse show">
             <dt>
                 Building Name
 
-                <span class="tooltip-hook" data-toggle="tooltip">
+                <span className="tooltip-hook" data-toggle="tooltip">
                     ?
-                    <div class="tooltip bs-tooltip-bottom">
-                        <div class="arrow"></div>
-                        <div class="tooltip-inner">
+                    <div className="tooltip bs-tooltip-bottom">
+                        <div className="arrow"></div>
+                        <div className="tooltip-inner">
 
                         Hint tooltip content should be ~40 chars.
 
@@ -32,24 +33,24 @@ const BuildingView = () => (
                     </div>
                 </span>
             </dt>
-            <dd><span class="no-data">no data</span></dd>
+            <dd><span className="no-data">no data</span></dd>
             <dt>Building Number</dt>
-            <dd><span class="no-data">no data</span></dd>
+            <dd><span className="no-data">no data</span></dd>
             <dt>Street</dt>
-            <dd><span class="no-data">no data</span></dd>
+            <dd><span className="no-data">no data</span></dd>
             <dt>Address line 2</dt>
-            <dd><span class="no-data">no data</span></dd>
+            <dd><span className="no-data">no data</span></dd>
             <dt>Town</dt>
-            <dd><span class="no-data">no data</span></dd>
+            <dd><span className="no-data">no data</span></dd>
             <dt>Postcode</dt>
-            <dd><span class="no-data">no data</span></dd>
+            <dd><span className="no-data">no data</span></dd>
             </dl>
         </section>
-        <section class="data-section">
-            <h3 class="h3 bullet-prefix age"
+        <section className="data-section">
+            <h3 className="h3 bullet-prefix age"
                 data-toggle="collapse"
                 data-target="#data-list-age">Age</h3>
-            <dl id="data-list-age" class="data-list collapse">
+            <dl id="data-list-age" className="data-list collapse">
             <dt>Year built (best estimate)</dt>
             <dd>2018</dd>
             <dt>Year built (lower estimate)</dt>
@@ -62,11 +63,11 @@ const BuildingView = () => (
             <dd>2018</dd>
             </dl>
         </section>
-        <section class="data-section">
-            <h3 class="h3 bullet-prefix size"
+        <section className="data-section">
+            <h3 className="h3 bullet-prefix size"
                 data-toggle="collapse"
                 data-target="#data-list-size">Size</h3>
-            <dl id="data-list-size" class="data-list collapse">
+            <dl id="data-list-size" className="data-list collapse">
             <dt>Attic storeys</dt>
             <dd>0</dd>
             <dt>Core storeys</dt>
@@ -75,18 +76,18 @@ const BuildingView = () => (
             <dd>1</dd>
             </dl>
         </section>
-        <section class="data-section">
-            <h3 class="h3 bullet-prefix like"
+        <section className="data-section">
+            <h3 className="h3 bullet-prefix like"
                 data-toggle="collapse"
                 data-target="#data-list-like">Like Me!</h3>
-            <dl id="data-list-like" class="data-list collapse">
+            <dl id="data-list-like" className="data-list collapse">
             <dt>Likes</dt>
             <dd> 25</dd>
             </dl>
         </section>
-        <div class="buttons-container">
-            <a href="/maps" class="btn btn-secondary">Back to maps</a>
-            <a href="/building/id/edit" class="btn btn-primary">Edit data</a>
+        <div className="buttons-container">
+            <Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
+            <Link to={`/building/${props.id}/edit.html`} className="btn btn-primary">Edit data</Link>
         </div>
     </div>
 );
diff --git a/app/src/frontend/header.js b/app/src/frontend/header.js
index 25440d17..898dbe78 100644
--- a/app/src/frontend/header.js
+++ b/app/src/frontend/header.js
@@ -15,7 +15,7 @@ function Header(props) {
                     <Logo />
                     <ul className="navbar-nav ml-auto">
                         <li className="nav-item">
-                            <NavLink to="/maps/date_year.html" className="nav-link">View Maps</NavLink>
+                            <NavLink to="/map/date_year.html" className="nav-link">View Maps</NavLink>
                         </li>
                         <li className="nav-item">
                             <NavLink to="/about.html" className="nav-link">About</NavLink>
@@ -34,7 +34,7 @@ function Header(props) {
                     <Logo />
                     <ul className="navbar-nav ml-auto">
                         <li className="nav-item">
-                            <NavLink to="/maps.html" className="nav-link">View Maps</NavLink>
+                            <NavLink to="/map/date_year.html" className="nav-link">View Maps</NavLink>
                         </li>
                         <li className="nav-item">
                             <NavLink to="/about.html" className="nav-link">About</NavLink>
diff --git a/app/src/frontend/legend.js b/app/src/frontend/legend.js
index bccb9360..bc98375f 100644
--- a/app/src/frontend/legend.js
+++ b/app/src/frontend/legend.js
@@ -64,7 +64,7 @@ const LegendItem = (props) => (
 const LegendSection = (props) => (
     <Fragment>
         <dt>
-            <Link to={`/maps/${ props.slug }.html`}>{ props.label }</Link>
+            <Link to={`/map/${ props.slug }.html`}>{ props.label }</Link>
         </dt>
         <dd>
             <ul className="data-legend">
@@ -76,7 +76,7 @@ const LegendSection = (props) => (
 
 const LegendGroup = (props) => (
     <div className="data-section">
-        <Link to={`/maps/${ props.slug }.html`}>
+        <Link to={`/map/${ props.slug }.html`}>
             <h3 className={`h3 bullet-prefix ${ props.slug }`}>{ props.label }</h3>
         </Link>
         <dl className="data-list">
@@ -97,15 +97,15 @@ class Legend extends Component {
                 <h2 className="h2">Maps</h2>
                 {
                     data_map.map((data_group) => (
-                        <LegendGroup {...data_group}>
+                        <LegendGroup {...data_group} key={data_group.slug}>
                             {
                                 ( data_layer.match(data_group.slug) )
                                 ? data_group.elements.map((data_section) => (
-                                    <LegendSection {...data_section}>
+                                    <LegendSection {...data_section} key={data_section.slug}>
                                         {
                                             ( data_layer.match(data_section.slug) )
                                             ? data_section.elements.map((data_item) => (
-                                                <LegendItem {...data_item} />
+                                                <LegendItem {...data_item} key={data_item.color} />
                                             ))
                                             : null
                                         }
diff --git a/app/src/frontend/map.js b/app/src/frontend/map.js
index 53fafda5..debd4f73 100644
--- a/app/src/frontend/map.js
+++ b/app/src/frontend/map.js
@@ -16,8 +16,7 @@ class ColouringMap extends Component {
         this.state = {
             lat: 51.5245255,
             lng: -0.1338422,
-            zoom: 16,
-            highlight: undefined
+            zoom: 16
         };
         this.handleClick = this.handleClick.bind(this);
     }
@@ -26,26 +25,34 @@ class ColouringMap extends Component {
         var lat = e.latlng.lat
         var lng = e.latlng.lng
         fetch(
-            '/buildings?lat='+lat+'&lng='+lng
+            '/buildings.json?lat='+lat+'&lng='+lng
         ).then(
             (res) => res.json()
         ).then(function(data){
-            console.log(data)
-            if (data.geometry_id){
-                this.setState({highlight: data.geometry_id});
+            if (data.geometry_id && data.id){
+                this.props.history.push(`/building/${data.id}.html`);
+                this.props.selectBuilding(data);
             } else {
-                this.setState({highlight: undefined});
+                // this.props.selectBuilding(undefined);
             }
-        }.bind(this))
+        }.bind(this)).catch(
+            (err) => console.error(err)
+        )
     }
 
     render() {
+        var map_type = undefined;
+        if (this.props.match && this.props.match.params && this.props.match.params[0]) {
+            map_type = this.props.match.params[0].replace("/", "");
+        } else {
+            map_type = 'maps';
+        }
 
         var data_layer = undefined;
         if (this.props.match && this.props.match.params && this.props.match.params[1]) {
             data_layer = this.props.match.params[1].replace("/", "");
         } else {
-            data_layer = 'outline';
+            data_layer = 'date_year';
         }
 
         const position = [this.state.lat, this.state.lng];
@@ -56,9 +63,11 @@ class ColouringMap extends Component {
         const attribution = 'Building attribute data is © Colouring London contributors. Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines.'
 
         const colour = `/tiles/${data_layer}/{z}/{x}/{y}.png`;
-        const highlight = `/tiles/highlight/{z}/{x}/{y}.png?highlight=${this.state.highlight}`
-        const highlightLayer = this.state.highlight ? (
-            <TileLayer key={this.state.highlight} url={highlight} />
+
+        const geometry_id = (this.props.building) ? this.props.building.geometry_id : undefined;
+        const highlight = `/tiles/highlight/{z}/{x}/{y}.png?highlight=${geometry_id}`
+        const highlightLayer = this.props.building ? (
+            <TileLayer key={data_layer} url={highlight} />
         ) : null;
 
         return (
diff --git a/app/src/frontend/welcome.js b/app/src/frontend/welcome.js
index 5dd65d76..85a21aca 100644
--- a/app/src/frontend/welcome.js
+++ b/app/src/frontend/welcome.js
@@ -7,7 +7,7 @@ const Welcome = () => (
     <div className="jumbotron welcome-float">
         <h1 className="h1">Welcome to Colouring London</h1>
         <p className="lead">Colour in, view and download data on London's buildings</p>
-        <Link to="/maps/date_year.html"
+        <Link to="/map/date_year.html"
               className="btn btn-outline-dark btn-lg btn-block">
             Start Colouring
         </Link>