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

More UI Tweaks

Browse Source 
Mainly to improve consistency and readability across all categories/pages
Discussed in meeting with Polly 16/05
This commit is contained in:
Mike Simpson 2023-05-16 17:08:21 +01:00
parent f43e5f60fe
commit d14dea3d1a
17 changed files with 788 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/frontend/building/data-components/data-entry-group.css
View File

@ -3,6 +3,8 @@
position: relative; position: relative;
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 410; font-weight: 410;
padding-top: 3px;
padding-bottom: 3px;
} }
.data-entry-group-header .data-entry-group-title { .data-entry-group-header .data-entry-group-title {
padding-left: 0.6rem; padding-left: 0.6rem;

2
app/src/frontend/building/data-container.css
View File

@ -1,7 +1,7 @@
.edit-bar { .edit-bar {
position: sticky; position: sticky;
top: 53px; /* match section-header height */ top: 53px; /* match section-header height */
padding: 12px 0; /* match info-container-inner margin-top*/ padding: 3px 0 0 0; /* match info-container-inner margin-top*/
width: 100%; width: 100%;
background-color: white; background-color: white;
z-index: 1000; z-index: 1000;

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

@ -413,7 +413,9 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
</button> : </button> :
null null
} }
<hr/>
</div> </div>
} }
</div> </div>
: null : null

10
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={false} > <DataEntryGroup name="Building Age">
<YearDataEntry <YearDataEntry
year={props.building.date_year} year={props.building.date_year}
upper={props.building.date_upper} upper={props.building.date_upper}
@ -140,7 +140,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
<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 historical maps':'Click here to show historical maps'} {(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'}
</button> </button>
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}> <DataEntryGroup name="Constructions and demolitions on this site" showCount={false}>
<DynamicsBuildingPane> <DynamicsBuildingPane>
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label> <label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
<FieldRow> <FieldRow>
@ -261,7 +261,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
}; };
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Building Age" collapsed={true} > <DataEntryGroup name="Building Age">
<YearDataEntry <YearDataEntry
year={props.building.date_year} year={props.building.date_year}
upper={props.building.date_upper} upper={props.building.date_upper}
@ -411,11 +411,11 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
mode='view' mode='view'
/> />
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Lifespan and Site History" collapsed={true} > <DataEntryGroup name="Lifespan and Site History">
<button className={`map-switcher-inline ${historicData} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}> <button className={`map-switcher-inline ${historicData} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}>
{(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'} {(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'}
</button> </button>
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}> <DataEntryGroup name="Constructions and demolitions on this site" showCount={false}>
<DynamicsBuildingPane> <DynamicsBuildingPane>
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label> <label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
<FieldRow> <FieldRow>

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

@ -40,7 +40,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
const { darkLightTheme } = useDisplayPreferences(); const { darkLightTheme } = useDisplayPreferences();
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">
<InfoBox> <InfoBox>
Note: We are not currently collecting data on domestic/privately owned properties, only on public buildings. Note: We are not currently collecting data on domestic/privately owned properties, only on public buildings.
</InfoBox> </InfoBox>
@ -151,7 +151,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
</div> </div>
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Building use for community activities" collapsed={false} > <DataEntryGroup name="Building use for community activities">
<InfoBox> <InfoBox>
Here we are collecting information on the location of buildings used for community activities so we can track loss of/additions to community space over time Here we are collecting information on the location of buildings used for community activities so we can track loss of/additions to community space over time
</InfoBox> </InfoBox>

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

