78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { Box, Card, Center, SimpleGrid, Text } from "@mantine/core";
|
|
import dayjs from "dayjs";
|
|
import duration from "dayjs/plugin/duration";
|
|
import objectSupport from "dayjs/plugin/objectSupport";
|
|
import relativeTime from "dayjs/plugin/relativeTime";
|
|
|
|
import { clientApi } from "@homarr/api/client";
|
|
import { useI18n } from "@homarr/translation/client";
|
|
|
|
import type { WidgetComponentProps } from "../../definition";
|
|
import { WifiVariant } from "./variants/wifi-variant";
|
|
import { WiredVariant } from "./variants/wired-variant";
|
|
|
|
dayjs.extend(objectSupport);
|
|
dayjs.extend(relativeTime);
|
|
dayjs.extend(duration);
|
|
|
|
export default function NetworkControllerNetworkStatusWidget({
|
|
options,
|
|
integrationIds,
|
|
displayMode,
|
|
width,
|
|
height,
|
|
}: WidgetComponentProps<"networkControllerStatus">) {
|
|
const { data: summaries = [], isPending } = clientApi.widget.networkController.summary.useQuery({
|
|
integrationIds,
|
|
});
|
|
const t = useI18n();
|
|
|
|
const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
|
|
const isAdvanced = displayMode === "advanced";
|
|
const countWifiGuests = data.reduce((sum, summary) => sum + summary.wifi.guests, 0);
|
|
const countWifiUsers = data.reduce((sum, summary) => sum + summary.wifi.users, 0);
|
|
const countLanGuests = data.reduce((sum, summary) => sum + summary.lan.guests, 0);
|
|
const countLanUsers = data.reduce((sum, summary) => sum + summary.lan.users, 0);
|
|
const useHorizontalStats = !isAdvanced && height < 150 && width >= 200;
|
|
|
|
if (isPending || data.length === 0) {
|
|
return (
|
|
<Center h="100%" p="sm">
|
|
<Text c="dimmed" size="sm" ta="center">
|
|
{isPending ? t("common.action.loading") : t("widget.networkControllerStatus.error.integrationsDisconnected")}
|
|
</Text>
|
|
</Center>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box p={isAdvanced ? "md" : height < 120 ? "xs" : "sm"} h="100%">
|
|
<SimpleGrid cols={isAdvanced && width >= 560 ? 2 : 1} h="100%" spacing="sm">
|
|
{(isAdvanced || options.content === "wifi") && (
|
|
<Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
|
|
<WifiVariant
|
|
countGuests={countWifiGuests}
|
|
countUsers={countWifiUsers}
|
|
compact={!isAdvanced}
|
|
horizontal={useHorizontalStats}
|
|
/>
|
|
</Card>
|
|
)}
|
|
{(isAdvanced || options.content === "wired") && (
|
|
<Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
|
|
<WiredVariant
|
|
countGuests={countLanGuests}
|
|
countUsers={countLanUsers}
|
|
compact={!isAdvanced}
|
|
horizontal={useHorizontalStats}
|
|
/>
|
|
</Card>
|
|
)}
|
|
</SimpleGrid>
|
|
</Box>
|
|
);
|
|
}
|