DRY in map style change functions, add quick switch buttons.

colouring-cities · Nov 25, 2024 · 91bd5a4 · 91bd5a4
1 parent 1478742
commit 91bd5a4
Showing 1 changed file with 48 additions and 13 deletions.
diff --git a/app/src/frontend/building/data-containers/age-history.tsx b/app/src/frontend/building/data-containers/age-history.tsx
@@ -48,22 +48,36 @@ const AgeHistoryView: React.FunctionComponent<CategoryViewProps> = (props) => {
         }
     }
 
-    const switchToAgeMapStyle = (e) => {
+    const switchToStylePeriodMapStyle = (e) => {
         e.preventDefault();
+        props.onMapColourScale('typology_style_period')
+    }
+
+    const switchToAgeMapStyle = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        switchToMapStyleHideHistoricMaps(event, 'date_year')
+    }
+
+    const switchToAgeCladdingMapStyle = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        switchToMapStyleHideHistoricMaps(event, 'cladding_year')
+    }
 
+    const switchToAgeExtensionMapStyle = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        switchToMapStyleHideHistoricMaps(event, 'extension_year')
+    }
+
+    const switchToAgeRetrofitMapStyle = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        switchToMapStyleHideHistoricMaps(event, 'retrofit_year')
+    }
+
+    const switchToMapStyleHideHistoricMaps = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, map_style: string) => {
+        event.preventDefault();
         if (historicData === 'enabled') {
-            historicDataSwitchOnClick(e);
+            historicDataSwitchOnClick(event);
         }
         if (historicMap === 'enabled') {
-            historicMapSwitchOnClick(e);
+            historicMapSwitchOnClick(event);
         }
-
-        props.onMapColourScale('date_year');
-    }
-
-    const switchToStylePeriodMapStyle = (e) => {
-        e.preventDefault();
-        props.onMapColourScale('typology_style_period')
+        props.onMapColourScale(map_style);
     }
 
     let construction_length = null;
@@ -247,6 +261,13 @@ const AgeHistoryView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 }
             </DataEntryGroup>
             <DataEntryGroup name="Cladding, Extensions & Retrofits" collapsed={subcat==null || subcat!="3"}>
+                {(props.mapColourScale != "cladding_year") ? 
+                        <button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark key-button`} onClick={switchToAgeCladdingMapStyle}>
+                            Click to show cladding age.
+                        </button>
+                :
+                    <></>
+                }
                 <NumericDataEntry
                     slug='age_cladding_date'
                     title={dataFields.age_cladding_date.title}
@@ -257,7 +278,7 @@ const AgeHistoryView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     step={1}
                     min={1}
                     max={currentYear}
-                    tooltip={dataFields.extension_year.tooltip}
+                    tooltip={dataFields.age_cladding_date.tooltip}
                     />
                 <Verification
                     slug="age_cladding_date"
@@ -297,6 +318,13 @@ const AgeHistoryView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     </>
                 }
                 <hr/>
+                {(props.mapColourScale != "extension_year") ? 
+                        <button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark key-button`} onClick={switchToAgeExtensionMapStyle}>
+                            Click to show extension age.
+                        </button>
+                :
+                    <></>
+                }
                 <NumericDataEntry
                     slug='age_extension_date'
                     title={dataFields.age_extension_date.title}
@@ -307,7 +335,7 @@ const AgeHistoryView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     step={1}
                     min={1}
                     max={currentYear}
-                    tooltip={dataFields.extension_year.tooltip}
+                    tooltip={dataFields.age_extension_date.tooltip}
                     />
                 <Verification
                     slug="age_extension_date"
@@ -347,6 +375,13 @@ const AgeHistoryView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     </>
                 }
                 <hr/>
+                {(props.mapColourScale != "retrofit_year") ? 
+                        <button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark key-button`} onClick={switchToAgeRetrofitMapStyle}>
+                            Click to show retrofit age.
+                        </button>
+                :
+                    <></>
+                }
                 <NumericDataEntry
                     slug='age_retrofit_date'
                     title={dataFields.age_retrofit_date.title}
@@ -357,7 +392,7 @@ const AgeHistoryView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     step={1}
                     min={1}
                     max={currentYear}
-                    tooltip={dataFields.extension_year.tooltip}
+                    tooltip={dataFields.age_retrofit_date.tooltip}
                     />
                 <Verification
                     slug="age_retrofit_date"