@ -38,7 +38,7 @@ const RoofCoveringOptions = [
const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => { const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => {
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Materials" collapsed={false}> <DataEntryGroup name="Materials">
<SelectDataEntry <SelectDataEntry
title={dataFields.construction_core_material.title} title={dataFields.construction_core_material.title}
slug="construction_core_material" slug="construction_core_material"
@ -87,7 +87,7 @@ const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) =>
verified_count={props.building.verified.construction_roof_covering} verified_count={props.building.verified.construction_roof_covering}
/> />
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Construction Sectors" collapsed={false}> <DataEntryGroup name="Construction Sectors">
<DataEntry <DataEntry
title="Construction system type" title="Construction system type"
slug="" slug=""

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

@ -16,33 +16,50 @@ const locationNumberPattern = "[1-9]\\d*[a-z]?(-([1-9]\\d*))?"; ///[1-9]\d*[a-z]
const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => ( const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment> <Fragment>
<DataEntry
title={dataFields.location_name.title} <DataEntryGroup name="Address Data">
slug="location_name" <DataEntry
value={props.building.location_name} title={dataFields.location_name.title}
mode={props.mode} slug="location_name"
copy={props.copy} value={props.building.location_name}
onChange={props.onChange} mode={props.mode}
tooltip={dataFields.location_name.tooltip} copy={props.copy}
placeholder="https://..." onChange={props.onChange}
isUrl={true} tooltip={dataFields.location_name.tooltip}
/> placeholder="https://..."
<Verification isUrl={true}
slug="location_name" />
allow_verify={props.user !== undefined && props.building.location_name !== null && !props.edited} <Verification
onVerify={props.onVerify} slug="location_name"
user_verified={props.user_verified.hasOwnProperty("location_name")} allow_verify={props.user !== undefined && props.building.location_name !== null && !props.edited}
user_verified_as={props.user_verified.location_name} onVerify={props.onVerify}
verified_count={props.building.verified.location_name} user_verified={props.user_verified.hasOwnProperty("location_name")}
/> user_verified_as={props.user_verified.location_name}
<DataEntry verified_count={props.building.verified.location_name}
title="Building Name (Domestic)" />
slug="" <DataEntry
value="" title="Building Name (Domestic)"
mode='view' slug=""
tooltip="Coming Soon" value=""
/> mode='view'
<DataEntryGroup name="Address" collapsed={false}> tooltip="Not yet activated.<br><br>For security reasons, we do not allow the use of free text boxes and are currently looking into alternative ways to collect this data."
/>
<Verification
slug="location_name"
allow_verify={props.user !== undefined && props.building.location_name !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_name")}
user_verified_as={props.user_verified.location_name}
verified_count={props.building.verified.location_name}
/>
<DataEntry
title="Building Name Source"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<PatternDataEntry <PatternDataEntry
title={dataFields.location_number.title} title={dataFields.location_number.title}
slug="location_number" slug="location_number"
@ -138,7 +155,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
tooltip="Coming Soon" tooltip="Coming Soon"
/> />
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Other Location Data" collapsed={false}> <DataEntryGroup name="Property/Footprint IDs and Coordinate Data">
<DataEntry <DataEntry
title={dataFields.ref_toid.title} title={dataFields.ref_toid.title}
slug="ref_toid" slug="ref_toid"
@ -147,6 +164,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
copy={props.copy} copy={props.copy}
tooltip={dataFields.ref_toid.tooltip} tooltip={dataFields.ref_toid.tooltip}
onChange={props.onChange} onChange={props.onChange}
disabled={true}
/> />
<UPRNsDataEntry <UPRNsDataEntry
title={dataFields.uprns.title} title={dataFields.uprns.title}

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

@ -66,7 +66,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Planning application information" collapsed={true} > <DataEntryGroup name="Planning application information" collapsed={true} >
<DataEntryGroup name="Current/active applications (official data)" collapsed={false} > <DataEntryGroup name="Current/active applications (official data)">
<InfoBox> <InfoBox>
This section provides data on active applications. We define these as applications with any activity in the last year. This section provides data on active applications. We define these as applications with any activity in the last year.
<br /> <br />

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

@ -16,35 +16,7 @@ import InfoBox from '../../components/info-box';
*/ */
const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => ( const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment> <Fragment>
<DataEntryGroup name="Plot Size"> <DataEntryGroup name="Number of floors/storeys">
<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 <NumericDataEntry
title={dataFields.size_storeys_core.title} title={dataFields.size_storeys_core.title}
slug="size_storeys_core" slug="size_storeys_core"
@ -64,7 +36,6 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_storeys_core} user_verified_as={props.user_verified.size_storeys_core}
verified_count={props.building.verified.size_storeys_core} verified_count={props.building.verified.size_storeys_core}
/> />
<NumericDataEntry <NumericDataEntry
title={dataFields.size_storeys_attic.title} title={dataFields.size_storeys_attic.title}
slug="size_storeys_attic" slug="size_storeys_attic"
@ -84,7 +55,6 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_storeys_attic} user_verified_as={props.user_verified.size_storeys_attic}
verified_count={props.building.verified.size_storeys_attic} verified_count={props.building.verified.size_storeys_attic}
/> />
<NumericDataEntry <NumericDataEntry
title={dataFields.size_storeys_basement.title} title={dataFields.size_storeys_basement.title}
slug="size_storeys_basement" slug="size_storeys_basement"
@ -104,9 +74,22 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_storeys_basement} user_verified_as={props.user_verified.size_storeys_basement}
verified_count={props.building.verified.size_storeys_basement} verified_count={props.building.verified.size_storeys_basement}
/> />
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Height" collapsed={false}> <DataEntryGroup name="Building height data">
<NumericDataEntry <NumericDataEntry
title={dataFields.size_height_apex.title} title={dataFields.size_height_apex.title}
slug="size_height_apex" slug="size_height_apex"
@ -125,7 +108,21 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_height_apex} user_verified_as={props.user_verified.size_height_apex}
verified_count={props.building.verified.size_height_apex} verified_count={props.building.verified.size_height_apex}
/> />
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<NumericDataEntry <NumericDataEntry
title={dataFields.size_height_eaves.title} title={dataFields.size_height_eaves.title}
slug="size_height_eaves" slug="size_height_eaves"
@ -137,8 +134,22 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
step={0.1} step={0.1}
min={0} min={0}
/> />
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Floor area"> <DataEntryGroup name="Floor area data">
<NumericDataEntry <NumericDataEntry
title={dataFields.size_floor_area_ground.title} title={dataFields.size_floor_area_ground.title}
slug="size_floor_area_ground" slug="size_floor_area_ground"
@ -157,7 +168,6 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_floor_area_ground} user_verified_as={props.user_verified.size_floor_area_ground}
verified_count={props.building.verified.size_floor_area_ground} verified_count={props.building.verified.size_floor_area_ground}
/> />
<NumericDataEntry <NumericDataEntry
title={dataFields.size_floor_area_total.title} title={dataFields.size_floor_area_total.title}
slug="size_floor_area_total" slug="size_floor_area_total"
@ -176,33 +186,135 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_floor_area_total} user_verified_as={props.user_verified.size_floor_area_total}
verified_count={props.building.verified.size_floor_area_total} verified_count={props.building.verified.size_floor_area_total}
/> />
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup> </DataEntryGroup>
<NumericDataEntry <DataEntryGroup name="Plot size data">
title={dataFields.size_width_frontage.title} <NumericDataEntry
slug="size_width_frontage" title={dataFields.size_plot_area_total.title}
value={props.building.size_width_frontage} slug="size_plot_area_total"
mode={props.mode} mode='view'
copy={props.copy} step={0.1}
onChange={props.onChange} min={0}
step={0.1}
min={0}
/> />
<Verification <DataEntry
slug="size_width_frontage" title="Source type"
allow_verify={props.user !== undefined && props.building.size_width_frontage !== null} slug=""
onVerify={props.onVerify} value=""
user_verified={props.user_verified.hasOwnProperty("size_width_frontage")} mode='view'
user_verified_as={props.user_verified.size_width_frontage} tooltip="Coming Soon"
verified_count={props.building.verified.size_width_frontage}
/> />
<DataEntry
<DataEntry title="Source link"
title="Total opening area" slug=""
slug="" value=""
value="" mode='view'
mode='view' tooltip="Coming Soon"
/> />
<hr/>
<NumericDataEntry
title={dataFields.size_far_ratio.title}
slug="size_far_ratio"
mode='view'
step={0.1}
min={0}
/>
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<DataEntry
title="Plot dimensions"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<DataEntry
title="Land parcel geometry link"
slug=""
value=""
mode='view'
tooltip='INSPIRE Polygons'
/>
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<NumericDataEntry
title={dataFields.size_width_frontage.title}
slug="size_width_frontage"
value={props.building.size_width_frontage}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
step={0.1}
min={0}
/>
<Verification
slug="size_width_frontage"
allow_verify={props.user !== undefined && props.building.size_width_frontage !== null}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("size_width_frontage")}
user_verified_as={props.user_verified.size_width_frontage}
verified_count={props.building.verified.size_width_frontage}
/>
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup>
</Fragment> </Fragment>
); );
const SizeContainer = withCopyEdit(SizeView); const SizeContainer = withCopyEdit(SizeView);

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

