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

Reorder and rename categories on the grid

Browse Source 
As requested in https://github.com/colouring-cities/colouring-core/issues/1
This commit is contained in:
Mike Simpson 2023-01-06 13:18:06 +00:00
parent df1da50a4a
commit b0707d47f0
10 changed files with 649 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

647
app/src/frontend/building/data-containers/age.tsx
View File

@ -2,183 +2,540 @@ import React, { Fragment } from 'react';
import { dataFields } from '../../config/data-fields-config'; import { dataFields } from '../../config/data-fields-config';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry'; 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 NumericDataEntry from '../data-components/numeric-data-entry';
import SelectDataEntry from '../data-components/select-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 Verification from '../data-components/verification';
import YearDataEntry from '../data-components/year-data-entry'; import YearDataEntry from '../data-components/year-data-entry';
import withCopyEdit from '../data-container'; 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 { 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 * Age view/edit section
*/ */
const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => { const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
const currentYear = new Date().getFullYear(); 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" || if (props.building.date_source == "Expert knowledge of building" ||
props.building.date_source == "Expert estimate from image" || props.building.date_source == "Expert estimate from image" ||
props.building.date_source == null props.building.date_source == null
){ ){
return ( return (
<Fragment> <Fragment>
<YearDataEntry <DataEntryGroup name="Building Age" collapsed={true} >
year={props.building.date_year} <YearDataEntry
upper={props.building.date_upper} year={props.building.date_year}
lower={props.building.date_lower} upper={props.building.date_upper}
mode={props.mode} lower={props.building.date_lower}
copy={props.copy} mode={props.mode}
onChange={props.onChange} copy={props.copy}
onChange={props.onChange}
allow_verify={props.user !== undefined && props.building.date_year !== null && !props.edited} allow_verify={props.user !== undefined && props.building.date_year !== null && !props.edited}
onVerify={props.onVerify} onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("date_year")} user_verified={props.user_verified.hasOwnProperty("date_year")}
user_verified_as={props.user_verified.date_year} user_verified_as={props.user_verified.date_year}
verified_count={props.building.verified.date_year} verified_count={props.building.verified.date_year}
allow_verify_upper={props.user !== undefined && props.building.date_upper !== null && !props.edited} allow_verify_upper={props.user !== undefined && props.building.date_upper !== null && !props.edited}
onVerify_upper={props.onVerify} onVerify_upper={props.onVerify}
user_verified_upper={props.user_verified.hasOwnProperty("date_upper")} user_verified_upper={props.user_verified.hasOwnProperty("date_upper")}
user_verified_as_upper={props.user_verified.date_upper} user_verified_as_upper={props.user_verified.date_upper}
verified_count_upper={props.building.verified.date_upper} verified_count_upper={props.building.verified.date_upper}
allow_verify_lower={props.user !== undefined && props.building.date_lower !== null && !props.edited} allow_verify_lower={props.user !== undefined && props.building.date_lower !== null && !props.edited}
onVerify_lower={props.onVerify} onVerify_lower={props.onVerify}
user_verified_lower={props.user_verified.hasOwnProperty("date_lower")} user_verified_lower={props.user_verified.hasOwnProperty("date_lower")}
user_verified_as_lower={props.user_verified.date_lower} user_verified_as_lower={props.user_verified.date_lower}
verified_count_lower={props.building.verified.date_lower} verified_count_lower={props.building.verified.date_lower}
/> />
<NumericDataEntry <NumericDataEntry
title={dataFields.facade_year.title} title={dataFields.facade_year.title}
slug="facade_year" slug="facade_year"
value={props.building.facade_year} value={props.building.facade_year}
mode={props.mode} mode={props.mode}
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
step={1} step={1}
min={1} min={1}
max={currentYear} max={currentYear}
tooltip={dataFields.facade_year.tooltip} tooltip={dataFields.facade_year.tooltip}
/> />
<Verification <Verification
slug="facade_year" slug="facade_year"
allow_verify={props.user !== undefined && props.building.facade_year !== null && !props.edited} allow_verify={props.user !== undefined && props.building.facade_year !== null && !props.edited}
onVerify={props.onVerify} onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("facade_year")} user_verified={props.user_verified.hasOwnProperty("facade_year")}
user_verified_as={props.user_verified.facade_year} user_verified_as={props.user_verified.facade_year}
verified_count={props.building.verified.facade_year} verified_count={props.building.verified.facade_year}
/> />
<SelectDataEntry <SelectDataEntry
title={dataFields.date_source.title} title={dataFields.date_source.title}
slug="date_source" slug="date_source"
value={props.building.date_source} value={props.building.date_source}
mode={props.mode} mode={props.mode}
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
tooltip={dataFields.date_source.tooltip} tooltip={dataFields.date_source.tooltip}
placeholder={dataFields.date_source.example} placeholder={dataFields.date_source.example}
options={dataFields.date_source.items} options={dataFields.date_source.items}
/> />
<Verification <Verification
slug="date_source" slug="date_source"
allow_verify={props.user !== undefined && props.building.date_source !== null && !props.edited} allow_verify={props.user !== undefined && props.building.date_source !== null && !props.edited}
onVerify={props.onVerify} onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("date_source")} user_verified={props.user_verified.hasOwnProperty("date_source")}
user_verified_as={props.user_verified.date_source} user_verified_as={props.user_verified.date_source}
verified_count={props.building.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> </Fragment>
); );
}; };
return ( return (
<Fragment> <Fragment>
<YearDataEntry <DataEntryGroup name="Building Age" collapsed={true} >
year={props.building.date_year} <YearDataEntry
upper={props.building.date_upper} year={props.building.date_year}
lower={props.building.date_lower} upper={props.building.date_upper}
mode={props.mode} lower={props.building.date_lower}
copy={props.copy} mode={props.mode}
onChange={props.onChange} copy={props.copy}
onChange={props.onChange}
allow_verify={props.user !== undefined && props.building.date_year !== null && !props.edited} allow_verify={props.user !== undefined && props.building.date_year !== null && !props.edited}
onVerify={props.onVerify} onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("date_year")} user_verified={props.user_verified.hasOwnProperty("date_year")}
user_verified_as={props.user_verified.date_year} user_verified_as={props.user_verified.date_year}
verified_count={props.building.verified.date_year} verified_count={props.building.verified.date_year}
allow_verify_upper={props.user !== undefined && props.building.date_upper !== null && !props.edited} allow_verify_upper={props.user !== undefined && props.building.date_upper !== null && !props.edited}
onVerify_upper={props.onVerify} onVerify_upper={props.onVerify}
user_verified_upper={props.user_verified.hasOwnProperty("date_upper")} user_verified_upper={props.user_verified.hasOwnProperty("date_upper")}
user_verified_as_upper={props.user_verified.date_upper} user_verified_as_upper={props.user_verified.date_upper}
verified_count_upper={props.building.verified.date_upper} verified_count_upper={props.building.verified.date_upper}
allow_verify_lower={props.user !== undefined && props.building.date_lower !== null && !props.edited} allow_verify_lower={props.user !== undefined && props.building.date_lower !== null && !props.edited}
onVerify_lower={props.onVerify} onVerify_lower={props.onVerify}
user_verified_lower={props.user_verified.hasOwnProperty("date_lower")} user_verified_lower={props.user_verified.hasOwnProperty("date_lower")}
user_verified_as_lower={props.user_verified.date_lower} user_verified_as_lower={props.user_verified.date_lower}
verified_count_lower={props.building.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 <Verification
title={dataFields.facade_year.title} slug="date_link"
slug="facade_year" allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
value={props.building.facade_year} onVerify={props.onVerify}
mode={props.mode} user_verified={props.user_verified.hasOwnProperty("date_link")}
copy={props.copy} user_verified_as={props.user_verified.date_link}
onChange={props.onChange} verified_count={props.building.verified.date_link}
step={1} />
min={1} <DataEntry
max={currentYear} title="Source"
tooltip={dataFields.facade_year.tooltip} slug=""
value=""
mode='view'
/> />
<Verification <DataEntry
slug="facade_year" title="Date of Significant Extensions"
allow_verify={props.user !== undefined && props.building.facade_year !== null && !props.edited} slug=""
onVerify={props.onVerify} value=""
user_verified={props.user_verified.hasOwnProperty("facade_year")} mode='view'
user_verified_as={props.user_verified.facade_year}
verified_count={props.building.verified.facade_year}
/> />
<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 onChange={props.onSaveChange}
title={dataFields.date_source.title} mode={props.mode}
slug="date_source" copy={props.copy}
value={props.building.date_source} />
mode={props.mode} {
copy={props.copy} building.dynamics_has_demolished_buildings &&
onChange={props.onChange} <>
tooltip={dataFields.date_source.tooltip} <DynamicsDataEntry
options={dataFields.date_source.items}
placeholder={dataFields.date_source.example} /*
/> Will clear the edits and new record data upon navigating to another building.
<Verification Should get a better way to do this, plus a way to actually keep unsaved edits.
slug="date_source" */
allow_verify={props.user !== undefined && props.building.date_source !== null && !props.edited} key={building.building_id}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("date_source")} value={building.demolished_buildings}
user_verified_as={props.user_verified.date_source} editableEntries={true}
verified_count={props.building.verified.date_source} slug='demolished_buildings'
/> title={dataFields.demolished_buildings.title}
<MultiDataEntry mode={props.mode}
title={dataFields.date_link.title} onChange={props.onChange}
slug="date_link" onSaveAdd={props.onSaveAdd}
value={props.building.date_link} hasEdits={props.edited}
mode={props.mode} maxYear={currentBuildingConstructionYear}
copy={props.copy} minYear={50}
onChange={props.onChange} />
tooltip={dataFields.date_link.tooltip} {
placeholder="https://..." props.mode === 'view' &&
editableEntries={true} <InfoBox>Switch to edit mode to add/edit past building records</InfoBox>
isUrl={true} }
/> </>
<Verification }
slug="date_link" </>
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited} }
onVerify={props.onVerify} </DataEntryGroup>
user_verified={props.user_verified.hasOwnProperty("date_link")} <DataEntryGroup name="Future planned data collection" collapsed={false} showCount={false}>
user_verified_as={props.user_verified.date_link} <DataEntry
verified_count={props.building.verified.date_link} 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> </Fragment>
); );
}; };

