Updated UI for the widget settings menu
This commit is contained in:
@@ -1,38 +1,283 @@
|
||||
import {Flex, Slider, Switch} from "@chakra-ui/react";
|
||||
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||||
import {
|
||||
Flex,
|
||||
Slider,
|
||||
Switch,
|
||||
Text,
|
||||
Field,
|
||||
Fieldset,
|
||||
Input,
|
||||
CheckboxCard,
|
||||
CheckboxGroup,
|
||||
Combobox,
|
||||
Portal,
|
||||
useFilter,
|
||||
useListCollection,
|
||||
Wrap,
|
||||
Badge, Separator, HStack, useSlotRecipe
|
||||
} 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 }) {
|
||||
// STYLING
|
||||
const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
|
||||
const popoverStyles = popoverRecipe();
|
||||
|
||||
console.log("currentSettings:", currentSettings);
|
||||
// STATE MANAGEMENT
|
||||
const updateSettings = useDashboardStore(
|
||||
(state) => state.updateWidgetSettings,
|
||||
);
|
||||
const [startError, setStartError] = useState(null);
|
||||
const [endError, setEndError] = useState(null);
|
||||
const [selectedVolcanoes, setSelectedVolcanoes] = useState([]);
|
||||
const { startsWith } = useFilter({ sensitivity: "base" });
|
||||
|
||||
const { collection, filter, reset } = useListCollection({
|
||||
initialItems: volcanoes,
|
||||
filter: startsWith,
|
||||
limit: 10,
|
||||
});
|
||||
|
||||
// FUNCTIONS
|
||||
const handleValueChange = (details) => {
|
||||
setSelectedVolcanoes(details.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex flexDirection="column" justifyContent="space-between" align="center" gap={2} pb={2}>
|
||||
{/* SLIDER DATE RANGE SELECTION */}
|
||||
<Slider.Root
|
||||
w="90%" h="100%"
|
||||
min={1} max={14}
|
||||
defaultValue={[1]}
|
||||
step={1}
|
||||
onValueChangeEnd={(e) => {
|
||||
console.log("change end", e);
|
||||
const day = new Date(Date.now() - (e.value[0])*86400000).toLocaleDateString('en-CA');
|
||||
updateSettings(widgetId, {...currentSettings, startDate: day});
|
||||
}}
|
||||
>
|
||||
<Slider.Label>{currentSettings?.startDate} to {currentSettings?.endDate}</Slider.Label>
|
||||
<Slider.Control>
|
||||
<Slider.Track>
|
||||
<Slider.Range />
|
||||
</Slider.Track>
|
||||
<Slider.Thumbs />
|
||||
<Slider.MarkerGroup p={3}>
|
||||
<Slider.Marker value={1} whiteSpace="nowrap">today</Slider.Marker>
|
||||
<Slider.Marker value={7} whiteSpace="nowrap">1 week ago</Slider.Marker>
|
||||
<Slider.Marker value={14} whiteSpace="nowrap">2 weeks ago</Slider.Marker>
|
||||
</Slider.MarkerGroup>
|
||||
</Slider.Control>
|
||||
</Slider.Root>
|
||||
<Flex direction="column" pb={2} overflowY="auto">
|
||||
<Fieldset.Root>
|
||||
<Fieldset.Content>
|
||||
{/* SELECTING DATE RANGE */}
|
||||
<HStack>
|
||||
<Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
|
||||
<Separator flex="1" size="sm"/> {/*line seperator*/}
|
||||
</HStack>
|
||||
<Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
|
||||
{/* 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="text">
|
||||
Start Date
|
||||
</Text>
|
||||
<Flex direction="column" w="100%">
|
||||
<Input
|
||||
type="date"
|
||||
css={popoverStyles.date}
|
||||
value={currentSettings?.startDate || ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.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");
|
||||
else setStartError("");
|
||||
}}
|
||||
/>
|
||||
{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="text">
|
||||
End Date
|
||||
</Text>
|
||||
<Flex direction="column" w="100%">
|
||||
<Input
|
||||
type="date"
|
||||
css={popoverStyles.date}
|
||||
|
||||
value={currentSettings?.endDate || ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.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");
|
||||
else setEndError("");
|
||||
}}
|
||||
/>
|
||||
{endError && <Field.ErrorText>{endError}</Field.ErrorText>}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Field.Root>
|
||||
</Flex>
|
||||
|
||||
{/* FILTERS */}
|
||||
<CheckboxGroup w="100%">
|
||||
<Flex direction="column" w="100%" gap={2}>
|
||||
<HStack>
|
||||
<Text flexShrink="0" fontWeight="semibold">Filters</Text>
|
||||
<Separator flex="1" size="sm"/> {/*line seperator*/}
|
||||
</HStack>
|
||||
|
||||
{/* level increases */}
|
||||
<CheckboxCard.Root
|
||||
css={popoverStyles.checkboxcard}
|
||||
|
||||
defaultChecked={currentSettings?.filters?.levelIncreases}
|
||||
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.Content>
|
||||
<CheckboxCard.Indicator css={popoverStyles.checkbox} />
|
||||
</CheckboxCard.Control>
|
||||
</CheckboxCard.Root>
|
||||
|
||||
{/* level decreases */}
|
||||
<CheckboxCard.Root
|
||||
css={popoverStyles.checkboxcard}
|
||||
|
||||
defaultChecked={currentSettings?.filters?.levelDecreases}
|
||||
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.Content>
|
||||
<CheckboxCard.Indicator css={popoverStyles.checkbox} />
|
||||
</CheckboxCard.Control>
|
||||
</CheckboxCard.Root>
|
||||
|
||||
{/* elevated levels */}
|
||||
<CheckboxCard.Root
|
||||
css={popoverStyles.checkboxcard}
|
||||
|
||||
defaultChecked={currentSettings?.filters?.elevatedLevels}
|
||||
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.Content>
|
||||
<CheckboxCard.Indicator css={popoverStyles.checkbox}/>
|
||||
</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"}
|
||||
]
|
||||
Reference in New Issue
Block a user