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

Merge pull request #248 from tomalrussell/feature/frontend_updates

Browse Source 
Feature/frontend updates
This commit is contained in:
Tom Russell 2019-04-18 17:19:34 +01:00 committed by GitHub
commit 4283a2bdd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 118 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/public/images/supporter-logos.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

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

@ -51,7 +51,6 @@ class App extends React.Component {
}
updateUser(user){
console.log(user);
this.setState({user: { ...this.state.user, ...user }});
}

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

@ -224,6 +224,9 @@ class EditForm extends Component {
case "number":
return <NumberInput {...props} handleChange={this.handleChange}
value={this.state[props.slug]} key={props.slug} />
case "year_estimator":
return <YearEstimator {...props} handleChange={this.handleChange}
value={this.state[props.slug]} key={props.slug} />
case "text_multi":
return <MultiTextInput {...props} handleChange={this.handleUpdate}
value={this.state[props.slug]} key={props.slug} />
@ -328,7 +331,7 @@ class MultiTextInput extends Component {
<Label slug={this.props.slug} title={this.props.title} tooltip={this.props.tooltip} />
{
values.map((item, i) => (
<div class="input-group">
<div className="input-group" key={i}>
<input className="form-control" type="text"
key={`${this.props.slug}-${i}`} name={`${this.props.slug}-${i}`}
data-index={i}
@ -337,16 +340,16 @@ class MultiTextInput extends Component {
disabled={this.props.disabled}
onChange={this.edit}
/>
<div class="input-group-append">
<div className="input-group-append">
<button type="button" onClick={this.remove}
title="Remove"
data-index={i} class="btn btn-outline-dark">✕</button>
data-index={i} className="btn btn-outline-dark">✕</button>
</div>
</div>
))
}
<button type="button" title="Add" onClick={this.add}
class="btn btn-outline-dark">+</button>
className="btn btn-outline-dark">+</button>
</Fragment>
)
}
@ -383,6 +386,28 @@ const NumberInput = (props) => (
</Fragment>
);
class YearEstimator extends Component {
constructor(props) {
super(props);
this.state = {
year: props.date_year,
upper: props.date_upper,
lower: props.date_lower,
decade: Math.floor(props.date_year / 10) * 10,
century: Math.floor(props.date_year / 100) * 100
}
}
// TODO add dropdown for decade, century
// TODO roll in first/last year estimate
// TODO handle changes internally, reporting out date_year, date_upper, date_lower
render() {
return (
<NumberInput {...this.props} handleChange={this.props.handleChange}
value={this.props.value} key={this.props.slug} />
)
}
}
const CheckboxInput = (props) => (
<div className="form-check">
<input className="form-check-input" type="checkbox"
@ -409,7 +434,7 @@ const LikeButton = (props) => (
onChange={props.handleLike}
/>
<label htmlFor={props.slug} className="form-check-label">
I like this building!
I like this building and think it contributes to the city!
{ props.tooltip? <Tooltip text={ props.tooltip } /> : null }
</label>
</div>

72
app/src/frontend/fields-config.json
View File

@ -59,14 +59,20 @@
"title": "Use", "slug": "use",
"intro": "How are buildings used today? Coming soon…",
"help": "https://pages.colouring.london/use",
"fields": []
"fields": [
{ "title" : "Single of multiple use?", "slug": "use_multi" },
{ "title" : "Type of use/s", "slug": "use_type" },
{ "title" : "Number of self-contained units", "slug": "use_number_scu" }
]
},
{
"inactive": true,
"title": "Type", "slug": "type",
"intro": "How were buildings originally used? Coming soon…",
"help": "https://pages.colouring.london/type",
"fields": []
"fields": [
{ "title": "Type of building (original use)", "slug": "type_original" }
]
},
{
"title": "Age", "slug": "age",
@ -74,16 +80,16 @@
"intro": "Building age data can support energy analysis and help predict long-term change.",
"fields": [
{
"title": "Year built (best estimate)", "slug": "date_year", "type": "number", "step": 1
"title": "Year built (best estimate)", "slug": "date_year", "type": "year_estimator"
},
{
"title": "Latest possible start date", "slug": "date_upper", "type": "number", "step": 1,
"tooltip": "This should be the latest date building could have started." },
"title": "Latest possible start year", "slug": "date_upper", "type": "number", "step": 1,
"tooltip": "This should be the latest year in which building could have started." },
{
"title": "Earliest possible start date", "slug": "date_lower", "type": "number", "step": 1,
"tooltip": "This should be the earliest date building could have started." },
"tooltip": "This should be the earliest year in which building could have started." },
{
"title": "Facade date", "slug": "facade_year", "type": "number", "step": 1,
"title": "Facade year", "slug": "facade_year", "type": "number", "step": 1,
"tooltip": "Best estimate"
},
{
@ -133,6 +139,9 @@
{
"title": "Height to apex (m)", "slug": "size_height_apex", "type": "number", "step": 0.1
},
{
"title": "Height to eaves (m)", "slug": "size_height_eaves", "type": "number", "step": 0.1
},
{
"title": "Ground floor area (m²)", "slug": "size_floor_area_ground", "type": "number", "step": 0.1
},
@ -141,7 +150,11 @@
},
{
"title": "Frontage Width (m)", "slug": "size_width_frontage", "type": "number", "step": 0.1
}
},
{ "title": "Total area of plot (m²)" },
{ "title": "FAR ratio (percentage of plot covered by building" },
{ "title": "Configuration (semi/detached, end/terrace)" },
{ "title": "Roof shape" }
]
},
{
@ -149,28 +162,53 @@
"title": "Construction", "slug": "construction",
"intro": "How are buildings built? Coming soon…",
"help": "https://pages.colouring.london/construction",
"fields": []
"fields": [
{ "title": "Construction system" },
{ "title": "Primary materials" },
{ "title": "Secondary materials" },
{ "title": "Roofing material" },
{ "title": "Percentage of facade glazed" },
{ "title": "BIM reference or link" }
]
},
{
"inactive": true,
"title": "Team", "slug": "team",
"intro": "Who built the buildings? Coming soon…",
"help": "https://pages.colouring.london/team",
"fields": []
"fields": [
{ "title": "Construction and design team (original building)" },
{ "title": "Construction and design team (significant additional works)" }
]
},
{
"inactive": true,
"title": "Sustainability", "slug": "sustainability",
"intro": "Are buildings energy efficient? Coming soon…",
"help": "https://pages.colouring.london/sustainability",
"fields": []
"fields": [
{ "title": "Energy Performance Certificate (EPC) rating" },
{ "title": "Display Energy Certificate (DEC)" },
{ "title": "BREEAM Rating" },
{ "title": "Last significant retrofit" },
{ "title": "Embodied carbon estimation (for discussion)" },
{ "title": "Adaptability/repairability rating (for discussion)" },
{ "title": "Expected lifespan (for discussion)" }
]
},
{
"inactive": true,
"title": "Greenery", "slug": "greenery",
"intro": "Is there greenery nearby? Coming soon…",
"help": "https://pages.colouring.london/copy-of-street-context",
"fields": []
"fields": [
{ "title": "Gardens" },
{ "title": "Trees" },
{ "title": "Green walls" },
{ "title": "Green roof" },
{ "title": "Proximity to parks and open greenspace" },
{ "title": "Building shading" }
]
},
{
"title": "Planning", "slug": "planning",
@ -287,7 +325,12 @@
"title": "Demolition", "slug": "demolition",
"intro": "Coming soon…",
"help": "https://pages.colouring.london/demolitions",
"fields": []
"fields": [
{ "title": "Is the building proposed for demolition?" },
{ "title": "Is the building proposed for demolition?" },
{ "title": "Has the building been demolished?" },
{ "title": "Dates of construction and demolition of previous buildings on site" }
]
},
{
"title": "Like Me!", "slug": "like",
@ -295,8 +338,7 @@
"help": "https://pages.colouring.london/likeme",
"fields": [
{
"title": "Number of likes", "slug": "likes_total", "type": "like",
"tooltip": "Do you like the building and think it contributes to the city?"
"title": "Number of likes", "slug": "likes_total", "type": "like"
}
]
}

