36 lines
1.4 KiB
React
36 lines
1.4 KiB
React
|
import {Flex, Slider, Switch} from "@chakra-ui/react";
|
||
|
|
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||
|
|
|
||
|
|
export default function IvansAlertsSettings({ widgetId, currentSettings }) {
|
||
|
|
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Flex flexDirection="column" justifyContent="space-between" gap={2} pb={2}>
|
||
|
|
{/* SLIDER DATE RANGE SELECTION */}
|
||
|
|
<Slider.Root
|
||
|
|
width="80%" h="100%"
|
||
|
|
min={1} max={14}
|
||
|
|
defaultValue={[7]}
|
||
|
|
step={1}
|
||
|
|
onValueChangeEnd={(e) => {
|
||
|
|
const day = new Date(Date.now() - (e.value[0])*86400000).toLocaleDateString('en-CA');
|
||
|
|
console.log("new start: ", day);
|
||
|
|
updateSettings(widgetId, {...currentSettings, startDate: day});
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Slider.Label>{currentSettings?.endDate} to {currentSettings?.startDate}</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>
|
||
|
|
)
|
||
|
|
}
|