chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
vkuchenik
2026-08-10 16:22:34 -07:00
parent 520731aa47
commit d9bdb17217
10 changed files with 495 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/settings/ExplosionEventsSettings.jsx
+73 -15
View File
@@ -1,8 +1,11 @@
import { Box, Text, Switch } from "@chakra-ui/react";
import {Box, Text, Switch, Flex, Field, Input} from "@chakra-ui/react";
import { useDashboardStore } from "@/store/useDashboardStore.jsx";
import {useState} from "react";
export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
const [startError, setStartError] = useState(null);
const [endError, setEndError] = useState(null);
// 1. Convert the saved string into a boolean for the toggle UI
const isSymlog = currentSettings?.yAxisScale === 'log';
@@ -18,20 +21,75 @@ export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
};
return (
<Box>
<Text fontWeight="bold" mb={3} fontSize="sm">Y-Axis Settings</Text>
<Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
{/* Y-AXIS SETTING*/}
<Text fontWeight="bold" mb={3} fontSize="sm">Y-Axis Settings</Text>
<Switch.Root
checked={isSymlog}
onCheckedChange={handleToggle}
colorPalette="blue"
>
<Switch.HiddenInput />
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
<Switch.Label>Use Log Scale</Switch.Label>
</Switch.Root>
</Box>
<Switch.Root
checked={isSymlog}
onCheckedChange={handleToggle}
colorPalette="blue"
>
<Switch.HiddenInput />
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
<Switch.Label>Use Log Scale</Switch.Label>
</Switch.Root>
{/* DATE RANGE SELECTION */}
<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>
);
}
client/src/components/Widgets/settings/IvansAlertsSettings.jsx
+65 -3
View File
@@ -1,8 +1,11 @@
import {Button, Flex, Switch, Text} 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 IvansAlertsSettings({ 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 IvansAlertsSettings({ widgetId, currentSettings }) {
}
return (
<Flex flexDirection="column" justifyContent="space-between" gap={2}>
<Button onClick={handleCopyToClipboard}>Copy All IVANS</Button>
<Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
{/* COPY TO CLIPBOARD */}
<Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
{/* SORTS */}
<Switch.Root
checked={currentSettings?.activeSorts?.timeSort === "asc"}
onCheckedChange={handleTimeSort}
@@ -41,6 +47,62 @@ export default function IvansAlertsSettings({ 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>
)
}
client/src/components/Widgets/settings/PlumeEventsSettings.jsx
+66
View File
@@ -0,0 +1,66 @@
import {Input, Field, Text, Flex} from "@chakra-ui/react";
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
import { useState } from "react";
export default function PlumeEventsSettings({ widgetId, currentSettings }) {
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
const [startError, setStartError] = useState(null);
const [endError, setEndError] = useState(null);
return (
<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>
)
}
client/src/components/Widgets/settings/RemoteSensingSettings.jsx
+65 -3
View File
@@ -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>
)
}
client/src/components/Widgets/settings/SeismicEventsSettings.jsx
+6 -4
View File
@@ -8,8 +8,8 @@ export default function SeismicEventsSettings({ widgetId, currentSettings }) {
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="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
@@ -34,6 +34,8 @@ export default function SeismicEventsSettings({ widgetId, currentSettings }) {
{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
@@ -58,7 +60,7 @@ export default function SeismicEventsSettings({ widgetId, currentSettings }) {
{endError && <Field.ErrorText>{endError}</Field.ErrorText>}
</Flex>
</Flex>
</Flex>
</Field.Root>
</Field.Root>
</Flex>
)
}