mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2026-01-26 16:49:11 +03:00
448 lines
14 KiB
TypeScript
448 lines
14 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import CancelIcon from '@mui/icons-material/Cancel';
|
|
import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
|
|
import DoneIcon from '@mui/icons-material/Done';
|
|
import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
|
|
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
|
|
import InsertCommentOutlinedIcon from '@mui/icons-material/InsertCommentOutlined';
|
|
import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Checkbox,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
Grid,
|
|
InputAdornment,
|
|
MenuItem,
|
|
TextField
|
|
} from '@mui/material';
|
|
|
|
import { dialogStyle } from 'CustomTheme';
|
|
import type Schema from 'async-validator';
|
|
import type { ValidateFieldsError } from 'async-validator';
|
|
import { BlockFormControlLabel, ValidatedTextField } from 'components';
|
|
import { useI18nContext } from 'i18n/i18n-react';
|
|
import { numberValue, updateValue } from 'utils';
|
|
import { validate } from 'validators';
|
|
|
|
import { DeviceValueType, DeviceValueTypeNames, DeviceValueUOM_s } from './types';
|
|
import type { EntityItem } from './types';
|
|
|
|
// Constant value type options for the dropdown
|
|
const VALUE_TYPE_OPTIONS = [
|
|
DeviceValueType.BOOL,
|
|
DeviceValueType.INT8,
|
|
DeviceValueType.UINT8,
|
|
DeviceValueType.INT16,
|
|
DeviceValueType.UINT16,
|
|
DeviceValueType.UINT24,
|
|
DeviceValueType.TIME,
|
|
DeviceValueType.UINT32,
|
|
DeviceValueType.STRING
|
|
] as const;
|
|
|
|
interface CustomEntitiesDialogProps {
|
|
open: boolean;
|
|
creating: boolean;
|
|
onClose: () => void;
|
|
onSave: (ei: EntityItem) => void;
|
|
onDup: (ei: EntityItem) => void;
|
|
selectedItem: EntityItem;
|
|
validator: Schema;
|
|
}
|
|
|
|
const CustomEntitiesDialog = ({
|
|
open,
|
|
creating,
|
|
onClose,
|
|
onSave,
|
|
onDup,
|
|
selectedItem,
|
|
validator
|
|
}: CustomEntitiesDialogProps) => {
|
|
const { LL } = useI18nContext();
|
|
const [editItem, setEditItem] = useState<EntityItem>(selectedItem);
|
|
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
|
|
const updateFormValue = useMemo(
|
|
() =>
|
|
updateValue(
|
|
setEditItem as unknown as React.Dispatch<
|
|
React.SetStateAction<Record<string, unknown>>
|
|
>
|
|
),
|
|
[]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setFieldErrors(undefined);
|
|
// Convert to hex strings - combined into single setEditItem call
|
|
const deviceIdHex =
|
|
typeof selectedItem.device_id === 'number'
|
|
? selectedItem.device_id.toString(16).toUpperCase()
|
|
: selectedItem.device_id;
|
|
const typeIdHex =
|
|
typeof selectedItem.type_id === 'number'
|
|
? selectedItem.type_id.toString(16).toUpperCase()
|
|
: selectedItem.type_id;
|
|
const factorValue =
|
|
selectedItem.value_type === DeviceValueType.BOOL &&
|
|
typeof selectedItem.factor === 'number'
|
|
? selectedItem.factor.toString(16).toUpperCase()
|
|
: selectedItem.factor;
|
|
|
|
setEditItem({
|
|
...selectedItem,
|
|
device_id: deviceIdHex,
|
|
type_id: typeIdHex,
|
|
factor: factorValue
|
|
});
|
|
}
|
|
}, [open, selectedItem]);
|
|
|
|
const handleClose = useCallback(
|
|
(_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
|
|
if (reason !== 'backdropClick') {
|
|
onClose();
|
|
}
|
|
},
|
|
[onClose]
|
|
);
|
|
|
|
const save = useCallback(async () => {
|
|
try {
|
|
setFieldErrors(undefined);
|
|
await validate(validator, editItem);
|
|
|
|
// Create a copy to avoid mutating the state directly
|
|
const processedItem: EntityItem = { ...editItem };
|
|
|
|
if (typeof processedItem.device_id === 'string') {
|
|
processedItem.device_id = Number.parseInt(processedItem.device_id, 16);
|
|
}
|
|
if (typeof processedItem.type_id === 'string') {
|
|
processedItem.type_id = Number.parseInt(processedItem.type_id, 16);
|
|
}
|
|
if (
|
|
processedItem.value_type === DeviceValueType.BOOL &&
|
|
typeof processedItem.factor === 'string'
|
|
) {
|
|
processedItem.factor = Number.parseInt(processedItem.factor, 16);
|
|
}
|
|
onSave(processedItem);
|
|
} catch (error) {
|
|
setFieldErrors(error as ValidateFieldsError);
|
|
}
|
|
}, [validator, editItem, onSave]);
|
|
|
|
const remove = useCallback(() => {
|
|
const itemWithDeleted = { ...editItem, deleted: true };
|
|
onSave(itemWithDeleted);
|
|
}, [editItem, onSave]);
|
|
|
|
const dup = useCallback(() => {
|
|
onDup(editItem);
|
|
}, [editItem, onDup]);
|
|
|
|
// Memoize UOM menu items to avoid recreating on every render
|
|
const uomMenuItems = useMemo(
|
|
() =>
|
|
DeviceValueUOM_s.map((val, i) => (
|
|
<MenuItem key={val} value={i}>
|
|
{val}
|
|
</MenuItem>
|
|
)),
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<Dialog sx={dialogStyle} open={open} onClose={handleClose}>
|
|
<DialogTitle>
|
|
{creating ? LL.ADD(1) + ' ' + LL.NEW(1) : LL.EDIT()} {LL.ENTITY()}
|
|
</DialogTitle>
|
|
<DialogContent dividers>
|
|
<Grid container spacing={2} rowSpacing={0}>
|
|
<Grid size={12}>
|
|
<ValidatedTextField
|
|
fieldErrors={fieldErrors || {}}
|
|
name="name"
|
|
label={LL.NAME(0)}
|
|
value={editItem.name}
|
|
margin="normal"
|
|
fullWidth
|
|
onChange={updateFormValue}
|
|
/>
|
|
</Grid>
|
|
<Grid mt={3}>
|
|
<BlockFormControlLabel
|
|
control={
|
|
<Checkbox
|
|
icon={<InsertCommentOutlinedIcon htmlColor="white" />}
|
|
checkedIcon={<CommentsDisabledOutlinedIcon color="primary" />}
|
|
checked={editItem.hide}
|
|
onChange={updateFormValue}
|
|
name="hide"
|
|
/>
|
|
}
|
|
label="API/MQTT"
|
|
/>
|
|
</Grid>
|
|
<Grid>
|
|
<TextField
|
|
name="ram"
|
|
label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
|
|
value={editItem.ram}
|
|
variant="outlined"
|
|
onChange={updateFormValue}
|
|
margin="normal"
|
|
fullWidth
|
|
select
|
|
>
|
|
<MenuItem value={0}>EMS-{LL.VALUE(1)}</MenuItem>
|
|
<MenuItem value={1}>RAM-{LL.VALUE(1)}</MenuItem>
|
|
</TextField>
|
|
</Grid>
|
|
{editItem.ram === 1 && (
|
|
<>
|
|
<Grid>
|
|
<TextField
|
|
name="value"
|
|
label={LL.DEFAULT(0) + ' ' + LL.VALUE(0)}
|
|
type="string"
|
|
value={editItem.value as string}
|
|
variant="outlined"
|
|
onChange={updateFormValue}
|
|
fullWidth
|
|
margin="normal"
|
|
/>
|
|
</Grid>
|
|
<Grid>
|
|
<TextField
|
|
name="uom"
|
|
label={LL.UNIT()}
|
|
value={editItem.uom}
|
|
margin="normal"
|
|
onChange={updateFormValue}
|
|
select
|
|
>
|
|
{uomMenuItems}
|
|
</TextField>
|
|
</Grid>
|
|
</>
|
|
)}
|
|
{editItem.ram === 0 && (
|
|
<>
|
|
<Grid mt={3}>
|
|
<BlockFormControlLabel
|
|
control={
|
|
<Checkbox
|
|
icon={<EditOffOutlinedIcon color="primary" />}
|
|
checkedIcon={<EditOutlinedIcon htmlColor="white" />}
|
|
checked={editItem.writeable}
|
|
onChange={updateFormValue}
|
|
name="writeable"
|
|
/>
|
|
}
|
|
label={LL.WRITEABLE()}
|
|
/>
|
|
</Grid>
|
|
<Grid>
|
|
<ValidatedTextField
|
|
fieldErrors={fieldErrors || {}}
|
|
name="device_id"
|
|
label={LL.ID_OF(LL.DEVICE())}
|
|
margin="normal"
|
|
sx={{ width: '11ch' }}
|
|
type="string"
|
|
value={editItem.device_id as string}
|
|
onChange={updateFormValue}
|
|
slotProps={{
|
|
input: {
|
|
startAdornment: (
|
|
<InputAdornment position="start">0x</InputAdornment>
|
|
)
|
|
},
|
|
htmlInput: { style: { textTransform: 'uppercase' } }
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid>
|
|
<ValidatedTextField
|
|
fieldErrors={fieldErrors || {}}
|
|
name="type_id"
|
|
label={LL.ID_OF(LL.TYPE(1))}
|
|
margin="normal"
|
|
sx={{ width: '11ch' }}
|
|
type="string"
|
|
value={editItem.type_id as string}
|
|
onChange={updateFormValue}
|
|
slotProps={{
|
|
input: {
|
|
startAdornment: (
|
|
<InputAdornment position="start">0x</InputAdornment>
|
|
)
|
|
},
|
|
htmlInput: { style: { textTransform: 'uppercase' } }
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid>
|
|
<ValidatedTextField
|
|
fieldErrors={fieldErrors || {}}
|
|
name="offset"
|
|
label={LL.OFFSET()}
|
|
margin="normal"
|
|
sx={{ width: '11ch' }}
|
|
type="number"
|
|
value={numberValue(editItem.offset)}
|
|
onChange={updateFormValue}
|
|
/>
|
|
</Grid>
|
|
<Grid>
|
|
<TextField
|
|
name="value_type"
|
|
label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
|
|
value={editItem.value_type}
|
|
variant="outlined"
|
|
sx={{ width: '11ch' }}
|
|
onChange={updateFormValue}
|
|
margin="normal"
|
|
select
|
|
>
|
|
{VALUE_TYPE_OPTIONS.map((valueType) => (
|
|
<MenuItem key={valueType} value={valueType}>
|
|
{DeviceValueTypeNames[valueType]}
|
|
</MenuItem>
|
|
))}
|
|
</TextField>
|
|
</Grid>
|
|
|
|
{editItem.value_type !== DeviceValueType.BOOL &&
|
|
editItem.value_type !== DeviceValueType.STRING && (
|
|
<>
|
|
<Grid>
|
|
<TextField
|
|
name="factor"
|
|
label={LL.FACTOR()}
|
|
value={numberValue(editItem.factor as number)}
|
|
variant="outlined"
|
|
onChange={updateFormValue}
|
|
sx={{ width: '11ch' }}
|
|
margin="normal"
|
|
type="number"
|
|
slotProps={{
|
|
htmlInput: { step: '0.001' }
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid>
|
|
<TextField
|
|
name="uom"
|
|
label={LL.UNIT()}
|
|
value={editItem.uom}
|
|
margin="normal"
|
|
sx={{ width: '11ch' }}
|
|
onChange={updateFormValue}
|
|
select
|
|
>
|
|
{uomMenuItems}
|
|
</TextField>
|
|
</Grid>
|
|
</>
|
|
)}
|
|
{editItem.value_type === DeviceValueType.STRING &&
|
|
editItem.device_id !== '0' && (
|
|
<Grid>
|
|
<ValidatedTextField
|
|
fieldErrors={fieldErrors || {}}
|
|
name="factor"
|
|
label={LL.BYTES()}
|
|
value={numberValue(editItem.factor as number)}
|
|
sx={{ width: '11ch' }}
|
|
variant="outlined"
|
|
onChange={updateFormValue}
|
|
margin="normal"
|
|
type="number"
|
|
slotProps={{
|
|
htmlInput: { step: '1', min: '1', max: '255' }
|
|
}}
|
|
/>
|
|
</Grid>
|
|
)}
|
|
{editItem.value_type === DeviceValueType.BOOL && (
|
|
<Grid>
|
|
<ValidatedTextField
|
|
fieldErrors={fieldErrors || {}}
|
|
name="factor"
|
|
label={LL.BITMASK()}
|
|
value={editItem.factor as string}
|
|
sx={{ width: '11ch' }}
|
|
variant="outlined"
|
|
onChange={updateFormValue}
|
|
margin="normal"
|
|
type="string"
|
|
slotProps={{
|
|
input: {
|
|
startAdornment: (
|
|
<InputAdornment position="start">0x</InputAdornment>
|
|
)
|
|
},
|
|
htmlInput: { style: { textTransform: 'uppercase' } }
|
|
}}
|
|
/>
|
|
</Grid>
|
|
)}
|
|
</>
|
|
)}
|
|
</Grid>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
{!creating && (
|
|
<Box flexGrow={1}>
|
|
<Button
|
|
startIcon={<RemoveIcon />}
|
|
variant="outlined"
|
|
color="warning"
|
|
onClick={remove}
|
|
>
|
|
{LL.REMOVE()}
|
|
</Button>
|
|
<Button
|
|
sx={{ ml: 1 }}
|
|
startIcon={<AddIcon />}
|
|
variant="outlined"
|
|
color="primary"
|
|
onClick={dup}
|
|
>
|
|
{LL.DUPLICATE()}
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
<Button
|
|
startIcon={<CancelIcon />}
|
|
variant="outlined"
|
|
onClick={onClose}
|
|
color="secondary"
|
|
>
|
|
{LL.CANCEL()}
|
|
</Button>
|
|
<Button
|
|
startIcon={creating ? <AddIcon /> : <DoneIcon />}
|
|
variant="outlined"
|
|
onClick={save}
|
|
color="primary"
|
|
>
|
|
{creating ? LL.ADD(0) : LL.UPDATE()}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default CustomEntitiesDialog;
|