-
Notifications
You must be signed in to change notification settings - Fork 0
/
FloorControl.tsx
50 lines (46 loc) · 1.49 KB
/
FloorControl.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
import {
Box,
CardContent,
LinearProgress,
Typography,
} from '@mui/material';
import { StyledHeaderIcon } from '../components/StyledIcons';
import { ChannelHeader } from '../components/ChannelHeader';
import { FloorClimateControlTransceiverChannel } from 'src/types/types';
interface FloorControlProps {
channel: FloorClimateControlTransceiverChannel;
}
export const FloorControl = (props: FloorControlProps) => {
const value = Math.round(Number(props.channel.datapoints.LEVEL) * 100);
const getColor = (value: number): string => {
if (value === 0) {
return 'black';
} else if (value >= 0 && value < 25) {
return 'blue';
} else if (value >= 25 && value < 50) {
return 'orange';
} else if (value >= 50 && value < 75) {
return 'red';
} else if (value >= 75 && value <= 100) {
return 'purple';
} else {
return 'black';
}
};
return (
<Box>
<ChannelHeader icon="mdi:radiator-coil" name={props.channel.name}/>
<CardContent sx={{ pt: '0px'}}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<StyledHeaderIcon icon="mdi:pipe-valve" style={{ marginRight: '5px'}} color={getColor(value)}/>
<Box sx={{ width: '100%', mr: 1 }}>
<LinearProgress variant="determinate" value={value} />
</Box>
<Box>
<Typography variant="caption">{`${value}%`}</Typography>
</Box>
</Box>
</CardContent>
</Box>
);
};