add filtering on dates to all widgets, defualt is past 7 days

This commit is contained in:
2026-08-10 16:22:34 -07:00
parent 520731aa47
commit d9bdb17217
10 changed files with 495 additions and 189 deletions
@@ -1,8 +1,11 @@
import {Button, Flex, Switch} from "@chakra-ui/react";
import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
import {useState} from "react";
export default function RemoteSensingSettings({ widgetId, currentSettings }) {
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
const [startError, setStartError] = useState(null);
const [endError, setEndError] = useState(null);
const handleCopyToClipboard = () => {
updateSettings(widgetId, {copyToClipboard: true});
@@ -17,8 +20,11 @@ export default function RemoteSensingSettings({ widgetId, currentSettings }) {
}
return (
<Flex flexDirection="column" justifyContent="space-between" gap={2}>
<Button onClick={handleCopyToClipboard}>Copy All RS</Button>
<Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
{/* COPYING TO CLIPBOARD */}
<Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All RS</Button>
{/* SORTING */}
<Switch.Root
checked={currentSettings?.activeSorts?.timeSort === "asc"}
onCheckedChange={handleTimeSort}
@@ -41,6 +47,62 @@ export default function RemoteSensingSettings({ widgetId, currentSettings }) {
</Switch.Control>
<Switch.Label>Sort by Volcano</Switch.Label>
</Switch.Root>
{/* SELECTING DATE RANGE */}
<Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
<Field.Root invalid={!!startError}>
<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>
</Field.Root>
<Field.Root invalid={!!endError}>
<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>
</Field.Root>
</Flex>
</Flex>
)
}