From e50638ab55f1c3788a0da249f331f65caface01b Mon Sep 17 00:00:00 2001 From: vkuchenik Date: Thu, 5 Nov 2026 15:39:27 -0800 Subject: [PATCH] add: volcano drop down filter w/ multiselect capabilities in widget settings. UI only! No functionality has been built yet --- .../src/components/Widgets/AlertChanges.jsx | 328 +++++++++--------- .../Widgets/settings/AlertChangeSettings.jsx | 232 +++++++++++-- client/src/constants/widgetRegistry.jsx | 3 +- 3 files changed, 369 insertions(+), 194 deletions(-) diff --git a/client/src/components/Widgets/AlertChanges.jsx b/client/src/components/Widgets/AlertChanges.jsx index 497e008..5b84f40 100644 --- a/client/src/components/Widgets/AlertChanges.jsx +++ b/client/src/components/Widgets/AlertChanges.jsx @@ -155,6 +155,16 @@ export default function AlertChanges({ settings, widgetID }) { Green: "alertGreen", }; + const options = { + year: "numeric", + month: "short", + day: "numeric", + hour: "numeric", + minute: "2-digit", + second: "2-digit", + timeZoneName: "short" + }; + if (isLoading) return ( @@ -195,172 +205,174 @@ export default function AlertChanges({ settings, widgetID }) { {(collapsible) => ( - <> - + + - + {volcano[0]} + + + {new Date(volcano[1][0]?.alert_start_date_local) + .toLocaleString('en-US', options) + } + + + + - - {volcano[0]} - - - {volcano[1][0]?.alert_start_date_local} - - - - - {volcano[1][0]?.change_type === "increase" ? ( - - ) : ( - - )} - - - {volcano[1][0]?.alert_level_name} - + {volcano[1][0]?.alert_level_name} + + + {volcano[1][0]?.change_type === "increase" ? ( + + ) : ( + + )} - - - - - {volcano[1]?.map((object, index) => ( - - - - {object?.alert_scheme_domain === - "terrestrial" && } - {object?.alert_scheme_domain === "aviation" && ( - - )} - {object?.alert_scheme_domain === "maritime" && ( - - )} - - - {object?.change_type === "increase" ? ( - - ) : ( - - )} - - - - - - - {object?.alert_start_date_local} - - - {object?.alert_level_name} - - - - Alert Scale:{" "} - - {Array.from( - { - length: - Number(object?.alert_scheme_highest) - - Number(object?.alert_scheme_lowest) + - 1, - }, - (v, i) => - Number(object?.alert_scheme_lowest) + i, - ).map((num) => ( -
- {num} -
- ))} - - - - - - ))} - - - + + )} + + + + {volcano[1]?.map((object, index) => ( + + + + {object?.alert_scheme_domain === + "terrestrial" && } + {object?.alert_scheme_domain === "aviation" && ( + + )} + {object?.alert_scheme_domain === "maritime" && ( + + )} + + + {object?.change_type === "increase" ? ( + + ) : ( + + )} + + + + + + + {new Date(object?.alert_start_date_local) + .toLocaleString('en-US', {...options, timeZone: 'UTC'}) + } + + + {object?.alert_level_name} + + + + Alert Scale:{" "} + + {Array.from( + { + length: + Number(object?.alert_scheme_highest) - + Number(object?.alert_scheme_lowest) + + 1, + }, + (v, i) => + Number(object?.alert_scheme_lowest) + i, + ).map((num) => ( +
+ {num} +
+ ))} + + + + + + ))} + + ); else if (thisWidget?.size === "small") diff --git a/client/src/components/Widgets/settings/AlertChangeSettings.jsx b/client/src/components/Widgets/settings/AlertChangeSettings.jsx index 9b4d4cc..0c2a090 100644 --- a/client/src/components/Widgets/settings/AlertChangeSettings.jsx +++ b/client/src/components/Widgets/settings/AlertChangeSettings.jsx @@ -1,63 +1,130 @@ -import {Flex, Slider, Switch, Text, Field, Fieldset, Input, CheckboxCard, CheckboxGroup} from "@chakra-ui/react"; -import {useDashboardStore} from "@/store/useDashboardStore.jsx"; -import { useState } from "react"; +import { + Flex, + Slider, + Switch, + Text, + Field, + Fieldset, + Input, + CheckboxCard, + CheckboxGroup, + Combobox, + Portal, + useFilter, + useListCollection, + Wrap, + Badge +} from "@chakra-ui/react"; +import { useDashboardStore } from "@/store/useDashboardStore.jsx"; +import { useState, useMemo } from "react"; -export default function IvansAlertsSettings({ widgetId, currentSettings }) { - const updateSettings = useDashboardStore(state => state.updateWidgetSettings); +export default function AlertChangeSettings({ widgetId, currentSettings }) { + const updateSettings = useDashboardStore( + (state) => state.updateWidgetSettings, + ); const [startError, setStartError] = useState(null); const [endError, setEndError] = useState(null); console.log("currentSettings:", currentSettings); + const [selectedVolcanoes, setSelectedVolcanoes] = useState([]); + const { startsWith } = useFilter({ sensitivity: "base" }); + + const { collection, filter, reset } = useListCollection({ + initialItems: volcanoes, + filter: startsWith, + limit: 10, + }); + + const handleValueChange = (details) => { + setSelectedVolcanoes(details.value) + } + return ( - + {/* SELECTING DATE RANGE */} - Date Range Selection + + Date Range Selection +
{/*line seperator*/} {/* start date */} - - Start Date + + + Start Date + - { const value = e.target.value; - updateSettings(widgetId, {...currentSettings, startDate: value}); + updateSettings(widgetId, { + ...currentSettings, + startDate: value, + }); const dateSelected = new Date(value); const today = new Date(); today.setHours(0, 0, 0, 0); - if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date"); + if (value && dateSelected > today) + setStartError("Can't Choose a Future Date"); else setStartError(""); }} /> - {startError && {startError}} + {startError && ( + {startError} + )} {/* end date */} - - End Date + + + End Date + - { const value = e.target.value; - updateSettings(widgetId, {...currentSettings, endDate: value}); + updateSettings(widgetId, { + ...currentSettings, + endDate: value, + }); const dateSelected = new Date(value); const today = new Date(); today.setHours(0, 0, 0, 0); - if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date"); + if (value && dateSelected > today) + setEndError("Can't Choose a Future Date"); else setEndError(""); }} /> @@ -67,61 +134,156 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) { - {/* FILTER ON CHANGE TYPE */} + {/* FILTERS */} - Filters + + Filters +
{/*line seperator*/} - { - updateSettings(widgetId, {...currentSettings, filters: {...currentSettings.filters, levelIncreases: e.checked}}) + onCheckedChange={(e) => { + updateSettings(widgetId, { + ...currentSettings, + filters: { + ...currentSettings.filters, + levelIncreases: e.checked, + }, + }); }} > {/* when removed can't check/uncheck box */} - Level Increases + + Level Increases + - { - updateSettings(widgetId, {...currentSettings, filters: {...currentSettings.filters, levelDecreases: e.checked}}) + onCheckedChange={(e) => { + updateSettings(widgetId, { + ...currentSettings, + filters: { + ...currentSettings.filters, + levelDecreases: e.checked, + }, + }); }} > - Level Decreases + + Level Decreases + - { - updateSettings(widgetId, {...currentSettings, filters: {...currentSettings.filters, elevatedLevels: e.checked}}) + onCheckedChange={(e) => { + updateSettings(widgetId, { + ...currentSettings, + filters: { + ...currentSettings.filters, + elevatedLevels: e.checked, + }, + }); }} > - Only Elevated Levels + + Only Elevated Levels + + + {/* select volcano to filter on */} + filter(e.inputValue)} + > + + + {selectedVolcanoes.map((volcano) => ( + {volcano} + ))} + + + Select Volcano (s) + + + + + + + + + + + + {volcanoes.map((item) => ( + + {item.label} + + + ))} + No items found + + + + - - ) -} \ No newline at end of file + + ); +} + +const volcanoes = [ + { label: "Mt. St. Helens", value: "helens" }, + { label: "Mt. Adams", value: "adams" }, + { label: "Rainier", value: "rainier" }, + { label: "The Three Sisters", value: "three sisters" }, + { label: "Fuego", value: "fuego" }, + { label: "Laki Laki", value: "lakilaki" }, + { label: "Lewotobi", value: "lewotobi" }, + { label: "Karangatang", value: "karangatang" }, + { label: "Cotopaxi", value: "cotopaxi" }, + { label: "Merapi", value: "merapi" }, + { label: "Marapi", value: "marapi" }, + { label: "Kick 'Em Jenny", value: "kick em jenny"} +] \ No newline at end of file diff --git a/client/src/constants/widgetRegistry.jsx b/client/src/constants/widgetRegistry.jsx index 79a9c19..1ce5689 100644 --- a/client/src/constants/widgetRegistry.jsx +++ b/client/src/constants/widgetRegistry.jsx @@ -102,7 +102,8 @@ export const WIDGET_REGISTRY = { filters: { levelIncreases: true, levelDecreases: true, - elevatedLevels: false, // will filter to show only volcanoes in their 2nd highest to highest al + elevatedLevels: false, // will filter to show only volcanoes in their top 2 highest alert levels + volcanoes: 'all', // filter on what volcanoes to display, defaults to 'all' instead of listing every volc }, }, allowedSizes: {