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

WIP Various tweaks to category pages

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

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

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

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

@ -41,13 +41,13 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x);
return <>
<DataEntryGroup name="Community views on building types" collapsed={false} >
<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.
Note: We are not currently collecting data on domestic/privately owned properties, only on public buildings.
</InfoBox>
<div className='community-opinion-pane'>
{
/*
{(props.building.is_domestic === "no" || props.building.is_domestic === "mixed domestic/non-domestic") ?
(props.building.is_domestic === "no" || props.building.is_domestic === "mixed domestic/non-domestic") ?
<>
<UserOpinionEntry
slug='community_like'
@ -59,13 +59,13 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
mode={props.mode}
copy={props.copy}
/>
<button className={`map-switcher-inline ${props.mapColourScale == "likes" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToLikesMapStyle}>
<button className={`map-switcher-inline ${props.mapColourScale == "likes" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`}>
{(props.mapColourScale == "likes")? 'Showing likes for specific buildings' : 'Click to see likes for specific buildings mapped'}
</button>
</>
: <></>}
*/
}
<LogicalDataEntryYesOnlyWithExplanation
slug='community_type_worth_keeping'
title={buildingUserFields.community_type_worth_keeping.title}

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

@ -7,6 +7,8 @@ import withCopyEdit from '../data-container';
import Verification from '../data-components/verification';
import { CategoryViewProps } from './category-view-props';
import InfoBox from '../../components/info-box';
import { DataEntryGroup } from '../data-components/data-entry-group';
const ConstructionMaterialsOptions = [
'Wood',
@ -36,6 +38,7 @@ const RoofCoveringOptions = [
const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => {
return (
<Fragment>
<DataEntryGroup name="Materials" collapsed={false}>
<SelectDataEntry
title={dataFields.construction_core_material.title}
slug="construction_core_material"
@ -83,12 +86,15 @@ const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) =>
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>
);
};

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

@ -10,6 +10,7 @@ import withCopyEdit from '../data-container';
import { PatternDataEntry } from '../data-components/pattern-data-entry';
import { CategoryViewProps } from './category-view-props';
import { DataEntryGroup } from '../data-components/data-entry-group';
const locationNumberPattern = "[1-9]\\d*[a-z]?(-([1-9]\\d*))?"; ///[1-9]\d*[a-z]?(-([1-9]\d*))?/;
@ -34,7 +35,14 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.location_name}
verified_count={props.building.verified.location_name}
/>
<DataEntry
title="Building Name (Domestic)"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntryGroup name="Address" collapsed={false}>
<PatternDataEntry
title={dataFields.location_number.title}
slug="location_number"
@ -53,7 +61,6 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.location_number}
verified_count={props.building.verified.location_number}
/>
<DataEntry
title={dataFields.location_street.title}
slug="location_street"
@ -71,7 +78,6 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.location_street}
verified_count={props.building.verified.location_street}
/>
<DataEntry
title={dataFields.location_line_two.title}
slug="location_line_two"
@ -96,7 +102,6 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<Verification
slug="location_town"
@ -125,6 +130,15 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.location_postcode}
verified_count={props.building.verified.location_postcode}
/>
<DataEntry
title="Address Source"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup>
<DataEntryGroup name="Other Location Data" collapsed={false}>
<DataEntry
title={dataFields.ref_toid.title}
slug="ref_toid"
@ -133,7 +147,6 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
copy={props.copy}
tooltip={dataFields.ref_toid.tooltip}
onChange={props.onChange}
/>
<UPRNsDataEntry
title={dataFields.uprns.title}
@ -163,6 +176,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
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}
@ -183,6 +197,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
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}
@ -199,6 +214,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.location_longitude}
verified_count={props.building.verified.location_longitude}
/>
</DataEntryGroup>
</Fragment>
);
const LocationContainer = withCopyEdit(LocationView);

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

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

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

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

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

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

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

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

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

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

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

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