-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add most of the Flood layers
- Loading branch information
Showing
29 changed files
with
819 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| "use client"; | ||
|
|
||
| import { useCallback, useMemo, useState } from "react"; | ||
|
|
||
| import { Label } from "@/components/ui/label"; | ||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectItem, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| } from "@/components/ui/select"; | ||
| import { Switch } from "@/components/ui/switch"; | ||
| import useMapLayers from "@/hooks/use-map-layers"; | ||
| import { DatasetLayersDataItem } from "@/types/generated/strapi.schemas"; | ||
|
|
||
| import { getDefaultReturnPeriod, getDefaultSelectedLayerId, getReturnPeriods } from "./utils"; | ||
|
|
||
| interface DatasetCardProps { | ||
| id: number; | ||
| name: string; | ||
| defaultLayerId: number | undefined; | ||
| layers: DatasetLayersDataItem[]; | ||
| } | ||
|
|
||
| const DatasetCard = ({ id, name, defaultLayerId, layers }: DatasetCardProps) => { | ||
| const [layersConfiguration, { addLayer, updateLayer, removeLayer }] = useMapLayers(); | ||
|
|
||
| const defaultSelectedLayerId = useMemo( | ||
| () => getDefaultSelectedLayerId(defaultLayerId, layers, layersConfiguration), | ||
| [layers, defaultLayerId, layersConfiguration], | ||
| ); | ||
|
|
||
| const defaultSelectedReturnPeriod = useMemo( | ||
| () => getDefaultReturnPeriod(defaultSelectedLayerId, layers, layersConfiguration), | ||
| [layers, layersConfiguration, defaultSelectedLayerId], | ||
| ); | ||
|
|
||
| const [selectedLayerId, setSelectedLayerId] = useState(defaultSelectedLayerId); | ||
| const [selectedReturnPeriod, setSelectedReturnPeriod] = useState(defaultSelectedReturnPeriod); | ||
|
|
||
| const isDatasetActive = useMemo(() => { | ||
| if (selectedLayerId === undefined) { | ||
| return false; | ||
| } | ||
|
|
||
| return layersConfiguration.findIndex(({ id }) => id === selectedLayerId) !== -1; | ||
| }, [selectedLayerId, layersConfiguration]); | ||
|
|
||
| const layerReturnPeriods = useMemo( | ||
| () => getReturnPeriods(selectedLayerId, layers), | ||
| [layers, selectedLayerId], | ||
| ); | ||
|
|
||
| const onToggleDataset = useCallback( | ||
| (active: boolean) => { | ||
| if (selectedLayerId === undefined) { | ||
| return; | ||
| } | ||
|
|
||
| if (!active) { | ||
| removeLayer(selectedLayerId); | ||
| } else { | ||
| addLayer(selectedLayerId, { ["return-period"]: selectedReturnPeriod }); | ||
| } | ||
| }, | ||
| [selectedLayerId, addLayer, removeLayer, selectedReturnPeriod], | ||
| ); | ||
|
|
||
| const onChangeSelectedLayer = useCallback( | ||
| (stringId: string) => { | ||
| const id = Number.parseInt(stringId); | ||
| const previousId = selectedLayerId; | ||
| const returnPeriod = getDefaultReturnPeriod(id, layers, layersConfiguration); | ||
|
|
||
| setSelectedLayerId(id); | ||
| setSelectedReturnPeriod(returnPeriod); | ||
|
|
||
| // If the dataset was active and the layer is changed, we replace the current layer by the new | ||
| // one keeping all the same settings (visibility, opacity, etc.) | ||
| if (isDatasetActive && previousId !== undefined) { | ||
| updateLayer(previousId, { id, ["return-period"]: returnPeriod }); | ||
| } | ||
| }, | ||
| [ | ||
| selectedLayerId, | ||
| setSelectedLayerId, | ||
| isDatasetActive, | ||
| updateLayer, | ||
| layers, | ||
| layersConfiguration, | ||
| ], | ||
| ); | ||
|
|
||
| const onChangeSelectedReturnPeriod = useCallback( | ||
| (stringReturnPeriod: string) => { | ||
| const returnPeriod = Number.parseInt(stringReturnPeriod); | ||
|
|
||
| setSelectedReturnPeriod(returnPeriod); | ||
|
|
||
| if (isDatasetActive && selectedLayerId !== undefined) { | ||
| updateLayer(selectedLayerId, { ["return-period"]: returnPeriod }); | ||
| } | ||
| }, | ||
| [selectedLayerId, setSelectedReturnPeriod, isDatasetActive, updateLayer], | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="p-4 border-image-[url(/assets/images/border-image.svg)] border-slice-10 border-image-width-2.5 border-outset-[5px] border-repeat-round"> | ||
| <div className="flex items-start justify-between gap-4"> | ||
| <Label htmlFor={`${id}-toggle`} className="text-[20px]"> | ||
| {name} | ||
| </Label> | ||
| <div className="pt-1"> | ||
| <Switch id={`${id}-toggle`} checked={isDatasetActive} onCheckedChange={onToggleDataset} /> | ||
| </div> | ||
| </div> | ||
| <div className="mt-1 flex flex-col gap-1.5"> | ||
| <Select | ||
| value={selectedLayerId !== undefined ? `${selectedLayerId}` : ""} | ||
| onValueChange={onChangeSelectedLayer} | ||
| > | ||
| <SelectTrigger aria-label="Layer"> | ||
| <SelectValue placeholder="Select a layer" /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| {layers.map((layer) => ( | ||
| <SelectItem key={layer.id} value={`${layer.id}`}> | ||
| {layer.attributes?.name} | ||
| </SelectItem> | ||
| ))} | ||
| </SelectContent> | ||
| </Select> | ||
| {!!layerReturnPeriods && ( | ||
| <Select | ||
| value={selectedReturnPeriod !== undefined ? `${selectedReturnPeriod}` : ""} | ||
| onValueChange={onChangeSelectedReturnPeriod} | ||
| > | ||
| <SelectTrigger aria-label="Return period"> | ||
| <SelectValue placeholder="Select a return period" /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| {layerReturnPeriods.options.map((option) => ( | ||
| <SelectItem key={option} value={`${option}`}> | ||
| {`${option}-year return period`} | ||
| </SelectItem> | ||
| ))} | ||
| </SelectContent> | ||
| </Select> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DatasetCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import useMapLayers from "@/hooks/use-map-layers"; | ||
| import { DatasetLayersDataItem } from "@/types/generated/strapi.schemas"; | ||
| import { LayerParamsConfig } from "@/types/layer"; | ||
|
|
||
| export const getDefaultSelectedLayerId = ( | ||
| defaultLayerId: number | undefined, | ||
| layers: DatasetLayersDataItem[], | ||
| layersConfiguration: ReturnType<typeof useMapLayers>[0], | ||
| ) => { | ||
| // The ids of the layers that belong to the dataset | ||
| const datasetLayerIds = layers.map(({ id }) => id!); | ||
| // The ids of the layers active on the map, probably not from this dataset | ||
| const activeLayerIds = layersConfiguration.map(({ id }) => id!); | ||
| // The id of the layer that belongs to the dataset and is active, if any | ||
| const activeDatasetLayerId = datasetLayerIds.find((id) => activeLayerIds.includes(id)); | ||
|
|
||
| if (activeDatasetLayerId) { | ||
| return activeDatasetLayerId; | ||
| } | ||
|
|
||
| return defaultLayerId; | ||
| }; | ||
|
|
||
| export const getDefaultReturnPeriod = ( | ||
| layerId: number | undefined, | ||
| layers: DatasetLayersDataItem[], | ||
| layersConfiguration: ReturnType<typeof useMapLayers>[0], | ||
| ) => { | ||
| const layerConfiguration = layersConfiguration.find(({ id }) => id === layerId); | ||
|
|
||
| // If the layer is active and already has a selected return period, we return it | ||
| if (layerConfiguration?.["return-period"] !== undefined) { | ||
| return layerConfiguration["return-period"]; | ||
| } | ||
|
|
||
| // Else we look for the default return period stored in `params_config` | ||
| const layer = layers.find(({ id }) => id === layerId); | ||
| const defaultReturnPeriod = ( | ||
| layer?.attributes!.params_config as LayerParamsConfig | undefined | ||
| )?.find(({ key }) => key === "return-period"); | ||
|
|
||
| if ( | ||
| !defaultReturnPeriod || | ||
| defaultReturnPeriod.default === undefined || | ||
| defaultReturnPeriod.default === null | ||
| ) { | ||
| return undefined; | ||
| } | ||
|
|
||
| return defaultReturnPeriod.default as number; | ||
| }; | ||
|
|
||
| export const getReturnPeriods = (layerId: number | undefined, layers: DatasetLayersDataItem[]) => { | ||
| const layer = layers.find(({ id }) => id === layerId); | ||
| if (!layer) { | ||
| return undefined; | ||
| } | ||
|
|
||
| const returnPeriod = (layer.attributes!.params_config as LayerParamsConfig | undefined)?.find( | ||
| ({ key }) => key === "return-period", | ||
| ); | ||
| if ( | ||
| !returnPeriod || | ||
| returnPeriod.default === undefined || | ||
| returnPeriod.default === null || | ||
| returnPeriod.options === undefined || | ||
| returnPeriod.options === null | ||
| ) { | ||
| return undefined; | ||
| } | ||
|
|
||
| return { | ||
| defaultOption: returnPeriod.default as number, | ||
| options: [...(returnPeriod.options as number[])].sort((a, b) => a - b), | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| const DroughtPanel = () => { | ||
| return ( | ||
| <div className="min-h-screen lg:min-h-0"> | ||
| <div className="py-11 text-center font-semibold">Coming soon!</div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DroughtPanel; |
Oops, something went wrong.