a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Select building, show view/edit

Browse Source
This commit is contained in:
Tom Russell 2018-09-10 23:34:56 +01:00
parent 6a150ba6f9
commit 05604e32b6
7 changed files with 105 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/src/frontend/app.js
View File

@ -3,35 +3,45 @@ import { Route, Switch } from 'react-router-dom';
import AboutPage from './about'; import AboutPage from './about';
import BetaBanner from './beta-banner'; import BetaBanner from './beta-banner';
import Header from './header'; import BuildingEdit from './building-edit';
import Login from './login'; import BuildingView from './building-view';
import ColouringMap from './map'; 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 SignUp from './signup';
import Welcome from './welcome'; import Welcome from './welcome';
import Legend from './legend';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css'; import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './main.css' import './main.css'
import MyAccountPage from './my-account';
class App extends React.Component { class App extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { user: props.user }; this.state = {
user: props.user,
building: props.building,
};
this.login = this.login.bind(this); this.login = this.login.bind(this);
this.logout = this.logout.bind(this); this.logout = this.logout.bind(this);
this.selectBuilding = this.selectBuilding.bind(this);
} }
login(user) { login(user) {
console.log(user)
this.setState({user: user}); this.setState({user: user});
} }
logout(user) { logout() {
this.setState({user: undefined}); this.setState({user: undefined});
} }
selectBuilding(building) {
console.log(building)
this.setState({building: building})
}
render() { render() {
return ( return (
<Fragment> <Fragment>
@ -39,15 +49,23 @@ class App extends React.Component {
<Header user={this.state.user} /> <Header user={this.state.user} />
<main className="beta"> <main className="beta">
<Switch> <Switch>
<Route path="/(maps)?(/\w+)?(.html)?" render={props => ( <Route path="/(map|building)?(/\w+)?(.html)?" render={props => (
<Fragment> <Fragment>
<Switch> <Switch>
<Route exact path="/"> <Route exact path="/">
<Welcome /> <Welcome />
</Route> </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> </Switch>
<ColouringMap {...props} /> <ColouringMap {...props}
building={this.state.building}
selectBuilding={this.selectBuilding} />
</Fragment> </Fragment>
) } /> ) } />
<Route exact path="/about.html" component={AboutPage} /> <Route exact path="/about.html" component={AboutPage} />

35
app/src/frontend/building-edit.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
const BuildingEdit = () => ( const BuildingEdit = (props) => (
<div id="legend" className="info-container"> <div id="legend" className="info-container">
<h2 className="h2">Edit building data</h2> <h2 className="h2">Edit building data</h2>
<form action="building-view.html" method="GET"> <form action="building-view.html" method="GET">
@ -10,17 +11,17 @@ const BuildingEdit = () => (
data-toggle="collapse" data-toggle="collapse"
data-target="#data-list-location">Location</legend> data-target="#data-list-location">Location</legend>
<div id="data-list-location" className="data-list collapse show"> <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="" /> <input className="form-control" type="text" value="" />
<label for="">Building number</label> <label htmlFor="">Building number</label>
<input className="form-control" type="text" value="" /> <input className="form-control" type="text" value="" />
<label for="">Street</label> <label htmlFor="">Street</label>
<input className="form-control" type="text" value="" /> <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="" /> <input className="form-control" type="text" value="" />
<label for="">Town</label> <label htmlFor="">Town</label>
<input className="form-control" type="text" value="" /> <input className="form-control" type="text" value="" />
<label for="">Postcode</label> <label htmlFor="">Postcode</label>
<input className="form-control" type="text" value="" /> <input className="form-control" type="text" value="" />
</div> </div>
</fieldset> </fieldset>
@ -30,15 +31,15 @@ const BuildingEdit = () => (
data-toggle="collapse" data-toggle="collapse"
data-target="#data-list-age">Age</legend> data-target="#data-list-age">Age</legend>
<div id="data-list-age" className="data-list collapse"> <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" /> <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" /> <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" /> <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="" /> <input className="form-control" type="number" step="1" value="" />
<label for="">Source</label> <label htmlFor="">Source</label>
<input className="form-control" type="text" /> <input className="form-control" type="text" />
</div> </div>
</fieldset> </fieldset>
@ -48,11 +49,11 @@ const BuildingEdit = () => (
data-toggle="collapse" data-toggle="collapse"
data-target="#data-list-size">Size</legend> data-target="#data-list-size">Size</legend>
<div id="data-list-size" className="data-list collapse"> <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" /> <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" /> <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" /> <input className="form-control" type="number" step="1" value="1" />
</div> </div>
</fieldset> </fieldset>
@ -62,14 +63,14 @@ const BuildingEdit = () => (
data-toggle="collapse" data-toggle="collapse"
data-target="#data-list-like">Like Me!</legend> data-target="#data-list-like">Like Me!</legend>
<div id="data-list-like" className="data-list collapse"> <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"> <div className="form-check">
<input className="form-check-input position-static" type="checkbox" checked /> <input className="form-check-input position-static" type="checkbox" checked />
</div> </div>
</div> </div>
</fieldset> </fieldset>
<div className="buttons-container"> <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> <button type="submit" className="btn btn-primary">Save</button>
</div> </div>
</form> </form>

59
app/src/frontend/building-view.js
View File

@ -1,30 +1,31 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
const BuildingView = () => ( const BuildingView = (props) => (
<div id="legend" class="info-container"> <div id="legend" className="info-container">
<h2 class="h2">Building data</h2> <h2 className="h2">Building data</h2>
<section class="data-section"> <section className="data-section">
<h3 class="h3 bullet-prefix location toggled-on" <h3 className="h3 bullet-prefix location toggled-on"
data-toggle="collapse" data-toggle="collapse"
data-target="#data-list-location"> data-target="#data-list-location">
Location Location
</h3> </h3>
<p class="data-intro"> <p className="data-intro">
Section introduction of up to roughly 100 characters will take Section introduction of up to roughly 100 characters will take
approx&shy;imately this much space. approx&shy;imately this much space.
<a href="#">Read more</a>. <a href="#">Read more</a>.
</p> </p>
<dl id="data-list-location" class="data-list collapse show"> <dl id="data-list-location" className="data-list collapse show">
<dt> <dt>
Building Name Building Name
<span class="tooltip-hook" data-toggle="tooltip"> <span className="tooltip-hook" data-toggle="tooltip">
? ?
<div class="tooltip bs-tooltip-bottom"> <div className="tooltip bs-tooltip-bottom">
<div class="arrow"></div> <div className="arrow"></div>
<div class="tooltip-inner"> <div className="tooltip-inner">
Hint tooltip content should be ~40 chars. Hint tooltip content should be ~40 chars.
@ -32,24 +33,24 @@ const BuildingView = () => (
</div> </div>
</span> </span>
</dt> </dt>
<dd><span class="no-data">no data</span></dd> <dd><span className="no-data">no data</span></dd>
<dt>Building Number</dt> <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> <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> <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> <dt>Town</dt>
<dd><span class="no-data">no data</span></dd> <dd><span className="no-data">no data</span></dd>
<dt>Postcode</dt> <dt>Postcode</dt>
<dd><span class="no-data">no data</span></dd> <dd><span className="no-data">no data</span></dd>
</dl> </dl>
</section> </section>
<section class="data-section"> <section className="data-section">
<h3 class="h3 bullet-prefix age" <h3 className="h3 bullet-prefix age"
data-toggle="collapse" data-toggle="collapse"
data-target="#data-list-age">Age</h3> 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> <dt>Year built (best estimate)</dt>
<dd>2018</dd> <dd>2018</dd>
<dt>Year built (lower estimate)</dt> <dt>Year built (lower estimate)</dt>
@ -62,11 +63,11 @@ const BuildingView = () => (
<dd>2018</dd> <dd>2018</dd>
</dl> </dl>
</section> </section>
<section class="data-section"> <section className="data-section">
<h3 class="h3 bullet-prefix size" <h3 className="h3 bullet-prefix size"
data-toggle="collapse" data-toggle="collapse"
data-target="#data-list-size">Size</h3> 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> <dt>Attic storeys</dt>
<dd>0</dd> <dd>0</dd>
<dt>Core storeys</dt> <dt>Core storeys</dt>
@ -75,18 +76,18 @@ const BuildingView = () => (
<dd>1</dd> <dd>1</dd>
</dl> </dl>
</section> </section>
<section class="data-section"> <section className="data-section">
<h3 class="h3 bullet-prefix like" <h3 className="h3 bullet-prefix like"
data-toggle="collapse" data-toggle="collapse"
data-target="#data-list-like">Like Me!</h3> 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> <dt>Likes</dt>
<dd> 25</dd> <dd> 25</dd>
</dl> </dl>
</section> </section>
<div class="buttons-container"> <div className="buttons-container">
<a href="/maps" class="btn btn-secondary">Back to maps</a> <Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
<a href="/building/id/edit" class="btn btn-primary">Edit data</a> <Link to={`/building/${props.id}/edit.html`} className="btn btn-primary">Edit data</Link>
</div> </div>
</div> </div>
); );

4
app/src/frontend/header.js
View File

@ -15,7 +15,7 @@ function Header(props) {
<Logo /> <Logo />
<ul className="navbar-nav ml-auto"> <ul className="navbar-nav ml-auto">
<li className="nav-item"> <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>
<li className="nav-item"> <li className="nav-item">
<NavLink to="/about.html" className="nav-link">About</NavLink> <NavLink to="/about.html" className="nav-link">About</NavLink>
@ -34,7 +34,7 @@ function Header(props) {
<Logo /> <Logo />
<ul className="navbar-nav ml-auto"> <ul className="navbar-nav ml-auto">
<li className="nav-item"> <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>
<li className="nav-item"> <li className="nav-item">
<NavLink to="/about.html" className="nav-link">About</NavLink> <NavLink to="/about.html" className="nav-link">About</NavLink>

10
app/src/frontend/legend.js
View File

@ -64,7 +64,7 @@ const LegendItem = (props) => (
const LegendSection = (props) => ( const LegendSection = (props) => (
<Fragment> <Fragment>
<dt> <dt>
<Link to={`/maps/${ props.slug }.html`}>{ props.label }</Link> <Link to={`/map/${ props.slug }.html`}>{ props.label }</Link>
</dt> </dt>
<dd> <dd>
<ul className="data-legend"> <ul className="data-legend">
@ -76,7 +76,7 @@ const LegendSection = (props) => (
const LegendGroup = (props) => ( const LegendGroup = (props) => (
<div className="data-section"> <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> <h3 className={`h3 bullet-prefix ${ props.slug }`}>{ props.label }</h3>
</Link> </Link>
<dl className="data-list"> <dl className="data-list">
@ -97,15 +97,15 @@ class Legend extends Component {
<h2 className="h2">Maps</h2> <h2 className="h2">Maps</h2>
{ {
data_map.map((data_group) => ( data_map.map((data_group) => (
<LegendGroup {...data_group}> <LegendGroup {...data_group} key={data_group.slug}>
{ {
( data_layer.match(data_group.slug) ) ( data_layer.match(data_group.slug) )
? data_group.elements.map((data_section) => ( ? data_group.elements.map((data_section) => (
<LegendSection {...data_section}> <LegendSection {...data_section} key={data_section.slug}>
{ {
( data_layer.match(data_section.slug) ) ( data_layer.match(data_section.slug) )
? data_section.elements.map((data_item) => ( ? data_section.elements.map((data_item) => (
<LegendItem {...data_item} /> <LegendItem {...data_item} key={data_item.color} />
)) ))
: null : null
} }

33
app/src/frontend/map.js
View File

@ -16,8 +16,7 @@ class ColouringMap extends Component {
this.state = { this.state = {
lat: 51.5245255, lat: 51.5245255,
lng: -0.1338422, lng: -0.1338422,
zoom: 16, zoom: 16
highlight: undefined
}; };
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);
} }
@ -26,26 +25,34 @@ class ColouringMap extends Component {
var lat = e.latlng.lat var lat = e.latlng.lat
var lng = e.latlng.lng var lng = e.latlng.lng
fetch( fetch(
'/buildings?lat='+lat+'&lng='+lng '/buildings.json?lat='+lat+'&lng='+lng
).then( ).then(
(res) => res.json() (res) => res.json()
).then(function(data){ ).then(function(data){
console.log(data) if (data.geometry_id && data.id){
if (data.geometry_id){ this.props.history.push(`/building/${data.id}.html`);
this.setState({highlight: data.geometry_id}); this.props.selectBuilding(data);
} else { } else {
this.setState({highlight: undefined}); // this.props.selectBuilding(undefined);
} }
}.bind(this)) }.bind(this)).catch(
(err) => console.error(err)
)
} }
render() { 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; var data_layer = undefined;
if (this.props.match && this.props.match.params && this.props.match.params[1]) { if (this.props.match && this.props.match.params && this.props.match.params[1]) {
data_layer = this.props.match.params[1].replace("/", ""); data_layer = this.props.match.params[1].replace("/", "");
} else { } else {
data_layer = 'outline'; data_layer = 'date_year';
} }
const position = [this.state.lat, this.state.lng]; 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 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 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 ? ( const geometry_id = (this.props.building) ? this.props.building.geometry_id : undefined;
<TileLayer key={this.state.highlight} url={highlight} /> const highlight = `/tiles/highlight/{z}/{x}/{y}.png?highlight=${geometry_id}`
const highlightLayer = this.props.building ? (
<TileLayer key={data_layer} url={highlight} />
) : null; ) : null;
return ( return (

2
app/src/frontend/welcome.js
View File

@ -7,7 +7,7 @@ const Welcome = () => (
<div className="jumbotron welcome-float"> <div className="jumbotron welcome-float">
<h1 className="h1">Welcome to Colouring London</h1> <h1 className="h1">Welcome to Colouring London</h1>
<p className="lead">Colour in, view and download data on London's buildings</p> <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"> className="btn btn-outline-dark btn-lg btn-block">
Start Colouring Start Colouring
</Link> </Link>