From 30e4cf29121f8a018dc188f39c34b811d71fb58a Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Tue, 11 Sep 2018 20:59:59 +0100
Subject: [PATCH] Data-driven building edit and view

---
 app/src/frontend/building-edit.js | 295 ++++++++++++++++++++++--------
 app/src/frontend/building-view.js | 109 +++++------
 2 files changed, 264 insertions(+), 140 deletions(-)

diff --git a/app/src/frontend/building-edit.js b/app/src/frontend/building-edit.js
index c2cb5b48..9394dc56 100644
--- a/app/src/frontend/building-edit.js
+++ b/app/src/frontend/building-edit.js
@@ -1,80 +1,223 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
+import Sidebar from './sidebar';
 
-const BuildingEdit = (props) => (
-  <div id="legend" className="info-container">
-    <h2 className="h2">Edit building data</h2>
-    <form action="building-view.html" method="GET">
-        <fieldset className="data-section">
-            <legend
-                className="h3 bullet-prefix location toggled-on"
-                data-toggle="collapse"
-                data-target="#data-list-location">Location</legend>
-            <div id="data-list-location" className="data-list collapse show">
-                <label htmlFor="">Building name</label>
-                <input className="form-control" type="text" value="" />
-                <label htmlFor="">Building number</label>
-                <input className="form-control" type="text" value="" />
-                <label htmlFor="">Street</label>
-                <input className="form-control" type="text" value="" />
-                <label htmlFor="">Address line 2</label>
-                <input className="form-control" type="text" value="" />
-                <label htmlFor="">Town</label>
-                <input className="form-control" type="text" value="" />
-                <label htmlFor="">Postcode</label>
-                <input className="form-control" type="text" value="" />
-            </div>
-        </fieldset>
-        <fieldset className="data-section">
-            <legend
-                className="h3 bullet-prefix age"
-                data-toggle="collapse"
-                data-target="#data-list-age">Age</legend>
-            <div id="data-list-age" className="data-list collapse">
-                <label htmlFor="">Year built (best estimate)</label>
-                <input className="form-control" type="number" step="1" value="2018" />
-                <label htmlFor="">Year built (upper estimate)</label>
-                <input className="form-control" type="number" step="1" value="2018" />
-                <label htmlFor="">Year built (lower estimate)</label>
-                <input className="form-control" type="number" step="1" value="2018" />
-                <label htmlFor="">Facade date</label>
-                <input className="form-control" type="number" step="1" value="" />
-                <label htmlFor="">Source</label>
-                <input className="form-control" type="text" />
-            </div>
-        </fieldset>
-        <fieldset className="data-section">
-            <legend
-                className="h3 bullet-prefix size"
-                data-toggle="collapse"
-                data-target="#data-list-size">Size</legend>
-            <div id="data-list-size" className="data-list collapse">
-                <label htmlFor="">Attic storeys</label>
-                <input className="form-control" type="number" step="1" value="0" />
-                <label htmlFor="">Core storeys</label>
-                <input className="form-control" type="number" step="1" value="3" />
-                <label htmlFor="">Basement storeys</label>
-                <input className="form-control" type="number" step="1" value="1" />
-            </div>
-        </fieldset>
-        <fieldset className="data-section">
-            <legend
-                className="h3 bullet-prefix like"
-                data-toggle="collapse"
-                data-target="#data-list-like">Like Me!</legend>
-            <div id="data-list-like" className="data-list collapse">
-                <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">
-            <Link to={`/building/${props.id}.html`} className="btn btn-secondary">Cancel</Link>
-            <button type="submit" className="btn btn-primary">Save</button>
-        </div>
-    </form>
-    </div>
-);
+class BuildingEdit extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            location_name: props.location_name,
+            location_number: props.location_number,
+            location_line_two: props.location_line_two,
+            location_street: props.location_street,
+            location_postcode: props.location_postcode,
+            date_year: props.date_year,
+            date_lower: props.date_lower,
+            date_upper: props.date_upper,
+            date_source: props.date_source,
+            date_facade: props.date_facade,
+            size_attic: props.size_attic,
+            size_core: props.size_core,
+            size_basement: props.size_basement,
+            likes: props.likes || [],
+            liked: this.user_likes(props.user_id, props.likes)
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleLike = this.handleLike.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    user_likes(user_id, likes) {
+        return likes && likes.indexOf(user_id) !== -1;
+    }
+
+    handleChange(event) {
+        const target = event.target;
+        const value = target.value;
+        const name = target.name;
+
+        this.setState({
+            [name]: value
+        });
+    }
+
+    handleLike(event) {
+        const liked = event.target.checked;
+        const likes = this.state.likes || [];
+        if (liked) {
+            this.setState({
+                likes: likes.concat([this.props.user_id]),
+                liked: true
+            });
+        } else {
+            this.setState({
+                likes: likes.filter(id => id !== this.props.user_id),
+                liked: false
+            });
+        }
+    }
+
+    handleSubmit(event) {
+        event.preventDefault();
+        fetch(`/building/${this.props.id}`, {
+            method: 'POST',
+            body: JSON.stringify(this.state),
+            headers:{
+              'Content-Type': 'application/json'
+            }
+        }).then(
+            res => res.json()
+        ).then(function(res){
+            if (res.error) {
+                console.error(res.error);  // tell user
+            } else {
+                console.log(res);  // redirect back
+            }
+        }).catch(
+            err => console.error(err)
+        );
+    }
+
+    render() {
+        return (
+            <Sidebar title="Edit building data">
+                <form action="building-view.html" method="GET" onSubmit={this.handleSubmit}>
+                    <fieldset className="data-section">
+                        <legend className="h3 bullet-prefix location toggled-on">Location</legend>
+                        <div id="data-list-location" className="data-list">
+
+                            <label htmlFor="location_name">Building name</label>
+                            <input className="form-control" type="text"
+                                   id="location_name" name="location_name"
+                                   value={this.state.location_name}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="location_number">Building number</label>
+                            <input className="form-control" type="text"
+                                   id="location_number" name="location_number"
+                                   value={this.state.location_number}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="location_street">Street</label>
+                            <input className="form-control" type="text"
+                                   id="location_street" name="location_street"
+                                   value={this.state.location_street}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="location_line_two">Address line 2</label>
+                            <input className="form-control" type="text"
+                                   id="location_line_two" name="location_line_two"
+                                   value={this.state.location_line_two}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="location_town">Town</label>
+                            <input className="form-control" type="text"
+                                   id="location_town" name="location_town"
+                                   value={this.state.location_town}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="location_postcode">Postcode</label>
+                            <input className="form-control" type="text"
+                                   id="location_postcode" name="location_postcode"
+                                   value={this.state.location_postcode}
+                                   onChange={this.handleChange}
+                                   />
+
+                        </div>
+                    </fieldset>
+                    <fieldset className="data-section">
+                        <legend className="h3 bullet-prefix age">Age</legend>
+                        <div id="data-list-age" className="data-list">
+
+                            <label htmlFor="date_year">Year built (best estimate)</label>
+                            <input className="form-control" type="number" step="1"
+                                   id="date_year" name="date_year"
+                                   value={this.state.date_year}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="date_upper">Year built (upper estimate)</label>
+                            <input className="form-control" type="number" step="1"
+                                   id="date_upper" name="date_upper"
+                                   value={this.state.date_upper}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="date_lower">Year built (lower estimate)</label>
+                            <input className="form-control" type="number" step="1"
+                                   id="date_lower" name="date_lower"
+                                   value={this.state.date_lower}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="date_facade">Facade date</label>
+                            <input className="form-control" type="number" step="1"
+                                   id="date_facade" name="date_facade"
+                                   value={this.state.date_facade}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="date_source">Source</label>
+                            <input className="form-control" type="text"
+                                   id="date_source" name="date_source"
+                                   value={this.state.date_source}
+                                   onChange={this.handleChange}
+                                   />
+                        </div>
+                    </fieldset>
+                    <fieldset className="data-section">
+                        <legend className="h3 bullet-prefix size">Size</legend>
+                        <div id="data-list-size" className="data-list">
+
+                            <label htmlFor="size_attic">Attic storeys</label>
+                            <input className="form-control" type="number" step="1"
+                                   id="size_attic" name="size_attic"
+                                   value={this.state.size_attic}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="size_core">Core storeys</label>
+                            <input className="form-control" type="number" step="1"
+                                   id="size_core" name="size_core"
+                                   value={this.state.size_core}
+                                   onChange={this.handleChange}
+                                   />
+
+                            <label htmlFor="size_basement">Basement storeys</label>
+                            <input className="form-control" type="number" step="1"
+                                   id="size_basement" name="size_basement"
+                                   value={this.state.size_basement}
+                                   onChange={this.handleChange}
+                                   />
+                        </div>
+                    </fieldset>
+                    <fieldset className="data-section">
+                        <legend className="h3 bullet-prefix like">Like Me!</legend>
+                        <div id="data-list-like" className="data-list">
+                            <label htmlFor="likes">Like this building?</label>
+                            <div className="form-check">
+                                <input className="form-check-input position-static"
+                                       type="checkbox"
+                                       checked={this.state.liked}
+                                       onChange={this.handleLike}
+                                       />
+                            </div>
+                        </div>
+                    </fieldset>
+                    <div className="buttons-container">
+                        <Link to={`/building/${this.props.id}.html`} className="btn btn-secondary">Cancel</Link>
+                        <button type="submit" className="btn btn-primary">Save</button>
+                    </div>
+                </form>
+            </Sidebar>
+        );
+    }
+}
 
 export default BuildingEdit;
