-
Notifications
You must be signed in to change notification settings - Fork 0
/
DoorControl.tsx
107 lines (97 loc) · 2.71 KB
/
DoorControl.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import { Box, CardHeader, Typography } from '@mui/material';
import { StyledIconButton } from '../components/StyledIcons';
import { KeymaticChannel } from './../../types/types';
import { useSetValueMutation } from './../../hooks/useApi';
import { styled } from '@mui/system';
import { useTranslations } from './../../i18n/utils';
const StyledOuterBox = styled(Box)({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
});
const StyledInnerBox = styled(Box)({
display: 'flex',
gap: '10px',
alignItems: 'center',
});
interface StyledTypographyProps {
uncertain: boolean
}
const StyledTypography = styled(Typography, {
shouldForwardProp: (prop) => prop !== 'uncertain',
})<StyledTypographyProps>(({ uncertain }) => ({
display: uncertain ? 'block' : 'none',
}));
interface DoorControlProps {
channel: KeymaticChannel;
refetch: () => void;
}
export const DoorControl: React.FC<DoorControlProps> = ({ channel, refetch }) => {
const t = useTranslations();
const setValueMutation = useSetValueMutation();
const {
datapoints: { STATE, STATE_UNCERTAIN },
} = channel;
const isUncertain = STATE_UNCERTAIN === 'true';
const isUnlocked = STATE === 'true';
const unlockDoor = async () => {
await setValueMutation.mutateAsync({
interface: channel.interfaceName,
address: channel.address,
valueKey: 'STATE',
type: 'boolean',
value: true,
});
refetch()
};
const lockDoor = async () => {
await setValueMutation.mutateAsync({
interface: channel.interfaceName,
address: channel.address,
valueKey: 'STATE',
type: 'boolean',
value: false,
});
refetch()
};
const openDoor = async () => {
await setValueMutation.mutateAsync({
interface: channel.interfaceName,
address: channel.address,
valueKey: 'OPEN',
type: 'boolean',
value: true,
});
refetch()
};
return (
<CardHeader
title={
<StyledOuterBox>
<StyledInnerBox>
<StyledIconButton
icon="material-symbols:lock-outline"
active={!isUnlocked}
onClick={lockDoor}
/>
<StyledIconButton
icon="material-symbols:lock-open-outline"
active={isUnlocked}
onClick={unlockDoor}
/>
<StyledIconButton
icon="material-symbols:door-open-outline"
onClick={openDoor}
/>
</StyledInnerBox>
<StyledTypography
uncertain={isUncertain}
variant="caption"
>
{t('DOOR_STATE_UNKNOWN')}
</StyledTypography>
</StyledOuterBox>
}
/>
);
};