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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import React, { useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import {
makeStyles, Typography, Container, Card, CardContent, RadioGroup, Radio, FormControl, FormControlLabel, Button
} from '@material-ui/core';
import MainToolbar from './MainToolbar';
import { useEffectAsync } from './reactHelper';
import { useTranslation } from './LocalizationProvider';
const useStyles = makeStyles((theme) => ({
root: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
buttons: {
display: 'flex',
justifyContent: 'space-evenly',
'& > *': {
flexBasis: '33%',
},
},
}));
const CommandsPage = () => {
const classes = useStyles();
const { id } = useParams();
const t = useTranslation();
const history = useHistory();
const [device, setDevice] = useState();
const [commands, setCommands] = useState([]);
const [selectedCommand, setSelectedCommand] = useState();
useEffectAsync(async () => {
if (id) {
let device = undefined;
const response = await fetch(`/api/devices?id=${id}`, {
headers: {
Accept: 'application/json'
},
});
if (response.ok) {
const items = await response.json();
device = items[0];
setDevice(items[0]);
} else {
setDevice({});
}
if (device) {
const response = await fetch(`/api/commands/send?deviceId=${device.id}`, {
headers: {
Accept: 'application/json'
},
});
if (response.ok) {
const items = await response.json();
setCommands(items);
} else {
setCommands([]);
}
}
}
}, [id]);
const handleSend = async () => {
const response = await fetch(`/api/commands/send`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
'id': selectedCommand,
'deviceId': device.id,
}),
});
if (response.ok) {
history.goBack();
} else {
console.log ('response!', response);
}
};
return (
<>
<MainToolbar />
<Container maxWidth="sm" className={classes.root}>
<Card>
{device && (
<>
<CardContent>
<Typography gutterBottom variant="h5">{t('commandSend')}</Typography>
<Typography variant="body2" color="text.secondary">{device.name}</Typography>
{commands && (
<FormControl fullWidth aria-label="command">
<RadioGroup onChange={(event) => setSelectedCommand(event.target.value) }>
{commands.map (command => (
<FormControlLabel value={command.id.toString()} control={<Radio />} label={command.description} />
))}
</RadioGroup>
<div className={classes.buttons}>
<Button type="button" color="primary" variant="outlined" onClick={() => history.goBack()}>
{t('sharedCancel')}
</Button>
<Button type="button" color="primary" variant="contained" onClick={handleSend}>
{t('commandSend')}
</Button>
</div>
</FormControl>
)}
</CardContent>
</>
)}
</Card>
</Container>
</>
);
}
export default CommandsPage;
|