140
app/src/frontend/building/data-containers/dynamics/dynamics.tsx
View File

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

28
app/src/frontend/building/data-containers/sustainability.tsx
View File

@ -6,6 +6,7 @@ import NumericDataEntry from '../data-components/numeric-data-entry';
import SelectDataEntry from '../data-components/select-data-entry'; import SelectDataEntry from '../data-components/select-data-entry';
import Verification from '../data-components/verification'; import Verification from '../data-components/verification';
import withCopyEdit from '../data-container'; import withCopyEdit from '../data-container';
import InfoBox from '../../components/info-box';
import { CategoryViewProps } from './category-view-props'; 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} user_verified_as={props.user_verified.sust_retrofit_date}
verified_count={props.building.verified.sust_retrofit_date} verified_count={props.building.verified.sust_retrofit_date}
/> />
<InfoBox>
<NumericDataEntry This section is under development.
title={dataFields.sust_life_expectancy.title} </InfoBox>
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}
/>
<DataEntry <DataEntry
title="Repairability rating for type" title="Date of Significant Retrofits"
slug="" slug=""
value="" value=""
mode='view' 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 <DataEntry
title="Adaptability within plot rating" title="Source"
slug="" slug=""
value="" value=""
mode='view' mode='view'

2
app/src/frontend/components/logo.tsx
View File

