aboutsummaryrefslogtreecommitdiff
path: root/src/settings/components/BaseCommandView.jsx
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2024-04-06 09:22:10 -0700
committerAnton Tananaev <anton@traccar.org>2024-04-06 09:22:10 -0700
commitf418231b6b2f5e030a0d2dcc390c314602b1f740 (patch)
tree10326adf3792bc2697e06bb5f2b8ef2a8f7e55fe /src/settings/components/BaseCommandView.jsx
parentb392a4af78e01c8e0f50aad5468e9583675b24be (diff)
downloadtrackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.gz
trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.bz2
trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.zip
Move modern to the top
Diffstat (limited to 'src/settings/components/BaseCommandView.jsx')
-rw-r--r--src/settings/components/BaseCommandView.jsx79
1 files changed, 79 insertions, 0 deletions
diff --git a/src/settings/components/BaseCommandView.jsx b/src/settings/components/BaseCommandView.jsx
new file mode 100644
index 00000000..bb70c3b9
--- /dev/null
+++ b/src/settings/components/BaseCommandView.jsx
@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import {
+ TextField, FormControlLabel, Checkbox,
+} from '@mui/material';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+import SelectField from '../../common/components/SelectField';
+import { prefixString } from '../../common/util/stringUtils';
+import useCommandAttributes from '../../common/attributes/useCommandAttributes';
+
+const BaseCommandView = ({ deviceId, item, setItem }) => {
+ const t = useTranslation();
+
+ const textEnabled = useSelector((state) => state.session.server.textEnabled);
+
+ const availableAttributes = useCommandAttributes(t);
+
+ const [attributes, setAttributes] = useState([]);
+
+ useEffect(() => {
+ if (item && item.type) {
+ setAttributes(availableAttributes[item.type] || []);
+ } else {
+ setAttributes([]);
+ }
+ }, [availableAttributes, item]);
+
+ return (
+ <>
+ <SelectField
+ value={item.type}
+ onChange={(e) => setItem({ ...item, type: e.target.value, attributes: {} })}
+ endpoint={deviceId ? `/api/commands/types?${new URLSearchParams({ deviceId }).toString()}` : '/api/commands/types'}
+ keyGetter={(it) => it.type}
+ titleGetter={(it) => t(prefixString('command', it.type))}
+ label={t('sharedType')}
+ />
+ {attributes.map(({ key, name, type }) => {
+ if (type === 'boolean') {
+ return (
+ <FormControlLabel
+ control={(
+ <Checkbox
+ checked={item.attributes[key]}
+ onChange={(e) => {
+ const updateItem = { ...item, attributes: { ...item.attributes } };
+ updateItem.attributes[key] = e.target.checked;
+ setItem(updateItem);
+ }}
+ />
+ )}
+ label={name}
+ />
+ );
+ }
+ return (
+ <TextField
+ type={type === 'number' ? 'number' : 'text'}
+ value={item.attributes[key]}
+ onChange={(e) => {
+ const updateItem = { ...item, attributes: { ...item.attributes } };
+ updateItem.attributes[key] = type === 'number' ? Number(e.target.value) : e.target.value;
+ setItem(updateItem);
+ }}
+ label={name}
+ />
+ );
+ })}
+ {textEnabled && (
+ <FormControlLabel
+ control={<Checkbox checked={item.textChannel} onChange={(event) => setItem({ ...item, textChannel: event.target.checked })} />}
+ label={t('commandSendSms')}
+ />
+ )}
+ </>
+ );
+};
+
+export default BaseCommandView;