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

Merge pull request #1041 from matkoniecz/feature/1036-add-reset-button

Browse Source 
add button to reset overlay state
This commit is contained in:
Mike Simpson 2023-01-13 14:25:46 +00:00 committed by GitHub
commit f65353fa4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 100 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,9 @@ import React, { createContext, useCallback, useContext, useEffect, useState } fr
import { LayerEnablementState, MapTheme } from './config/map-config';
interface DisplayPreferencesContextState {
resetLayers: (e: React.FormEvent<HTMLFormElement>) => void;
anyLayerModifiedState: () => boolean;
vista: LayerEnablementState;
vistaSwitch: (e: React.FormEvent<HTMLFormElement>) => void;
vistaSwitchOnClick: React.MouseEventHandler<HTMLButtonElement>;
@ -45,6 +48,9 @@ const stub = (): never => {
};
export const DisplayPreferencesContext = createContext<DisplayPreferencesContextState>({
resetLayers: stub,
anyLayerModifiedState: stub,
vista: undefined,
vistaSwitch: stub,
vistaSwitchOnClick: undefined,
@ -85,16 +91,69 @@ export const DisplayPreferencesContext = createContext<DisplayPreferencesContext
const noop = () => {};
export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
const [vista, setVista] = useState<LayerEnablementState>('disabled');
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 defaultVista = 'disabled'
const defaultFlood = 'disabled'
const defaultCreative = 'disabled'
const defaultHousing = 'disabled'
const defaultBorough = 'enabled'
const defaultParcel = 'disabled'
const defaultConservation = 'disabled'
const defaultHistoricData = 'disabled'
const [vista, setVista] = useState<LayerEnablementState>(defaultVista);
const [flood, setFlood] = useState<LayerEnablementState>(defaultFlood);
const [creative, setCreative] = useState<LayerEnablementState>(defaultCreative);
const [housing, setHousing] = useState<LayerEnablementState>(defaultHousing);
const [borough, setBorough] = useState<LayerEnablementState>(defaultBorough);
const [parcel, setParcel] = useState<LayerEnablementState>(defaultParcel);
const [conservation, setConservation] = useState<LayerEnablementState>(defaultConservation);
const [historicData, setHistoricData] = useState<LayerEnablementState>(defaultHistoricData);
const [darkLightTheme, setDarkLightTheme] = useState<MapTheme>('night');
const resetLayers = useCallback(
(e) => {
e.preventDefault();
setVista(defaultVista);
setFlood(defaultFlood);
setCreative(defaultCreative);
setHousing(defaultHousing);
setBorough(defaultBorough)
setParcel(defaultParcel);
setConservation(defaultConservation);
setHistoricData(defaultHistoricData);
//setDarkLightTheme('night'); // reset only layers
},
[]
)
function anyLayerModifiedState() {
if(vista != defaultVista) {
return true;
}
if(flood != defaultFlood) {
return true;
}
if(creative != defaultCreative) {
return true;
}
if(housing != defaultHousing) {
return true;
}
if(borough != defaultBorough) {
return true;
}
if(parcel != defaultParcel) {
return true;
}
if(conservation != defaultConservation) {
return true;
}
if(historicData != defaultHistoricData) {
return true;
}
//darkLightTheme not handled here
return false;
}
const vistaSwitch = useCallback(
(e) => {
e.preventDefault();
@ -233,6 +292,9 @@ export const DisplayPreferencesProvider: React.FC<{}> = ({children}) => {
return (
<DisplayPreferencesContext.Provider value={{
resetLayers,
anyLayerModifiedState,
vista,
vistaSwitch,
vistaSwitchOnClick,

8
app/src/frontend/map/map-button.css
View File

@ -35,6 +35,14 @@
}
}
.reset-switcher {
top: 37px;
margin-right: 60px;
}
.reset-switcher .btn {
min-width: 280px;
}
.theme-switcher {
top: 77px;
}

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

@ -31,6 +31,7 @@ import { Legend } from './legend';
import SearchBox from './search-box';
import ThemeSwitcher from './theme-switcher';
import DataLayerSwitcher from './data-switcher';
import { ResetSwitcher } from './reset-switcher';
import { BoroughSwitcher } from './borough-switcher';
import { ParcelSwitcher } from './parcel-switcher';
import { FloodSwitcher } from './flood-switcher';
@ -173,6 +174,7 @@ export const ColouringMap : FC<ColouringMapProps> = ({
mode !== 'basic' &&
<>
<Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={onMapColourScale}/>
<ResetSwitcher/>
<ThemeSwitcher onSubmit={darkLightThemeSwitch} currentTheme={darkLightTheme} />
<DataLayerSwitcher onSubmit={layerSwitch} currentDisplay={dataLayers} />
{

20
app/src/frontend/map/reset-switcher.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import './map-button.css';
import { useDisplayPreferences } from '../displayPreferences-context';
export const ResetSwitcher: React.FC<{}> = () => {
const { resetLayers, darkLightTheme, anyLayerModifiedState } = useDisplayPreferences();
if(anyLayerModifiedState()) {
return (
<form className={`reset-switcher map-button ${darkLightTheme}`} onSubmit={resetLayers}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
{"Reset layers"}
</button>
</form>
);
} else {
return <></>
}
}