add: volcano drop down filter w/ multiselect capabilities in widget settings. UI only! No functionality has been built yet
This commit is contained in:
@@ -155,6 +155,16 @@ export default function AlertChanges({ settings, widgetID }) {
|
||||
Green: "alertGreen",
|
||||
};
|
||||
|
||||
const options = {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
timeZoneName: "short"
|
||||
};
|
||||
|
||||
if (isLoading)
|
||||
return (
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
|
||||
@@ -195,172 +205,174 @@ export default function AlertChanges({ settings, widgetID }) {
|
||||
<Collapsible.Root key={index} w="100%">
|
||||
<Collapsible.Context>
|
||||
{(collapsible) => (
|
||||
<>
|
||||
<Collapsible.Trigger w="100%">
|
||||
<Collapsible.Trigger w="100%">
|
||||
<Flex
|
||||
direction="row"
|
||||
w="100%"
|
||||
justify="space-between"
|
||||
align="center"
|
||||
p={1}
|
||||
pl={3}
|
||||
pr={3}
|
||||
borderTopRadius="lg"
|
||||
borderBottomRadius={collapsible.open ? "0" : "lg"}
|
||||
bg="widgetItemBg"
|
||||
>
|
||||
<Flex
|
||||
direction="row"
|
||||
direction="column"
|
||||
w="100%"
|
||||
justify="space-between"
|
||||
align="center"
|
||||
p={1}
|
||||
pl={3}
|
||||
pr={3}
|
||||
borderTopRadius="lg"
|
||||
borderBottomRadius={collapsible.open ? "0" : "lg"}
|
||||
bg="widgetItemBg"
|
||||
minW={0}
|
||||
textAlign="left"
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
w="100%"
|
||||
minW={0}
|
||||
textAlign="left"
|
||||
<Text truncate color="text" fontWeight="medium">
|
||||
{volcano[0]}
|
||||
</Text>
|
||||
<Text truncate fontSize="xs" color="widgetTextMuted">
|
||||
{new Date(volcano[1][0]?.alert_start_date_local)
|
||||
.toLocaleString('en-US', options)
|
||||
}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right" gap={2}>
|
||||
<Text
|
||||
truncate
|
||||
pl={2}
|
||||
pr={2}
|
||||
borderRadius="lg"
|
||||
bg="widgetBadgeBg"
|
||||
color="text"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
<Text truncate color="text" fontWeight="medium">
|
||||
{volcano[0]}
|
||||
</Text>
|
||||
<Text truncate fontSize="xs" color="widgetTextMuted">
|
||||
{volcano[1][0]?.alert_start_date_local}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex w="100%" minW={0} justify="right" gap={2}>
|
||||
<Flex w="fit">
|
||||
{volcano[1][0]?.change_type === "increase" ? (
|
||||
<TrendingUp />
|
||||
) : (
|
||||
<TrendingDown />
|
||||
)}
|
||||
</Flex>
|
||||
<Text
|
||||
truncate
|
||||
pl={2}
|
||||
pr={2}
|
||||
borderRadius="lg"
|
||||
bg="widgetBadgeBg"
|
||||
color="text"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
{volcano[1][0]?.alert_level_name}
|
||||
</Text>
|
||||
{volcano[1][0]?.alert_level_name}
|
||||
</Text>
|
||||
<Flex w="fit">
|
||||
{volcano[1][0]?.change_type === "increase" ? (
|
||||
<TrendingUp />
|
||||
) : (
|
||||
<TrendingDown />
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Collapsible.Trigger>
|
||||
|
||||
<Collapsible.Content
|
||||
w="100%"
|
||||
p={3}
|
||||
borderBottomRadius="lg"
|
||||
bg="widgetItemExpandedBg"
|
||||
>
|
||||
<Timeline.Root size="md" variant="subtle">
|
||||
{volcano[1]?.map((object, index) => (
|
||||
<Timeline.Item key={index} w="100%" h="100%">
|
||||
<Timeline.Connector>
|
||||
<Timeline.Indicator
|
||||
outline="none"
|
||||
bg="widgetBadgeBg"
|
||||
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} />
|
||||
)}
|
||||
</Timeline.Indicator>
|
||||
<Timeline.Indicator
|
||||
h="50%"
|
||||
outline="none"
|
||||
bg="transparent"
|
||||
color="iconColor"
|
||||
size="lg"
|
||||
>
|
||||
{object?.change_type === "increase" ? (
|
||||
<TrendingUp />
|
||||
) : (
|
||||
<TrendingDown />
|
||||
)}
|
||||
</Timeline.Indicator>
|
||||
</Timeline.Connector>
|
||||
<Timeline.Content w="100%" h="100%">
|
||||
<Timeline.Description w="100%" h="100%" gap={1}>
|
||||
<Flex direction="column" gap={1}>
|
||||
<Text
|
||||
w="100%"
|
||||
h="100%"
|
||||
color="widgetTextMuted"
|
||||
>
|
||||
{object?.alert_start_date_local}
|
||||
</Text>
|
||||
<Text
|
||||
w="100%"
|
||||
h="100%"
|
||||
color={
|
||||
alertColors[object?.alert_level_name] ||
|
||||
"text"
|
||||
}
|
||||
fontSize="md"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
{object?.alert_level_name}
|
||||
</Text>
|
||||
<Flex
|
||||
w="100%"
|
||||
h="20px"
|
||||
direction="row"
|
||||
justify="left"
|
||||
align="center"
|
||||
>
|
||||
<Text color="widgetTextMuted">
|
||||
Alert Scale:{" "}
|
||||
</Text>
|
||||
{Array.from(
|
||||
{
|
||||
length:
|
||||
Number(object?.alert_scheme_highest) -
|
||||
Number(object?.alert_scheme_lowest) +
|
||||
1,
|
||||
},
|
||||
(v, i) =>
|
||||
Number(object?.alert_scheme_lowest) + i,
|
||||
).map((num) => (
|
||||
<Center
|
||||
key={num}
|
||||
w="20px"
|
||||
h="100%"
|
||||
color="text"
|
||||
bg={
|
||||
num ===
|
||||
Number(object?.alert_level_rank)
|
||||
? "widgetBadgeBg"
|
||||
: "transparent"
|
||||
}
|
||||
borderRadius={
|
||||
num ===
|
||||
Number(object?.alert_level_rank)
|
||||
? "xl"
|
||||
: "none"
|
||||
}
|
||||
textAlign="center"
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{num}
|
||||
</Center>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Timeline.Description>
|
||||
</Timeline.Content>
|
||||
</Timeline.Item>
|
||||
))}
|
||||
</Timeline.Root>
|
||||
</Collapsible.Content>
|
||||
</>
|
||||
</Flex>
|
||||
</Collapsible.Trigger>
|
||||
)}
|
||||
</Collapsible.Context>
|
||||
|
||||
<Collapsible.Content
|
||||
w="100%"
|
||||
p={3}
|
||||
borderBottomRadius="lg"
|
||||
bg="widgetItemExpandedBg"
|
||||
>
|
||||
<Timeline.Root size="md" variant="subtle">
|
||||
{volcano[1]?.map((object, index) => (
|
||||
<Timeline.Item key={index} w="100%" h="100%">
|
||||
<Timeline.Connector>
|
||||
<Timeline.Indicator
|
||||
outline="none"
|
||||
bg="widgetBadgeBg"
|
||||
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} />
|
||||
)}
|
||||
</Timeline.Indicator>
|
||||
<Timeline.Indicator
|
||||
h="50%"
|
||||
outline="none"
|
||||
bg="transparent"
|
||||
color="iconColor"
|
||||
size="lg"
|
||||
>
|
||||
{object?.change_type === "increase" ? (
|
||||
<TrendingUp />
|
||||
) : (
|
||||
<TrendingDown />
|
||||
)}
|
||||
</Timeline.Indicator>
|
||||
</Timeline.Connector>
|
||||
<Timeline.Content w="100%" h="100%">
|
||||
<Timeline.Description w="100%" h="100%" gap={1}>
|
||||
<Flex direction="column" gap={1}>
|
||||
<Text
|
||||
w="100%"
|
||||
h="100%"
|
||||
color="widgetTextMuted"
|
||||
>
|
||||
{new Date(object?.alert_start_date_local)
|
||||
.toLocaleString('en-US', {...options, timeZone: 'UTC'})
|
||||
}
|
||||
</Text>
|
||||
<Text
|
||||
w="100%"
|
||||
h="100%"
|
||||
color={
|
||||
alertColors[object?.alert_level_name] ||
|
||||
"text"
|
||||
}
|
||||
fontSize="md"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
{object?.alert_level_name}
|
||||
</Text>
|
||||
<Flex
|
||||
w="100%"
|
||||
h="20px"
|
||||
direction="row"
|
||||
justify="left"
|
||||
align="center"
|
||||
>
|
||||
<Text color="widgetTextMuted">
|
||||
Alert Scale:{" "}
|
||||
</Text>
|
||||
{Array.from(
|
||||
{
|
||||
length:
|
||||
Number(object?.alert_scheme_highest) -
|
||||
Number(object?.alert_scheme_lowest) +
|
||||
1,
|
||||
},
|
||||
(v, i) =>
|
||||
Number(object?.alert_scheme_lowest) + i,
|
||||
).map((num) => (
|
||||
<Center
|
||||
key={num}
|
||||
w="20px"
|
||||
h="100%"
|
||||
color="text"
|
||||
bg={
|
||||
num ===
|
||||
Number(object?.alert_level_rank)
|
||||
? "widgetBadgeBg"
|
||||
: "transparent"
|
||||
}
|
||||
borderRadius={
|
||||
num ===
|
||||
Number(object?.alert_level_rank)
|
||||
? "xl"
|
||||
: "none"
|
||||
}
|
||||
textAlign="center"
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{num}
|
||||
</Center>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Timeline.Description>
|
||||
</Timeline.Content>
|
||||
</Timeline.Item>
|
||||
))}
|
||||
</Timeline.Root>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
);
|
||||
else if (thisWidget?.size === "small")
|
||||
|
||||
Reference in New Issue
Block a user