From 089e2af6667e6ecb1a3214de72c561a2495c6617 Mon Sep 17 00:00:00 2001
From: Mike Simpson <mike.simpson@ncl.ac.uk>
Date: Wed, 9 Aug 2023 14:47:41 +0100
Subject: [PATCH] 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
---
 app/map_styles/polygon.xml                    |   4 +-
 .../building/data-containers/age-history.tsx  | 110 +++++++++++++++---
 .../building/data-containers/typology.tsx     |  12 +-
 .../frontend/config/category-maps-config.ts   |  41 +++++--
 app/src/frontend/config/data-fields-config.ts |   4 +-
 5 files changed, 136 insertions(+), 35 deletions(-)

diff --git a/app/map_styles/polygon.xml b/app/map_styles/polygon.xml
index eae2b562..b886e461 100644
--- a/app/map_styles/polygon.xml
+++ b/app/map_styles/polygon.xml
@@ -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>
diff --git a/app/src/frontend/building/data-containers/age-history.tsx b/app/src/frontend/building/data-containers/age-history.tsx
index 47d2459e..3ee13b94 100644
--- a/app/src/frontend/building/data-containers/age-history.tsx
+++ b/app/src/frontend/building/data-containers/age-history.tsx
@@ -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();
+        props.onMapColourScale('survival_status');
+        historicDataSwitchOnClick(e);
+    }
 
-        if (props.mapColourScale == "survival_status") {
-            props.onMapColourScale('date_year');
-            historicDataSwitchOnClick(e);
-        }
-        else {
-            props.onMapColourScale('survival_status');
+    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'}
-                </button>
+                {(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'}
-                </button>
+                {(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"
diff --git a/app/src/frontend/building/data-containers/typology.tsx b/app/src/frontend/building/data-containers/typology.tsx
index a79bcec0..9aa93030 100644
--- a/app/src/frontend/building/data-containers/typology.tsx
+++ b/app/src/frontend/building/data-containers/typology.tsx
@@ -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") ? 
diff --git a/app/src/frontend/config/category-maps-config.ts b/app/src/frontend/config/category-maps-config.ts
index 58d7a62c..911153c3 100644
--- a/app/src/frontend/config/category-maps-config.ts
+++ b/app/src/frontend/config/category-maps-config.ts
@@ -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)' },
                 ]
             }
         },
diff --git a/app/src/frontend/config/data-fields-config.ts b/app/src/frontend/config/data-fields-config.ts
index e2a9d4d0..7933e368 100644
--- a/app/src/frontend/config/data-fields-config.ts
+++ b/app/src/frontend/config/data-fields-config.ts
@@ -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)',