1 files changed, 119 insertions, 0 deletions
diff --git a/modern/src/CommandsPage.js b/modern/src/CommandsPage.js
new file mode 100644
index 0000000..e36c365
--- /dev/null
+++ b/modern/src/CommandsPage.js
@@ -0,0 +1,119 @@
+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 () => {
+    console.log ('Selected: ' + selectedCommand);
+    const response = await fetch(`/api/commands/send`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        id: selectedCommand.id,
+        deviceId: device.id,
+      }),
+    });
+    
+    if (response.ok) {
+      history.goBack();
+    }
+  };
+  
+  return (
+    <>
+      <MainToolbar />
+      <Container maxWidth="sm" className={classes.root}>
+        <Card>
+          {device && (
+            <>
+              <CardContent>
+                <Typography gutterBottom variant="h5">{t('commandSend')}</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;