-
-
Notifications
You must be signed in to change notification settings - Fork 278
/
ThermostatDeviceFeature.jsx
107 lines (96 loc) · 3.81 KB
/
ThermostatDeviceFeature.jsx
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 get from 'get-value';
import { Text } from 'preact-i18n';
import cx from 'classnames';
import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../server/utils/constants';
import style from './style.css';
const isNullOrUndefined = val => val === null || val === undefined;
const DEFAULT_TEMPERATURE_IN_CASE_EMPTY = 18;
const ThermostatDeviceFeature = ({ children, ...props }) => {
const TEMPERATURE_STEP = props.deviceFeature.category == DEVICE_FEATURE_CATEGORIES.AIR_CONDITIONING ? 1 : 0.5;
function updateValue(value) {
props.updateValueWithDebounce(props.deviceFeature, value);
}
function updateValueEvent(e) {
updateValue(e.target.value);
}
function add() {
const prevValue = isNullOrUndefined(props.deviceFeature.last_value)
? DEFAULT_TEMPERATURE_IN_CASE_EMPTY
: props.deviceFeature.last_value;
updateValue(prevValue + TEMPERATURE_STEP);
}
function substract() {
const prevValue = isNullOrUndefined(props.deviceFeature.last_value)
? DEFAULT_TEMPERATURE_IN_CASE_EMPTY
: props.deviceFeature.last_value;
updateValue(prevValue - TEMPERATURE_STEP);
}
return (
<tr>
<td>
<i
class={`fe fe-${get(
DeviceFeatureCategoriesIcon,
`${props.deviceFeature.category}.${props.deviceFeature.type}`,
{ default: 'hash' }
)}`}
/>
</td>
<td>{props.rowName}</td>
<td class="py-0">
<div class="d-flex justify-content-end">
<div class="d-flex">
<div class={cx('input-group', style.thermostatHorizontalControls)}>
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" onClick={substract}>
<Text id="dashboard.boxes.devicesInRoom.substractButton" />
</button>
</div>
<input
type="number"
value={props.deviceFeature.last_value}
class={cx('form-control text-center', style.removeNumberArrow)}
onChange={updateValueEvent}
step={TEMPERATURE_STEP}
min={props.deviceFeature.min}
max={props.deviceFeature.max}
/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onClick={add}>
<Text id="dashboard.boxes.devicesInRoom.addButton" />
</button>
</div>
</div>
<div class={cx('input-group input-group-sm', style.thermostatVerticalControls)}>
<div class="d-flex flex-column mt-2 mb-2">
<div class="mb-1">
<button class="btn btn-block btn-sm btn-outline-secondary" type="button" onClick={add}>
<Text id="dashboard.boxes.devicesInRoom.addButton" />
</button>
</div>
<div>
<input
type="number"
value={props.deviceFeature.last_value}
class={cx('form-control text-center input-sm', style.removeNumberArrow)}
onChange={updateValueEvent}
step={TEMPERATURE_STEP}
min={props.deviceFeature.min}
max={props.deviceFeature.max}
/>
</div>
<div class="mt-1">
<button class="btn btn-block btn-sm btn-outline-secondary" type="button" onClick={substract}>
<Text id="dashboard.boxes.devicesInRoom.substractButton" />
</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
);
};
export default ThermostatDeviceFeature;