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 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} />

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

@ -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>

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

@ -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>
);

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

@ -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>

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

@ -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
}

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

@ -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 (

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

@ -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>