add alert-level-changes widget with working time range selector

2026-08-18 21:20:49 +00:00
parent 7667235fdb
commit 7f92ddd62b
9 changed files with 318 additions and 86 deletions
@@ -0,0 +1,36 @@
+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>
+  )
+}