@ -7,54 +7,61 @@ import NumericDataEntry from '../data-components/numeric-data-entry';
import withCopyEdit from '../data-container'; import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props'; import { CategoryViewProps } from './category-view-props';
import { DataEntryGroup } from '../data-components/data-entry-group';
/** /**
* Streetscape view/edit section * Streetscape view/edit section
*/ */
const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => ( const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment> <Fragment>
<DataEntry <DataEntryGroup name="Does the building have a garden(s)?">
title="Does the building have a front garden?" <DataEntry
slug="" title="Does the building have a front garden?"
value="" slug=""
mode='view' value=""
/> mode='view'
<DataEntry />
title="Does the building have a back garden?" <DataEntry
slug="" title="Does the building have a back garden?"
value="" slug=""
mode='view' value=""
/> mode='view'
<DataEntry />
title="Street width" </DataEntryGroup>
slug="" <DataEntryGroup name="Street/pavement properties">
value="" <DataEntry
mode='view' title="Street width"
/> slug=""
<DataEntry value=""
title="Pavement width" mode='view'
slug="" />
value="" <DataEntry
mode='view' title="Pavement width"
/> slug=""
<DataEntry value=""
title="Street network geometry link" mode='view'
slug="" />
value="" <DataEntry
mode='view' title="Street network geometry link"
/> slug=""
<DataEntry value=""
title="Distance from Public Green Space" mode='view'
slug="" />
value="" </DataEntryGroup>
mode='view' <DataEntryGroup name="Access to green space">
/> <DataEntry
<DataEntry title="Distance from public green space"
title="Distance from front door to nearest tree" slug=""
slug="" value=""
value="" mode='view'
mode='view' />
/> <DataEntry
title="Distance from front door to nearest tree"
slug=""
value=""
mode='view'
/>
</DataEntryGroup>
</Fragment> </Fragment>
); );
const StreetscapeContainer = withCopyEdit(StreetscapeView); const StreetscapeContainer = withCopyEdit(StreetscapeView);

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