12
app/src/frontend/my-account.js
View File

@ -70,7 +70,7 @@ class MyAccountPage extends Component {
<ErrorBox msg={this.state.error} />
<form method="POST" action="/logout" onSubmit={this.handleLogout}>
<div className="buttons-container">
<Link to="/edit/age.html" className="btn btn-primary">Start colouring</Link>
<Link to="/edit/age.html" className="btn btn-warning">Start colouring</Link>
<input className="btn btn-secondary" type="submit" value="Log out"/>
</div>
</form>
@ -87,13 +87,17 @@ class MyAccountPage extends Component {
<hr/>
<h2 className="h2">Experimental features</h2>
<h2 className="h2">Techical details</h2>
<p>Are you a software developer? If so, you might be interested in these.</p>
<h3 className="h3">API key</h3>
<p>{this.props.user.api_key? this.props.user.api_key : '-'}</p>
<form method="POST" action="/api/key" onSubmit={this.handleGenerateKey}>
<input className="btn btn-primary" type="submit" value="Generate API key"/>
<form method="POST" action="/api/key" onSubmit={this.handleGenerateKey} className="form-group mb-3">
<input className="btn btn-warning" type="submit" value="Generate API key"/>
</form>
<h3 className="h3">GitHub</h3>
<a href="http://github.com/tomalrussell/colouring-london/">Colouring London Github repository</a>
</section>
</article>
);

16
app/src/frontend/overview.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import { NavLink, Redirect } from 'react-router-dom';
import Sidebar from './sidebar';
@ -33,6 +33,7 @@ const Overview = (props) => {
const OverviewSection = (props) => {
const match = props.data_layer === props.slug;
const inactive = props.inactive;
return (
<section className={(inactive? "inactive ": "") + "data-section legend"}>
<header className={`section-header ${props.mode} ${props.slug} ${(match? "active" : "")}`}>
@ -64,7 +65,18 @@ const OverviewSection = (props) => {
</header>
{
(match && props.intro)?
(<p className="data-intro">{props.intro}</p>)
(
<Fragment>
<p className="data-intro">{props.intro}</p>
<ul>
{
props.fields.map((field) => {
return (<li key={field.slug}>{field.title}</li>)
})
}
</ul>
</Fragment>
)
: null
}
</section>

4
app/src/frontend/sidebar.css
View File

@ -332,6 +332,10 @@
padding: 0 0.5rem 0 2.25rem;
margin-top: 0.5rem;
}
.data-section ul {
padding-left: 3.333rem;
font-size: 1.1rem;
}
.data-list {
margin: 0;
padding-left: 0.75rem;

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

@ -14,7 +14,7 @@ const Sidebar = (props) => (
</Link>
: null
}
<h2 className="h3">{props.title}</h2>
<h2 className="h2">{props.title}</h2>
</header>
{props.children}
</div>

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

@ -9,17 +9,17 @@ const Welcome = () => (
<p className="lead">
Colouring London is a citizen science platform collecting information on every
building in London. We're building it at the Centre for Advanced Spatial Analysis,
University College London, to help make London more sustainable.
building in London, to help make the city more sustainable.
</p>
<p className="lead">
Can you help us? We're looking for volunteers of all ages and abilities to test the
site before we launch next year. Just add your knowledge to make the buildings colour.
We're looking for volunteers of all ages and abilities to test the
site. Add your knowledge to make the buildings colour.
</p>
<Link to="/view/age.html"
className="btn btn-outline-dark btn-lg btn-block">
Start Colouring Here!
</Link>
<img src="images/supporter-logos.png" alt="Colouring London collaborating organisations: The Bartlett UCL, Ordnance Survey, Historic ENgland, GLA, bretrust, EPPSRC, RICS, Survey of London, RSA, RIBA Learning, UCL Energy Institute, UCL, UCL IEDE, IHR, Layers of London" />
</div>
);