Factor building view/edit structure to shared config
This commit is contained in:
Tom Russell
parent
3539e1126c
commit
1ce5eb8f69
@ -5,52 +5,8 @@ import ErrorBox from './error-box';
|
||||
import InfoBox from './info-box';
|
||||
import Sidebar from './sidebar';
|
||||
|
||||
const CONFIG = [
|
||||
{
|
||||
title: "Location", slug: "location", fields: [
|
||||
{ title: "Building name", slug: "location_name", type: "text" },
|
||||
{ title: "Building number", slug: "location_number", type: "text" },
|
||||
{ title: "Street", slug: "location_street", type: "text" },
|
||||
{ title: "Address line 2", slug: "location_line_two", type: "text" },
|
||||
{ title: "Town", slug: "location_town", type: "text" },
|
||||
{ title: "Postcode", slug: "location_postcode", type: "text" },
|
||||
]
|
||||
},
|
||||
{ title: "Use", slug: "use", inactive: true, fields: [] },
|
||||
{ title: "Type", slug: "type", inactive: true, fields: [] },
|
||||
{
|
||||
title: "Age", slug: "age", fields: [
|
||||
{ title: "Year built (best estimate)", slug: "date_year", type: "number", step: 1 },
|
||||
{ title: "Year built (upper estimate)", slug: "date_upper", type: "number", step: 1 },
|
||||
{ title: "Year built (lower estimate)", slug: "date_lower", type: "number", step: 1 },
|
||||
{ title: "Facade date", slug: "date_facade", type: "number", step: 1 },
|
||||
{ title: "Source", slug: "date_source", type: "text" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Size", slug: "size", fields: [
|
||||
{ title: "Attic storeys", slug: "size_storeys_attic", type: "number", step: 1 },
|
||||
{ title: "Core storeys", slug: "size_storeys_core", type: "number", step: 1 },
|
||||
{ title: "Basement storeys", slug: "size_storeys_basement", type: "number", step: 1 },
|
||||
{ title: "Height to apex (m)", slug: "size_height_apex", type: "number", step: 0.1 },
|
||||
{ title: "Ground floor area (m²)", slug: "size_floor_area_ground", type: "number", step: 0.1 },
|
||||
{ title: "Total floor area (m²)", slug: "size_floor_area_total", type: "number", step: 0.1 },
|
||||
{ title: "Frontage Width (m)", slug: "size_width_frontage", type: "number", step: 0.1 },
|
||||
]
|
||||
},
|
||||
{ title: "Shape & Position", slug: "form", inactive: true, fields: [] },
|
||||
{ title: "Build Team", slug: "build-team", inactive: true, fields: [] },
|
||||
{ title: "Construction & Design", slug: "construction", inactive: true, fields: [] },
|
||||
{ title: "Energy", slug: "energy", inactive: true, fields: [] },
|
||||
{ title: "Greenery", slug: "greenery", inactive: true, fields: [] },
|
||||
{ title: "Planning & Protection", slug: "planning", inactive: true, fields: [] },
|
||||
{ title: "Demolition", slug: "demolition", inactive: true, fields: [] },
|
||||
{
|
||||
title: "Like Me!", slug: "like", fields: [
|
||||
{ title: "Like", slug: "like", type: "like" }
|
||||
]
|
||||
},
|
||||
];
|
||||
import CONFIG from './fields-config.json';
|
||||
|
||||
|
||||
class BuildingEdit extends Component {
|
||||
render() {
|
||||
|
||||
@ -6,13 +6,52 @@ import Tooltip from './tooltip';
|
||||
import InfoBox from './info-box';
|
||||
import { HelpIcon, EditIcon } from './icons';
|
||||
|
||||
import CONFIG from './fields-config.json';
|
||||
|
||||
const DataSection = function(props){
|
||||
|
||||
const BuildingView = (props) => {
|
||||
if (!props.building_id){
|
||||
return (
|
||||
<Sidebar title="Building Not Found">
|
||||
<InfoBox msg="We can't find that one anywhere - try the map again?" />
|
||||
<div className="buttons-container with-space">
|
||||
<Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
|
||||
</div>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
const hash = (props.location && props.location.hash)? props.location.hash.replace('#', ''): undefined;
|
||||
return (
|
||||
<Sidebar title={`View Building`} back="/map/date_year.html">
|
||||
{
|
||||
CONFIG.map(section_props => (
|
||||
<DataSection
|
||||
title={section_props.title} slug={section_props.slug} hash={hash}
|
||||
building_id={props.building_id}
|
||||
intro={section_props.intro}
|
||||
helpLink={section_props.help}>
|
||||
{
|
||||
section_props.fields.map(field_props => (
|
||||
<DataEntry
|
||||
title={field_props.title}
|
||||
value={props[field_props.slug]}
|
||||
tooltip={field_props.tooltip} />
|
||||
))
|
||||
}
|
||||
</DataSection>
|
||||
))
|
||||
}
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const DataSection = (props) => {
|
||||
const match = props.hash && props.slug.match(props.hash);
|
||||
return (
|
||||
<section className={(props.inactive)? "data-section inactive": "data-section"}>
|
||||
<header className="bullet-prefix section-header" isActive={() => match}>
|
||||
<NavLink to={(match)? '#': `#${props.slug}`}>
|
||||
<section id={props.slug} className={(props.inactive)? "data-section inactive": "data-section"}>
|
||||
<header className="bullet-prefix section-header">
|
||||
<NavLink to={(match)? '#': `#${props.slug}`} isActive={() => match}>
|
||||
<h3 className="h3">{props.title}</h3>
|
||||
</NavLink>
|
||||
{
|
||||
@ -30,7 +69,8 @@ const DataSection = function(props){
|
||||
: null
|
||||
}
|
||||
</header>
|
||||
<Fragment>{ (match)? props.children : null }</Fragment>
|
||||
{ (match && props.intro)? <p className="data-intro">{ props.intro }</p> : null }
|
||||
{ match? <dl className="data-list">{props.children}</dl> : null }
|
||||
{
|
||||
(match && !props.inactive)?
|
||||
<div className="buttons-container with-space">
|
||||
@ -42,127 +82,14 @@ const DataSection = function(props){
|
||||
);
|
||||
}
|
||||
|
||||
const BuildingView = function(props){
|
||||
if (!props.building_id){
|
||||
return (
|
||||
<Sidebar title="Building Not Found">
|
||||
<InfoBox msg="We can't find that one anywhere - try the map again?" />
|
||||
<div className="buttons-container with-space">
|
||||
<Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
|
||||
</div>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
const hash = (props.location && props.location.hash)? props.location.hash.replace('#', ''): undefined;
|
||||
return (
|
||||
<Sidebar title={`View Building`} back="/map/date_year.html">
|
||||
<DataSection title="Location" slug="location" hash={hash}
|
||||
helpLink="https://pages.colouring.london/location">
|
||||
<p className="data-intro">
|
||||
|
||||
Section introduction of up to roughly 100 characters will take
|
||||
approx­imately this much space.
|
||||
|
||||
</p>
|
||||
<dl id="data-list-location" className="data-list collapse show">
|
||||
<dt>
|
||||
Building Name
|
||||
<Tooltip text="May not be needed for many buildings." />
|
||||
</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>
|
||||
</DataSection>
|
||||
<DataSection inactive={true} title="Use" slug="use" hash={hash}
|
||||
helpLink="https://pages.colouring.london/use">
|
||||
<p className="data-intro">Coming soon… Click the ? for more info.</p>
|
||||
</DataSection>
|
||||
<DataSection inactive={true} title="Type" slug="type" hash={hash}
|
||||
helpLink="https://pages.colouring.london/type">
|
||||
<p className="data-intro">Coming soon… Click the ? for more info.</p>
|
||||
</DataSection>
|
||||
<DataSection title="Age" slug="age" hash={hash}
|
||||
helpLink="https://pages.colouring.london/age">
|
||||
<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>
|
||||
</DataSection>
|
||||
<DataSection title="Size" slug="size" hash={hash}
|
||||
helpLink="https://pages.colouring.london/shape">
|
||||
<dl className="data-list">
|
||||
<dt>Total storeys</dt>
|
||||
<dd>{(props.size_storeys_attic + props.size_storeys_basement + props.size_storeys_core)}</dd>
|
||||
<dt>Attic storeys</dt>
|
||||
<dd>{props.size_storeys_attic? props.size_storeys_attic : '-'}</dd>
|
||||
<dt>Basement storeys</dt>
|
||||
<dd>{props.size_storeys_basement? props.size_storeys_basement : '-'}</dd>
|
||||
</dl>
|
||||
<dl className="data-list">
|
||||
<dt>Height to apex (m)</dt>
|
||||
<dd>{props.size_height_apex? props.size_height_apex : '-'}</dd>
|
||||
<dt>Ground floor area (m²)</dt>
|
||||
<dd>{props.size_floor_area_ground? props.size_floor_area_ground : '-'}</dd>
|
||||
<dt>Total floor area (m²)</dt>
|
||||
<dd>{props.size_floor_area_total? props.size_floor_area_total : '-'}</dd>
|
||||
<dt>Frontage Width (m)</dt>
|
||||
<dd>{props.size_width_frontage? props.size_width_frontage : '-'}</dd>
|
||||
</dl>
|
||||
</DataSection>
|
||||
<DataSection inactive={true} title="Shape & Position" slug="form" hash={hash}
|
||||
helpLink="https://pages.colouring.london/form">
|
||||
<p className="data-intro">Coming soon… Click the ? for more info.</p>
|
||||
</DataSection>
|
||||
<DataSection inactive={true} title="Build Team" slug="build-team" hash={hash}
|
||||
helpLink="https://pages.colouring.london/builder">
|
||||
<p className="data-intro">Coming soon… Click the ? for more info.</p>
|
||||
</DataSection>
|
||||
<DataSection inactive={true} title="Construction & Design" slug="construction" hash={hash}
|
||||
helpLink="https://pages.colouring.london/contstruction">
|
||||
<p className="data-intro">Coming soon… Click the ? for more info.</p>
|
||||
</DataSection>
|
||||
<DataSection inactive={true} title="Energy" slug="energy" hash={hash}
|
||||
helpLink="https://pages.colouring.london/energy">
|
||||
<p className="data-intro">Coming soon… Click the ? for more info.</p>
|
||||
</DataSection>
|
||||
<DataSection inactive={true} title="Greenery" slug="greenery" hash={hash}
|
||||
helpLink="https://pages.colouring.london/copy-of-street-context">
|
||||
<p className="data-intro">Coming soon… Click the ? for more info.</p>
|
||||
</DataSection>
|
||||
<DataSection inactive={true} title="Planning & Protection" slug="planning" hash={hash}
|
||||
helpLink="https://pages.colouring.london/planning">
|
||||
<p className="data-intro">Coming soon… Click the ? for more info.</p>
|
||||
</DataSection>
|
||||
<DataSection inactive={true} title="Demolition" slug="demolition" hash={hash}
|
||||
helpLink="https://pages.colouring.london/demolitions">
|
||||
<p className="data-intro">Coming soon… Click the ? for more info.</p>
|
||||
</DataSection>
|
||||
<DataSection title="Like Me!" slug="like" hash={hash}
|
||||
helpLink="https://pages.colouring.london/likeme">
|
||||
<dl className="data-list">
|
||||
<dt>Likes</dt>
|
||||
<dd>{props.likes ? props.likes.length : 0}</dd>
|
||||
</dl>
|
||||
</DataSection>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
const DataEntry = (props) => (
|
||||
<Fragment>
|
||||
<dt>
|
||||
{ props.title }
|
||||
{ props.tooltip? <Tooltip text={ props.tooltip } /> : null }
|
||||
</dt>
|
||||
<dd>{props.value ? props.value : '-'}</dd>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
export default BuildingView;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user