141 lines
6.3 KiB
TypeScript
141 lines
6.3 KiB
TypeScript
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;
|