Merge pull request #1412 from matkoniecz/feature/editable-building-sw…

…itcher

Allow to hide editable buildings.

app/src/frontend/displayPreferences-context.tsx

@@ -42,6 +42,10 @@ interface DisplayPreferencesContextState {
     historicMapSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
     historicMapSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
 
+    editableBuildings: LayerEnablementState;
+    editableBuildingsSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
+    editableBuildingsSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
+
     darkLightTheme: MapTheme;
     darkLightThemeSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
     darkLightThemeSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -95,6 +99,10 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
     historicMapSwitch: stub,
     historicMapSwitchOnClick: undefined,
 
+    editableBuildings: undefined,
+    editableBuildingsSwitch: stub,
+    editableBuildingsSwitchOnClick: undefined,
+
     darkLightTheme: undefined,
     darkLightThemeSwitch: stub,
     darkLightThemeSwitchOnClick: undefined,
@@ -116,6 +124,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
     const defaultConservation = 'disabled'
     const defaultHistoricData = 'disabled'
     const defaultHistoricMap = 'disabled'
+    const defaultEditableBuildings = 'enabled'
     const defaultShowLayerSelection = 'disabled'
     const [vista, setVista] = useState<LayerEnablementState>(defaultVista);
     const [flood, setFlood] = useState<LayerEnablementState>(defaultFlood);
@@ -126,6 +135,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
     const [conservation, setConservation] = useState<LayerEnablementState>(defaultConservation);
     const [historicData, setHistoricData] = useState<LayerEnablementState>(defaultHistoricData);
     const [historicMap, setHistoricMap] = useState<LayerEnablementState>(defaultHistoricMap);
+    const [editableBuildings, setEditableBuildings] = useState<LayerEnablementState>(defaultEditableBuildings);
     const [darkLightTheme, setDarkLightTheme] = useState<MapTheme>('night');
     const [showLayerSelection, setShowLayerSelection] = useState<LayerEnablementState>(defaultShowLayerSelection);
 
@@ -147,6 +157,7 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
             setConservation(defaultConservation);
             setHistoricData(defaultHistoricData);
             setHistoricMap(defaultHistoricMap);
+            setEditableBuildings(defaultEditableBuildings)
             setShowLayerSelection(defaultShowLayerSelection); // reset layers + hiding this panel is integrated into one action
             //setDarkLightTheme('night'); // reset only layers
     },
@@ -181,6 +192,10 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
         if(historicMap != defaultHistoricMap) {
             return true;
         }
+        if(editableBuildings != defaultEditableBuildings) {
+            return true;
+        }
+        setEditableBuildings
         //darkLightTheme not handled here
         return false;
     }
@@ -326,6 +341,21 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
         setHistoricMap(newHistoric);
     }
 
+    const editableBuildingsSwitch = useCallback(
+        (e) => {
+            flipEditableBuildings(e)
+        },
+        [editableBuildings],
+    )
+    const editableBuildingsSwitchOnClick = (e) => {
+        flipEditableBuildings(e)
+    }
+    function flipEditableBuildings(e) {
+        e.preventDefault();
+        const newValue = (editableBuildings === 'enabled')? 'disabled' : 'enabled';
+        setEditableBuildings(newValue);
+    }
+
     const darkLightThemeSwitch = useCallback(
         (e) => {
             flipDarkLightTheme(e)
@@ -393,6 +423,10 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
             historicMapSwitch,
             historicMapSwitchOnClick,
 
+            editableBuildings,
+            editableBuildingsSwitch,
+            editableBuildingsSwitchOnClick,
+
             darkLightTheme,
             darkLightThemeSwitch,
             darkLightThemeSwitchOnClick,

app/src/frontend/map/editable-buildings-switcher.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import './map-button.css';
+import { useDisplayPreferences } from '../displayPreferences-context';
+
+export const EditableBuildingsSwitcher: React.FC<{}> = () => {
+    const { editableBuildings, editableBuildingsSwitch, darkLightTheme } = useDisplayPreferences();
+    return (
+        <form className={`map-button ${editableBuildings}-state ${darkLightTheme}`} onSubmit={editableBuildingsSwitch}>
+            <button className="btn btn-outline btn-outline-dark"
+                type="submit">
+                {(editableBuildings === 'enabled')? 'Editable Buildings on' : 'Editable Buildings off'}
+            </button>
+        </form>
+    );
+}

app/src/frontend/map/layers/building-base-layer.tsx

@@ -3,17 +3,22 @@ import { TileLayer } from 'react-leaflet';
 
 import { MapTheme } from '../../config/map-config';
 import { MapTileset } from '../../config/tileserver-config';
-
+import { useDisplayPreferences } from '../../displayPreferences-context';
 import {getTileLayerUrl } from './get-tile-layer-url';
 
 export function BuildingBaseLayer({ theme }: {theme: MapTheme}) {
     const tileset = `base_${theme}` as const;
+    const { editableBuildings } = useDisplayPreferences();
 
-    return <TileLayer
+    if(editableBuildings == "enabled") {
+        return <TileLayer
                 key={theme} /* needed because TileLayer url is not mutable in react-leaflet v3 */
                 url={getTileLayerUrl(tileset)}
                 minZoom={14}
                 maxZoom={19}
                 detectRetina={false}
             />;
+    } else {
+        return <div></div>
+    }
 }

app/src/frontend/map/layers/building-data-layer.tsx

@@ -2,15 +2,21 @@ import * as React from 'react';
 import { TileLayer } from 'react-leaflet';
 
 import { BuildingMapTileset } from '../../config/tileserver-config';
-
+import { useDisplayPreferences } from '../../displayPreferences-context';
 import {getTileLayerUrl } from './get-tile-layer-url';
 
 export function BuildingDataLayer({tileset, revisionId} : { tileset: BuildingMapTileset, revisionId: string }) {
-    return <TileLayer
+    const { editableBuildings } = useDisplayPreferences();
+
+    if(editableBuildings == "enabled") {
+        return <TileLayer
                 key={`${tileset}-${revisionId}`} /* needed because TileLayer url is not mutable in react-leaflet v3 */
                 url={getTileLayerUrl(tileset, {rev: revisionId})}
                 minZoom={9}
                 maxZoom={19}
                 detectRetina={false}
             />;
+    } else {
+        return <div></div>
+    }
 }

app/src/frontend/map/map.tsx

@@ -39,6 +39,7 @@ import { HistoricMapSwitcher } from './historic-map-switcher';
 import { VistaSwitcher } from './vista-switcher';
 import { CreativeSwitcher } from './creative-switcher';
 import { HousingSwitcher } from './housing-switcher';
+import { EditableBuildingsSwitcher } from './editable-buildings-switcher';
 import { BuildingMapTileset } from '../config/tileserver-config';
 import { useDisplayPreferences } from '../displayPreferences-context';
 import { CategoryMapDefinition } from '../config/category-maps-config';
@@ -176,6 +177,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                                 <VistaSwitcher />
                                 <HousingSwitcher />
                                 <CreativeSwitcher />
+                                <EditableBuildingsSwitcher />
                             </>
                             : <></>
                         }