@ -9,6 +9,7 @@ import withCopyEdit from '../data-container';
import InfoBox from '../../components/info-box'; import InfoBox from '../../components/info-box';
import { CategoryViewProps } from './category-view-props'; import { CategoryViewProps } from './category-view-props';
import { DataEntryGroup } from '../data-components/data-entry-group';
const EnergyCategoryOptions = ["A", "B", "C", "D", "E", "F", "G"]; const EnergyCategoryOptions = ["A", "B", "C", "D", "E", "F", "G"];
const BreeamRatingOptions = [ const BreeamRatingOptions = [
@ -25,102 +26,107 @@ const BreeamRatingOptions = [
const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) => { const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) => {
return ( return (
<Fragment> <Fragment>
<SelectDataEntry <DataEntryGroup name="Energy rating data">
title={dataFields.sust_breeam_rating.title} <SelectDataEntry
slug="sust_breeam_rating" title={dataFields.sust_breeam_rating.title}
value={props.building.sust_breeam_rating} slug="sust_breeam_rating"
tooltip={dataFields.sust_breeam_rating.tooltip} value={props.building.sust_breeam_rating}
options={BreeamRatingOptions} tooltip={dataFields.sust_breeam_rating.tooltip}
mode={props.mode} options={BreeamRatingOptions}
copy={props.copy} mode={props.mode}
onChange={props.onChange} copy={props.copy}
/> onChange={props.onChange}
<Verification
slug="sust_breeam_rating"
allow_verify={props.user !== undefined && props.building.sust_breeam_rating !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("sust_breeam_rating")}
user_verified_as={props.user_verified.sust_breeam_rating}
verified_count={props.building.verified.sust_breeam_rating}
/> />
<Verification
slug="sust_breeam_rating"
allow_verify={props.user !== undefined && props.building.sust_breeam_rating !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("sust_breeam_rating")}
user_verified_as={props.user_verified.sust_breeam_rating}
verified_count={props.building.verified.sust_breeam_rating}
/>
<SelectDataEntry <SelectDataEntry
title={dataFields.sust_dec.title} title={dataFields.sust_dec.title}
slug="sust_dec" slug="sust_dec"
value={props.building.sust_dec} value={props.building.sust_dec}
tooltip={dataFields.sust_dec.tooltip} tooltip={dataFields.sust_dec.tooltip}
options={EnergyCategoryOptions} options={EnergyCategoryOptions}
mode={props.mode} mode={props.mode}
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
/>
<Verification
slug="sust_dec"
allow_verify={props.user !== undefined && props.building.sust_dec !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("sust_dec")}
user_verified_as={props.user_verified.sust_dec}
verified_count={props.building.verified.sust_dec}
/> />
<Verification
slug="sust_dec"
allow_verify={props.user !== undefined && props.building.sust_dec !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("sust_dec")}
user_verified_as={props.user_verified.sust_dec}
verified_count={props.building.verified.sust_dec}
/>
<SelectDataEntry <SelectDataEntry
title={dataFields.sust_aggregate_estimate_epc.title} title={dataFields.sust_aggregate_estimate_epc.title}
slug="sust_aggregate_estimate_epc" slug="sust_aggregate_estimate_epc"
value={props.building.sust_aggregate_estimate_epc} value={props.building.sust_aggregate_estimate_epc}
tooltip={dataFields.sust_aggregate_estimate_epc.tooltip} tooltip={dataFields.sust_aggregate_estimate_epc.tooltip}
options={EnergyCategoryOptions} options={EnergyCategoryOptions}
disabled={true} disabled={true}
mode={props.mode} mode={props.mode}
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
/>
<NumericDataEntry
title={dataFields.sust_retrofit_date.title}
slug="sust_retrofit_date"
value={props.building.sust_retrofit_date}
tooltip={dataFields.sust_retrofit_date.tooltip}
step={1}
min={1086}
max={new Date().getFullYear()}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<Verification
slug="sust_retrofit_date"
allow_verify={props.user !== undefined && props.building.sust_retrofit_date !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("sust_retrofit_date")}
user_verified_as={props.user_verified.sust_retrofit_date}
verified_count={props.building.verified.sust_retrofit_date}
/> />
<DataEntry </DataEntryGroup>
title="Date of Significant Retrofits" <DataEntryGroup name="Retrofit Data">
slug="" <NumericDataEntry
value="" title={dataFields.sust_retrofit_date.title}
mode='view' slug="sust_retrofit_date"
/> value={props.building.sust_retrofit_date}
<Verification tooltip={dataFields.sust_retrofit_date.tooltip}
slug="date_link" step={1}
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited} min={1086}
onVerify={props.onVerify} max={new Date().getFullYear()}
user_verified={props.user_verified.hasOwnProperty("date_link")} mode={props.mode}
user_verified_as={props.user_verified.date_link} copy={props.copy}
verified_count={props.building.verified.date_link} onChange={props.onChange}
/> />
<DataEntry <Verification
title="Source" slug="sust_retrofit_date"
slug="" allow_verify={props.user !== undefined && props.building.sust_retrofit_date !== null && !props.edited}
value="" onVerify={props.onVerify}
mode='view' user_verified={props.user_verified.hasOwnProperty("sust_retrofit_date")}
/> user_verified_as={props.user_verified.sust_retrofit_date}
<DataEntry verified_count={props.building.verified.sust_retrofit_date}
title="Green Walls / Green Roof" />
slug="" <DataEntry
value="" title="Date of Significant Retrofits"
mode='view' 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="Other sustainability features">
<DataEntry
title="Green Walls / Green Roof"
slug=""
value=""
mode='view'
/>
</DataEntryGroup>
</Fragment> </Fragment>
); );
}; };

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

