import React, { useEffect } from 'react';
|
import { useForm, Controller } from 'react-hook-form';
|
import {
|
Box,
|
Grid,
|
Typography,
|
TextField,
|
Slider,
|
Button,
|
Select,
|
MenuItem,
|
InputLabel,
|
FormControl,
|
Stack,
|
Divider,
|
} from '@mui/material';
|
import { useTranslate } from 'react-admin';
|
import * as Tool from '../tool';
|
import ConfirmButton from '../../page/components/ConfirmButton';
|
import {
|
DEVICE_TYPE,
|
} from '../constants';
|
import { useNotification } from '../Notification';
|
|
const ConfigSettings = (props) => {
|
const { sprite, onSubmit } = props;
|
const notify = useNotification();
|
const translate = useTranslate();
|
|
const { control, handleSubmit, reset, watch, setValue } = useForm({
|
defaultValues: {
|
...sprite.data,
|
},
|
});
|
|
const rowValue = watch('row');
|
const bayValue = watch('bay');
|
|
useEffect(() => {
|
if (rowValue != null && bayValue != null && rowValue !== '' && bayValue !== '') {
|
setValue('no', `${rowValue}-${bayValue}`);
|
} else {
|
setValue('no', '');
|
}
|
}, [rowValue, bayValue, setValue]);
|
|
const onFormSubmit = (data) => {
|
if (sprite && sprite.data) {
|
Object.keys(data).forEach((key) => {
|
sprite.data[key] = data[key];
|
});
|
}
|
if (onSubmit) {
|
onSubmit(data);
|
}
|
console.log(sprite.data);
|
notify.info(translate('common.response.success'));
|
};
|
|
return (
|
<>
|
<Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}>
|
<Grid container spacing={1.4}>
|
{sprite?.data?.type === DEVICE_TYPE.SHELF && (
|
<>
|
<Grid item xs={6}>
|
<Controller
|
name="row"
|
control={control}
|
render={({ field }) => (
|
<TextField
|
{...field}
|
label={translate('page.map.settings.config.shelf.row')}
|
type="number"
|
fullWidth
|
onChange={(e) => {
|
field.onChange(e);
|
}}
|
/>
|
)}
|
/>
|
</Grid>
|
<Grid item xs={6}>
|
<Controller
|
name="bay"
|
control={control}
|
render={({ field }) => (
|
<TextField
|
{...field}
|
label={translate('page.map.settings.config.shelf.bay')}
|
type="number"
|
fullWidth
|
onChange={(e) => {
|
field.onChange(e);
|
}}
|
/>
|
)}
|
/>
|
</Grid>
|
</>
|
)}
|
|
{sprite?.data?.type === DEVICE_TYPE.CHARGE && (
|
<>
|
</>
|
)}
|
|
{sprite?.data?.type === DEVICE_TYPE.STATION && (
|
<>
|
</>
|
)}
|
|
{sprite?.data?.type === DEVICE_TYPE.POINT && (
|
<>
|
</>
|
)}
|
<Grid item xs={12}>
|
<Divider />
|
</Grid>
|
|
{/* <Grid item xs={12}>
|
<Typography variant="inherit">
|
{translate('page.map.settings.config.base.no')}
|
</Typography>
|
</Grid> */}
|
<Grid item xs={6}>
|
<Controller
|
name="no"
|
control={control}
|
render={({ field }) => (
|
<TextField
|
{...field}
|
label="No"
|
type="text"
|
value={field.value || ''}
|
fullWidth
|
onChange={(e) => {
|
field.onChange(e);
|
}}
|
/>
|
)}
|
/>
|
</Grid>
|
|
<Grid item xs={12} mt={2}>
|
<Stack direction="row" spacing={2}>
|
<Button variant="contained" color="primary" type="submit">
|
{translate('ra.action.confirm')}
|
</Button>
|
</Stack>
|
</Grid>
|
</Grid>
|
</Box>
|
</>
|
);
|
};
|
|
export default ConfigSettings;
|
