chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: volcano drop down filter w/ multiselect capabilities in widget settings. UI only! No functionality has been built yet

Browse Source
This commit is contained in:
vkuchenik
2026-11-05 15:39:27 -08:00
parent 189d6e2d1d
commit e50638ab55
3 changed files with 369 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/AlertChanges.jsx
+25 -13
View File
@@ -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 (
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
@@ -195,7 +205,6 @@ export default function AlertChanges({ settings, widgetID }) {
<Collapsible.Root key={index} w="100%">
<Collapsible.Context>
{(collapsible) => (
<>
<Collapsible.Trigger w="100%">
<Flex
direction="row"
@@ -219,17 +228,12 @@ export default function AlertChanges({ settings, widgetID }) {
{volcano[0]}
</Text>
<Text truncate fontSize="xs" color="widgetTextMuted">
{volcano[1][0]?.alert_start_date_local}
{new Date(volcano[1][0]?.alert_start_date_local)
.toLocaleString('en-US', options)
}
</Text>
</Flex>
<Flex w="100%" minW={0} justify="right" gap={2}>
<Flex w="fit">
{volcano[1][0]?.change_type === "increase" ? (
<TrendingUp />
) : (
<TrendingDown />
)}
</Flex>
<Text
truncate
pl={2}
@@ -241,9 +245,18 @@ export default function AlertChanges({ settings, widgetID }) {
>
{volcano[1][0]?.alert_level_name}
</Text>
<Flex w="fit">
{volcano[1][0]?.change_type === "increase" ? (
<TrendingUp />
) : (
<TrendingDown />
)}
</Flex>
</Flex>
</Flex>
</Collapsible.Trigger>
)}
</Collapsible.Context>
<Collapsible.Content
w="100%"
@@ -292,7 +305,9 @@ export default function AlertChanges({ settings, widgetID }) {
h="100%"
color="widgetTextMuted"
>
{object?.alert_start_date_local}
{new Date(object?.alert_start_date_local)
.toLocaleString('en-US', {...options, timeZone: 'UTC'})
}
</Text>
<Text
w="100%"
@@ -358,9 +373,6 @@ export default function AlertChanges({ settings, widgetID }) {
))}
</Timeline.Root>
</Collapsible.Content>
</>
)}
</Collapsible.Context>
</Collapsible.Root>
);
else if (thisWidget?.size === "small")
client/src/components/Widgets/settings/AlertChangeSettings.jsx
+195 -33
View File
@@ -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 (
<Flex direction="column" gap={4} pb={2}>
<Flex direction="column" gap={4} pb={2} overflowY="auto">
<Fieldset.Root>
<Fieldset.Content>
{/* SELECTING DATE RANGE */}
<Flex direction="column" w="100%" h="100%" justify="center" gap="2">
<Flex direction="column">
<Text w="100%" fontWeight="bold">Date Range Selection</Text>
<Text w="100%" fontWeight="bold">
Date Range Selection
</Text>
<hr /> {/*line seperator*/}
</Flex>
{/* start date */}
<Field.Root invalid={!!startError}>
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
<Text w="50%" align="center" justify="center" color="gray.700">Start Date</Text>
<Flex
direction="row"
w="100%"
h="100%"
align="center"
justify="center"
>
<Text w="50%" align="center" justify="center" color="gray.700">
Start Date
</Text>
<Flex direction="column" w="100%">
<Input type="date" w="100%" borderRadius="lg" value={currentSettings?.startDate || ""}
<Input
type="date"
w="100%"
borderRadius="lg"
value={currentSettings?.startDate || ""}
onChange={(e) => {
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 && <Field.ErrorText>{startError}</Field.ErrorText>}
{startError && (
<Field.ErrorText>{startError}</Field.ErrorText>
)}
</Flex>
</Flex>
</Field.Root>
{/* end date */}
<Field.Root invalid={!!endError}>
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
<Text w="50%" align="center" justify="center" color="gray.700">End Date</Text>
<Flex
direction="row"
w="100%"
h="100%"
align="center"
justify="center"
>
<Text w="50%" align="center" justify="center" color="gray.700">
End Date
</Text>
<Flex direction="column" w="100%">
<Input type="date" w="100%" borderRadius="lg" value={currentSettings?.endDate || ""}
<Input
type="date"
w="100%"
borderRadius="lg"
value={currentSettings?.endDate || ""}
onChange={(e) => {
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 }) {
</Field.Root>
</Flex>
{/* FILTER ON CHANGE TYPE */}
{/* FILTERS */}
<CheckboxGroup w="100%">
<Flex direction="column" w="100%" gap={2}>
<Flex direction="column" w="100%">
<Text w="fit" fontWeight="bold">Filters</Text>
<Text w="fit" fontWeight="bold">
Filters
</Text>
<hr /> {/*line seperator*/}
</Flex>
<CheckboxCard.Root size="sm" variant="surface" borderRadius="lg"
{/* level increases */}
<CheckboxCard.Root
size="sm"
variant="surface"
borderRadius="lg"
defaultChecked={currentSettings?.filters?.levelIncreases}
onCheckedChange={e => {
updateSettings(widgetId, {...currentSettings, filters: {...currentSettings.filters, levelIncreases: e.checked}})
onCheckedChange={(e) => {
updateSettings(widgetId, {
...currentSettings,
filters: {
...currentSettings.filters,
levelIncreases: e.checked,
},
});
}}
>
<CheckboxCard.HiddenInput /> {/* when removed can't check/uncheck box */}
<CheckboxCard.Control>
<CheckboxCard.Content>
<CheckboxCard.Label fontWeight={400}>Level Increases</CheckboxCard.Label>
<CheckboxCard.Label fontWeight={400}>
Level Increases
</CheckboxCard.Label>
</CheckboxCard.Content>
<CheckboxCard.Indicator />
</CheckboxCard.Control>
</CheckboxCard.Root>
<CheckboxCard.Root size="sm" variant="surface" borderRadius="lg"
{/* level decreases */}
<CheckboxCard.Root
size="sm"
variant="surface"
borderRadius="lg"
defaultChecked={currentSettings?.filters?.levelDecreases}
onCheckedChange={e => {
updateSettings(widgetId, {...currentSettings, filters: {...currentSettings.filters, levelDecreases: e.checked}})
onCheckedChange={(e) => {
updateSettings(widgetId, {
...currentSettings,
filters: {
...currentSettings.filters,
levelDecreases: e.checked,
},
});
}}
>
<CheckboxCard.HiddenInput />
<CheckboxCard.Control>
<CheckboxCard.Content>
<CheckboxCard.Label fontWeight={400}>Level Decreases</CheckboxCard.Label>
<CheckboxCard.Label fontWeight={400}>
Level Decreases
</CheckboxCard.Label>
</CheckboxCard.Content>
<CheckboxCard.Indicator />
</CheckboxCard.Control>
</CheckboxCard.Root>
<CheckboxCard.Root size="sm" variant="surface" borderRadius="lg"
{/* elevated levels */}
<CheckboxCard.Root
size="sm"
variant="surface"
borderRadius="lg"
defaultChecked={currentSettings?.filters?.elevatedLevels}
onCheckedChange={e => {
updateSettings(widgetId, {...currentSettings, filters: {...currentSettings.filters, elevatedLevels: e.checked}})
onCheckedChange={(e) => {
updateSettings(widgetId, {
...currentSettings,
filters: {
...currentSettings.filters,
elevatedLevels: e.checked,
},
});
}}
>
<CheckboxCard.HiddenInput />
<CheckboxCard.Control>
<CheckboxCard.Content>
<CheckboxCard.Label fontWeight={400}>Only Elevated Levels</CheckboxCard.Label>
<CheckboxCard.Label fontWeight={400}>
Only Elevated Levels
</CheckboxCard.Label>
</CheckboxCard.Content>
<CheckboxCard.Indicator />
</CheckboxCard.Control>
</CheckboxCard.Root>
</Flex>
</CheckboxGroup>
{/* select volcano to filter on */}
<Combobox.Root
mt={1}
variant="subtle"
multiple
openOnClick
collection={collection}
onValueChange={handleValueChange}
onInputValueChange={(e) => filter(e.inputValue)}
>
<Wrap gap="2">
{selectedVolcanoes.map((volcano) => (
<Badge key={volcano}>{volcano}</Badge>
))}
</Wrap>
<Combobox.Label fontSize="xs" >Select Volcano (s)</Combobox.Label>
<Combobox.Control>
<Combobox.Input placeholder="Type to search" borderRadius="lg"/>
<Combobox.IndicatorGroup>
<Combobox.ClearTrigger />
<Combobox.Trigger onClick={reset} />
</Combobox.IndicatorGroup>
</Combobox.Control>
<Portal>
<Combobox.Positioner>
<Combobox.Content>
{volcanoes.map((item) => (
<Combobox.Item item={item} key={item.value}>
{item.label}
<Combobox.ItemIndicator />
</Combobox.Item>
))}
<Combobox.Empty>No items found</Combobox.Empty>
</Combobox.Content>
</Combobox.Positioner>
</Portal>
</Combobox.Root>
</Fieldset.Content>
</Fieldset.Root>
</Flex>
)
);
}
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"}
]
client/src/constants/widgetRegistry.jsx
+2 -1
View File
@@ -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: {