Move Architectural style data
- 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
parent
4e32ad9067
commit
089e2af666
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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") ?
|
||||
|
||||
@ -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)' },
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@ -1783,7 +1783,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
|
||||
'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)',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user