Reorder and rename categories on the grid
As requested in https://github.com/colouring-cities/colouring-core/issues/1
This commit is contained in:
Mike Simpson
parent
df1da50a4a
commit
b0707d47f0
@ -2,183 +2,540 @@ import React, { Fragment } from 'react';
|
||||
|
||||
import { dataFields } from '../../config/data-fields-config';
|
||||
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
|
||||
import { DataEntryGroup } from '../data-components/data-entry-group';
|
||||
import { DynamicsBuildingPane, DynamicsDataEntry } from './dynamics/dynamics-data-entry';
|
||||
import { FieldRow } from '../data-components/field-row';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Category } from '../../config/categories-config';
|
||||
import NumericDataEntry from '../data-components/numeric-data-entry';
|
||||
import SelectDataEntry from '../data-components/select-data-entry';
|
||||
import TextboxDataEntry from '../data-components/textbox-data-entry';
|
||||
import Verification from '../data-components/verification';
|
||||
import YearDataEntry from '../data-components/year-data-entry';
|
||||
import withCopyEdit from '../data-container';
|
||||
import DataEntry from '../data-components/data-entry';
|
||||
import InfoBox from '../../components/info-box';
|
||||
|
||||
import { CategoryViewProps } from './category-view-props';
|
||||
import { LogicalDataEntry } from '../data-components/logical-data-entry/logical-data-entry';
|
||||
|
||||
const HistoricalStatusOptions = [
|
||||
'The current footprint matches/almost exactly matches the historical map beneath, and/or is known to have been built before the map was made',
|
||||
'The building core is the same as the historical map but has had multiple additions/changes',
|
||||
'The building no longer exists',
|
||||
];
|
||||
|
||||
/**
|
||||
* Age view/edit section
|
||||
*/
|
||||
const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const building = props.building;
|
||||
const thisYear = (new Date()).getFullYear();
|
||||
const currentBuildingConstructionYear = building.date_year || undefined;
|
||||
|
||||
const ageLinkUrl = `/${props.mode}/${Category.Age}/${props.building.building_id}`;
|
||||
|
||||
if (props.building.date_source == "Expert knowledge of building" ||
|
||||
props.building.date_source == "Expert estimate from image" ||
|
||||
props.building.date_source == null
|
||||
){
|
||||
return (
|
||||
<Fragment>
|
||||
<YearDataEntry
|
||||
year={props.building.date_year}
|
||||
upper={props.building.date_upper}
|
||||
lower={props.building.date_lower}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
<DataEntryGroup name="Building Age" collapsed={true} >
|
||||
<YearDataEntry
|
||||
year={props.building.date_year}
|
||||
upper={props.building.date_upper}
|
||||
lower={props.building.date_lower}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
|
||||
allow_verify={props.user !== undefined && props.building.date_year !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_year")}
|
||||
user_verified_as={props.user_verified.date_year}
|
||||
verified_count={props.building.verified.date_year}
|
||||
|
||||
allow_verify_upper={props.user !== undefined && props.building.date_upper !== null && !props.edited}
|
||||
onVerify_upper={props.onVerify}
|
||||
user_verified_upper={props.user_verified.hasOwnProperty("date_upper")}
|
||||
user_verified_as_upper={props.user_verified.date_upper}
|
||||
verified_count_upper={props.building.verified.date_upper}
|
||||
|
||||
allow_verify_lower={props.user !== undefined && props.building.date_lower !== null && !props.edited}
|
||||
onVerify_lower={props.onVerify}
|
||||
user_verified_lower={props.user_verified.hasOwnProperty("date_lower")}
|
||||
user_verified_as_lower={props.user_verified.date_lower}
|
||||
verified_count_lower={props.building.verified.date_lower}
|
||||
/>
|
||||
<NumericDataEntry
|
||||
title={dataFields.facade_year.title}
|
||||
slug="facade_year"
|
||||
value={props.building.facade_year}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
step={1}
|
||||
min={1}
|
||||
max={currentYear}
|
||||
tooltip={dataFields.facade_year.tooltip}
|
||||
/>
|
||||
<Verification
|
||||
slug="facade_year"
|
||||
allow_verify={props.user !== undefined && props.building.facade_year !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("facade_year")}
|
||||
user_verified_as={props.user_verified.facade_year}
|
||||
verified_count={props.building.verified.facade_year}
|
||||
/>
|
||||
allow_verify={props.user !== undefined && props.building.date_year !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_year")}
|
||||
user_verified_as={props.user_verified.date_year}
|
||||
verified_count={props.building.verified.date_year}
|
||||
|
||||
allow_verify_upper={props.user !== undefined && props.building.date_upper !== null && !props.edited}
|
||||
onVerify_upper={props.onVerify}
|
||||
user_verified_upper={props.user_verified.hasOwnProperty("date_upper")}
|
||||
user_verified_as_upper={props.user_verified.date_upper}
|
||||
verified_count_upper={props.building.verified.date_upper}
|
||||
|
||||
allow_verify_lower={props.user !== undefined && props.building.date_lower !== null && !props.edited}
|
||||
onVerify_lower={props.onVerify}
|
||||
user_verified_lower={props.user_verified.hasOwnProperty("date_lower")}
|
||||
user_verified_as_lower={props.user_verified.date_lower}
|
||||
verified_count_lower={props.building.verified.date_lower}
|
||||
/>
|
||||
<NumericDataEntry
|
||||
title={dataFields.facade_year.title}
|
||||
slug="facade_year"
|
||||
value={props.building.facade_year}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
step={1}
|
||||
min={1}
|
||||
max={currentYear}
|
||||
tooltip={dataFields.facade_year.tooltip}
|
||||
/>
|
||||
<Verification
|
||||
slug="facade_year"
|
||||
allow_verify={props.user !== undefined && props.building.facade_year !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("facade_year")}
|
||||
user_verified_as={props.user_verified.facade_year}
|
||||
verified_count={props.building.verified.facade_year}
|
||||
/>
|
||||
|
||||
<SelectDataEntry
|
||||
title={dataFields.date_source.title}
|
||||
slug="date_source"
|
||||
value={props.building.date_source}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
tooltip={dataFields.date_source.tooltip}
|
||||
placeholder={dataFields.date_source.example}
|
||||
options={dataFields.date_source.items}
|
||||
/>
|
||||
<Verification
|
||||
slug="date_source"
|
||||
allow_verify={props.user !== undefined && props.building.date_source !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_source")}
|
||||
user_verified_as={props.user_verified.date_source}
|
||||
verified_count={props.building.verified.date_source}
|
||||
/>
|
||||
<SelectDataEntry
|
||||
title={dataFields.date_source.title}
|
||||
slug="date_source"
|
||||
value={props.building.date_source}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
tooltip={dataFields.date_source.tooltip}
|
||||
placeholder={dataFields.date_source.example}
|
||||
options={dataFields.date_source.items}
|
||||
/>
|
||||
<Verification
|
||||
slug="date_source"
|
||||
allow_verify={props.user !== undefined && props.building.date_source !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_source")}
|
||||
user_verified_as={props.user_verified.date_source}
|
||||
verified_count={props.building.verified.date_source}
|
||||
/>
|
||||
<InfoBox>
|
||||
This section is under development.
|
||||
</InfoBox>
|
||||
<DataEntry
|
||||
title="Cladding Date"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Date of Significant Extensions"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Date of Significant Retrofits"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
</DataEntryGroup>
|
||||
<DataEntryGroup name="Lifespan and Site History" collapsed={true} >
|
||||
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}>
|
||||
<DynamicsBuildingPane>
|
||||
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
|
||||
<FieldRow>
|
||||
<div>
|
||||
<NumericDataEntry
|
||||
slug=''
|
||||
title={dataFields.demolished_buildings.items.year_constructed.title}
|
||||
value={currentBuildingConstructionYear}
|
||||
disabled={true}
|
||||
mode='view'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<NumericDataEntry
|
||||
slug=''
|
||||
title={dataFields.demolished_buildings.items.year_demolished.title}
|
||||
value={undefined}
|
||||
placeholder='---'
|
||||
disabled={true}
|
||||
mode='view'
|
||||
/>
|
||||
</div>
|
||||
<div style={{flex: '0 1 27%'}}>
|
||||
<DataEntry
|
||||
slug=''
|
||||
title='Lifespan to date'
|
||||
value={ (thisYear - currentBuildingConstructionYear) + ''}
|
||||
disabled={true}
|
||||
mode='view'
|
||||
/>
|
||||
</div>
|
||||
</FieldRow>
|
||||
</DynamicsBuildingPane>
|
||||
{
|
||||
currentBuildingConstructionYear == undefined ?
|
||||
<InfoBox>To add historical records, fill in the <Link to={ageLinkUrl}>Age</Link> data first.</InfoBox> :
|
||||
|
||||
<>
|
||||
<LogicalDataEntry
|
||||
slug='dynamics_has_demolished_buildings'
|
||||
title={dataFields.dynamics_has_demolished_buildings.title}
|
||||
value={building.dynamics_has_demolished_buildings}
|
||||
disallowFalse={(building.demolished_buildings?.length ?? 0) > 0}
|
||||
disallowNull={(building.demolished_buildings?.length ?? 0) > 0}
|
||||
|
||||
onChange={props.onSaveChange}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
/>
|
||||
{
|
||||
building.dynamics_has_demolished_buildings &&
|
||||
<>
|
||||
<DynamicsDataEntry
|
||||
|
||||
/*
|
||||
Will clear the edits and new record data upon navigating to another building.
|
||||
Should get a better way to do this, plus a way to actually keep unsaved edits.
|
||||
*/
|
||||
key={building.building_id}
|
||||
|
||||
value={building.demolished_buildings}
|
||||
editableEntries={true}
|
||||
slug='demolished_buildings'
|
||||
title={dataFields.demolished_buildings.title}
|
||||
mode={props.mode}
|
||||
onChange={props.onChange}
|
||||
onSaveAdd={props.onSaveAdd}
|
||||
hasEdits={props.edited}
|
||||
maxYear={currentBuildingConstructionYear}
|
||||
minYear={50}
|
||||
/>
|
||||
{
|
||||
props.mode === 'view' &&
|
||||
<InfoBox>Switch to edit mode to add/edit past building records</InfoBox>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</DataEntryGroup>
|
||||
<DataEntryGroup name="Future planned data collection" collapsed={false} showCount={false}>
|
||||
<DataEntry
|
||||
title="Historical land use change"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Longitudinal historical footprints (raster) link"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Longitudinal historical footprints (vector) link"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
</DataEntryGroup>
|
||||
<InfoBox>
|
||||
This section is under development in collaboration with the historic environment sector.
|
||||
Please let us know your suggestions on the <a href="https://discuss.colouring.london/t/dynamics-category-discussion/107">discussion forum</a>! (external link - save your edits first)
|
||||
</InfoBox>
|
||||
</DataEntryGroup>
|
||||
<DataEntryGroup name="Survival and Loss tracked using Historical Maps" collapsed={true} >
|
||||
<InfoBox>
|
||||
This section is under development.
|
||||
</InfoBox>
|
||||
<button className="map-switcher-inline btn btn-outline btn-outline-dark" /*onClick={}*/>
|
||||
{'Click here for historical maps'}
|
||||
</button>
|
||||
<SelectDataEntry
|
||||
title={dataFields.historical_status.title}
|
||||
slug="historical_status"
|
||||
value={""}
|
||||
tooltip={dataFields.historical_status.tooltip}
|
||||
options={HistoricalStatusOptions}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</DataEntryGroup>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<YearDataEntry
|
||||
year={props.building.date_year}
|
||||
upper={props.building.date_upper}
|
||||
lower={props.building.date_lower}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
<DataEntryGroup name="Building Age" collapsed={true} >
|
||||
<YearDataEntry
|
||||
year={props.building.date_year}
|
||||
upper={props.building.date_upper}
|
||||
lower={props.building.date_lower}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
|
||||
allow_verify={props.user !== undefined && props.building.date_year !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_year")}
|
||||
user_verified_as={props.user_verified.date_year}
|
||||
verified_count={props.building.verified.date_year}
|
||||
|
||||
allow_verify_upper={props.user !== undefined && props.building.date_upper !== null && !props.edited}
|
||||
onVerify_upper={props.onVerify}
|
||||
user_verified_upper={props.user_verified.hasOwnProperty("date_upper")}
|
||||
user_verified_as_upper={props.user_verified.date_upper}
|
||||
verified_count_upper={props.building.verified.date_upper}
|
||||
|
||||
allow_verify_lower={props.user !== undefined && props.building.date_lower !== null && !props.edited}
|
||||
onVerify_lower={props.onVerify}
|
||||
user_verified_lower={props.user_verified.hasOwnProperty("date_lower")}
|
||||
user_verified_as_lower={props.user_verified.date_lower}
|
||||
verified_count_lower={props.building.verified.date_lower}
|
||||
allow_verify={props.user !== undefined && props.building.date_year !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_year")}
|
||||
user_verified_as={props.user_verified.date_year}
|
||||
verified_count={props.building.verified.date_year}
|
||||
|
||||
allow_verify_upper={props.user !== undefined && props.building.date_upper !== null && !props.edited}
|
||||
onVerify_upper={props.onVerify}
|
||||
user_verified_upper={props.user_verified.hasOwnProperty("date_upper")}
|
||||
user_verified_as_upper={props.user_verified.date_upper}
|
||||
verified_count_upper={props.building.verified.date_upper}
|
||||
|
||||
allow_verify_lower={props.user !== undefined && props.building.date_lower !== null && !props.edited}
|
||||
onVerify_lower={props.onVerify}
|
||||
user_verified_lower={props.user_verified.hasOwnProperty("date_lower")}
|
||||
user_verified_as_lower={props.user_verified.date_lower}
|
||||
verified_count_lower={props.building.verified.date_lower}
|
||||
/>
|
||||
<NumericDataEntry
|
||||
title={dataFields.facade_year.title}
|
||||
slug="facade_year"
|
||||
value={props.building.facade_year}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
step={1}
|
||||
min={1}
|
||||
max={currentYear}
|
||||
tooltip={dataFields.facade_year.tooltip}
|
||||
/>
|
||||
<Verification
|
||||
slug="facade_year"
|
||||
allow_verify={props.user !== undefined && props.building.facade_year !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("facade_year")}
|
||||
user_verified_as={props.user_verified.facade_year}
|
||||
verified_count={props.building.verified.facade_year}
|
||||
/>
|
||||
<SelectDataEntry
|
||||
title={dataFields.date_source.title}
|
||||
slug="date_source"
|
||||
value={props.building.date_source}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
tooltip={dataFields.date_source.tooltip}
|
||||
options={dataFields.date_source.items}
|
||||
placeholder={dataFields.date_source.example}
|
||||
/>
|
||||
<Verification
|
||||
slug="date_source"
|
||||
allow_verify={props.user !== undefined && props.building.date_source !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_source")}
|
||||
user_verified_as={props.user_verified.date_source}
|
||||
verified_count={props.building.verified.date_source}
|
||||
/>
|
||||
<MultiDataEntry
|
||||
title={dataFields.date_link.title}
|
||||
slug="date_link"
|
||||
value={props.building.date_link}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
tooltip={dataFields.date_link.tooltip}
|
||||
placeholder="https://..."
|
||||
editableEntries={true}
|
||||
isUrl={true}
|
||||
/>
|
||||
<Verification
|
||||
slug="date_link"
|
||||
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_link")}
|
||||
user_verified_as={props.user_verified.date_link}
|
||||
verified_count={props.building.verified.date_link}
|
||||
/>
|
||||
<InfoBox>
|
||||
This section is under development.
|
||||
</InfoBox>
|
||||
<DataEntry
|
||||
title="Cladding Date"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<NumericDataEntry
|
||||
title={dataFields.facade_year.title}
|
||||
slug="facade_year"
|
||||
value={props.building.facade_year}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
step={1}
|
||||
min={1}
|
||||
max={currentYear}
|
||||
tooltip={dataFields.facade_year.tooltip}
|
||||
<Verification
|
||||
slug="date_link"
|
||||
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_link")}
|
||||
user_verified_as={props.user_verified.date_link}
|
||||
verified_count={props.building.verified.date_link}
|
||||
/>
|
||||
<DataEntry
|
||||
title="Source"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<Verification
|
||||
slug="facade_year"
|
||||
allow_verify={props.user !== undefined && props.building.facade_year !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("facade_year")}
|
||||
user_verified_as={props.user_verified.facade_year}
|
||||
verified_count={props.building.verified.facade_year}
|
||||
<DataEntry
|
||||
title="Date of Significant Extensions"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<Verification
|
||||
slug="date_link"
|
||||
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_link")}
|
||||
user_verified_as={props.user_verified.date_link}
|
||||
verified_count={props.building.verified.date_link}
|
||||
/>
|
||||
<DataEntry
|
||||
title="Source"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Date of Significant Retrofits"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<Verification
|
||||
slug="date_link"
|
||||
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_link")}
|
||||
user_verified_as={props.user_verified.date_link}
|
||||
verified_count={props.building.verified.date_link}
|
||||
/>
|
||||
<DataEntry
|
||||
title="Source"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
</DataEntryGroup>
|
||||
<DataEntryGroup name="Lifespan and Site History" collapsed={true} >
|
||||
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}>
|
||||
<DynamicsBuildingPane>
|
||||
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
|
||||
<FieldRow>
|
||||
<div>
|
||||
<NumericDataEntry
|
||||
slug=''
|
||||
title={dataFields.demolished_buildings.items.year_constructed.title}
|
||||
value={currentBuildingConstructionYear}
|
||||
disabled={true}
|
||||
mode='view'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<NumericDataEntry
|
||||
slug=''
|
||||
title={dataFields.demolished_buildings.items.year_demolished.title}
|
||||
value={undefined}
|
||||
placeholder='---'
|
||||
disabled={true}
|
||||
mode='view'
|
||||
/>
|
||||
</div>
|
||||
<div style={{flex: '0 1 27%'}}>
|
||||
<DataEntry
|
||||
slug=''
|
||||
title='Lifespan to date'
|
||||
value={ (thisYear - currentBuildingConstructionYear) + ''}
|
||||
disabled={true}
|
||||
mode='view'
|
||||
/>
|
||||
</div>
|
||||
</FieldRow>
|
||||
</DynamicsBuildingPane>
|
||||
{
|
||||
currentBuildingConstructionYear == undefined ?
|
||||
<InfoBox>To add historical records, fill in the <Link to={ageLinkUrl}>Age</Link> data first.</InfoBox> :
|
||||
|
||||
<>
|
||||
<LogicalDataEntry
|
||||
slug='dynamics_has_demolished_buildings'
|
||||
title={dataFields.dynamics_has_demolished_buildings.title}
|
||||
value={building.dynamics_has_demolished_buildings}
|
||||
disallowFalse={(building.demolished_buildings?.length ?? 0) > 0}
|
||||
disallowNull={(building.demolished_buildings?.length ?? 0) > 0}
|
||||
|
||||
<SelectDataEntry
|
||||
title={dataFields.date_source.title}
|
||||
slug="date_source"
|
||||
value={props.building.date_source}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
tooltip={dataFields.date_source.tooltip}
|
||||
options={dataFields.date_source.items}
|
||||
placeholder={dataFields.date_source.example}
|
||||
/>
|
||||
<Verification
|
||||
slug="date_source"
|
||||
allow_verify={props.user !== undefined && props.building.date_source !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_source")}
|
||||
user_verified_as={props.user_verified.date_source}
|
||||
verified_count={props.building.verified.date_source}
|
||||
/>
|
||||
<MultiDataEntry
|
||||
title={dataFields.date_link.title}
|
||||
slug="date_link"
|
||||
value={props.building.date_link}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
tooltip={dataFields.date_link.tooltip}
|
||||
placeholder="https://..."
|
||||
editableEntries={true}
|
||||
isUrl={true}
|
||||
/>
|
||||
<Verification
|
||||
slug="date_link"
|
||||
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_link")}
|
||||
user_verified_as={props.user_verified.date_link}
|
||||
verified_count={props.building.verified.date_link}
|
||||
onChange={props.onSaveChange}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
/>
|
||||
{
|
||||
building.dynamics_has_demolished_buildings &&
|
||||
<>
|
||||
<DynamicsDataEntry
|
||||
|
||||
/*
|
||||
Will clear the edits and new record data upon navigating to another building.
|
||||
Should get a better way to do this, plus a way to actually keep unsaved edits.
|
||||
*/
|
||||
key={building.building_id}
|
||||
|
||||
value={building.demolished_buildings}
|
||||
editableEntries={true}
|
||||
slug='demolished_buildings'
|
||||
title={dataFields.demolished_buildings.title}
|
||||
mode={props.mode}
|
||||
onChange={props.onChange}
|
||||
onSaveAdd={props.onSaveAdd}
|
||||
hasEdits={props.edited}
|
||||
maxYear={currentBuildingConstructionYear}
|
||||
minYear={50}
|
||||
/>
|
||||
{
|
||||
props.mode === 'view' &&
|
||||
<InfoBox>Switch to edit mode to add/edit past building records</InfoBox>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</DataEntryGroup>
|
||||
<DataEntryGroup name="Future planned data collection" collapsed={false} showCount={false}>
|
||||
<DataEntry
|
||||
title="Historical land use change"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Longitudinal historical footprints (raster) link"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Longitudinal historical footprints (vector) link"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
</DataEntryGroup>
|
||||
<InfoBox>
|
||||
This section is under development in collaboration with the historic environment sector.
|
||||
Please let us know your suggestions on the <a href="https://discuss.colouring.london/t/dynamics-category-discussion/107">discussion forum</a>! (external link - save your edits first)
|
||||
</InfoBox>
|
||||
</DataEntryGroup>
|
||||
<DataEntryGroup name="Survival and Loss tracked using Historical Maps" collapsed={true} >
|
||||
<InfoBox>
|
||||
This section is under development.
|
||||
</InfoBox>
|
||||
<button className="map-switcher-inline btn btn-outline btn-outline-dark" /*onClick={}*/>
|
||||
{'Click here for historical maps'}
|
||||
</button>
|
||||
<SelectDataEntry
|
||||
title={dataFields.historical_status.title}
|
||||
slug="historical_status"
|
||||
value={""}
|
||||
tooltip={dataFields.historical_status.tooltip}
|
||||
options={HistoricalStatusOptions}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</DataEntryGroup>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,140 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import InfoBox from '../../../components/info-box';
|
||||
|
||||
import { Category } from '../../../config/categories-config';
|
||||
import { dataFields } from '../../../config/data-fields-config';
|
||||
|
||||
import DataEntry from '../../data-components/data-entry';
|
||||
import { DataEntryGroup } from '../../data-components/data-entry-group';
|
||||
import { DynamicsBuildingPane, DynamicsDataEntry } from './dynamics-data-entry';
|
||||
import { FieldRow } from '../../data-components/field-row';
|
||||
import NumericDataEntry from '../../data-components/numeric-data-entry';
|
||||
import withCopyEdit from '../../data-container';
|
||||
|
||||
import { CategoryViewProps } from '../category-view-props';
|
||||
import { LogicalDataEntry } from '../../data-components/logical-data-entry/logical-data-entry';
|
||||
|
||||
/**
|
||||
* Dynamics view/edit section
|
||||
*/
|
||||
const DynamicsView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
const building = props.building;
|
||||
const thisYear = (new Date()).getFullYear();
|
||||
const currentBuildingConstructionYear = building.date_year || undefined;
|
||||
|
||||
const ageLinkUrl = `/${props.mode}/${Category.Age}/${props.building.building_id}`;
|
||||
|
||||
return (<>
|
||||
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}>
|
||||
<DynamicsBuildingPane>
|
||||
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
|
||||
<FieldRow>
|
||||
<div>
|
||||
<NumericDataEntry
|
||||
slug=''
|
||||
title={dataFields.demolished_buildings.items.year_constructed.title}
|
||||
value={currentBuildingConstructionYear}
|
||||
disabled={true}
|
||||
mode='view'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<NumericDataEntry
|
||||
slug=''
|
||||
title={dataFields.demolished_buildings.items.year_demolished.title}
|
||||
value={undefined}
|
||||
placeholder='---'
|
||||
disabled={true}
|
||||
mode='view'
|
||||
/>
|
||||
</div>
|
||||
<div style={{flex: '0 1 27%'}}>
|
||||
<DataEntry
|
||||
slug=''
|
||||
title='Lifespan to date'
|
||||
value={ (thisYear - currentBuildingConstructionYear) + ''}
|
||||
disabled={true}
|
||||
mode='view'
|
||||
/>
|
||||
</div>
|
||||
</FieldRow>
|
||||
</DynamicsBuildingPane>
|
||||
{
|
||||
currentBuildingConstructionYear == undefined ?
|
||||
<InfoBox>To add historical records, fill in the <Link to={ageLinkUrl}>Age</Link> data first.</InfoBox> :
|
||||
|
||||
<>
|
||||
<LogicalDataEntry
|
||||
slug='dynamics_has_demolished_buildings'
|
||||
title={dataFields.dynamics_has_demolished_buildings.title}
|
||||
value={building.dynamics_has_demolished_buildings}
|
||||
disallowFalse={(building.demolished_buildings?.length ?? 0) > 0}
|
||||
disallowNull={(building.demolished_buildings?.length ?? 0) > 0}
|
||||
|
||||
onChange={props.onSaveChange}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
/>
|
||||
{
|
||||
building.dynamics_has_demolished_buildings &&
|
||||
<>
|
||||
<DynamicsDataEntry
|
||||
|
||||
/*
|
||||
Will clear the edits and new record data upon navigating to another building.
|
||||
Should get a better way to do this, plus a way to actually keep unsaved edits.
|
||||
*/
|
||||
key={building.building_id}
|
||||
|
||||
value={building.demolished_buildings}
|
||||
editableEntries={true}
|
||||
slug='demolished_buildings'
|
||||
title={dataFields.demolished_buildings.title}
|
||||
mode={props.mode}
|
||||
onChange={props.onChange}
|
||||
onSaveAdd={props.onSaveAdd}
|
||||
hasEdits={props.edited}
|
||||
maxYear={currentBuildingConstructionYear}
|
||||
minYear={50}
|
||||
/>
|
||||
{
|
||||
props.mode === 'view' &&
|
||||
<InfoBox>Switch to edit mode to add/edit past building records</InfoBox>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</DataEntryGroup>
|
||||
|
||||
<DataEntryGroup name="Future planned data collection" collapsed={false} showCount={false}>
|
||||
<DataEntry
|
||||
title="Historical land use change"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Longitudinal historical footprints (raster) link"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Longitudinal historical footprints (vector) link"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
</DataEntryGroup>
|
||||
<InfoBox>
|
||||
This section is under development in collaboration with the historic environment sector.
|
||||
Please let us know your suggestions on the <a href="https://discuss.colouring.london/t/dynamics-category-discussion/107">discussion forum</a>! (external link - save your edits first)
|
||||
</InfoBox>
|
||||
</>)
|
||||
};
|
||||
|
||||
const DynamicsContainer = withCopyEdit(DynamicsView);
|
||||
|
||||
export default DynamicsContainer;
|
||||
105
app/src/frontend/building/data-containers/resilience.tsx
Normal file
105
app/src/frontend/building/data-containers/resilience.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import InfoBox from '../../components/info-box';
|
||||
|
||||
import { Category } from '../../config/categories-config';
|
||||
import { dataFields } from '../../config/data-fields-config';
|
||||
|
||||
import DataEntry from '../data-components/data-entry';
|
||||
import { DataEntryGroup } from '../data-components/data-entry-group';
|
||||
import { DynamicsBuildingPane, DynamicsDataEntry } from './dynamics/dynamics-data-entry';
|
||||
import { FieldRow } from '../data-components/field-row';
|
||||
import NumericDataEntry from '../data-components/numeric-data-entry';
|
||||
import withCopyEdit from '../data-container';
|
||||
|
||||
import { CategoryViewProps } from './category-view-props';
|
||||
import { LogicalDataEntry } from '../data-components/logical-data-entry/logical-data-entry';
|
||||
|
||||
/**
|
||||
* Dynamics view/edit section
|
||||
*/
|
||||
const ResilienceView: React.FunctionComponent<CategoryViewProps> = (props) => {
|
||||
|
||||
|
||||
return (<>
|
||||
<InfoBox>
|
||||
This section is under development.
|
||||
</InfoBox>
|
||||
<DataEntry
|
||||
title="Building age"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Typical typology lifespan"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Typology adaptability rating"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Physical adaptability rating - within plot"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Landuse adaptability rating"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Structural material lifespan rating"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Protection from demolition rating"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Flood risk rating"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Surface geology type"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Average community value rating for typology"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Other rating"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<DataEntry
|
||||
title="Total resilience rating"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
</>)
|
||||
};
|
||||
|
||||
const ResilienceContainer = withCopyEdit(ResilienceView);
|
||||
|
||||
export default ResilienceContainer;
|
||||
@ -6,6 +6,7 @@ import NumericDataEntry from '../data-components/numeric-data-entry';
|
||||
import SelectDataEntry from '../data-components/select-data-entry';
|
||||
import Verification from '../data-components/verification';
|
||||
import withCopyEdit from '../data-container';
|
||||
import InfoBox from '../../components/info-box';
|
||||
|
||||
import { CategoryViewProps } from './category-view-props';
|
||||
|
||||
@ -94,26 +95,25 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
|
||||
user_verified_as={props.user_verified.sust_retrofit_date}
|
||||
verified_count={props.building.verified.sust_retrofit_date}
|
||||
/>
|
||||
|
||||
<NumericDataEntry
|
||||
title={dataFields.sust_life_expectancy.title}
|
||||
slug="sust_life_expectancy"
|
||||
value={props.building.sust_life_expectancy}
|
||||
step={1}
|
||||
min={1}
|
||||
disabled={true}
|
||||
mode={props.mode}
|
||||
copy={props.copy}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
<InfoBox>
|
||||
This section is under development.
|
||||
</InfoBox>
|
||||
<DataEntry
|
||||
title="Repairability rating for type"
|
||||
title="Date of Significant Retrofits"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
/>
|
||||
<Verification
|
||||
slug="date_link"
|
||||
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
|
||||
onVerify={props.onVerify}
|
||||
user_verified={props.user_verified.hasOwnProperty("date_link")}
|
||||
user_verified_as={props.user_verified.date_link}
|
||||
verified_count={props.building.verified.date_link}
|
||||
/>
|
||||
<DataEntry
|
||||
title="Adaptability within plot rating"
|
||||
title="Source"
|
||||
slug=""
|
||||
value=""
|
||||
mode='view'
|
||||
|
||||
@ -41,7 +41,7 @@ const LogoGrid: React.FunctionComponent = () => (
|
||||
<div className="row">
|
||||
<div className="cell background-sustainability"></div>
|
||||
<div className="cell background-planning"></div>
|
||||
<div className="cell background-dynamics"></div>
|
||||
<div className="cell background-resilience"></div>
|
||||
<div className="cell background-community"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,7 +13,7 @@ export enum Category {
|
||||
Team = 'team',
|
||||
Planning = 'planning',
|
||||
Sustainability = 'sustainability',
|
||||
Dynamics = 'dynamics',
|
||||
Resilience = 'resilience',
|
||||
Community = 'community',
|
||||
}
|
||||
|
||||
@ -26,14 +26,14 @@ export const categoriesOrder: Category[] = [
|
||||
Category.Location,
|
||||
Category.LandUse,
|
||||
Category.Type,
|
||||
Category.Age,
|
||||
Category.Size,
|
||||
Category.Construction,
|
||||
Category.Age,
|
||||
Category.Streetscape,
|
||||
Category.Team,
|
||||
Category.Planning,
|
||||
Category.Sustainability,
|
||||
Category.Dynamics,
|
||||
Category.Resilience,
|
||||
Category.Community,
|
||||
];
|
||||
|
||||
@ -48,13 +48,13 @@ interface CategoryDefinition {
|
||||
export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
|
||||
[Category.Age]: {
|
||||
slug: 'age',
|
||||
name: 'Age',
|
||||
name: 'Age & History',
|
||||
aboutUrl: 'https://pages.colouring.london/age',
|
||||
intro: 'Building age data can support energy analysis and help predict long-term change.',
|
||||
},
|
||||
[Category.Size]: {
|
||||
slug: 'size',
|
||||
name: 'Size',
|
||||
name: 'Size & Form',
|
||||
aboutUrl: 'https://pages.colouring.london/shapeandsize',
|
||||
intro: 'How big are buildings?',
|
||||
},
|
||||
@ -84,19 +84,19 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
|
||||
},
|
||||
[Category.Planning]: {
|
||||
slug: 'planning',
|
||||
name: 'Planning',
|
||||
name: 'Planning Controls',
|
||||
aboutUrl: 'https://pages.colouring.london/planning',
|
||||
intro: 'Planning controls relating to protection and reuse.',
|
||||
},
|
||||
[Category.Sustainability]: {
|
||||
slug: 'sustainability',
|
||||
name: 'Sustainability',
|
||||
name: 'Energy Performance',
|
||||
aboutUrl: 'https://pages.colouring.london/sustainability',
|
||||
intro: 'Are buildings energy efficient?',
|
||||
},
|
||||
[Category.Type]: {
|
||||
slug: 'type',
|
||||
name: 'Type',
|
||||
name: 'Typology',
|
||||
aboutUrl: 'https://pages.colouring.london/buildingtypology',
|
||||
intro: 'How were buildings previously used?',
|
||||
},
|
||||
@ -113,9 +113,9 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
|
||||
aboutUrl: 'https://pages.colouring.london/greenery',
|
||||
intro: "What's the building's context? Coming soon…",
|
||||
},
|
||||
[Category.Dynamics]: {
|
||||
slug: 'dynamics',
|
||||
name: 'Dynamics',
|
||||
[Category.Resilience]: {
|
||||
slug: 'resilience',
|
||||
name: 'Resilience',
|
||||
aboutUrl: 'https://pages.colouring.london/dynamics',
|
||||
intro: 'How has the site of this building changed over time?'
|
||||
},
|
||||
|
||||
@ -317,10 +317,10 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
|
||||
elements: []
|
||||
},
|
||||
}],
|
||||
[Category.Dynamics]: [{
|
||||
[Category.Resilience]: [{
|
||||
mapStyle: 'dynamics_demolished_count',
|
||||
legend: {
|
||||
title: 'Dynamics',
|
||||
title: 'Resilience',
|
||||
description: 'Demolished buildings on the same site',
|
||||
elements: [
|
||||
{
|
||||
|
||||
@ -3,7 +3,7 @@ import { Category } from './categories-config';
|
||||
import AgeContainer from '../building/data-containers/age';
|
||||
import CommunityContainer from '../building/data-containers/community';
|
||||
import ConstructionContainer from '../building/data-containers/construction';
|
||||
import DynamicsContainer from '../building/data-containers/dynamics/dynamics';
|
||||
import ResilienceContainer from '../building/data-containers/resilience';
|
||||
import LocationContainer from '../building/data-containers/location';
|
||||
import PlanningContainer from '../building/data-containers/planning';
|
||||
import SizeContainer from '../building/data-containers/size';
|
||||
@ -26,7 +26,7 @@ export const categoryUiConfig: {[key in Category]: DataContainerType} = {
|
||||
[Category.Team]: TeamContainer,
|
||||
[Category.Planning]: PlanningContainer,
|
||||
[Category.Sustainability]: SustainabilityContainer,
|
||||
[Category.Dynamics]: DynamicsContainer,
|
||||
[Category.Resilience]: ResilienceContainer,
|
||||
[Category.Community]: CommunityContainer,
|
||||
};
|
||||
|
||||
|
||||
@ -452,6 +452,12 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
|
||||
//tooltip: ,
|
||||
},
|
||||
|
||||
historical_status: {
|
||||
category: Category.Age,
|
||||
title: "Historical Status",
|
||||
tooltip: "Survival and Loss tracked using Historical Maps",
|
||||
},
|
||||
|
||||
edit_history: {
|
||||
category: Category.Planning,
|
||||
title: "PLANNING DATA",
|
||||
@ -613,13 +619,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
|
||||
},
|
||||
|
||||
dynamics_has_demolished_buildings: {
|
||||
category: Category.Dynamics,
|
||||
category: Category.Resilience,
|
||||
title: 'Were any other buildings ever built on this site?',
|
||||
example: true,
|
||||
},
|
||||
|
||||
demolished_buildings: {
|
||||
category: Category.Dynamics,
|
||||
category: Category.Resilience,
|
||||
title: 'Past (demolished) buildings on this site',
|
||||
items: {
|
||||
year_constructed: {
|
||||
|
||||
@ -66,13 +66,13 @@
|
||||
background-color: #f77d11;
|
||||
}
|
||||
.background-age {
|
||||
background-color: #ff6161;
|
||||
background-color: #ab8fb0;
|
||||
}
|
||||
.background-size {
|
||||
background-color: #f2a2b9;
|
||||
background-color: #ff6161;
|
||||
}
|
||||
.background-construction {
|
||||
background-color: #ab8fb0;
|
||||
background-color: #f2a2b9;
|
||||
}
|
||||
.background-streetscape {
|
||||
background-color: #718899;
|
||||
@ -86,7 +86,7 @@
|
||||
.background-sustainability {
|
||||
background-color: #6bb1e3;
|
||||
}
|
||||
.background-dynamics {
|
||||
.background-resilience {
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
.background-community {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user