diff --git a/app/src/frontend/building-view.js b/app/src/frontend/building-view.js
index e947b3aa..fceac3a9 100644
--- a/app/src/frontend/building-view.js
+++ b/app/src/frontend/building-view.js
@@ -1,15 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import Sidebar from './sidebar';
+import Tooltip from './tooltip';
+
 const BuildingView = (props) => (
-    <div id="legend" className="info-container">
-        <h2 className="h2">Building data</h2>
+    <Sidebar title="Building data">
         <section className="data-section">
-            <h3 className="h3 bullet-prefix location toggled-on"
-                data-toggle="collapse"
-                data-target="#data-list-location">
-                Location
-            </h3>
+            <h3 className="h3 bullet-prefix location">Location</h3>
             <p className="data-intro">
 
                 Section introduction of up to roughly 100 characters will take
@@ -18,78 +16,61 @@ const BuildingView = (props) => (
                 <a href="#">Read more</a>.
             </p>
             <dl id="data-list-location" className="data-list collapse show">
-            <dt>
-                Building Name
-
-                <span className="tooltip-hook" data-toggle="tooltip">
-                    ?
-                    <div className="tooltip bs-tooltip-bottom">
-                        <div className="arrow"></div>
-                        <div className="tooltip-inner">
-
-                        Hint tooltip content should be ~40 chars.
-
-                        </div>
-                    </div>
-                </span>
-            </dt>
-            <dd><span className="no-data">no data</span></dd>
-            <dt>Building Number</dt>
-            <dd><span className="no-data">no data</span></dd>
-            <dt>Street</dt>
-            <dd><span className="no-data">no data</span></dd>
-            <dt>Address line 2</dt>
-            <dd><span className="no-data">no data</span></dd>
-            <dt>Town</dt>
-            <dd><span className="no-data">no data</span></dd>
-            <dt>Postcode</dt>
-            <dd><span className="no-data">no data</span></dd>
+                <dt>
+                    Building Name
+                    <Tooltip text="Hint tooltip content should be ~40 chars." />
+                </dt>
+                <dd>{props.location_name ? props.location_name : '-'}</dd>
+                <dt>Building Number</dt>
+                <dd>{props.location_number ? props.location_number : '-'}</dd>
+                <dt>Street</dt>
+                <dd>{props.location_street ? props.location_street : '-'}</dd>
+                <dt>Address line 2</dt>
+                <dd>{props.location_line_two ? props.location_line_two : '-'}</dd>
+                <dt>Town</dt>
+                <dd>{props.location_town ? props.location_town : '-'}</dd>
+                <dt>Postcode</dt>
+                <dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
             </dl>
         </section>
         <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" className="data-list collapse">
-            <dt>Year built (best estimate)</dt>
-            <dd>2018</dd>
-            <dt>Year built (lower estimate)</dt>
-            <dd>2018</dd>
-            <dt>Year built (upper estimate)</dt>
-            <dd>2018</dd>
-            <dt>Date Source</dt>
-            <dd>Pevsner</dd>
-            <dt>Facade date</dt>
-            <dd>2018</dd>
+            <h3 className="h3 bullet-prefix age">Age</h3>
+            <dl className="data-list">
+                <dt>Year built (best estimate)</dt>
+                <dd>{props.date_year? props.date_year : '-'}</dd>
+                <dt>Year built (lower estimate)</dt>
+                <dd>{props.date_lower? props.date_lower : '-'}</dd>
+                <dt>Year built (upper estimate)</dt>
+                <dd>{props.date_upper? props.date_upper : '-'}</dd>
+                <dt>Date Source</dt>
+                <dd>{props.date_source? props.date_source : '-'}</dd>
+                <dt>Facade date</dt>
+                <dd>{props.date_facade? props.date_facade : '-'}</dd>
             </dl>
         </section>
         <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" className="data-list collapse">
-            <dt>Attic storeys</dt>
-            <dd>0</dd>
-            <dt>Core storeys</dt>
-            <dd>3</dd>
-            <dt>Basement storeys</dt>
-            <dd>1</dd>
+            <h3 className="h3 bullet-prefix size">Size</h3>
+            <dl className="data-list">
+                <dt>Attic storeys</dt>
+                <dd>{props.size_attic? props.size_attic : '-'}</dd>
+                <dt>Core storeys</dt>
+                <dd>{props.size_core? props.size_core : '-'}</dd>
+                <dt>Basement storeys</dt>
+                <dd>{props.size_basement? props.size_basement : '-'}</dd>
             </dl>
         </section>
         <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" className="data-list collapse">
-            <dt>Likes</dt>
-            <dd> 25</dd>
+            <h3 className="h3 bullet-prefix like">Like Me!</h3>
+            <dl className="data-list">
+                <dt>Likes</dt>
+                <dd>{props.likes ? props.likes.length : 0}</dd>
             </dl>
         </section>
         <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>
+    </Sidebar>
 );
 
 export default BuildingView;