@ -21,257 +21,267 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
const currentBuildingConstructionYear = building.date_year || undefined; const currentBuildingConstructionYear = building.date_year || undefined;
return ( return (
<form> <form>
<NumericDataEntry <DataEntryGroup name="Dates of construction/extension">
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 <NumericDataEntry
slug='extension_year' slug='date_year'
title={dataFields.extension_year.title} title={dataFields.date_year.title}
value={props.building.extension_year} value={currentBuildingConstructionYear}
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.extension_year.tooltip_extension} 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)}
</DataEntryGroup>
<DataEntryGroup name="Land ownership data">
<MultiDataEntry
title={dataFields.landowner.title}
slug="landowner"
value={props.building.landowner}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.landowner.tooltip}
placeholder=""
editableEntries={true}
/>
<Verification
slug="landowner"
allow_verify={props.user !== undefined && props.building.landowner !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("landowner")}
user_verified_as={props.user_verified.landowner}
verified_count={props.building.verified.landowner}
/>
<MultiDataEntry
title={dataFields.landowner_source_link.title}
slug="landowner_source_link"
value={props.building.landowner_source_link}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.landowner_source_link.tooltip}
placeholder="https://..."
editableEntries={true}
isUrl={true}
/>
</DataEntryGroup>
<DataEntryGroup name="Developer data">
<SelectDataEntry
slug='developer_type'
title={dataFields.developer_type.title}
value={props.building.developer_type}
options={dataFields.developer_type.items}
onChange={props.onChange}
mode={props.mode}
copy={props.copy}
/> />
<Verification <Verification
slug="extension_year" slug="developer_type"
allow_verify={props.user !== undefined && props.building.extension_year !== null && !props.edited} allow_verify={props.user !== undefined && props.building.developer_type !== null && !props.edited}
onVerify={props.onVerify} onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("extension_year")} user_verified={props.user_verified.hasOwnProperty("developer_type")}
user_verified_as={props.user_verified.extension_year} user_verified_as={props.user_verified.developer_type}
verified_count={props.building.verified.extension_year} verified_count={props.building.verified.developer_type}
/> />
</> <MultiDataEntry
) : (null)} title={dataFields.developer_name.title}
<MultiDataEntry slug="developer_name"
title={dataFields.landowner.title} value={props.building.developer_name}
slug="landowner" mode={props.mode}
value={props.building.landowner} copy={props.copy}
mode={props.mode} onChange={props.onChange}
copy={props.copy} tooltip={dataFields.developer_name.tooltip}
onChange={props.onChange} placeholder=""
tooltip={dataFields.landowner.tooltip} editableEntries={true}
placeholder="" />
editableEntries={true} <Verification
/> slug="developer_name"
<Verification allow_verify={props.user !== undefined && props.building.developer_name !== null && !props.edited}
slug="landowner" onVerify={props.onVerify}
allow_verify={props.user !== undefined && props.building.landowner !== null && !props.edited} user_verified={props.user_verified.hasOwnProperty("developer_name")}
onVerify={props.onVerify} user_verified_as={props.user_verified.developer_name}
user_verified={props.user_verified.hasOwnProperty("landowner")} verified_count={props.building.verified.developer_name}
user_verified_as={props.user_verified.landowner} />
verified_count={props.building.verified.landowner} <MultiDataEntry
/> title={dataFields.developer_source_link.title}
<MultiDataEntry slug="developer_source_link"
title={dataFields.landowner_source_link.title} value={props.building.developer_source_link}
slug="landowner_source_link" mode={props.mode}
value={props.building.landowner_source_link} copy={props.copy}
mode={props.mode} onChange={props.onChange}
copy={props.copy} tooltip={dataFields.developer_source_link.tooltip}
onChange={props.onChange} placeholder="https://..."
tooltip={dataFields.landowner_source_link.tooltip} editableEntries={true}
placeholder="https://..." isUrl={true}
editableEntries={true} />
isUrl={true} </DataEntryGroup>
/> <DataEntryGroup name="Designer data">
<SelectDataEntry <MultiDataEntry
slug='developer_type' title={dataFields.designers.title}
title={dataFields.developer_type.title} slug="designers"
value={props.building.developer_type} value={props.building.designers}
options={dataFields.developer_type.items} mode={props.mode}
onChange={props.onChange} copy={props.copy}
mode={props.mode} onChange={props.onChange}
copy={props.copy} tooltip={dataFields.designers.tooltip}
/> placeholder=""
<Verification editableEntries={true}
slug="developer_type" />
allow_verify={props.user !== undefined && props.building.developer_type !== null && !props.edited} <Verification
onVerify={props.onVerify} slug="designers"
user_verified={props.user_verified.hasOwnProperty("developer_type")} allow_verify={props.user !== undefined && props.building.designers !== null && !props.edited}
user_verified_as={props.user_verified.developer_type} onVerify={props.onVerify}
verified_count={props.building.verified.developer_type} user_verified={props.user_verified.hasOwnProperty("designers")}
/> user_verified_as={props.user_verified.designers}
<MultiDataEntry verified_count={props.building.verified.designers}
title={dataFields.developer_name.title} />
slug="developer_name" <MultiDataEntry
value={props.building.developer_name} title={dataFields.designers_source_link.title}
mode={props.mode} slug="designers_source_link"
copy={props.copy} value={props.building.designers_source_link}
onChange={props.onChange} mode={props.mode}
tooltip={dataFields.developer_name.tooltip} copy={props.copy}
placeholder="" onChange={props.onChange}
editableEntries={true} tooltip={dataFields.designers_source_link.tooltip}
/> placeholder="https://..."
<Verification editableEntries={true}
slug="developer_name" isUrl={true}
allow_verify={props.user !== undefined && props.building.developer_name !== null && !props.edited} />
onVerify={props.onVerify} <SelectDataEntry
user_verified={props.user_verified.hasOwnProperty("developer_name")} slug='lead_designer_type'
user_verified_as={props.user_verified.developer_name} title={dataFields.lead_designer_type.title}
verified_count={props.building.verified.developer_name} value={props.building.lead_designer_type}
/> options={dataFields.lead_designer_type.items}
<MultiDataEntry onChange={props.onChange}
title={dataFields.developer_source_link.title} mode={props.mode}
slug="developer_source_link" copy={props.copy}
value={props.building.developer_source_link} />
mode={props.mode} <Verification
copy={props.copy} slug="lead_designer_type"
onChange={props.onChange} allow_verify={props.user !== undefined && props.building.lead_designer_type !== null && !props.edited}
tooltip={dataFields.developer_source_link.tooltip} onVerify={props.onVerify}
placeholder="https://..." user_verified={props.user_verified.hasOwnProperty("lead_designer_type")}
editableEntries={true} user_verified_as={props.user_verified.lead_designer_type}
isUrl={true} verified_count={props.building.verified.lead_designer_type}
/> />
<MultiDataEntry <LogicalDataEntryYesOnly
title={dataFields.designers.title} slug='designer_awards'
slug="designers" title={dataFields.designer_awards.title}
value={props.building.designers} tooltip={dataFields.designer_awards.tooltip}
mode={props.mode} value={props.building.designer_awards}
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
tooltip={dataFields.designers.tooltip} mode={props.mode}
placeholder="" />
editableEntries={true} <Verification
/> slug="designer_awards"
<Verification allow_verify={props.user !== undefined && props.building.designer_awards !== null && !props.edited}
slug="designers" onVerify={props.onVerify}
allow_verify={props.user !== undefined && props.building.designers !== null && !props.edited} user_verified={props.user_verified.hasOwnProperty("designer_awards")}
onVerify={props.onVerify} user_verified_as={props.user_verified.designer_awards}
user_verified={props.user_verified.hasOwnProperty("designers")} verified_count={props.building.verified.designer_awards}
user_verified_as={props.user_verified.designers} />
verified_count={props.building.verified.designers} {props.building.designer_awards ? (
/> <>
<MultiDataEntry <MultiDataEntry
title={dataFields.designers_source_link.title} title={dataFields.awards_source_link.title}
slug="designers_source_link" slug="awards_source_link"
value={props.building.designers_source_link} value={props.building.awards_source_link}
mode={props.mode} mode={props.mode}
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
tooltip={dataFields.designers_source_link.tooltip} tooltip={dataFields.awards_source_link.tooltip}
placeholder="https://..." placeholder="https://..."
editableEntries={true} editableEntries={true}
isUrl={true} isUrl={true}
/> />
<SelectDataEntry <Verification
slug='lead_designer_type' slug="awards_source_link"
title={dataFields.lead_designer_type.title} allow_verify={props.user !== undefined && props.building.awards_source_link !== null && !props.edited}
value={props.building.lead_designer_type} onVerify={props.onVerify}
options={dataFields.lead_designer_type.items} user_verified={props.user_verified.hasOwnProperty("awards_source_link")}
onChange={props.onChange} user_verified_as={props.user_verified.awards_source_link}
mode={props.mode} verified_count={props.building.verified.awards_source_link}
copy={props.copy} />
/> </>
<Verification ) : (null)
slug="lead_designer_type" }
allow_verify={props.user !== undefined && props.building.lead_designer_type !== null && !props.edited} </DataEntryGroup>
onVerify={props.onVerify} <DataEntryGroup name="Builder data">
user_verified={props.user_verified.hasOwnProperty("lead_designer_type")} <MultiDataEntry
user_verified_as={props.user_verified.lead_designer_type} title={dataFields.builder.title}
verified_count={props.building.verified.lead_designer_type} slug="builder"
/> value={props.building.builder}
<LogicalDataEntryYesOnly mode={props.mode}
slug='designer_awards' copy={props.copy}
title={dataFields.designer_awards.title} onChange={props.onChange}
tooltip={dataFields.designer_awards.tooltip} placeholder=""
value={props.building.designer_awards} editableEntries={true}
copy={props.copy} />
onChange={props.onChange} <Verification
mode={props.mode} slug="builder"
/> allow_verify={props.user !== undefined && props.building.builder !== null && !props.edited}
<Verification onVerify={props.onVerify}
slug="designer_awards" user_verified={props.user_verified.hasOwnProperty("builder")}
allow_verify={props.user !== undefined && props.building.designer_awards !== null && !props.edited} user_verified_as={props.user_verified.builder}
onVerify={props.onVerify} verified_count={props.building.verified.builder}
user_verified={props.user_verified.hasOwnProperty("designer_awards")} />
user_verified_as={props.user_verified.designer_awards} <MultiDataEntry
verified_count={props.building.verified.designer_awards} title={dataFields.builder_source_link.title}
/> slug="builder_source_link"
{props.building.designer_awards ? ( value={props.building.builder_source_link}
<> mode={props.mode}
<MultiDataEntry copy={props.copy}
title={dataFields.awards_source_link.title} onChange={props.onChange}
slug="awards_source_link" placeholder="https://..."
value={props.building.awards_source_link} editableEntries={true}
mode={props.mode} isUrl={true}
copy={props.copy} />
onChange={props.onChange} </DataEntryGroup>
tooltip={dataFields.awards_source_link.tooltip}
placeholder="https://..."
editableEntries={true}
isUrl={true}
/>
<Verification
slug="awards_source_link"
allow_verify={props.user !== undefined && props.building.awards_source_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("awards_source_link")}
user_verified_as={props.user_verified.awards_source_link}
verified_count={props.building.verified.awards_source_link}
/>
</>
) : (null)
}
<MultiDataEntry
title={dataFields.builder.title}
slug="builder"
value={props.building.builder}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
placeholder=""
editableEntries={true}
/>
<Verification
slug="builder"
allow_verify={props.user !== undefined && props.building.builder !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("builder")}
user_verified_as={props.user_verified.builder}
verified_count={props.building.verified.builder}
/>
<MultiDataEntry
title={dataFields.builder_source_link.title}
slug="builder_source_link"
value={props.building.builder_source_link}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
placeholder="https://..."
editableEntries={true}
isUrl={true}
/>
</form> </form>
); );
}; };

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