@ -41,7 +41,7 @@ const LogoGrid: React.FunctionComponent = () => (
<div className="row"> <div className="row">
<div className="cell background-sustainability"></div> <div className="cell background-sustainability"></div>
<div className="cell background-planning"></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 className="cell background-community"></div>
</div> </div>
</div> </div>

22
app/src/frontend/config/categories-config.ts
View File

@ -13,7 +13,7 @@ export enum Category {
Team = 'team', Team = 'team',
Planning = 'planning', Planning = 'planning',
Sustainability = 'sustainability', Sustainability = 'sustainability',
Dynamics = 'dynamics', Resilience = 'resilience',
Community = 'community', Community = 'community',
} }
@ -26,14 +26,14 @@ export const categoriesOrder: Category[] = [
Category.Location, Category.Location,
Category.LandUse, Category.LandUse,
Category.Type, Category.Type,
Category.Age,
Category.Size, Category.Size,
Category.Construction, Category.Construction,
Category.Age,
Category.Streetscape, Category.Streetscape,
Category.Team, Category.Team,
Category.Planning, Category.Planning,
Category.Sustainability, Category.Sustainability,
Category.Dynamics, Category.Resilience,
Category.Community, Category.Community,
]; ];
@ -48,13 +48,13 @@ interface CategoryDefinition {
export const categoriesConfig: {[key in Category]: CategoryDefinition} = { export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
[Category.Age]: { [Category.Age]: {
slug: 'age', slug: 'age',
name: 'Age', name: 'Age & History',
aboutUrl: 'https://pages.colouring.london/age', aboutUrl: 'https://pages.colouring.london/age',
intro: 'Building age data can support energy analysis and help predict long-term change.', intro: 'Building age data can support energy analysis and help predict long-term change.',
}, },
[Category.Size]: { [Category.Size]: {
slug: 'size', slug: 'size',
name: 'Size', name: 'Size & Form',
aboutUrl: 'https://pages.colouring.london/shapeandsize', aboutUrl: 'https://pages.colouring.london/shapeandsize',
intro: 'How big are buildings?', intro: 'How big are buildings?',
}, },
@ -84,19 +84,19 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
}, },
[Category.Planning]: { [Category.Planning]: {
slug: 'planning', slug: 'planning',
name: 'Planning', name: 'Planning Controls',
aboutUrl: 'https://pages.colouring.london/planning', aboutUrl: 'https://pages.colouring.london/planning',
intro: 'Planning controls relating to protection and reuse.', intro: 'Planning controls relating to protection and reuse.',
}, },
[Category.Sustainability]: { [Category.Sustainability]: {
slug: 'sustainability', slug: 'sustainability',
name: 'Sustainability', name: 'Energy Performance',
aboutUrl: 'https://pages.colouring.london/sustainability', aboutUrl: 'https://pages.colouring.london/sustainability',
intro: 'Are buildings energy efficient?', intro: 'Are buildings energy efficient?',
}, },
[Category.Type]: { [Category.Type]: {
slug: 'type', slug: 'type',
name: 'Type', name: 'Typology',
aboutUrl: 'https://pages.colouring.london/buildingtypology', aboutUrl: 'https://pages.colouring.london/buildingtypology',
intro: 'How were buildings previously used?', intro: 'How were buildings previously used?',
}, },
@ -113,9 +113,9 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
aboutUrl: 'https://pages.colouring.london/greenery', aboutUrl: 'https://pages.colouring.london/greenery',
intro: "What's the building's context? Coming soon…", intro: "What's the building's context? Coming soon…",
}, },
[Category.Dynamics]: { [Category.Resilience]: {
slug: 'dynamics', slug: 'resilience',
name: 'Dynamics', name: 'Resilience',
aboutUrl: 'https://pages.colouring.london/dynamics', aboutUrl: 'https://pages.colouring.london/dynamics',
intro: 'How has the site of this building changed over time?' intro: 'How has the site of this building changed over time?'
}, },

