aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/App.js4
-rw-r--r--modern/src/form/SelectField.js3
-rw-r--r--modern/src/map/StatusCard.js2
-rw-r--r--modern/src/settings/AccumulatorsPage.js10
-rw-r--r--modern/src/settings/BaseCommandView.js58
-rw-r--r--modern/src/settings/CommandPage.js46
-rw-r--r--modern/src/settings/SendCommandPage.js115
7 files changed, 188 insertions, 50 deletions
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;
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 22:23:37 +0000