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

refactor: continueing to propogate changes made to widget setting popover in al changes to ivans widget

Browse Source
This commit is contained in:
vkuchenik
2026-11-06 10:53:49 -08:00
parent 58c6a40b06
commit 7b3e7d3d0c
5 changed files with 208 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/AlertChanges.jsx
+19 -29
View File
@@ -234,6 +234,13 @@ export default function AlertChanges({ settings, widgetID }) {
</Text>
</Flex>
<Flex w="100%" minW={0} justify="right" gap={2}>
<Flex w="fit" color="iconColor">
{volcano[1][0]?.change_type === "increase" ? (
<TrendingUp />
) : (
<TrendingDown />
)}
</Flex>
<Text
truncate
pl={2}
@@ -245,13 +252,6 @@ export default function AlertChanges({ settings, widgetID }) {
>
{volcano[1][0]?.alert_level_name}
</Text>
<Flex w="fit">
{volcano[1][0]?.change_type === "increase" ? (
<TrendingUp />
) : (
<TrendingDown />
)}
</Flex>
</Flex>
</Flex>
</Collapsible.Trigger>
@@ -270,18 +270,13 @@ export default function AlertChanges({ settings, widgetID }) {
<Timeline.Connector>
<Timeline.Indicator
outline="none"
bg="widgetBadgeBg"
bg="transparent"
color="iconColor"
size="lg"
>
{object?.alert_scheme_domain ===
"terrestrial" && <Footprints size={15} />}
{object?.alert_scheme_domain === "aviation" && (
<Plane size={15} />
)}
{object?.alert_scheme_domain === "maritime" && (
<Sailboat size={15} />
)}
{object?.alert_scheme_domain === "terrestrial" && <Footprints size={15} />}
{object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
{object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
</Timeline.Indicator>
<Timeline.Indicator
h="50%"
@@ -313,8 +308,7 @@ export default function AlertChanges({ settings, widgetID }) {
w="100%"
h="100%"
color={
alertColors[object?.alert_level_name] ||
"text"
alertColors[object?.alert_level_name] || "text"
}
fontSize="md"
fontWeight="semibold"
@@ -328,18 +322,16 @@ export default function AlertChanges({ settings, widgetID }) {
justify="left"
align="center"
>
<Text color="widgetTextMuted">
Alert Scale:{" "}
<Text color="widgetTextMuted" mr={1}>
Alert Scale:
</Text>
{Array.from(
{
length:
Number(object?.alert_scheme_highest) -
Number(object?.alert_scheme_lowest) +
1,
Number(object?.alert_scheme_lowest) + 1,
},
(v, i) =>
Number(object?.alert_scheme_lowest) + i,
(v, i) => Number(object?.alert_scheme_lowest) + i
).map((num) => (
<Center
key={num}
@@ -347,14 +339,12 @@ export default function AlertChanges({ settings, widgetID }) {
h="100%"
color="text"
bg={
num ===
Number(object?.alert_level_rank)
? "widgetBadgeBg"
num === Number(object?.alert_level_rank)
? "widgetInnerBadgeBg"
: "transparent"
}
borderRadius={
num ===
Number(object?.alert_level_rank)
num === Number(object?.alert_level_rank)
? "xl"
: "none"
}
client/src/components/Widgets/IvansAlerts.jsx
+16 -14
View File
@@ -1,4 +1,4 @@
import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
import {Button, Flex, Spinner, Text, Box, Collapsible, Highlight} from "@chakra-ui/react";
import {useEffect, useMemo, useCallback } from 'react';
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
import VdapApi from '../../hooks/useVdapApi.js';
@@ -100,7 +100,7 @@ export default function IvansAlerts({ settings, widgetID }) {
bg="widgetItemBg"
>
<Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
<Text truncate>{item.volcano_name}</Text>
<Text truncate color="text" fontWeight="medium">{item.volcano_name}</Text>
<Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
</Flex>
<Flex w="100%" minW={0} justify="right">
@@ -112,31 +112,33 @@ export default function IvansAlerts({ settings, widgetID }) {
{/* This box needs to be at h="100%" for the pdf toolbar to appear */}
<Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="widgetItemExpandedBg">
<Flex direction="column" gap={2} borderRadius="lg" p={2} align="start">
<Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
<Text w="fit" fontSize="sm" color="text" p={1} bg="widgetBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
<Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
</Flex>
{item?.files?.map((file, index) => {
return (
<Box w="100%" h="100%" key={index} p={1}>
<Flex mb={2} justify="space-between">
<Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
<Box borderRadius="lg" bg="widgetBadgeBg" color="text" pl={1} pr={1} fontSize={13} asChild>
<a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
Open
</a>
</Box>
<Flex direction="row" mb={2} gap={1} justify="space-between">
<a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
<Text mr={1} truncate p={1} bg="widgetBadgeBg" borderRadius="lg" fontSize="sm" color="text">
File: {file?.name}
</Text>
</a>
{/*<Box borderRadius="lg" bg="widgetBadgeBg" color="text" p={1} fontSize="sm" asChild>*/}
{/* Open*/}
{/*</Box>*/}
</Flex>
<object
data={`${file?.url}#view=FitH&toolbar=1`}
type="application/pdf"
style={{ width: '100%', height: '100%', display: 'block' }}
>
<Flex w="100%" h="100%" p={4} color="widgetTextMuted">
<Text mb={2}>
<Flex direction="column" w="100%" h="100%" align="center" p={4} color="widgetTextMuted" bg="widgetBadgeBg" borderRadius="md">
<Text mb={2} fontSize="xs" color="red.300">
Your browser cannot display this PDF directly.
</Text>
<a href={file?.url} target="_blank">
Download PDF
<a href={file?.url} target="_blank" bg="widgetBadgeBg" rel="noopener noreferrer">
<Text fontSize="xs" bg="widgetInnerBadgeBg" borderRadius="md" p={1}>Download PDF Instead</Text>
</a>
</Flex>
</object>
client/src/components/Widgets/settings/AlertChangeSettings.jsx
+4 -4
View File
@@ -41,11 +41,11 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
}
return (
<Flex direction="column" gap={4} pb={2} overflowY="auto">
<Flex direction="column" pb={2} overflowY="auto">
<Fieldset.Root>
<Fieldset.Content>
{/* SELECTING DATE RANGE */}
<Flex direction="column" w="100%" h="100%" justify="center" gap="2">
<Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
<Flex direction="column">
<Text w="100%" fontWeight="bold">
Date Range Selection
@@ -62,7 +62,7 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
align="center"
justify="center"
>
<Text w="50%" align="center" justify="center" color="gray.700">
<Text w="50%" align="center" justify="center" color="text">
Start Date
</Text>
<Flex direction="column" w="100%">
@@ -103,7 +103,7 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
align="center"
justify="center"
>
<Text w="50%" align="center" justify="center" color="gray.700">
<Text w="50%" align="center" justify="center" color="text">
End Date
</Text>
<Flex direction="column" w="100%">
client/src/components/Widgets/settings/IvansAlertsSettings.jsx
+168 -80
View File
@@ -1,4 +1,4 @@
import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
import {Button, Field, Flex, Input, Switch, Text, Fieldset, CheckboxCard} from "@chakra-ui/react";
import {useDashboardStore} from "../../../store/useDashboardStore.jsx";
import {useState} from "react";
@@ -20,89 +20,177 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
}
return (
<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}
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 flexDirection="column" justifyContent="space-between" overflowY="auto">
<Fieldset.Root>
<Fieldset.Content>
{/* SELECTING DATE RANGE */}
<Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
<Flex direction="column">
<Text w="100%" fontWeight="bold">
Date Range Selection
</Text>
<hr style={{borderColor: "red.700"}} /> {/*line seperator*/}
</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
{/* start date */}
<Field.Root invalid={!!startError}>
<Flex
direction="row"
w="100%"
type="date"
value={currentSettings?.endDate || ""}
onChange={(e) => {
const value = e.target.value;
updateSettings(widgetId, {...currentSettings, endDate: value});
h="100%"
align="center"
justify="center"
>
<Text w="50%" align="center" justify="center" color="text">
Start Date
</Text>
<Flex direction="column" w="100%">
<Input
type="date"
w="100%"
borderRadius="lg"
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);
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>
if (value && dateSelected > today)
setStartError("Can't Choose a Future Date");
else setStartError("");
}}
/>
{startError && (
<Field.ErrorText>{startError}</Field.ErrorText>
)}
</Flex>
</Flex>
</Field.Root>
{/* end date */}
<Field.Root invalid={!!endError}>
<Flex
direction="row"
w="100%"
h="100%"
align="center"
justify="center"
>
<Text w="50%" align="center" justify="center" color="text">
End Date
</Text>
<Flex direction="column" w="100%">
<Input
type="date"
w="100%"
borderRadius="lg"
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>
</Field.Root>
</Flex>
{/* SORTS */}
<Flex direction="column">
<Text w="100%" fontWeight="bold">
Sorts
</Text>
<hr /> {/*line seperator*/}
</Flex>
{/* time sort */}
<Switch.Root
checked={currentSettings?.activeSorts?.timeSort === "asc"}
onCheckedChange={handleTimeSort}
colorPalette="blue"
>
<Switch.HiddenInput />
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
<Switch.Label fontWeight={400}>Oldest to Newest</Switch.Label>
</Switch.Root>
{/* alphabetic sort */}
<Switch.Root
checked={currentSettings?.activeSorts?.volcanoSort}
onCheckedChange={handleVolcanoSort}
colorPalette="blue"
>
<Switch.HiddenInput />
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
<Switch.Label fontWeight={400}>Alphabetically by Volcano</Switch.Label>
</Switch.Root>
<Flex direction="column">
<Text w="100%" fontWeight="bold">
Filters
</Text>
<hr /> {/*line seperator*/}
</Flex>
{/* elevated levels */}
<CheckboxCard.Root
size="sm"
variant="surface"
borderRadius="lg"
defaultChecked={currentSettings?.filters?.elevatedLevels}
onCheckedChange={(e) => {
updateSettings(widgetId, {
...currentSettings,
filters: {
...currentSettings.filters,
elevatedLevels: e.checked,
},
});
}}
>
<CheckboxCard.HiddenInput />
<CheckboxCard.Control>
<CheckboxCard.Content>
<CheckboxCard.Label fontWeight={400}>
Only Elevated Levels
</CheckboxCard.Label>
</CheckboxCard.Content>
<CheckboxCard.Indicator />
</CheckboxCard.Control>
</CheckboxCard.Root>
{/* COPY TO CLIPBOARD */}
<Flex direction="column">
<Text w="100%" fontWeight="bold">
Tools
</Text>
<hr /> {/*line seperator*/}
<Button mt={2} w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
</Flex>
</Fieldset.Content>
</Fieldset.Root>
</Flex>
)
}
}
client/src/constants/widgetRegistry.jsx
+1 -3
View File
@@ -63,7 +63,6 @@ export const WIDGET_REGISTRY = {
},
allowedSizes: {
small: { w: 3, h: 6 },
medium: { w: 3, h: 9 },
large: { w: 3, h: 12 },
}
},
@@ -85,7 +84,6 @@ export const WIDGET_REGISTRY = {
},
allowedSizes: {
small: { w: 3, h: 6 },
medium: { w: 3, h: 9 },
large: { w: 3, h: 12 },
}
},
@@ -186,7 +184,7 @@ export const WIDGET_REGISTRY = {
endDate: getEndDate(),
},
allowedSizes: {
medium: { w: 3, h: 12 },
large: { w: 3, h: 12 },
}
},