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

Move Architectural style data

Browse Source 
- Now in Age/History
- Tweaks to text, fix typos, dates, text layout
- Also fix "click here to show historical maps" button on Age & History page
This commit is contained in:
Mike Simpson 2023-08-09 14:47:41 +01:00
parent 4e32ad9067
commit 089e2af666
5 changed files with 136 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/map_styles/polygon.xml
View File

@ -1113,7 +1113,7 @@
<PolygonSymbolizer fill="#FF9A39" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "1603 -1714 (Stuart)"</Filter>
<Filter>[typology_style_period] = "1603-1714 (Stuart)"</Filter>
<PolygonSymbolizer fill="#C56000" />
</Rule>
<Rule>
@ -1129,7 +1129,7 @@
<PolygonSymbolizer fill="#A272D4" />
</Rule>
<Rule>
<Filter>[typology_style_period] = "1914-45 (WWI - WWII)"</Filter>
<Filter>[typology_style_period] = "1914-1945 (WWI-WWII)"</Filter>
<PolygonSymbolizer fill="#3988C5" />
</Rule>
<Rule>

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

@ -1,7 +1,7 @@
import React, { Fragment } from 'react';
import '../../map/map-button.css';
import { dataFields } from '../../config/data-fields-config';
import { commonSourceTypes, dataFields } from '../../config/data-fields-config';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
import { DataEntryGroup } from '../data-components/data-entry-group';
import { DynamicsBuildingPane, DynamicsDataEntry } from './dynamics/dynamics-data-entry';
@ -43,20 +43,29 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
const switchToSurvivalMapStyle = (e) => {
e.preventDefault();
if (props.mapColourScale == "survival_status") {
props.onMapColourScale('date_year');
historicDataSwitchOnClick(e);
}
else {
props.onMapColourScale('survival_status');
historicDataSwitchOnClick(e);
}
const switchToAgeMapStyle = (e) => {
e.preventDefault();
if (props.mapColourScale == "survival_status")
{
historicDataSwitchOnClick(e);
}
props.onMapColourScale('date_year')
}
const switchToStylePeriodMapStyle = (e) => {
e.preventDefault();
props.onMapColourScale('typology_style_period')
}
return (
<Fragment>
<DataEntryGroup name="Building age">
<DataEntryGroup name="Building age/construction date">
<YearDataEntry
year={props.building.date_year}
upper={props.building.date_upper}
@ -171,6 +180,67 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
tooltip='Coming Soon'
/>*/}
</DataEntryGroup>
<DataEntryGroup name="Architectural style">
{(props.mapColourScale == "typology_style_period") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAgeMapStyle}>
Click here to return to building age.
</button>
:
<button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToStylePeriodMapStyle}>
Click here to show architectural style.
</button>
}
<SelectDataEntry
title={dataFields.typology_style_period.title}
slug="typology_style_period"
value={props.building.typology_style_period}
tooltip={dataFields.typology_style_period.tooltip}
options={dataFields.typology_style_period.items}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<Verification
slug="typology_style_period"
allow_verify={props.user !== undefined && props.building.typology_style_period !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("typology_style_period")}
user_verified_as={props.user_verified.typology_style_period}
verified_count={props.building.verified.typology_style_period}
/>
<div className={`alert alert-dark`} role="alert" style={{ fontSize: 14, backgroundColor: "#f6f8f9" }}>
<i className="source-url">For building age by year see <a href={"/edit/age/"+props.building.building_id}>Age & History</a>.</i>
</div>
<SelectDataEntry
title={dataFields.typology_style_period_source_type.title}
slug="typology_style_period_source_type"
value={props.building.typology_style_period_source_type}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.typology_style_period_source_type.tooltip}
placeholder={dataFields.typology_style_period_source_type.example}
options={dataFields.typology_style_period_source_type.items}
/>
{(props.building.typology_style_period_source_type == commonSourceTypes[0] ||
props.building.typology_style_period_source_type == commonSourceTypes[1] ||
props.building.typology_style_period_source_type == null) ? <></> :
<>
<MultiDataEntry
title={dataFields.typology_style_period_source_links.title}
slug="typology_style_period_source_links"
value={props.building.typology_style_period_source_links}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.typology_style_period_source_links.tooltip}
placeholder="https://..."
editableEntries={true}
isUrl={true}
/>
</>
}
</DataEntryGroup>
<DataEntryGroup name="Cladding, extensions and retrofits">
<NumericDataEntry
slug='age_cladding_date'
@ -323,9 +393,15 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
}
</DataEntryGroup>
<DataEntryGroup name="Lifespan and site history">
<button className={`map-switcher-inline ${props.mapColourScale == "survival_status" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToSurvivalMapStyle}>
{(props.mapColourScale == "is_domestic")? 'Click here to hide historical maps':'Click here to show historical maps'}
{(props.mapColourScale == "survival_status") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAgeMapStyle}>
Click here to hide historical maps.
</button>
:
<button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToSurvivalMapStyle}>
Click here to show historical maps
</button>
}
<DataEntryGroup name="Constructions and demolitions on this site" showCount={false}>
<DynamicsBuildingPane>
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
@ -419,9 +495,15 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
Choose a colour to indicate whether the building has survived.
</i>
</div>
<button className={`map-switcher-inline ${props.mapColourScale == "survival_status" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToSurvivalMapStyle}>
{(props.mapColourScale == "is_domestic")? 'Click here to hide historical maps':'Click here to show historical maps'}
{(props.mapColourScale == "survival_status") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToAgeMapStyle}>
Click here to hide historical maps.
</button>
:
<button className={`map-switcher-inline disabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToSurvivalMapStyle}>
Click here to show historical maps
</button>
}
<SelectDataEntry
title={dataFields.survival_status.title}
slug="survival_status"

12
app/src/frontend/building/data-containers/typology.tsx
View File

@ -100,7 +100,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
</>
}
</DataEntryGroup>
<DataEntryGroup name="Architectural style/Historical period">
<DataEntryGroup name="Architectural style">
{(props.mapColourScale == "typology_style_period") ?
<button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToClassificationMapStyle}>
{'Click to change map to show typology classification.'}
@ -110,7 +110,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
{"Click here to change map to show architectural style/historical period."}
</button>
}
<SelectDataEntry
{/* <SelectDataEntry
title={dataFields.typology_style_period.title}
slug="typology_style_period"
value={props.building.typology_style_period}
@ -127,11 +127,11 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified={props.user_verified.hasOwnProperty("typology_style_period")}
user_verified_as={props.user_verified.typology_style_period}
verified_count={props.building.verified.typology_style_period}
/>
/> */}
<div className={`alert alert-dark`} role="alert" style={{ fontSize: 14, backgroundColor: "#f6f8f9" }}>
<i className="source-url">For building age by year see <a href={"http://localhost:8080/edit/age/"+props.building.building_id}>Age & History</a>.</i>
<i className="source-url">For building age/architectural style data, see <a href={"/edit/age/"+props.building.building_id}>Age & History</a>.</i>
</div>
<SelectDataEntry
{/* <SelectDataEntry
title={dataFields.typology_style_period_source_type.title}
slug="typology_style_period_source_type"
value={props.building.typology_style_period_source_type}
@ -159,7 +159,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
isUrl={true}
/>
</>
}
} */}
</DataEntryGroup>
<DataEntryGroup name="Dynamic tissue classification">
{(props.mapColourScale == "typology_dynamic_classification") ?

41
app/src/frontend/config/category-maps-config.ts
View File

@ -48,6 +48,25 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
]
},
},
{
mapStyle: 'typology_style_period',
legend: {
title: 'Architectural style',
elements: [
{ color: '#FFF739', text: '43AD-410 (Roman)' },
{ color: '#C5BD00', text: '410-1485 (Medieval)' },
{ color: '#FF9A39', text: '1485-1603 (Tudor)' },
{ color: '#C56000', text: '1603-1714 (Stuart)' },
{ color: '#EA8072', text: '1714-1837 (Georgian)' },
{ color: '#A71200', text: '1837-1901 (Victorian)' },
{ color: '#A272D4', text: '1901-1914 (Edwardian)' },
{ color: '#3988C5', text: '1914-1945 (WWI-WWII)' },
{ color: '#5ADFA2', text: '1945-1979 (Post war)' },
{ color: '#C2F47A', text: '1980-1999 (Late C20)' },
{ color: '#6FB40A', text: '2000-2025 (Early C21)' },
]
}
},
{
mapStyle: 'survival_status',
legend: {
@ -322,17 +341,17 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
legend: {
title: 'Architectural style',
elements: [
{ color: '#FFF739', text: 'Roman (43AD-410)' },
{ color: '#C5BD00', text: 'Medieval (410-1485)' },
{ color: '#FF9A39', text: 'Tudor (1485-1603)' },
{ color: '#C56000', text: 'Stuart (1603 -1714)' },
{ color: '#EA8072', text: 'Georgian (1714-1837)' },
{ color: '#A71200', text: 'Victorian (1837-1901)' },
{ color: '#A272D4', text: 'Edwardian (1901-1914)' },
{ color: '#3988C5', text: 'WWI - WWII (1914-45)' },
{ color: '#5ADFA2', text: 'Post war (1945-1975)' },
{ color: '#C2F47A', text: 'Late C20th (1975-2000)' },
{ color: '#6FB40A', text: 'Early C21st (2000- )' },
{ color: '#FFF739', text: '43AD-410 (Roman)' },
{ color: '#C5BD00', text: '410-1485 (Medieval)' },
{ color: '#FF9A39', text: '1485-1603 (Tudor)' },
{ color: '#C56000', text: '1603-1714 (Stuart)' },
{ color: '#EA8072', text: '1714-1837 (Georgian)' },
{ color: '#A71200', text: '1837-1901 (Victorian)' },
{ color: '#A272D4', text: '1901-1914 (Edwardian)' },
{ color: '#3988C5', text: '1914-1945 (WWI-WWII)' },
{ color: '#5ADFA2', text: '1945-1979 (Post war)' },
{ color: '#C2F47A', text: '1980-1999 (Late C20)' },
{ color: '#6FB40A', text: '2000-2025 (Early C21)' },
]
}
},

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

@ -1779,11 +1779,11 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
'43AD-410 (Roman)',
'410-1485 (Medieval)',
'1485-1603 (Tudor)',
'1603 -1714 (Stuart)',
'1603-1714 (Stuart)',
'1714-1837 (Georgian)',
'1837-1901 (Victorian)',
'1901-1914 (Edwardian)',
'1914-45 (WWI - WWII)',,
'1914-1945 (WWI-WWII)',,
'1945-1979 (Post war)',
'1980-1999 (Late 20th Century)',
'2000-2025 (Early 21st Century)',