Added plot of seismic events count with date picker feature in the settings

2026-08-10 15:02:37 +00:00
parent 182495e11a
commit abb2c2ba5c
3 changed files with 232 additions and 1 deletions
@@ -0,0 +1,64 @@
+import {Input, Field, Text, Flex} from "@chakra-ui/react";
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import { useState } from "react";
+
+export default function SeismicEventsSettings({ widgetId, currentSettings }) {
+  const [startError, setStartError] = useState(null);
+  const [endError, setEndError] = useState(null);
+  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+
+  return (
+    <Field.Root invalid={!!startError || !!endError}>
+      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+        <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+          <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+            Start Date
+          </Text>
+          <Flex direction="column" w="100%">
+            <Input
+              w="100%"
+              type="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>
+        <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+          <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+            End Date
+          </Text>
+          <Flex direction="column" w="100%">
+            <Input
+              w="100%"
+              type="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>
+      </Flex>
+    </Field.Root>
+  )
+}