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 ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Building Age" collapsed={true} > <DataEntryGroup name="Building Age" collapsed={false} >
<YearDataEntry <YearDataEntry
year={props.building.date_year} year={props.building.date_year}
upper={props.building.date_upper} 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); const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x);
return <> return <>
<DataEntryGroup name="Community views on building types" collapsed={false} > <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'> <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 <UserOpinionEntry
slug='community_like' slug='community_like'
@ -59,13 +59,13 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
mode={props.mode} mode={props.mode}
copy={props.copy} 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'} {(props.mapColourScale == "likes")? 'Showing likes for specific buildings' : 'Click to see likes for specific buildings mapped'}
</button> </button>
</> </>
: <></>} : <></>}
*/
}
<LogicalDataEntryYesOnlyWithExplanation <LogicalDataEntryYesOnlyWithExplanation
slug='community_type_worth_keeping' slug='community_type_worth_keeping'
title={buildingUserFields.community_type_worth_keeping.title} 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 Verification from '../data-components/verification';
import { CategoryViewProps } from './category-view-props'; import { CategoryViewProps } from './category-view-props';
import InfoBox from '../../components/info-box';
import { DataEntryGroup } from '../data-components/data-entry-group';
const ConstructionMaterialsOptions = [ const ConstructionMaterialsOptions = [
'Wood', 'Wood',
@ -36,59 +38,63 @@ const RoofCoveringOptions = [
const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => { const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => {
return ( return (
<Fragment> <Fragment>
<SelectDataEntry <DataEntryGroup name="Materials" collapsed={false}>
title={dataFields.construction_core_material.title} <SelectDataEntry
slug="construction_core_material" title={dataFields.construction_core_material.title}
value={props.building.construction_core_material} slug="construction_core_material"
tooltip={dataFields.construction_core_material.tooltip} value={props.building.construction_core_material}
options={ConstructionMaterialsOptions} tooltip={dataFields.construction_core_material.tooltip}
mode={props.mode} options={ConstructionMaterialsOptions}
copy={props.copy} mode={props.mode}
onChange={props.onChange} 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}
/> />
<SelectDataEntry <Verification
title={dataFields.construction_secondary_materials.title} slug="construction_core_material"
disabled={true} allow_verify={props.user !== undefined && props.building.construction_core_material !== null && !props.edited}
slug="construction_secondary_materials" onVerify={props.onVerify}
value={props.building.construction_secondary_materials} user_verified={props.user_verified.hasOwnProperty("construction_core_material")}
tooltip={dataFields.construction_secondary_materials.tooltip} user_verified_as={props.user_verified.construction_core_material}
options={ConstructionMaterialsOptions} verified_count={props.building.verified.construction_core_material}
mode={props.mode} />
copy={props.copy} <SelectDataEntry
onChange={props.onChange} title={dataFields.construction_secondary_materials.title}
/> disabled={true}
<SelectDataEntry slug="construction_secondary_materials"
title={dataFields.construction_roof_covering.title} value={props.building.construction_secondary_materials}
slug="construction_roof_covering" tooltip={dataFields.construction_secondary_materials.tooltip}
value={props.building.construction_roof_covering} options={ConstructionMaterialsOptions}
tooltip={dataFields.construction_roof_covering.tooltip} mode={props.mode}
options={RoofCoveringOptions} copy={props.copy}
mode={props.mode} onChange={props.onChange}
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}
/> />
<DataEntry <SelectDataEntry
title="Construction system type" title={dataFields.construction_roof_covering.title}
slug="" slug="construction_roof_covering"
value="" value={props.building.construction_roof_covering}
mode='view' 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> </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 { PatternDataEntry } from '../data-components/pattern-data-entry';
import { CategoryViewProps } from './category-view-props'; 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*))?/; 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} tooltip={dataFields.location_name.tooltip}
placeholder="https://..." placeholder="https://..."
isUrl={true} isUrl={true}
/> />
<Verification <Verification
slug="location_name" slug="location_name"
allow_verify={props.user !== undefined && props.building.location_name !== null && !props.edited} 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={props.user_verified.hasOwnProperty("location_name")}
user_verified_as={props.user_verified.location_name} user_verified_as={props.user_verified.location_name}
verified_count={props.building.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 <DataEntry
title={dataFields.location_street.title} title="Building Name (Domestic)"
slug="location_street" slug=""
value={props.building.location_street} value=""
mode={props.mode} mode='view'
copy={props.copy} tooltip="Coming Soon"
onChange={props.onChange} />
maxLength={30} <DataEntryGroup name="Address" collapsed={false}>
/> <PatternDataEntry
<Verification title={dataFields.location_number.title}
slug="location_street" slug="location_number"
allow_verify={props.user !== undefined && props.building.location_street !== null && !props.edited} value={props.building.location_number}
onVerify={props.onVerify} pattern={locationNumberPattern}
user_verified={props.user_verified.hasOwnProperty("location_street")} mode={props.mode}
user_verified_as={props.user_verified.location_street} copy={props.copy}
verified_count={props.building.verified.location_street} onChange={props.onChange}
/> tooltip={dataFields.location_number.tooltip}
/>
<DataEntry <Verification
title={dataFields.location_line_two.title} slug="location_number"
slug="location_line_two" allow_verify={props.user !== undefined && props.building.location_number !== null && !props.edited}
value={props.building.location_line_two} onVerify={props.onVerify}
mode={props.mode} user_verified={props.user_verified.hasOwnProperty("location_number")}
copy={props.copy} user_verified_as={props.user_verified.location_number}
onChange={props.onChange} verified_count={props.building.verified.location_number}
maxLength={30} />
/> <DataEntry
<Verification title={dataFields.location_street.title}
slug="location_line_two" slug="location_street"
allow_verify={props.user !== undefined && props.building.location_line_two !== null && !props.edited} value={props.building.location_street}
onVerify={props.onVerify} mode={props.mode}
user_verified={props.user_verified.hasOwnProperty("location_line_two")} copy={props.copy}
user_verified_as={props.user_verified.location_line_two} onChange={props.onChange}
verified_count={props.building.verified.location_line_two} maxLength={30}
/> />
<DataEntry <Verification
title={dataFields.location_town.title} slug="location_street"
slug="location_town" allow_verify={props.user !== undefined && props.building.location_street !== null && !props.edited}
value={props.building.location_town} onVerify={props.onVerify}
mode={props.mode} user_verified={props.user_verified.hasOwnProperty("location_street")}
copy={props.copy} user_verified_as={props.user_verified.location_street}
onChange={props.onChange} verified_count={props.building.verified.location_street}
/>
/> <DataEntry
<Verification title={dataFields.location_line_two.title}
slug="location_town" slug="location_line_two"
allow_verify={props.user !== undefined && props.building.location_town !== null && !props.edited} value={props.building.location_line_two}
onVerify={props.onVerify} mode={props.mode}
user_verified={props.user_verified.hasOwnProperty("location_town")} copy={props.copy}
user_verified_as={props.user_verified.location_town} onChange={props.onChange}
verified_count={props.building.verified.location_town} maxLength={30}
/> />
<DataEntry <Verification
title={dataFields.location_postcode.title} slug="location_line_two"
slug="location_postcode" allow_verify={props.user !== undefined && props.building.location_line_two !== null && !props.edited}
value={props.building.location_postcode} onVerify={props.onVerify}
mode={props.mode} user_verified={props.user_verified.hasOwnProperty("location_line_two")}
copy={props.copy} user_verified_as={props.user_verified.location_line_two}
onChange={props.onChange} verified_count={props.building.verified.location_line_two}
maxLength={8} />
valueTransform={x=>x.toUpperCase()} <DataEntry
title={dataFields.location_town.title}
/> slug="location_town"
<Verification value={props.building.location_town}
slug="location_postcode" mode={props.mode}
allow_verify={props.user !== undefined && props.building.location_postcode !== null && !props.edited} copy={props.copy}
onVerify={props.onVerify} onChange={props.onChange}
user_verified={props.user_verified.hasOwnProperty("location_postcode")} />
user_verified_as={props.user_verified.location_postcode} <Verification
verified_count={props.building.verified.location_postcode} slug="location_town"
/> allow_verify={props.user !== undefined && props.building.location_town !== null && !props.edited}
<DataEntry onVerify={props.onVerify}
title={dataFields.ref_toid.title} user_verified={props.user_verified.hasOwnProperty("location_town")}
slug="ref_toid" user_verified_as={props.user_verified.location_town}
value={props.building.ref_toid} verified_count={props.building.verified.location_town}
mode={props.mode} />
copy={props.copy} <DataEntry
tooltip={dataFields.ref_toid.tooltip} title={dataFields.location_postcode.title}
onChange={props.onChange} slug="location_postcode"
value={props.building.location_postcode}
/> mode={props.mode}
<UPRNsDataEntry copy={props.copy}
title={dataFields.uprns.title} onChange={props.onChange}
slug="ref_uprns" maxLength={8}
value={props.building.uprns} valueTransform={x=>x.toUpperCase()}
tooltip={dataFields.uprns.tooltip}
/> />
<DataEntry <Verification
title={dataFields.ref_osm_id.title} slug="location_postcode"
slug="ref_osm_id" allow_verify={props.user !== undefined && props.building.location_postcode !== null && !props.edited}
value={props.building.ref_osm_id} onVerify={props.onVerify}
mode={props.mode} user_verified={props.user_verified.hasOwnProperty("location_postcode")}
copy={props.copy} user_verified_as={props.user_verified.location_postcode}
tooltip={dataFields.ref_osm_id.tooltip} verified_count={props.building.verified.location_postcode}
maxLength={20} />
onChange={props.onChange} <DataEntry
/> title="Address Source"
<Verification slug=""
slug="ref_osm_id" value=""
allow_verify={props.user !== undefined && props.building.ref_osm_id !== null && !props.edited} mode='view'
onVerify={props.onVerify} tooltip="Coming Soon"
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}
/> />
</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> </Fragment>
); );
const LocationContainer = withCopyEdit(LocationView); 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 (<> return (<>
<DataEntryGroup name="Building Damage Assessment Tool" collapsed={true} > <DataEntryGroup name="Building Damage Assessment Tool" collapsed={true} >
<InfoBox> <InfoBox>
This feature is designed as an assessment tool to help communities capture data on the state of buildings following major disasters. 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. It is intended to help support emergency services, to record damage, and to aid reconstruction programmes.
</InfoBox> </InfoBox>
<button className={`map-switcher-inline ${historicData}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}> <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'} {(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 withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props'; import { CategoryViewProps } from './category-view-props';
import InfoBox from '../../components/info-box';
/** /**
* Size view/edit section * Size view/edit section
*/ */
const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => ( const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment> <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"> <DataEntryGroup name="Floors">
<NumericDataEntry <NumericDataEntry
title={dataFields.size_storeys_core.title} 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) => ( const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment> <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 <DataEntry
title="Plot dimensions" title="Does the building have a front garden?"
slug="" slug=""
value="" value=""
mode='view' mode='view'
/> />
<DataEntry <DataEntry
title="Plot geometry link" title="Does the building have a back garden?"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Does the building have a garden?"
slug="" slug=""
value="" value=""
mode='view' 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} 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>
This section is under development.
</InfoBox>
<DataEntry <DataEntry
title="Date of Significant Retrofits" title="Date of Significant Retrofits"
slug="" slug=""
@ -119,7 +116,7 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
mode='view' mode='view'
/> />
<DataEntry <DataEntry
title="Green Walls / Green Roof / Shading" title="Green Walls / Green Roof"
slug="" slug=""
value="" value=""
mode='view' 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; const currentBuildingConstructionYear = building.date_year || undefined;
return ( return (
<form> <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 <MultiDataEntry
title={dataFields.landowner.title} title={dataFields.landowner.title}
slug="landowner" slug="landowner"
@ -53,67 +105,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true} editableEntries={true}
isUrl={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 <SelectDataEntry
slug='developer_type' slug='developer_type'
title={dataFields.developer_type.title} title={dataFields.developer_type.title}
@ -162,14 +153,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true} editableEntries={true}
isUrl={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 <MultiDataEntry
title={dataFields.designers.title} title={dataFields.designers.title}
slug="designers" slug="designers"
@ -201,14 +184,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true} editableEntries={true}
isUrl={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 <SelectDataEntry
slug='lead_designer_type' slug='lead_designer_type'
title={dataFields.lead_designer_type.title} title={dataFields.lead_designer_type.title}
@ -297,51 +272,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true} editableEntries={true}
isUrl={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> </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 withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props'; import { CategoryViewProps } from './category-view-props';
import InfoBox from '../../components/info-box';
const AttachmentFormOptions = [ const AttachmentFormOptions = [
"Detached", "Detached",
@ -22,42 +23,6 @@ const AttachmentFormOptions = [
const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => { const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
return ( return (
<Fragment> <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 <SelectDataEntry
title={dataFields.building_attachment_form.title} title={dataFields.building_attachment_form.title}
slug="building_attachment_form" slug="building_attachment_form"
@ -76,7 +41,50 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.building_attachment_form} user_verified_as={props.user_verified.building_attachment_form}
verified_count={props.building.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 <DataEntry
title="Local typology mutations" title="Local typology mutations"
slug="" 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 { CategoryViewProps } from './category-view-props';
import Verification from '../data-components/verification'; import Verification from '../data-components/verification';
import { useDisplayPreferences } from '../../displayPreferences-context'; import { useDisplayPreferences } from '../../displayPreferences-context';
import { DataEntryGroup } from '../data-components/data-entry-group';
/** /**
* Use view/edit section * Use view/edit section
@ -24,109 +25,121 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
const { darkLightTheme } = useDisplayPreferences(); const { darkLightTheme } = useDisplayPreferences();
return ( return (
<Fragment> <Fragment>
<SelectDataEntry <DataEntryGroup name="Domestic or non-domestic use" collapsed={false}>
title={dataFields.is_domestic.title} <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>
slug="is_domestic" <button className={`map-switcher-inline ${props.mapColourScale == "is_domestic" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToIsDomesticMapStyle}>
value={props.building.is_domestic} {(props.mapColourScale == "is_domestic")? 'Showing domestic status for specific buildings' : 'Click to see domestic, non-domestic and mixed-use buildings'}
options={["yes", "no", "mixed domestic/non-domestic"]} </button>
mode={props.mode} <SelectDataEntry
copy={props.copy} title={dataFields.is_domestic.title}
onChange={props.onChange} slug="is_domestic"
tooltip={dataFields.is_domestic.tooltip} value={props.building.is_domestic}
/> options={["yes", "no", "mixed domestic/non-domestic"]}
<Verification mode={props.mode}
slug="is_domestic" copy={props.copy}
allow_verify={props.user !== undefined && props.building.is_domestic !== null && !props.edited} onChange={props.onChange}
onVerify={props.onVerify} tooltip={dataFields.is_domestic.tooltip}
user_verified={props.user_verified.hasOwnProperty("is_domestic")} />
user_verified_as={props.user_verified.is_domestic} <Verification
verified_count={props.building.verified.is_domestic} slug="is_domestic"
/> allow_verify={props.user !== undefined && props.building.is_domestic !== null && !props.edited}
Work from home does not count as office and does not make building non-domestic. onVerify={props.onVerify}
<button className={`map-switcher-inline ${props.mapColourScale == "is_domestic" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToIsDomesticMapStyle}> user_verified={props.user_verified.hasOwnProperty("is_domestic")}
{(props.mapColourScale == "is_domestic")? 'Showing domestic status for specific buildings' : 'Click to see domestic status for specific buildings mapped'} user_verified_as={props.user_verified.is_domestic}
</button> verified_count={props.building.verified.is_domestic}
<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 <InfoBox type='warning'>Note: Work from home does not count as office and does not make building non-domestic.</InfoBox>
title={dataFields.current_landuse_group.title} <SelectDataEntry
slug="current_landuse_group" title={dataFields.is_domestic_source.title}
value={props.building.current_landuse_group} slug="is_domestic_source"
mode={props.mode} value={props.building.is_domestic}
copy={props.copy} options={
onChange={props.onChange} [
confirmOnEnter={true} "Citizen/passerby",
tooltip={dataFields.current_landuse_group.tooltip} "Google or other photograph/satellite imagery",
placeholder="Type new land use group here" "Government Record",
copyable={true} "Other Record"
autofill={true} ]
showAllOptionsOnEmpty={true} }
/> mode={props.mode}
<Verification copy={props.copy}
slug="current_landuse_group" onChange={props.onChange}
allow_verify={props.user !== undefined && props.building.current_landuse_group !== null && !props.edited} tooltip={dataFields.is_domestic_source.tooltip}
onVerify={props.onVerify} />
user_verified={props.user_verified.hasOwnProperty("current_landuse_group")} <DataEntry
user_verified_as={props.user_verified.current_landuse_group && props.user_verified.current_landuse_group.join(", ")} title="Please provide a link to the data source"
verified_count={props.building.verified.current_landuse_group} slug=""
/> value=""
{ mode='view'
props.mode != 'view' && tooltip="Coming Soon"
<InfoBox msg="Land use order, shown below, is automatically derived from the land use groups"></InfoBox> />
} </DataEntryGroup>
<DataEntry <DataEntryGroup name="Specific Land Use" collapsed={false}>
title={dataFields.current_landuse_order.title} <MultiDataEntry
tooltip={dataFields.current_landuse_order.tooltip} title={dataFields.current_landuse_group.title}
slug="current_landuse_order" slug="current_landuse_group"
value={props.building.current_landuse_order} value={props.building.current_landuse_group}
mode={props.mode} mode={props.mode}
disabled={true} copy={props.copy}
copy={props.copy} onChange={props.onChange}
onChange={props.onChange} confirmOnEnter={true}
/> tooltip={dataFields.current_landuse_group.tooltip}
<SelectDataEntry placeholder="Type new land use group here"
title={dataFields.current_landuse_source.title} copyable={true}
slug="current_landuse_source" autofill={true}
value={props.building.current_landuse_source} showAllOptionsOnEmpty={true}
mode={props.mode} />
copy={props.copy} <Verification
onChange={props.onChange} slug="current_landuse_group"
tooltip={dataFields.current_landuse_source.tooltip} allow_verify={props.user !== undefined && props.building.current_landuse_group !== null && !props.edited}
placeholder={dataFields.current_landuse_source.example} onVerify={props.onVerify}
options={dataFields.current_landuse_source.items} 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(", ")}
<Verification verified_count={props.building.verified.current_landuse_group}
slug="current_landuse_source" />
allow_verify={props.user !== undefined && props.building.current_landuse_source !== null && !props.edited} <SelectDataEntry
onVerify={props.onVerify} title={dataFields.current_landuse_source.title}
user_verified={props.user_verified.hasOwnProperty("current_landuse_source")} slug="current_landuse_source"
user_verified_as={props.user_verified.current_landuse_source} value={props.building.current_landuse_source}
verified_count={props.building.verified.current_landuse_source} mode={props.mode}
/> copy={props.copy}
{(props.building.current_landuse_source == "Expert/personal knowledge of building" || onChange={props.onChange}
props.building.current_landuse_source == "Online streetview image" || tooltip={dataFields.current_landuse_source.tooltip}
props.building.current_landuse_source == null) ? <></> : placeholder={dataFields.current_landuse_source.example}
<><MultiDataEntry options={dataFields.current_landuse_source.items}
title={dataFields.current_landuse_link.title} />
slug="current_landuse_link" {(props.building.current_landuse_source == "Expert/personal knowledge of building" ||
value={props.building.current_landuse_link} props.building.current_landuse_source == "Online streetview image" ||
mode={props.mode} props.building.current_landuse_source == null) ? <></> :
copy={props.copy} <><MultiDataEntry
onChange={props.onChange} title={dataFields.current_landuse_link.title}
tooltip={dataFields.current_landuse_link.tooltip} slug="current_landuse_link"
placeholder="https://..." value={props.building.current_landuse_link}
editableEntries={true} mode={props.mode}
isUrl={true} copy={props.copy}
/> onChange={props.onChange}
<Verification tooltip={dataFields.current_landuse_link.tooltip}
slug="current_landuse_link" placeholder="https://..."
allow_verify={props.user !== undefined && props.building.current_landuse_link !== null && !props.edited} editableEntries={true}
onVerify={props.onVerify} isUrl={true}
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} }
/> {
</> 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> </Fragment>
); );
}; };