108 lines
4.1 KiB
React
108 lines
4.1 KiB
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});
|
|
}
|
|
const handleVolcanoSort = (details) => {
|
|
const isSort = currentSettings?.activeSorts?.volcanoSort === true;
|
|
updateSettings(widgetId, { activeSorts: { ...currentSettings?.activeSorts, volcanoSort: !isSort }});
|
|
}
|
|
const handleTimeSort = (details) => {
|
|
const sort = currentSettings?.activeSorts?.timeSort === "desc" ? "asc" : "desc";
|
|
updateSettings(widgetId, { activeSorts: { ...currentSettings?.activeSorts, timeSort: sort }});
|
|
}
|
|
|
|
return (
|
|
<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}
|
|
colorPalette="blue"
|
|
>
|
|
<Switch.HiddenInput />
|
|
<Switch.Control>
|
|
<Switch.Thumb />
|
|
</Switch.Control>
|
|
<Switch.Label>Sort Oldest to Newest</Switch.Label>
|
|
</Switch.Root>
|
|
<Switch.Root
|
|
checked={currentSettings?.activeSorts?.volcanoSort}
|
|
onCheckedChange={handleVolcanoSort}
|
|
colorPalette="blue"
|
|
>
|
|
<Switch.HiddenInput />
|
|
<Switch.Control>
|
|
<Switch.Thumb />
|
|
</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>
|
|
)
|
|
} |