93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Center, LoadingOverlay, Overlay, Stack, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
|
|
import { useDisclosure, useTimeout } from "@mantine/hooks";
|
|
import { IconAutomation, IconCheck } from "@tabler/icons-react";
|
|
|
|
import { clientApi } from "@homarr/api/client";
|
|
import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
|
|
import { useI18n } from "@homarr/translation/client";
|
|
|
|
import type { WidgetComponentProps } from "../../definition";
|
|
|
|
export default function SmartHomeTriggerAutomationWidget({
|
|
options,
|
|
integrationIds,
|
|
isEditMode,
|
|
width,
|
|
}: WidgetComponentProps<"smartHome-executeAutomation">) {
|
|
const [isShowSuccess, { open: showSuccess, close: closeSuccess }] = useDisclosure();
|
|
const { start } = useTimeout(() => {
|
|
closeSuccess();
|
|
}, 1000);
|
|
|
|
const { mutateAsync, isPending } = clientApi.widget.smartHome.executeAutomation.useMutation({
|
|
onSuccess: () => {
|
|
showSuccess();
|
|
start();
|
|
},
|
|
});
|
|
const handleClick = React.useCallback(async () => {
|
|
if (isEditMode) {
|
|
return;
|
|
}
|
|
await mutateAsync({
|
|
automationId: options.automationId,
|
|
integrationId: integrationIds[0] ?? "",
|
|
});
|
|
}, [integrationIds, isEditMode, mutateAsync, options.automationId]);
|
|
|
|
const t = useI18n();
|
|
useRegisterSpotlightContextActions(
|
|
`smartHome-automation-${options.automationId}`,
|
|
[
|
|
{
|
|
id: options.automationId,
|
|
name: t("widget.smartHome-executeAutomation.spotlightAction.run", { name: options.displayName }),
|
|
icon: IconAutomation,
|
|
interaction() {
|
|
return {
|
|
type: "javaScript",
|
|
// eslint-disable-next-line no-restricted-syntax
|
|
async onSelect() {
|
|
await handleClick();
|
|
},
|
|
};
|
|
},
|
|
},
|
|
],
|
|
[handleClick, options.automationId, options.displayName],
|
|
);
|
|
|
|
const isTiny = width < 128;
|
|
|
|
return (
|
|
<UnstyledButton
|
|
onClick={handleClick}
|
|
style={{ cursor: !isEditMode ? "pointer" : "initial", pointerEvents: isEditMode ? "none" : undefined }}
|
|
w="100%"
|
|
h="100%"
|
|
>
|
|
{isShowSuccess && (
|
|
<Overlay>
|
|
<Center w="100%" h="100%">
|
|
<ThemeIcon variant="filled" color="green" size="xl" radius="xl">
|
|
<IconCheck style={{ width: "70%", height: "70%" }} stroke={1.5} />
|
|
</ThemeIcon>
|
|
</Center>
|
|
</Overlay>
|
|
)}
|
|
<LoadingOverlay visible={isPending} />
|
|
<Center w="100%" h="100%">
|
|
<Stack align="center" gap="md">
|
|
<IconAutomation size={isTiny ? 16 : undefined} />
|
|
<Text ta="center" fw="bold" fz={isTiny ? "xs" : undefined}>
|
|
{options.displayName}
|
|
</Text>
|
|
</Stack>
|
|
</Center>
|
|
</UnstyledButton>
|
|
);
|
|
}
|