@ -9,6 +9,7 @@ import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props'; import { CategoryViewProps } from './category-view-props';
import InfoBox from '../../components/info-box'; import InfoBox from '../../components/info-box';
import { DataEntryGroup } from '../data-components/data-entry-group';
const AttachmentFormOptions = [ const AttachmentFormOptions = [
"Detached", "Detached",
@ -23,98 +24,131 @@ const AttachmentFormOptions = [
const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => { const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
return ( return (
<Fragment> <Fragment>
<SelectDataEntry <DataEntryGroup name="Adjacency and Building Use Data">
title={dataFields.building_attachment_form.title} <SelectDataEntry
slug="building_attachment_form" title={dataFields.building_attachment_form.title}
value={props.building.building_attachment_form} slug="building_attachment_form"
tooltip={dataFields.building_attachment_form.tooltip} value={props.building.building_attachment_form}
options={AttachmentFormOptions} tooltip={dataFields.building_attachment_form.tooltip}
mode={props.mode} options={AttachmentFormOptions}
copy={props.copy} mode={props.mode}
onChange={props.onChange} copy={props.copy}
/> onChange={props.onChange}
<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 <Verification
title={dataFields.original_building_use.title} slug="building_attachment_form"
slug="original_building_use" // doesn't exist in database yet allow_verify={props.user !== undefined && props.building.building_attachment_form !== null && !props.edited}
tooltip={dataFields.original_building_use.tooltip} onVerify={props.onVerify}
value={undefined} user_verified={props.user_verified.hasOwnProperty("building_attachment_form")}
copy={props.copy} user_verified_as={props.user_verified.building_attachment_form}
mode={props.mode} verified_count={props.building.verified.building_attachment_form}
onChange={props.onChange} />
disabled={true} <DataEntry
/> title="Source type"
<Verification slug=""
slug="building_attachment_form" value=""
allow_verify={props.user !== undefined && props.building.building_attachment_form !== null && !props.edited} mode='view'
onVerify={props.onVerify} tooltip="Coming Soon"
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 <DataEntry
title="Local typology/architectural style" title="Source link"
slug="" slug=""
value="" value=""
mode='view' mode='view'
/> tooltip="Coming Soon"
<DataEntry />
title="Base type classification" <hr/>
slug="" <DataEntry
value="" title={dataFields.original_building_use.title}
mode='view' slug="original_building_use" // doesn't exist in database yet
/> tooltip={dataFields.original_building_use.tooltip}
<SelectDataEntry value={undefined}
title={dataFields.size_roof_shape.title} copy={props.copy}
slug="size_roof_shape" mode={props.mode}
value={props.building.size_roof_shape} onChange={props.onChange}
mode={props.mode} disabled={true}
copy={props.copy} />
onChange={props.onChange} <Verification
disabled={true} slug="building_attachment_form"
options={[ allow_verify={props.user !== undefined && props.building.building_attachment_form !== null && !props.edited}
"Flat", onVerify={props.onVerify}
"Pitched", user_verified={props.user_verified.hasOwnProperty("building_attachment_form")}
"Other" user_verified_as={props.user_verified.building_attachment_form}
]} verified_count={props.building.verified.building_attachment_form}
/> />
<DataEntry <DataEntry
title="Local typology mutations" title="Source type"
slug="" slug=""
value="" value=""
mode='view' mode='view'
/> tooltip="Coming Soon"
<DataEntry />
title="3D procedural model classifications" <DataEntry
slug="" title="Source link"
value="" slug=""
mode='view' value=""
/> mode='view'
<DataEntry tooltip="Coming Soon"
title="Dynamic tissue type classification" />
slug="" </DataEntryGroup>
value="" <DataEntryGroup name="Building Typology and Classification Data">
mode='view' <DataEntry
/> title="Local typology/architectural style"
{/* <NumericDataEntry slug=""
title={dataFields.date_change_building_use.title} value=""
slug="date_change_building_use" mode='view'
value={props.building.date_change_building_use} />
tooltip={dataFields.date_change_building_use.tooltip} <DataEntry
min={1086} title="Base type classification"
max={new Date().getFullYear()} slug=""
step={1} value=""
mode={props.mode} mode='view'
copy={props.copy} />
onChange={props.onChange} <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=""
value=""
mode='view'
/>
<DataEntry
title="3D procedural model classifications"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Dynamic tissue type classification"
slug=""
value=""
mode='view'
/>
{/* <NumericDataEntry
title={dataFields.date_change_building_use.title}
slug="date_change_building_use"
value={props.building.date_change_building_use}
tooltip={dataFields.date_change_building_use.tooltip}
min={1086}
max={new Date().getFullYear()}
step={1}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/> */}
</DataEntryGroup>
</Fragment> </Fragment>
); );
}; };

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

@ -25,10 +25,14 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
const { darkLightTheme } = useDisplayPreferences(); const { darkLightTheme } = useDisplayPreferences();
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Domestic or non-domestic use" collapsed={false}> <DataEntryGroup name="Domestic/non-domestic use data">
<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> <div className={`alert alert-dark`} role="alert" style={{ fontSize: 13, backgroundColor: "#f6f8f9" }}>
<i>
93% of properties in UK are residential 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)?
</i>
</div>
<button className={`map-switcher-inline ${props.mapColourScale == "is_domestic" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToIsDomesticMapStyle}> <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'} {(props.mapColourScale == "is_domestic")? 'Showing domestic, non-domestic and mixed-use buildings (click to hide)' : 'Click to see domestic, non-domestic and mixed-use buildings on the map.'}
</button> </button>
<SelectDataEntry <SelectDataEntry
title={dataFields.is_domestic.title} title={dataFields.is_domestic.title}
@ -48,17 +52,18 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.is_domestic} user_verified_as={props.user_verified.is_domestic}
verified_count={props.building.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 <SelectDataEntry
title={dataFields.is_domestic_source.title} title={dataFields.is_domestic_source.title}
slug="is_domestic_source" slug="is_domestic_source"
value={props.building.is_domestic} value={props.building.is_domestic}
options={ options={
[ [
"Citizen/passerby", "Expert knowledge",
"Observed from the street",
"Google or other photograph/satellite imagery", "Google or other photograph/satellite imagery",
"Government Record", "Government/public record/database",
"Other Record" "Independently managed record/database",
"Other type of record/database"
] ]
} }
mode={props.mode} mode={props.mode}
@ -67,14 +72,14 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
tooltip={dataFields.is_domestic_source.tooltip} tooltip={dataFields.is_domestic_source.tooltip}
/> />
<DataEntry <DataEntry
title="Please provide a link to the data source" title="Source link"
slug="" slug=""
value="" value=""
mode='view' mode='view'
tooltip="Coming Soon" tooltip="Coming Soon"
/> />
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Specific Land Use" collapsed={false}> <DataEntryGroup name="Specific land use data">
<MultiDataEntry <MultiDataEntry
title={dataFields.current_landuse_group.title} title={dataFields.current_landuse_group.title}
slug="current_landuse_group" slug="current_landuse_group"
@ -127,7 +132,14 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
} }
{ {
props.mode != 'view' && props.mode != 'view' &&
<InfoBox msg="A more general classification for the land use of this building is automatically derived and shown below."></InfoBox> <div>
<hr/>
<div className={`alert alert-dark`} role="alert" style={{ fontSize: 13, backgroundColor: "#f6f8f9" }}>
<i>
Below is a more general classification for the land use of this building, automatically derived from the information above.
</i>
</div>
</div>
} }
<DataEntry <DataEntry
title={dataFields.current_landuse_order.title} title={dataFields.current_landuse_order.title}

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

@ -80,7 +80,7 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
slug: 'community', slug: 'community',
name: 'Community', name: 'Community',
aboutUrl: 'https://pages.colouring.london/community', aboutUrl: 'https://pages.colouring.london/community',
intro: 'This section collects data on how well citizens think specific *types* of building work (rather than individual buildings). This will help us save and reuse as many useful buildings as possible, and to help improve urban design quality in future.', intro: 'This section collects data on how well citizens think specific *types* of building work. This will help us save/reuse as many useful buildings as possible, and help improve urban design quality in future.',
}, },
[Category.Planning]: { [Category.Planning]: {
slug: 'planning', slug: 'planning',
@ -98,7 +98,7 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
slug: 'type', slug: 'type',
name: 'Typology', name: 'Typology',
aboutUrl: 'https://pages.colouring.london/buildingtypology', aboutUrl: 'https://pages.colouring.london/buildingtypology',
intro: 'This section provides open data on the type of activities being carried out within buildings.', intro: 'Note: This section is currently under development, we are working to activate it as soon as possible. This section provides open data on the typology of the building.',
}, },
[Category.LandUse]: { [Category.LandUse]: {
slug: 'use', slug: 'use',

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

@ -177,7 +177,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
uprns: { uprns: {
category: Category.Location, category: Category.Location,
title: "Unique Property Reference Number(s) (UPRN)", title: "Unique Property Reference Number(s) (UPRN)",
tooltip: "Unique Property Reference Numbers (to be filled automatically)", tooltip: "Unique Property Reference Numbers (to be filled automatically) [<a href='https://beta.ordnancesurvey.co.uk/products/os-open-uprn'>LINK</a>]",
example: [{uprn: "", parent_uprn: "" }, {uprn: "", parent_uprn: "" }], example: [{uprn: "", parent_uprn: "" }, {uprn: "", parent_uprn: "" }],
}, },
@ -211,13 +211,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
}, },
current_landuse_group: { current_landuse_group: {
category: Category.LandUse, category: Category.LandUse,
title: "Current Land Use", title: "Current land use(s)",
tooltip: "Land use Groups as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)", tooltip: "Land use Groups as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)",
example: ["", ""], example: ["", ""],
}, },
current_landuse_order: { current_landuse_order: {
category: Category.LandUse, category: Category.LandUse,
title: "Current Land Use (Order)", title: "Current land use (order)",
tooltip: "Land use Order as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)", tooltip: "Land use Order as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)",
example: "", example: "",
}, },
@ -272,7 +272,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
original_building_use: { original_building_use: {
category: Category.Type, category: Category.Type,
title: "Original building use", title: "Original building use",
tooltip: "What was the building originally used for when it was built? I.e. If it was Victorian warehouse which is now an office this would be warehouse", tooltip: "What was the building <u><i>originally</i></u> used for when it was built?",
example: "", example: "",
}, },
size_roof_shape: { size_roof_shape: {
@ -290,7 +290,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
date_lower : { date_lower : {
category: Category.Age, category: Category.Age,
title: "Earliest possible start year", title: "Earliest possible start year",
tooltip: "This should be the earliest year in which building could have started.", tooltip: "This should be the earliest year in which construction could have started.",
example: 1900, example: 1900,
}, },
date_upper: { date_upper: {
@ -362,13 +362,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
category: Category.Size, category: Category.Size,
title: "Height to apex (m)", title: "Height to apex (m)",
example: 100.5, example: 100.5,
//tooltip: , tooltip: "i.e. the highest part of the roof.",
}, },
size_height_eaves: { size_height_eaves: {
category: Category.Size, category: Category.Size,
title: "Height to eaves (m)", title: "Height to eaves (m)",
example: 20.33, example: 20.33,
//tooltip: , tooltip: "i.e. to where the top of the wall meets the roof",
}, },
size_floor_area_ground: { size_floor_area_ground: {
category: Category.Size, category: Category.Size,
@ -601,12 +601,12 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
is_domestic: { is_domestic: {
category: Category.Team, category: Category.Team,
title: "Is the building a home/domestic building?", title: "Is the building a home/domestic building?",
tooltip: "", tooltip: "Note: Homes used as offices for working from home should be classified as domestic.",
example: "mixed domestic/non-domestic" example: "mixed domestic/non-domestic"
}, },
is_domestic_source: { is_domestic_source: {
category: Category.Team, category: Category.Team,
title: "Domestic/non-domestic data source?", title: "Source type",
tooltip: "", tooltip: "",
example: "" example: ""
}, },

6
app/src/frontend/styles/layout.css
View File

@ -50,9 +50,9 @@ article .color-block {
hr { hr {
display: block; display: block;
height: 1px; height: 1px;
border: 0; border: none;
background: #000; background-color: #ccc;
width: 100%; width: 100%;
margin: 2em 0; margin: 1.2em 0 1em 0;
padding: 0; padding: 0;
} }