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

WIP Various tweaks to category pages

Browse Source 
As discussed with Polly on 09/05/2023
This commit is contained in:
Mike Simpson 2023-05-12 16:43:20 +01:00
parent 0a24d60c43
commit f43e5f60fe
11 changed files with 495 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,7 +47,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
){
return (
<Fragment>
<DataEntryGroup name="Building Age" collapsed={true} >
<DataEntryGroup name="Building Age" collapsed={false} >
<YearDataEntry
year={props.building.date_year}
upper={props.building.date_upper}

16
app/src/frontend/building/data-containers/community.tsx
View File

@ -41,13 +41,13 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x);
return <>
<DataEntryGroup name="Community views on building types" collapsed={false} >
<InfoBox>
Note: We are not currently collecting data on domestic/privately owned properties, only on public buildings.
</InfoBox>
<div className='community-opinion-pane'>
<InfoBox>
Here we are collecting data on how well you think specific types of building work (rather than individual buildings), to help ensure we save and reuse all useful buildings and to help improve urban design quality in future.
</InfoBox>
{
/*
{(props.building.is_domestic === "no" || props.building.is_domestic === "mixed domestic/non-domestic") ?
(props.building.is_domestic === "no" || props.building.is_domestic === "mixed domestic/non-domestic") ?
<>
<UserOpinionEntry
slug='community_like'
@ -59,13 +59,13 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
mode={props.mode}
copy={props.copy}
/>
<button className={`map-switcher-inline ${props.mapColourScale == "likes" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToLikesMapStyle}>
<button className={`map-switcher-inline ${props.mapColourScale == "likes" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`}>
{(props.mapColourScale == "likes")? 'Showing likes for specific buildings' : 'Click to see likes for specific buildings mapped'}
</button>
</>
: <></>}
*/
}
<LogicalDataEntryYesOnlyWithExplanation
slug='community_type_worth_keeping'
title={buildingUserFields.community_type_worth_keeping.title}

108
app/src/frontend/building/data-containers/construction.tsx
View File

@ -7,6 +7,8 @@ import withCopyEdit from '../data-container';
import Verification from '../data-components/verification';
import { CategoryViewProps } from './category-view-props';
import InfoBox from '../../components/info-box';
import { DataEntryGroup } from '../data-components/data-entry-group';
const ConstructionMaterialsOptions = [
'Wood',
@ -36,59 +38,63 @@ const RoofCoveringOptions = [
const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => {
return (
<Fragment>
<SelectDataEntry
title={dataFields.construction_core_material.title}
slug="construction_core_material"
value={props.building.construction_core_material}
tooltip={dataFields.construction_core_material.tooltip}
options={ConstructionMaterialsOptions}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<Verification
slug="construction_core_material"
allow_verify={props.user !== undefined && props.building.construction_core_material !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("construction_core_material")}
user_verified_as={props.user_verified.construction_core_material}
verified_count={props.building.verified.construction_core_material}
<DataEntryGroup name="Materials" collapsed={false}>
<SelectDataEntry
title={dataFields.construction_core_material.title}
slug="construction_core_material"
value={props.building.construction_core_material}
tooltip={dataFields.construction_core_material.tooltip}
options={ConstructionMaterialsOptions}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<SelectDataEntry
title={dataFields.construction_secondary_materials.title}
disabled={true}
slug="construction_secondary_materials"
value={props.building.construction_secondary_materials}
tooltip={dataFields.construction_secondary_materials.tooltip}
options={ConstructionMaterialsOptions}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<SelectDataEntry
title={dataFields.construction_roof_covering.title}
slug="construction_roof_covering"
value={props.building.construction_roof_covering}
tooltip={dataFields.construction_roof_covering.tooltip}
options={RoofCoveringOptions}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<Verification
slug="construction_roof_covering"
allow_verify={props.user !== undefined && props.building.construction_roof_covering !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("construction_roof_covering")}
user_verified_as={props.user_verified.construction_roof_covering}
verified_count={props.building.verified.construction_roof_covering}
<Verification
slug="construction_core_material"
allow_verify={props.user !== undefined && props.building.construction_core_material !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("construction_core_material")}
user_verified_as={props.user_verified.construction_core_material}
verified_count={props.building.verified.construction_core_material}
/>
<SelectDataEntry
title={dataFields.construction_secondary_materials.title}
disabled={true}
slug="construction_secondary_materials"
value={props.building.construction_secondary_materials}
tooltip={dataFields.construction_secondary_materials.tooltip}
options={ConstructionMaterialsOptions}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<DataEntry
title="Construction system type"
slug=""
value=""
mode='view'
/>
<SelectDataEntry
title={dataFields.construction_roof_covering.title}
slug="construction_roof_covering"
value={props.building.construction_roof_covering}
tooltip={dataFields.construction_roof_covering.tooltip}
options={RoofCoveringOptions}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<Verification
slug="construction_roof_covering"
allow_verify={props.user !== undefined && props.building.construction_roof_covering !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("construction_roof_covering")}
user_verified_as={props.user_verified.construction_roof_covering}
verified_count={props.building.verified.construction_roof_covering}
/>
</DataEntryGroup>
<DataEntryGroup name="Construction Sectors" collapsed={false}>
<DataEntry
title="Construction system type"
slug=""
value=""
mode='view'
/>
</DataEntryGroup>
</Fragment>
);
};

346
app/src/frontend/building/data-containers/location.tsx
View File

@ -10,6 +10,7 @@ import withCopyEdit from '../data-container';
import { PatternDataEntry } from '../data-components/pattern-data-entry';
import { CategoryViewProps } from './category-view-props';
import { DataEntryGroup } from '../data-components/data-entry-group';
const locationNumberPattern = "[1-9]\\d*[a-z]?(-([1-9]\\d*))?"; ///[1-9]\d*[a-z]?(-([1-9]\d*))?/;
@ -25,7 +26,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
tooltip={dataFields.location_name.tooltip}
placeholder="https://..."
isUrl={true}
/>
/>
<Verification
slug="location_name"
allow_verify={props.user !== undefined && props.building.location_name !== null && !props.edited}
@ -33,172 +34,187 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified={props.user_verified.hasOwnProperty("location_name")}
user_verified_as={props.user_verified.location_name}
verified_count={props.building.verified.location_name}
/>
<PatternDataEntry
title={dataFields.location_number.title}
slug="location_number"
value={props.building.location_number}
pattern={locationNumberPattern}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.location_number.tooltip}
/>
<Verification
slug="location_number"
allow_verify={props.user !== undefined && props.building.location_number !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_number")}
user_verified_as={props.user_verified.location_number}
verified_count={props.building.verified.location_number}
/>
/>
<DataEntry
title={dataFields.location_street.title}
slug="location_street"
value={props.building.location_street}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
maxLength={30}
/>
<Verification
slug="location_street"
allow_verify={props.user !== undefined && props.building.location_street !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_street")}
user_verified_as={props.user_verified.location_street}
verified_count={props.building.verified.location_street}
/>
<DataEntry
title={dataFields.location_line_two.title}
slug="location_line_two"
value={props.building.location_line_two}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
maxLength={30}
/>
<Verification
slug="location_line_two"
allow_verify={props.user !== undefined && props.building.location_line_two !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_line_two")}
user_verified_as={props.user_verified.location_line_two}
verified_count={props.building.verified.location_line_two}
/>
<DataEntry
title={dataFields.location_town.title}
slug="location_town"
value={props.building.location_town}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<Verification
slug="location_town"
allow_verify={props.user !== undefined && props.building.location_town !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_town")}
user_verified_as={props.user_verified.location_town}
verified_count={props.building.verified.location_town}
/>
<DataEntry
title={dataFields.location_postcode.title}
slug="location_postcode"
value={props.building.location_postcode}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
maxLength={8}
valueTransform={x=>x.toUpperCase()}
/>
<Verification
slug="location_postcode"
allow_verify={props.user !== undefined && props.building.location_postcode !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_postcode")}
user_verified_as={props.user_verified.location_postcode}
verified_count={props.building.verified.location_postcode}
/>
<DataEntry
title={dataFields.ref_toid.title}
slug="ref_toid"
value={props.building.ref_toid}
mode={props.mode}
copy={props.copy}
tooltip={dataFields.ref_toid.tooltip}
onChange={props.onChange}
/>
<UPRNsDataEntry
title={dataFields.uprns.title}
slug="ref_uprns"
value={props.building.uprns}
tooltip={dataFields.uprns.tooltip}
/>
<DataEntry
title={dataFields.ref_osm_id.title}
slug="ref_osm_id"
value={props.building.ref_osm_id}
mode={props.mode}
copy={props.copy}
tooltip={dataFields.ref_osm_id.tooltip}
maxLength={20}
onChange={props.onChange}
/>
<Verification
slug="ref_osm_id"
allow_verify={props.user !== undefined && props.building.ref_osm_id !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("ref_osm_id")}
user_verified_as={props.user_verified.ref_osm_id}
verified_count={props.building.verified.ref_osm_id}
/>
<NumericDataEntry
title={dataFields.location_latitude.title}
slug="location_latitude"
value={props.building.location_latitude}
mode={props.mode}
copy={props.copy}
step={0.00001}
min={-90}
max={90}
placeholder="Latitude, e.g. 51.5467"
onChange={props.onChange}
/>
<Verification
slug="location_latitude"
allow_verify={props.user !== undefined && props.building.location_latitude !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_latitude")}
user_verified_as={props.user_verified.location_latitude}
verified_count={props.building.verified.location_latitude}
/>
<NumericDataEntry
title={dataFields.location_longitude.title}
slug="location_longitude"
value={props.building.location_longitude}
mode={props.mode}
copy={props.copy}
step={0.00001}
min={-180}
max={180}
placeholder="Longitude, e.g. -0.0586"
onChange={props.onChange}
/>
<Verification
slug="location_longitude"
allow_verify={props.user !== undefined && props.building.location_longitude !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_longitude")}
user_verified_as={props.user_verified.location_longitude}
verified_count={props.building.verified.location_longitude}
title="Building Name (Domestic)"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntryGroup name="Address" collapsed={false}>
<PatternDataEntry
title={dataFields.location_number.title}
slug="location_number"
value={props.building.location_number}
pattern={locationNumberPattern}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.location_number.tooltip}
/>
<Verification
slug="location_number"
allow_verify={props.user !== undefined && props.building.location_number !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_number")}
user_verified_as={props.user_verified.location_number}
verified_count={props.building.verified.location_number}
/>
<DataEntry
title={dataFields.location_street.title}
slug="location_street"
value={props.building.location_street}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
maxLength={30}
/>
<Verification
slug="location_street"
allow_verify={props.user !== undefined && props.building.location_street !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_street")}
user_verified_as={props.user_verified.location_street}
verified_count={props.building.verified.location_street}
/>
<DataEntry
title={dataFields.location_line_two.title}
slug="location_line_two"
value={props.building.location_line_two}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
maxLength={30}
/>
<Verification
slug="location_line_two"
allow_verify={props.user !== undefined && props.building.location_line_two !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_line_two")}
user_verified_as={props.user_verified.location_line_two}
verified_count={props.building.verified.location_line_two}
/>
<DataEntry
title={dataFields.location_town.title}
slug="location_town"
value={props.building.location_town}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<Verification
slug="location_town"
allow_verify={props.user !== undefined && props.building.location_town !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_town")}
user_verified_as={props.user_verified.location_town}
verified_count={props.building.verified.location_town}
/>
<DataEntry
title={dataFields.location_postcode.title}
slug="location_postcode"
value={props.building.location_postcode}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
maxLength={8}
valueTransform={x=>x.toUpperCase()}
/>
<Verification
slug="location_postcode"
allow_verify={props.user !== undefined && props.building.location_postcode !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_postcode")}
user_verified_as={props.user_verified.location_postcode}
verified_count={props.building.verified.location_postcode}
/>
<DataEntry
title="Address Source"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup>
<DataEntryGroup name="Other Location Data" collapsed={false}>
<DataEntry
title={dataFields.ref_toid.title}
slug="ref_toid"
value={props.building.ref_toid}
mode={props.mode}
copy={props.copy}
tooltip={dataFields.ref_toid.tooltip}
onChange={props.onChange}
/>
<UPRNsDataEntry
title={dataFields.uprns.title}
slug="ref_uprns"
value={props.building.uprns}
tooltip={dataFields.uprns.tooltip}
/>
<DataEntry
title={dataFields.ref_osm_id.title}
slug="ref_osm_id"
value={props.building.ref_osm_id}
mode={props.mode}
copy={props.copy}
tooltip={dataFields.ref_osm_id.tooltip}
maxLength={20}
onChange={props.onChange}
/>
<Verification
slug="ref_osm_id"
allow_verify={props.user !== undefined && props.building.ref_osm_id !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("ref_osm_id")}
user_verified_as={props.user_verified.ref_osm_id}
verified_count={props.building.verified.ref_osm_id}
/>
<NumericDataEntry
title={dataFields.location_latitude.title}
slug="location_latitude"
value={props.building.location_latitude}
tooltip={dataFields.location_latitude.tooltip}
mode={props.mode}
copy={props.copy}
step={0.00001}
min={-90}
max={90}
placeholder="Latitude, e.g. 51.5467"
onChange={props.onChange}
/>
<Verification
slug="location_latitude"
allow_verify={props.user !== undefined && props.building.location_latitude !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_latitude")}
user_verified_as={props.user_verified.location_latitude}
verified_count={props.building.verified.location_latitude}
/>
<NumericDataEntry
title={dataFields.location_longitude.title}
slug="location_longitude"
value={props.building.location_longitude}
tooltip={dataFields.location_latitude.tooltip}
mode={props.mode}
copy={props.copy}
step={0.00001}
min={-180}
max={180}
placeholder="Longitude, e.g. -0.0586"
onChange={props.onChange}
/>
<Verification
slug="location_longitude"
allow_verify={props.user !== undefined && props.building.location_longitude !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_longitude")}
user_verified_as={props.user_verified.location_longitude}
verified_count={props.building.verified.location_longitude}
/>
</DataEntryGroup>
</Fragment>
);
const LocationContainer = withCopyEdit(LocationView);

4
app/src/frontend/building/data-containers/resilience.tsx
View File

@ -25,8 +25,8 @@ const ResilienceView: React.FunctionComponent<CategoryViewProps> = (props) => {
return (<>
<DataEntryGroup name="Building Damage Assessment Tool" collapsed={true} >
<InfoBox>
This feature is designed as an assessment tool to help communities capture data on the state of buildings following major disasters.
It is intended to help support emergency services, to record damage, and to aid reconstruction programmes.
This feature is designed as an assessment tool to help communities capture data on the state of buildings following major disasters.
It is intended to help support emergency services, to record damage, and to aid reconstruction programmes.
</InfoBox>
<button className={`map-switcher-inline ${historicData}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}>
{(historicData === 'enabled')?'Click here to hide disaster maps':'Click here to show disaster maps'}

29
app/src/frontend/building/data-containers/size.tsx
View File

@ -9,12 +9,41 @@ import Verification from '../data-components/verification';
import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props';
import InfoBox from '../../components/info-box';
/**
* Size view/edit section
*/
const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment>
<DataEntryGroup name="Plot Size">
<NumericDataEntry
title={dataFields.size_plot_area_total.title}
slug="size_plot_area_total"
mode='view'
step={0.1}
min={0}
/>
<NumericDataEntry
title={dataFields.size_far_ratio.title}
slug="size_far_ratio"
mode='view'
step={0.1}
min={0}
/>
<DataEntry
title="Plot dimensions"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Plot geometry link"
slug=""
value=""
mode='view'
/>
</DataEntryGroup>
<DataEntryGroup name="Floors">
<NumericDataEntry
title={dataFields.size_storeys_core.title}

33
app/src/frontend/building/data-containers/streetscape.tsx
View File

@ -13,43 +13,14 @@ import { CategoryViewProps } from './category-view-props';
*/
const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment>
<InfoBox type='warning' msg="This is what we're planning to collect on the building's context" />
<ul className="data-list">
<li>Gardens</li>
<li>Trees</li>
<li>Green walls</li>
<li>Green roof</li>
<li>Proximity to parks and open greenspace</li>
<li>Building shading</li>
</ul>
<NumericDataEntry
title={dataFields.size_plot_area_total.title}
slug="size_plot_area_total"
mode='view'
step={0.1}
min={0}
/>
<NumericDataEntry
title={dataFields.size_far_ratio.title}
slug="size_far_ratio"
mode='view'
step={0.1}
min={0}
/>
<DataEntry
title="Plot dimensions"
title="Does the building have a front garden?"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Plot geometry link"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Does the building have a garden?"
title="Does the building have a back garden?"
slug=""
value=""
mode='view'

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

@ -95,9 +95,6 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
user_verified_as={props.user_verified.sust_retrofit_date}
verified_count={props.building.verified.sust_retrofit_date}
/>
<InfoBox>
This section is under development.
</InfoBox>
<DataEntry
title="Date of Significant Retrofits"
slug=""
@ -119,7 +116,7 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
mode='view'
/>
<DataEntry
title="Green Walls / Green Roof / Shading"
title="Green Walls / Green Roof"
slug=""
value=""
mode='view'

176
app/src/frontend/building/data-containers/team.tsx
View File

@ -21,7 +21,59 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
const currentBuildingConstructionYear = building.date_year || undefined;
return (
<form>
<InfoBox msg="Can you help us capture information on who built the current building?"></InfoBox>
<NumericDataEntry
slug='date_year'
title={dataFields.date_year.title}
value={currentBuildingConstructionYear}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
step={1}
min={1}
max={currentYear}
tooltip={dataFields.extension_year.tooltip}
/>
<Verification
slug="date_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}
/>
<LogicalDataEntry
title={dataFields.has_extension.title}
slug="has_extension"
value={props.building.has_extension}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.has_extension.tooltip}
/>
{props.building.has_extension ? (
<>
<NumericDataEntry
slug='extension_year'
title={dataFields.extension_year.title}
value={props.building.extension_year}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
step={1}
min={1}
max={currentYear}
tooltip={dataFields.extension_year.tooltip_extension}
/>
<Verification
slug="extension_year"
allow_verify={props.user !== undefined && props.building.extension_year !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("extension_year")}
user_verified_as={props.user_verified.extension_year}
verified_count={props.building.verified.extension_year}
/>
</>
) : (null)}
<MultiDataEntry
title={dataFields.landowner.title}
slug="landowner"
@ -53,67 +105,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true}
isUrl={true}
/>
<Verification
slug="landowner_source_link"
allow_verify={props.user !== undefined && props.building.landowner_source_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("landowner_source_link")}
user_verified_as={props.user_verified.landowner_source_link}
verified_count={props.building.verified.landowner_source_link}
/>
<NumericDataEntry
slug='date_year'
title={dataFields.date_year.title}
value={currentBuildingConstructionYear}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
step={1}
min={1}
max={currentYear}
tooltip={dataFields.extension_year.tooltip}
/>
<Verification
slug="date_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}
/>
<LogicalDataEntry
title={dataFields.has_extension.title}
slug="has_extension"
value={props.building.has_extension}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.has_extension.tooltip}
/>
{props.building.has_extension ? (
<>
<NumericDataEntry
slug='extension_year'
title={dataFields.extension_year.title}
value={props.building.extension_year}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
step={1}
min={1}
max={currentYear}
tooltip={dataFields.extension_year.tooltip_extension}
/>
<Verification
slug="extension_year"
allow_verify={props.user !== undefined && props.building.extension_year !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("extension_year")}
user_verified_as={props.user_verified.extension_year}
verified_count={props.building.verified.extension_year}
/>
</>
) : (null)}
<SelectDataEntry
slug='developer_type'
title={dataFields.developer_type.title}
@ -162,14 +153,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true}
isUrl={true}
/>
<Verification
slug="developer_source_link"
allow_verify={props.user !== undefined && props.building.developer_source_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("developer_source_link")}
user_verified_as={props.user_verified.developer_source_link}
verified_count={props.building.verified.developer_source_link}
/>
<MultiDataEntry
title={dataFields.designers.title}
slug="designers"
@ -201,14 +184,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true}
isUrl={true}
/>
<Verification
slug="designers_source_link"
allow_verify={props.user !== undefined && props.building.designers_source_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("designers_source_link")}
user_verified_as={props.user_verified.designers_source_link}
verified_count={props.building.verified.designers_source_link}
/>
<SelectDataEntry
slug='lead_designer_type'
title={dataFields.lead_designer_type.title}
@ -297,51 +272,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true}
isUrl={true}
/>
<Verification
slug="builder_source_link"
allow_verify={props.user !== undefined && props.building.builder_source_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("builder_source_link")}
user_verified_as={props.user_verified.builder_source_link}
verified_count={props.building.verified.builder_source_link}
/>
<MultiDataEntry
title={dataFields.other_team.title}
slug="other_team"
value={props.building.other_team}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
placeholder=""
editableEntries={true}
/>
<Verification
slug="other_team"
allow_verify={props.user !== undefined && props.building.other_team !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("other_team")}
user_verified_as={props.user_verified.other_team}
verified_count={props.building.verified.other_team}
/>
<MultiDataEntry
title={dataFields.other_team_source_link.title}
slug="other_team_source_link"
value={props.building.other_team_source_link}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
placeholder="https://..."
editableEntries={true}
isUrl={true}
/>
<Verification
slug="other_team_source_link"
allow_verify={props.user !== undefined && props.building.other_team_source_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("other_team_source_link")}
user_verified_as={props.user_verified.other_team_source_link}
verified_count={props.building.verified.other_team_source_link}
/>
</form>
);
};

82
app/src/frontend/building/data-containers/type.tsx
View File

@ -8,6 +8,7 @@ import Verification from '../data-components/verification';
import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props';
import InfoBox from '../../components/info-box';
const AttachmentFormOptions = [
"Detached",
@ -22,42 +23,6 @@ const AttachmentFormOptions = [
const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
return (
<Fragment>
<DataEntry
title="Base type classification"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Local typology/architectural style"
slug=""
value=""
mode='view'
/>
<DataEntry
title={dataFields.original_building_use.title}
slug="original_building_use" // doesn't exist in database yet
tooltip={dataFields.original_building_use.tooltip}
value={undefined}
copy={props.copy}
mode={props.mode}
onChange={props.onChange}
disabled={true}
/>
<SelectDataEntry
title={dataFields.size_roof_shape.title}
slug="size_roof_shape"
value={props.building.size_roof_shape}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
disabled={true}
options={[
"Flat",
"Pitched",
"Other"
]}
/>
<SelectDataEntry
title={dataFields.building_attachment_form.title}
slug="building_attachment_form"
@ -76,7 +41,50 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.building_attachment_form}
verified_count={props.building.verified.building_attachment_form}
/>
<DataEntry
title={dataFields.original_building_use.title}
slug="original_building_use" // doesn't exist in database yet
tooltip={dataFields.original_building_use.tooltip}
value={undefined}
copy={props.copy}
mode={props.mode}
onChange={props.onChange}
disabled={true}
/>
<Verification
slug="building_attachment_form"
allow_verify={props.user !== undefined && props.building.building_attachment_form !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("building_attachment_form")}
user_verified_as={props.user_verified.building_attachment_form}
verified_count={props.building.verified.building_attachment_form}
/>
<DataEntry
title="Local typology/architectural style"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Base type classification"
slug=""
value=""
mode='view'
/>
<SelectDataEntry
title={dataFields.size_roof_shape.title}
slug="size_roof_shape"
value={props.building.size_roof_shape}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
disabled={true}
options={[
"Flat",
"Pitched",
"Other"
]}
/>
<DataEntry
title="Local typology mutations"
slug=""

219
app/src/frontend/building/data-containers/use.tsx
View File

@ -12,6 +12,7 @@ import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props';
import Verification from '../data-components/verification';
import { useDisplayPreferences } from '../../displayPreferences-context';
import { DataEntryGroup } from '../data-components/data-entry-group';
/**
* Use view/edit section
@ -24,109 +25,121 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
const { darkLightTheme } = useDisplayPreferences();
return (
<Fragment>
<SelectDataEntry
title={dataFields.is_domestic.title}
slug="is_domestic"
value={props.building.is_domestic}
options={["yes", "no", "mixed domestic/non-domestic"]}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.is_domestic.tooltip}
/>
<Verification
slug="is_domestic"
allow_verify={props.user !== undefined && props.building.is_domestic !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("is_domestic")}
user_verified_as={props.user_verified.is_domestic}
verified_count={props.building.verified.is_domestic}
/>
Work from home does not count as office and does not make building non-domestic.
<button className={`map-switcher-inline ${props.mapColourScale == "is_domestic" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToIsDomesticMapStyle}>
{(props.mapColourScale == "is_domestic")? 'Showing domestic status for specific buildings' : 'Click to see domestic status for specific buildings mapped'}
</button>
<InfoBox msg="93% of properties in UK are dwellings so we have set this as the default colour. Can you help us colour-in all non-residential and mixed use buildings, and verify residential buildings too?"></InfoBox>
<MultiDataEntry
title={dataFields.current_landuse_group.title}
slug="current_landuse_group"
value={props.building.current_landuse_group}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
confirmOnEnter={true}
tooltip={dataFields.current_landuse_group.tooltip}
placeholder="Type new land use group here"
copyable={true}
autofill={true}
showAllOptionsOnEmpty={true}
/>
<Verification
slug="current_landuse_group"
allow_verify={props.user !== undefined && props.building.current_landuse_group !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("current_landuse_group")}
user_verified_as={props.user_verified.current_landuse_group && props.user_verified.current_landuse_group.join(", ")}
verified_count={props.building.verified.current_landuse_group}
/>
{
props.mode != 'view' &&
<InfoBox msg="Land use order, shown below, is automatically derived from the land use groups"></InfoBox>
}
<DataEntry
title={dataFields.current_landuse_order.title}
tooltip={dataFields.current_landuse_order.tooltip}
slug="current_landuse_order"
value={props.building.current_landuse_order}
mode={props.mode}
disabled={true}
copy={props.copy}
onChange={props.onChange}
/>
<SelectDataEntry
title={dataFields.current_landuse_source.title}
slug="current_landuse_source"
value={props.building.current_landuse_source}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.current_landuse_source.tooltip}
placeholder={dataFields.current_landuse_source.example}
options={dataFields.current_landuse_source.items}
/>
<Verification
slug="current_landuse_source"
allow_verify={props.user !== undefined && props.building.current_landuse_source !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("current_landuse_source")}
user_verified_as={props.user_verified.current_landuse_source}
verified_count={props.building.verified.current_landuse_source}
/>
{(props.building.current_landuse_source == "Expert/personal knowledge of building" ||
props.building.current_landuse_source == "Online streetview image" ||
props.building.current_landuse_source == null) ? <></> :
<><MultiDataEntry
title={dataFields.current_landuse_link.title}
slug="current_landuse_link"
value={props.building.current_landuse_link}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.current_landuse_link.tooltip}
placeholder="https://..."
editableEntries={true}
isUrl={true}
/>
<Verification
slug="current_landuse_link"
allow_verify={props.user !== undefined && props.building.current_landuse_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("current_landuse_link")}
user_verified_as={props.user_verified.current_landuse_link}
verified_count={props.building.verified.current_landuse_link}
/>
</>
}
<DataEntryGroup name="Domestic or non-domestic use" collapsed={false}>
<InfoBox msg="93% of properties in UK are dwellings so we have set 'residential' as the default value. Can you help us identify non-residential and mixed use buildings (and verify residential buildings too)?"></InfoBox>
<button className={`map-switcher-inline ${props.mapColourScale == "is_domestic" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToIsDomesticMapStyle}>
{(props.mapColourScale == "is_domestic")? 'Showing domestic status for specific buildings' : 'Click to see domestic, non-domestic and mixed-use buildings'}
</button>
<SelectDataEntry
title={dataFields.is_domestic.title}
slug="is_domestic"
value={props.building.is_domestic}
options={["yes", "no", "mixed domestic/non-domestic"]}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.is_domestic.tooltip}
/>
<Verification
slug="is_domestic"
allow_verify={props.user !== undefined && props.building.is_domestic !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("is_domestic")}
user_verified_as={props.user_verified.is_domestic}
verified_count={props.building.verified.is_domestic}
/>
<InfoBox type='warning'>Note: Work from home does not count as office and does not make building non-domestic.</InfoBox>
<SelectDataEntry
title={dataFields.is_domestic_source.title}
slug="is_domestic_source"
value={props.building.is_domestic}
options={
[
"Citizen/passerby",
"Google or other photograph/satellite imagery",
"Government Record",
"Other Record"
]
}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.is_domestic_source.tooltip}
/>
<DataEntry
title="Please provide a link to the data source"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup>
<DataEntryGroup name="Specific Land Use" collapsed={false}>
<MultiDataEntry
title={dataFields.current_landuse_group.title}
slug="current_landuse_group"
value={props.building.current_landuse_group}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
confirmOnEnter={true}
tooltip={dataFields.current_landuse_group.tooltip}
placeholder="Type new land use group here"
copyable={true}
autofill={true}
showAllOptionsOnEmpty={true}
/>
<Verification
slug="current_landuse_group"
allow_verify={props.user !== undefined && props.building.current_landuse_group !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("current_landuse_group")}
user_verified_as={props.user_verified.current_landuse_group && props.user_verified.current_landuse_group.join(", ")}
verified_count={props.building.verified.current_landuse_group}
/>
<SelectDataEntry
title={dataFields.current_landuse_source.title}
slug="current_landuse_source"
value={props.building.current_landuse_source}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.current_landuse_source.tooltip}
placeholder={dataFields.current_landuse_source.example}
options={dataFields.current_landuse_source.items}
/>
{(props.building.current_landuse_source == "Expert/personal knowledge of building" ||
props.building.current_landuse_source == "Online streetview image" ||
props.building.current_landuse_source == null) ? <></> :
<><MultiDataEntry
title={dataFields.current_landuse_link.title}
slug="current_landuse_link"
value={props.building.current_landuse_link}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.current_landuse_link.tooltip}
placeholder="https://..."
editableEntries={true}
isUrl={true}
/>
</>
}
{
props.mode != 'view' &&
<InfoBox msg="A more general classification for the land use of this building is automatically derived and shown below."></InfoBox>
}
<DataEntry
title={dataFields.current_landuse_order.title}
tooltip={dataFields.current_landuse_order.tooltip}
slug="current_landuse_order"
value={props.building.current_landuse_order}
mode={props.mode}
disabled={true}
copy={props.copy}
onChange={props.onChange}
/>
</DataEntryGroup>
</Fragment>
);
};