From f559ae8d2f9c4a9bc5f450faa749a8ce13645fdd Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Wed, 4 May 2022 17:12:00 -0700
Subject: Implement send commands

---
 modern/src/App.js                       |   4 +-
 modern/src/form/SelectField.js          |   3 +-
 modern/src/map/StatusCard.js            |   2 +-
 modern/src/settings/AccumulatorsPage.js |  10 +--
 modern/src/settings/BaseCommandView.js  |  58 ++++++++++++++++
 modern/src/settings/CommandPage.js      |  46 ++-----------
 modern/src/settings/SendCommandPage.js  | 115 ++++++++++++++++++++++++++++++++
 7 files changed, 188 insertions(+), 50 deletions(-)
 create mode 100644 modern/src/settings/BaseCommandView.js
 create mode 100644 modern/src/settings/SendCommandPage.js

diff --git a/modern/src/App.js b/modern/src/App.js
index a64a8391..e5b6486e 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -50,6 +50,7 @@ import EventPage from './EventPage';
 import PreferencesPage from './settings/PreferencesPage';
 import BottomMenu from './components/BottomMenu';
 import AccumulatorsPage from './settings/AccumulatorsPage';
+import SendCommandPage from './settings/SendCommandPage';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -124,7 +125,7 @@ const App = () => {
                     <Route exact path="/device/:id?" component={DevicePage} />
                     <Route exact path="/geofence/:id?" component={GeofencePage} />
                     <Route exact path="/geofences" component={GeofencesPage} />
-                    <Route exact path="/settings/accumulators/:id?" component={AccumulatorsPage} />
+                    <Route exact path="/settings/accumulators/:deviceId?" component={AccumulatorsPage} />
                     <Route exact path="/settings/preferences" component={PreferencesPage} />
                     <Route exact path="/settings/notifications" component={NotificationsPage} />
                     <Route exact path="/settings/notification/:id?" component={NotificationPage} />
@@ -140,6 +141,7 @@ const App = () => {
                     <Route exact path="/settings/maintenance/:id?" component={MaintenancePage} />
                     <Route exact path="/settings/commands" component={CommandsPage} />
                     <Route exact path="/settings/command/:id?" component={CommandPage} />
+                    <Route exact path="/command/:deviceId?" component={SendCommandPage} />
                     <Route exact path="/admin/server" component={ServerPage} />
                     <Route exact path="/admin/users" component={UsersPage} />
                     <Route exact path="/admin/statistics" component={StatisticsPage} />
diff --git a/modern/src/form/SelectField.js b/modern/src/form/SelectField.js
index 303d203c..420ad19e 100644
--- a/modern/src/form/SelectField.js
+++ b/modern/src/form/SelectField.js
@@ -11,6 +11,7 @@ const SelectField = ({
   multiple,
   value,
   emptyValue = 0,
+  emptyTitle = '\u00a0',
   onChange,
   endpoint,
   data,
@@ -38,7 +39,7 @@ const SelectField = ({
           onChange={onChange}
         >
           {!multiple && emptyValue !== null
-            && <MenuItem value={emptyValue}>&nbsp;</MenuItem>}
+            && <MenuItem value={emptyValue}>{emptyTitle}</MenuItem>}
           {items.map((item) => (
             <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem>
           ))}
diff --git a/modern/src/map/StatusCard.js b/modern/src/map/StatusCard.js
index 962023c8..73cd3b0f 100644
--- a/modern/src/map/StatusCard.js
+++ b/modern/src/map/StatusCard.js
@@ -105,7 +105,7 @@ const StatusCard = ({ deviceId, onClose }) => {
             <IconButton onClick={() => history.push('/replay')} disabled={!position}>
               <ReplayIcon />
             </IconButton>
-            <IconButton>
+            <IconButton onClick={() => history.push(`/command/${deviceId}`)}>
               <PublishIcon />
             </IconButton>
             <IconButton onClick={() => history.push(`/device/${deviceId}`)}>
diff --git a/modern/src/settings/AccumulatorsPage.js b/modern/src/settings/AccumulatorsPage.js
index f592445d..3e98612a 100644
--- a/modern/src/settings/AccumulatorsPage.js
+++ b/modern/src/settings/AccumulatorsPage.js
@@ -29,23 +29,23 @@ const AccumulatorsPage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
-  const { id } = useParams();
-  const position = useSelector((state) => state.positions.items[id]);
+  const { deviceId } = useParams();
+  const position = useSelector((state) => state.positions.items[deviceId]);
 
   const [item, setItem] = useState();
 
   useEffect(() => {
     if (position) {
       setItem({
-        deviceId: parseInt(id, 10),
+        deviceId: parseInt(deviceId, 10),
         hours: position.attributes.hours || 0,
         totalDistance: position.attributes.totalDistance || 0,
       });
     }
-  }, [id, position]);
+  }, [deviceId, position]);
 
   const handleSave = async () => {
-    const response = await fetch(`/api/devices/${id}/accumulators`, {
+    const response = await fetch(`/api/devices/${deviceId}/accumulators`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(item),
diff --git a/modern/src/settings/BaseCommandView.js b/modern/src/settings/BaseCommandView.js
new file mode 100644
index 00000000..51151588
--- /dev/null
+++ b/modern/src/settings/BaseCommandView.js
@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import {
+  TextField, FormControlLabel, Checkbox,
+} from '@material-ui/core';
+import { useTranslation } from '../LocalizationProvider';
+import SelectField from '../form/SelectField';
+import { prefixString } from '../common/stringUtils';
+import useCommandAttributes from '../attributes/useCommandAttributes';
+
+const BaseCommandView = ({ item, setItem }) => {
+  const t = useTranslation();
+
+  const availableAttributes = useCommandAttributes(t);
+
+  const [attributes, setAttributes] = useState([]);
+
+  useEffect(() => {
+    if (item && item.type) {
+      setAttributes(availableAttributes[item.type] || []);
+    } else {
+      setAttributes([]);
+    }
+  }, [availableAttributes, item]);
+
+  return (
+    <>
+      <SelectField
+        margin="normal"
+        value={item.type || ''}
+        onChange={(e) => setItem({ ...item, type: e.target.value, attributes: {} })}
+        endpoint="/api/commands/types"
+        keyGetter={(it) => it.type}
+        titleGetter={(it) => t(prefixString('command', it.type))}
+        label={t('sharedType')}
+        variant="filled"
+      />
+      {attributes.map((attribute) => (
+        <TextField
+          margin="normal"
+          value={item.attributes[attribute.key]}
+          onChange={(e) => {
+            const updateItem = { ...item, attributes: { ...item.attributes } };
+            updateItem.attributes[attribute.key] = e.target.value;
+            setItem(updateItem);
+          }}
+          label={attribute.name}
+          variant="filled"
+        />
+      ))}
+      <FormControlLabel
+        control={<Checkbox checked={item.textChannel} onChange={(event) => setItem({ ...item, textChannel: event.target.checked })} />}
+        label={t('commandSendSms')}
+      />
+    </>
+  );
+};
+
+export default BaseCommandView;
diff --git a/modern/src/settings/CommandPage.js b/modern/src/settings/CommandPage.js
index 0b0f54b6..0cd440e1 100644
--- a/modern/src/settings/CommandPage.js
+++ b/modern/src/settings/CommandPage.js
@@ -1,13 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
-  Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, TextField, FormControlLabel, Checkbox,
+  Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, TextField,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditItemView from '../EditItemView';
 import { useTranslation } from '../LocalizationProvider';
-import SelectField from '../form/SelectField';
-import { prefixString } from '../common/stringUtils';
-import useCommandAttributes from '../attributes/useCommandAttributes';
+import BaseCommandView from './BaseCommandView';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -19,16 +17,7 @@ const CommandPage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
-  const availableAttributes = useCommandAttributes(t);
-
   const [item, setItem] = useState();
-  const [attributes, setAttributes] = useState([]);
-
-  useEffect(() => {
-    if (item && item.type) {
-      setAttributes(availableAttributes[item.type] || []);
-    }
-  }, [availableAttributes, item]);
 
   const validate = () => item && item.type;
 
@@ -49,34 +38,7 @@ const CommandPage = () => {
               label={t('sharedDescription')}
               variant="filled"
             />
-            <SelectField
-              margin="normal"
-              value={item.type || 'custom'}
-              emptyValue={null}
-              onChange={(e) => setItem({ ...item, type: e.target.value, attributes: {} })}
-              endpoint="/api/commands/types"
-              keyGetter={(it) => it.type}
-              titleGetter={(it) => t(prefixString('command', it.type))}
-              label={t('sharedType')}
-              variant="filled"
-            />
-            {attributes.map((attribute) => (
-              <TextField
-                margin="normal"
-                value={item.attributes[attribute.key]}
-                onChange={(e) => {
-                  const updateItem = { ...item, attributes: { ...item.attributes } };
-                  updateItem.attributes[attribute.key] = e.target.value;
-                  setItem(updateItem);
-                }}
-                label={attribute.name}
-                variant="filled"
-              />
-            ))}
-            <FormControlLabel
-              control={<Checkbox checked={item.textChannel} onChange={(event) => setItem({ ...item, textChannel: event.target.checked })} />}
-              label={t('commandSendSms')}
-            />
+            <BaseCommandView item={item} setItem={setItem} />
           </AccordionDetails>
         </Accordion>
       )}
diff --git a/modern/src/settings/SendCommandPage.js b/modern/src/settings/SendCommandPage.js
new file mode 100644
index 00000000..91130fa1
--- /dev/null
+++ b/modern/src/settings/SendCommandPage.js
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import {
+  Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, Button, FormControl,
+} from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { useTranslation } from '../LocalizationProvider';
+import OptionsLayout from './OptionsLayout';
+import BaseCommandView from './BaseCommandView';
+import SelectField from '../form/SelectField';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    marginTop: theme.spacing(2),
+  },
+  buttons: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    '& > *': {
+      flexBasis: '33%',
+    },
+  },
+  details: {
+    flexDirection: 'column',
+  },
+}));
+
+const SendCommandPage = () => {
+  const history = useHistory();
+  const classes = useStyles();
+  const t = useTranslation();
+
+  const { deviceId } = useParams();
+
+  const [savedId, setSavedId] = useState(0);
+  const [item, setItem] = useState({});
+
+  const handleSend = async () => {
+    let command;
+    if (savedId) {
+      const response = await fetch(`/api/commands/${savedId}`);
+      if (response.ok) {
+        command = await response.json();
+      }
+    } else {
+      command = item;
+    }
+
+    command.deviceId = parseInt(deviceId, 10);
+
+    const response = await fetch('/api/commands/send', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(command),
+    });
+
+    if (response.ok) {
+      history.goBack();
+    }
+  };
+
+  const validate = () => savedId || (item && item.type);
+
+  return (
+    <OptionsLayout>
+      <Container maxWidth="xs" className={classes.container}>
+        <Accordion defaultExpanded>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography variant="subtitle1">
+              {t('sharedRequired')}
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails className={classes.details}>
+            <SelectField
+              margin="normal"
+              value={savedId}
+              emptyTitle={t('sharedNew')}
+              onChange={(e) => setSavedId(e.target.value)}
+              endpoint={`/api/commands/send?deviceId=${deviceId}`}
+              titleGetter={(it) => it.description}
+              label={t('sharedSavedCommand')}
+              variant="filled"
+            />
+            {!savedId && (
+            <BaseCommandView item={item} setItem={setItem} />
+            )}
+          </AccordionDetails>
+        </Accordion>
+        <FormControl fullWidth margin="normal">
+          <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}
+              disabled={!validate()}
+            >
+              {t('commandSend')}
+            </Button>
+          </div>
+        </FormControl>
+      </Container>
+    </OptionsLayout>
+  );
+};
+
+export default SendCommandPage;
-- 
cgit v1.2.3