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

unify map display state store

Browse Source 
fix night mode display for buttons
This commit is contained in:
Mateusz Konieczny 2022-12-07 03:44:59 +01:00
parent 21eea660be
commit befbe6265e
15 changed files with 236 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
app/src/frontend/displayPreferences-context.tsx
View File

@ -1,6 +1,6 @@
import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
import { LayerEnablementState } from './config/map-config';
import { LayerEnablementState, MapTheme } from './config/map-config';
interface DisplayPreferencesContextState {
vista: LayerEnablementState;
@ -18,6 +18,26 @@ interface DisplayPreferencesContextState {
housing: LayerEnablementState;
housingSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
housingSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
conservation: LayerEnablementState;
conservationSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
conservationSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
parcel: LayerEnablementState;
parcelSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
parcelSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
borough: LayerEnablementState;
boroughSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
boroughSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
historicData: LayerEnablementState;
historicDataSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
historicDataSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
darkLightTheme: MapTheme;
darkLightThemeSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
darkLightThemeSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
}
const stub = (): never => {
@ -41,7 +61,6 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
housingSwitch: stub,
housingSwitchOnClick: undefined,
/*
conservation: undefined,
conservationSwitch: stub,
conservationSwitchOnClick: undefined,
@ -53,10 +72,14 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
borough: undefined,
boroughSwitch: stub,
boroughSwitchOnClick: undefined,
not needed right now
historicData
*/
historicData: undefined,
historicDataSwitch: stub,
historicDataSwitchOnClick: undefined,
darkLightTheme: undefined,
darkLightThemeSwitch: stub,
darkLightThemeSwitchOnClick: undefined,
});
const noop = () => {};
@ -66,14 +89,11 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
const [flood, setFlood] = useState<LayerEnablementState>('disabled');
const [creative, setCreative] = useState<LayerEnablementState>('disabled');
const [housing, setHousing] = useState<LayerEnablementState>('disabled');
/*
const [borough, setBorough] = useState<LayerEnablementState>('enabled');
const [parcel, setParcel] = useState<LayerEnablementState>('disabled');
const [conservation, setConservation] = useState<LayerEnablementState>('disabled');
const [historicData, setHistoricData] = useState<LayerEnablementState>('disabled');
*/
const [darkLightTheme, setDarkLightTheme] = useState<MapTheme>('night');
const vistaSwitch = useCallback(
(e) => {
@ -135,6 +155,82 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
setCreative(newCreative);
}
const boroughSwitch = useCallback(
(e) => {
flipBorough(e)
},
[borough],
)
const boroughSwitchOnClick = (e) => {
flipBorough(e)
}
function flipBorough(e) {
e.preventDefault();
const newBorough = (borough === 'enabled')? 'disabled' : 'enabled';
setBorough(newBorough);
}
const parcelSwitch = useCallback(
(e) => {
flipParcel(e)
},
[parcel],
)
const parcelSwitchOnClick = (e) => {
flipParcel(e)
}
function flipParcel(e) {
e.preventDefault();
const newParcel = (parcel === 'enabled')? 'disabled' : 'enabled';
setParcel(newParcel);
}
const conservationSwitch = useCallback(
(e) => {
flipConservation(e)
},
[conservation],
)
const conservationSwitchOnClick = (e) => {
flipConservation(e)
}
function flipConservation(e) {
e.preventDefault();
const newConservation = (conservation === 'enabled')? 'disabled' : 'enabled';
setConservation(newConservation);
}
const historicDataSwitch = useCallback(
(e) => {
flipHistoricData(e)
},
[historicData],
)
const historicDataSwitchOnClick = (e) => {
flipHistoricData(e)
}
function flipHistoricData(e) {
e.preventDefault();
const newHistoric = (historicData === 'enabled')? 'disabled' : 'enabled';
setHistoricData(newHistoric);
}
const darkLightThemeSwitch = useCallback(
(e) => {
flipDarkLightTheme(e)
},
[darkLightTheme],
)
const darkLightThemeSwitchOnClick = (e) => {
flipDarkLightTheme(e)
}
function flipDarkLightTheme(e) {
e.preventDefault();
const newDarkLightTheme = (darkLightTheme === 'light')? 'night' : 'light';
setDarkLightTheme(newDarkLightTheme);
}
return (
<DisplayPreferencesContext.Provider value={{
vista,
@ -148,7 +244,25 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
creativeSwitchOnClick,
housing,
housingSwitch,
housingSwitchOnClick
housingSwitchOnClick,
conservation,
conservationSwitch,
conservationSwitchOnClick,
parcel,
parcelSwitch,
parcelSwitchOnClick,
borough,
boroughSwitch,
boroughSwitchOnClick,
historicData,
historicDataSwitch,
historicDataSwitchOnClick,
darkLightTheme,
darkLightThemeSwitch,
darkLightThemeSwitchOnClick
}}>
{children}
</DisplayPreferencesContext.Provider>

17
app/src/frontend/map/borough-switcher.tsx
View File

@ -1,19 +1,16 @@
import React from 'react';
import './borough-switcher.css';
import { useDisplayPreferences } from '../displayPreferences-context';
interface BoroughSwitcherProps {
currentDisplay: string;
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}
const BoroughSwitcher: React.FC<BoroughSwitcherProps> = (props) => (
<form className={`borough-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
export const BoroughSwitcher: React.FC<{}> = () => {
const { borough, boroughSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`borough-switcher ${darkLightTheme}`} onSubmit={boroughSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(props.currentDisplay === 'enabled')? 'Switch off Borough Boundaries' : 'Switch on Borough Boundaries'}
{(borough === 'enabled')? 'Switch off Borough Boundaries' : 'Switch on Borough Boundaries'}
</button>
</form>
);
export default BoroughSwitcher;
}

17
app/src/frontend/map/conservation-switcher.tsx
View File

@ -1,19 +1,16 @@
import React from 'react';
import './conservation-switcher.css';
import { useDisplayPreferences } from '../displayPreferences-context';
interface ConservationAreaSwitcherProps {
currentDisplay: string;
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}
const ConservationAreaSwitcherProps: React.FC<ConservationAreaSwitcherProps> = (props) => (
<form className={`conservation-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
export const ConservationAreaSwitcher: React.FC<{}> = (props) => {
const { conservation, conservationSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`conservation-switcher ${darkLightTheme}`} onSubmit={conservationSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(props.currentDisplay === 'enabled')? 'Switch off Conservation Areas' : 'Switch on Conservation Areas'}
{(conservation === 'enabled')? 'Switch off Conservation Areas' : 'Switch on Conservation Areas'}
</button>
</form>
);
export default ConservationAreaSwitcherProps;
}

4
app/src/frontend/map/creative-switcher.tsx
View File

@ -4,9 +4,9 @@ import './creative-switcher.css';
import { useDisplayPreferences } from '../displayPreferences-context';
export const CreativeSwitcher: React.FC<{}> = () => {
const { creative, creativeSwitch } = useDisplayPreferences();
const { creative, creativeSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`creative-switcher ${creative}`} onSubmit={creativeSwitch}>
<form className={`creative-switcher ${darkLightTheme}`} onSubmit={creativeSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(creative === 'enabled')? 'Switch off Creative Enterprise Zones' : 'Switch on Creative Enterprise Zones'}

8
app/src/frontend/map/data-switcher.tsx
View File

@ -1,19 +1,23 @@
import React from 'react';
import './data-switcher.css';
import { useDisplayPreferences } from '../displayPreferences-context';
interface DataLayerSwitcherProps {
currentDisplay: string;
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}
const DataLayerSwitcher: React.FC<DataLayerSwitcherProps> = (props) => (
<form className={`data-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
const DataLayerSwitcher: React.FC<DataLayerSwitcherProps> = (props) => {
const { darkLightTheme } = useDisplayPreferences();
return (
<form className={`data-switcher ${darkLightTheme}`} onSubmit={props.onSubmit}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(props.currentDisplay === 'enabled')? 'Hide layer options' : 'Show layer options'}
</button>
</form>
);
}
export default DataLayerSwitcher;

4
app/src/frontend/map/flood-switcher.tsx
View File

@ -4,9 +4,9 @@ import './flood-switcher.css';
import { useDisplayPreferences } from '../displayPreferences-context';
export const FloodSwitcher: React.FC<{}> = () => {
const { flood, floodSwitch } = useDisplayPreferences();
const { flood, floodSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`flood-switcher ${flood}`} onSubmit={floodSwitch}>
<form className={`flood-switcher ${darkLightTheme}`} onSubmit={floodSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(flood === 'enabled')? 'Switch off Flood Zones' : 'Switch on Flood Zones'}

17
app/src/frontend/map/historic-data-switcher.tsx
View File

@ -1,19 +1,16 @@
import React from 'react';
import './historic-data-switcher.css';
import { useDisplayPreferences } from '../displayPreferences-context';
interface HistoricDataSwitcherProps {
currentDisplay: string;
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}
const HistoricDataSwitcherProps: React.FC<HistoricDataSwitcherProps> = (props) => (
<form className={`historic-data-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
export const HistoricDataSwitcher: React.FC<{}> = (props) => {
const { historicData, historicDataSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`historic-data-switcher ${darkLightTheme}`} onSubmit={historicDataSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(props.currentDisplay === 'enabled')? 'Switch off the OS 1890s Historical Map' : 'Switch on the OS 1890s Historical Map'}
{(historicData === 'enabled')? 'Switch off the OS 1890s Historical Map' : 'Switch on the OS 1890s Historical Map'}
</button>
</form>
);
export default HistoricDataSwitcherProps;
}

4
app/src/frontend/map/housing-switcher.tsx
View File

@ -4,9 +4,9 @@ import './housing-switcher.css';
import { useDisplayPreferences } from '../displayPreferences-context';
export const HousingSwitcher: React.FC<{}> = () => {
const { housing, housingSwitch } = useDisplayPreferences();
const { housing, housingSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`housing-switcher ${housing}`} onSubmit={housingSwitch}>
<form className={`housing-switcher ${darkLightTheme}`} onSubmit={housingSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(housing === 'enabled')? 'Switch off Housing Zones' : 'Switch on Housing Zones'}

9
app/src/frontend/map/layers/borough-boundary-layer.tsx
View File

@ -1,18 +1,19 @@
import { GeoJsonObject } from 'geojson';
import React, { useEffect, useState } from 'react';
import { GeoJSON } from 'react-leaflet';
import { LayerEnablementState } from '../../config/map-config';
import { useDisplayPreferences } from '../../displayPreferences-context';
import { apiGet } from '../../apiHelpers';
export function BoroughBoundaryLayer({enablement}: {enablement: LayerEnablementState}) {
export function BoroughBoundaryLayer({}) {
const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
const { borough } = useDisplayPreferences();
useEffect(() => {
apiGet('/geometries/boroughs.geojson')
.then(data => setBoundaryGeojson(data as GeoJsonObject));
}, []);
if(enablement == "enabled") {
if(borough == "enabled") {
return boundaryGeojson &&
<GeoJSON
attribution='Borough boundary from <a href=https://data.london.gov.uk/dataset/london_boroughs>London Datastore</a> Ordnance Survey Open Data - Contains public sector information licensed under the <a href=https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>Open Government Licence v3.0</a>'
@ -20,7 +21,7 @@ export function BoroughBoundaryLayer({enablement}: {enablement: LayerEnablementS
style={{color: '#f00', fill: false, weight: 1}}
/* minNativeZoom={17}*/
/>;
} else if (enablement == "disabled") {
} else if (borough == "disabled") {
return <div></div>
// do not display anything
return boundaryGeojson &&

9
app/src/frontend/map/layers/conservation-boundary-layer.tsx
View File

@ -1,25 +1,26 @@
import { GeoJsonObject } from 'geojson';
import React, { useEffect, useState } from 'react';
import { GeoJSON } from 'react-leaflet';
import { LayerEnablementState } from '../../config/map-config';
import { useDisplayPreferences } from '../../displayPreferences-context';
import { apiGet } from '../../apiHelpers';
export function ConservationAreaBoundaryLayer({enablement}: {enablement: LayerEnablementState}) {
export function ConservationAreaBoundaryLayer({}) {
const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
const { conservation } = useDisplayPreferences();
useEffect(() => {
apiGet('/geometries/conservation_areas.geojson')
.then(data => setBoundaryGeojson(data as GeoJsonObject));
}, []);
if(enablement == "enabled") {
if(conservation == "enabled") {
return boundaryGeojson &&
<GeoJSON
attribution='Conservation areas by <a href=http://www.bedfordpark.net/leo/planning/>Leo Hall</a> on <a href=https://creativecommons.org/licenses/by/4.0/legalcode>CC-BY 4.0 licence</a>, contains data under <a href=https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>the Open Government Licence v.3.0</a>'
data={boundaryGeojson}
style={{color: '#cd7090', fill: true, weight: 1, opacity: 1, fillOpacity: 0.8}}
/>;
} else if (enablement == "disabled") {
} else if (conservation == "disabled") {
return <div></div>
} else {
return boundaryGeojson &&

6
app/src/frontend/map/layers/historic-data-layer.tsx
View File

@ -2,9 +2,11 @@ import * as React from 'react';
import { TileLayer } from 'react-leaflet';
import { LayerEnablementState } from '../../config/map-config';
import { BuildingBaseLayer } from './building-base-layer';
import { useDisplayPreferences } from '../../displayPreferences-context';
export function HistoricDataLayer({enablement}: {enablement: LayerEnablementState}) {
if(enablement == "enabled") {
export function HistoricDataLayer({}) {
const { historicData } = useDisplayPreferences();
if(historicData == "enabled") {
return <><TileLayer
url="https://mapseries-tilesets.s3.amazonaws.com/london_1890s/{z}/{x}/{y}.png"
attribution='&copy; CC BY 4.0 - Reproduced with the permission of the <a href="https://maps.nls.uk/">National Library of Scotland</a>'

8
app/src/frontend/map/layers/parcel-boundary-layer.tsx
View File

@ -3,16 +3,18 @@ import React, { useEffect, useState } from 'react';
import { GeoJSON } from 'react-leaflet';
import { LayerEnablementState } from '../../config/map-config';
import { apiGet } from '../../apiHelpers';
import { useDisplayPreferences } from '../../displayPreferences-context';
export function ParcelBoundaryLayer({enablement}: {enablement: LayerEnablementState}) {
export function ParcelBoundaryLayer() {
const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
const { parcel } = useDisplayPreferences();
useEffect(() => {
apiGet('/geometries/parcels_city_of_london.geojson')
.then(data => setBoundaryGeojson(data as GeoJsonObject));
}, []);
if(enablement == "enabled") {
if(parcel == "enabled") {
return boundaryGeojson &&
<GeoJSON
attribution='Parcel boundary from <a href=https://use-land-property-data.service.gov.uk/datasets/inspire/download>Index polygons spatial data (INSPIRE)</a> - <a href=www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>Open Government Licence v3</a>'
@ -20,7 +22,7 @@ export function ParcelBoundaryLayer({enablement}: {enablement: LayerEnablementSt
style={{color: '#ff0', fill: false, weight: 1}}
/* minNativeZoom={17}*/
/>;
} else if (enablement == "disabled") {
} else if (parcel == "disabled") {
return <div></div>
// do not display anything
return boundaryGeojson &&

90
app/src/frontend/map/map.tsx
View File

@ -31,15 +31,16 @@ import { Legend } from './legend';
import SearchBox from './search-box';
import ThemeSwitcher from './theme-switcher';
import DataLayerSwitcher from './data-switcher';
import BoroughSwitcher from './borough-switcher';
import ParcelSwitcher from './parcel-switcher';
import { BoroughSwitcher } from './borough-switcher';
import { ParcelSwitcher } from './parcel-switcher';
import { FloodSwitcher } from './flood-switcher';
import ConservationAreaSwitcher from './conservation-switcher';
import HistoricDataSwitcher from './historic-data-switcher';
import { ConservationAreaSwitcher } from './conservation-switcher';
import { HistoricDataSwitcher } from './historic-data-switcher';
import { VistaSwitcher } from './vista-switcher';
import { CreativeSwitcher } from './creative-switcher';
import { HousingSwitcher } from './housing-switcher';
import { BuildingMapTileset } from '../config/tileserver-config';
import { useDisplayPreferences } from '../displayPreferences-context';
interface ColouringMapProps {
selectedBuildingId: number;
@ -57,14 +58,8 @@ export const ColouringMap : FC<ColouringMapProps> = ({
selectedBuildingId,
children
}) => {
const [theme, setTheme] = useState<MapTheme>('night');
const { darkLightTheme, darkLightThemeSwitch } = useDisplayPreferences();
const [dataLayers, setDataLayers] = useState<LayerEnablementState>('disabled');
{/* TODO start change remaining ones */}
const [borough, setBorough] = useState<LayerEnablementState>('enabled');
const [parcel, setParcel] = useState<LayerEnablementState>('disabled');
const [conservation, setConservation] = useState<LayerEnablementState>('disabled');
const [historicData, setHistoricData] = useState<LayerEnablementState>('disabled');
{/* TODO end */}
const [position, setPosition] = useState(initialMapViewport.position);
const [zoom, setZoom] = useState(initialMapViewport.zoom);
@ -88,15 +83,6 @@ export const ColouringMap : FC<ColouringMapProps> = ({
[onBuildingAction],
)
const themeSwitch = useCallback(
(e) => {
e.preventDefault();
const newTheme = (theme === 'light')? 'night' : 'light';
setTheme(newTheme);
},
[theme],
)
const layerSwitch = useCallback(
(e) => {
e.preventDefault();
@ -106,44 +92,6 @@ export const ColouringMap : FC<ColouringMapProps> = ({
[dataLayers],
)
{/* change remaining ones */}
const boroughSwitch = useCallback(
(e) => {
e.preventDefault();
const newBorough = (borough === 'enabled')? 'disabled' : 'enabled';
setBorough(newBorough);
},
[borough],
)
const parcelSwitch = useCallback(
(e) => {
e.preventDefault();
const newParcel = (parcel === 'enabled')? 'disabled' : 'enabled';
setParcel(newParcel);
},
[parcel],
)
const conservationSwitch = useCallback(
(e) => {
e.preventDefault();
const newConservation = (conservation === 'enabled')? 'disabled' : 'enabled';
setConservation(newConservation);
},
[conservation],
)
const historicDataSwitch = useCallback(
(e) => {
e.preventDefault();
const newHistoric = (historicData === 'enabled')? 'disabled' : 'enabled';
setHistoricData(newHistoric);
},
[historicData],
)
{/* TODO end */}
const categoryMapDefinitions = useMemo(() => categoryMapsConfig[category], [category]);
useEffect(() => {
@ -167,16 +115,16 @@ export const ColouringMap : FC<ColouringMapProps> = ({
attributionControl={false}
>
<ClickHandler onClick={handleClick} />
<MapBackgroundColor theme={theme} />
<MapBackgroundColor theme={darkLightTheme} />
<MapViewport position={position} zoom={zoom} />
<Pane
key={theme}
key={darkLightTheme}
name={'cc-base-pane'}
style={{zIndex: 50}}
>
<CityBaseMapLayer theme={theme} />
<BuildingBaseLayer theme={theme} />
<CityBaseMapLayer theme={darkLightTheme} />
<BuildingBaseLayer theme={darkLightTheme} />
</Pane>
{
@ -192,11 +140,11 @@ export const ColouringMap : FC<ColouringMapProps> = ({
style={{zIndex: 300}}
>
<CityBoundaryLayer/>
<HistoricDataLayer enablement={historicData}/>
<BoroughBoundaryLayer enablement={borough}/>
<ParcelBoundaryLayer enablement={parcel}/>
<HistoricDataLayer/>
<BoroughBoundaryLayer/>
<ParcelBoundaryLayer/>
<FloodBoundaryLayer/>
<ConservationAreaBoundaryLayer enablement={conservation}/>
<ConservationAreaBoundaryLayer/>
<VistaBoundaryLayer/>
<HousingBoundaryLayer/>
<CreativeBoundaryLayer/>
@ -223,16 +171,16 @@ export const ColouringMap : FC<ColouringMapProps> = ({
</div>
}
<Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={setMapColourScale}/>
<ThemeSwitcher onSubmit={themeSwitch} currentTheme={theme} />
<ThemeSwitcher onSubmit={darkLightThemeSwitch} currentTheme={darkLightTheme} />
<DataLayerSwitcher onSubmit={layerSwitch} currentDisplay={dataLayers} />
{
(dataLayers == "enabled") ?
<>
<BoroughSwitcher onSubmit={boroughSwitch} currentDisplay={borough} />
<ParcelSwitcher onSubmit={parcelSwitch} currentDisplay={parcel} />
<BoroughSwitcher/>
<ParcelSwitcher/>
<FloodSwitcher/>
<ConservationAreaSwitcher onSubmit={conservationSwitch} currentDisplay={conservation} />
<HistoricDataSwitcher onSubmit={historicDataSwitch} currentDisplay={historicData} />
<ConservationAreaSwitcher/>
<HistoricDataSwitcher/>
<VistaSwitcher />
<HousingSwitcher />
<CreativeSwitcher />

17
app/src/frontend/map/parcel-switcher.tsx
View File

@ -1,19 +1,16 @@
import React from 'react';
import './parcel-switcher.css';
import { useDisplayPreferences } from '../displayPreferences-context';
interface ParcelSwitcherProps {
currentDisplay: string;
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}
const ParcelSwitcher: React.FC<ParcelSwitcherProps> = (props) => (
<form className={`parcel-switcher ${props.currentDisplay}`} onSubmit={props.onSubmit}>
export const ParcelSwitcher: React.FC<{}> = () => {
const { parcel, parcelSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`parcel-switcher ${darkLightTheme}`} onSubmit={parcelSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(props.currentDisplay === 'enabled')? 'Switch off Parcel (sample) overlay' : 'Switch on Parcel (sample) overlay'}
{(parcel === 'enabled')? 'Switch off Parcel (sample) overlay' : 'Switch on Parcel (sample) overlay'}
</button>
</form>
);
export default ParcelSwitcher;
}

4
app/src/frontend/map/vista-switcher.tsx
View File

@ -4,9 +4,9 @@ import './vista-switcher.css';
import { useDisplayPreferences } from '../displayPreferences-context';
export const VistaSwitcher: React.FC<{}> = () => {
const { vista, vistaSwitch } = useDisplayPreferences();
const { vista, vistaSwitch, darkLightTheme } = useDisplayPreferences();
return (
<form className={`vista-switcher ${vista}`} onSubmit={vistaSwitch}>
<form className={`vista-switcher ${darkLightTheme}`} onSubmit={vistaSwitch}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{(vista === 'enabled')? 'Switch off Protected Vistas' : 'Switch on Protected Vistas'}