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