4
app/src/frontend/config/category-maps-config.ts
View File

@ -317,10 +317,10 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
elements: [] elements: []
}, },
}], }],
[Category.Dynamics]: [{ [Category.Resilience]: [{
mapStyle: 'dynamics_demolished_count', mapStyle: 'dynamics_demolished_count',
legend: { legend: {
title: 'Dynamics', title: 'Resilience',
description: 'Demolished buildings on the same site', description: 'Demolished buildings on the same site',
elements: [ elements: [
{ {

4
app/src/frontend/config/category-ui-config.ts
View File

@ -3,7 +3,7 @@ import { Category } from './categories-config';
import AgeContainer from '../building/data-containers/age'; import AgeContainer from '../building/data-containers/age';
import CommunityContainer from '../building/data-containers/community'; import CommunityContainer from '../building/data-containers/community';
import ConstructionContainer from '../building/data-containers/construction'; 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 LocationContainer from '../building/data-containers/location';
import PlanningContainer from '../building/data-containers/planning'; import PlanningContainer from '../building/data-containers/planning';
import SizeContainer from '../building/data-containers/size'; import SizeContainer from '../building/data-containers/size';
@ -26,7 +26,7 @@ export const categoryUiConfig: {[key in Category]: DataContainerType} = {
[Category.Team]: TeamContainer, [Category.Team]: TeamContainer,
[Category.Planning]: PlanningContainer, [Category.Planning]: PlanningContainer,
[Category.Sustainability]: SustainabilityContainer, [Category.Sustainability]: SustainabilityContainer,
[Category.Dynamics]: DynamicsContainer, [Category.Resilience]: ResilienceContainer,
[Category.Community]: CommunityContainer, [Category.Community]: CommunityContainer,
}; };

10
app/src/frontend/config/data-fields-config.ts
View File

@ -452,6 +452,12 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
//tooltip: , //tooltip: ,
}, },
historical_status: {
category: Category.Age,
title: "Historical Status",
tooltip: "Survival and Loss tracked using Historical Maps",
},
edit_history: { edit_history: {
category: Category.Planning, category: Category.Planning,
title: "PLANNING DATA", title: "PLANNING DATA",
@ -613,13 +619,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
}, },
dynamics_has_demolished_buildings: { dynamics_has_demolished_buildings: {
category: Category.Dynamics, category: Category.Resilience,
title: 'Were any other buildings ever built on this site?', title: 'Were any other buildings ever built on this site?',
example: true, example: true,
}, },
demolished_buildings: { demolished_buildings: {
category: Category.Dynamics, category: Category.Resilience,
title: 'Past (demolished) buildings on this site', title: 'Past (demolished) buildings on this site',
items: { items: {
year_constructed: { year_constructed: {

8
app/src/frontend/styles/colours.css
View File

@ -66,13 +66,13 @@
background-color: #f77d11; background-color: #f77d11;
} }
.background-age { .background-age {
background-color: #ff6161; background-color: #ab8fb0;
} }
.background-size { .background-size {
background-color: #f2a2b9; background-color: #ff6161;
} }
.background-construction { .background-construction {
background-color: #ab8fb0; background-color: #f2a2b9;
} }
.background-streetscape { .background-streetscape {
background-color: #718899; background-color: #718899;
@ -86,7 +86,7 @@
.background-sustainability { .background-sustainability {
background-color: #6bb1e3; background-color: #6bb1e3;
} }
.background-dynamics { .background-resilience {
background-color: #aaaaaa; background-color: #aaaaaa;
} }
.background-community { .background-community {