import React, { useState, useEffect } from 'react';
|
import {
|
Select,
|
MenuItem,
|
Autocomplete,
|
TextField,
|
InputAdornment,
|
IconButton,
|
useTheme,
|
Stack,
|
Typography,
|
} from '@mui/material';
|
import { useTranslate } from 'react-admin';
|
import CloseIcon from '@mui/icons-material/Close';
|
import { MAP_MODE, DEVICE_TYPE } from "../constants";
|
import * as Tool from "../tool";
|
|
const deviceTypeSelectOptionsFn = (translate) => {
|
const deviceTypes = [
|
{ key: DEVICE_TYPE.SHELF, id: 'page.map.devices.shelf' },
|
{ key: DEVICE_TYPE.AGV, id: 'page.map.devices.agv' },
|
{ key: DEVICE_TYPE.STATION, id: 'page.map.devices.station' },
|
{ key: DEVICE_TYPE.POINT, id: 'page.map.devices.point' },
|
// ... other devices
|
];
|
|
return deviceTypes.map(({ key, id }) => ({
|
value: key,
|
label: translate(id),
|
}));
|
};
|
|
const MapSearch = (props) => {
|
const {
|
mode,
|
setMode,
|
dataFetched,
|
curZone,
|
curSprite,
|
setCurSprite,
|
} = props;
|
|
const theme = useTheme();
|
const translate = useTranslate();
|
|
const deviceTypeOptions = deviceTypeSelectOptionsFn(translate);
|
const [curDeviceType, setCurDeviceType] = useState(deviceTypeOptions[0]?.value || '');
|
const [deviceList, setDeviceList] = useState([]);
|
const [filterDeviceList, setFilterDeviceList] = useState([]);
|
const [inputValue, setInputValue] = useState('');
|
const [selectedOption, setSelectedOption] = useState(null);
|
|
const resetSearch = () => {
|
const deviceListAll = getAllDeviceList(curDeviceType);
|
setDeviceList(deviceListAll);
|
setFilterDeviceList(deviceListAll);
|
setInputValue('');
|
setSelectedOption(null);
|
};
|
|
useEffect(() => {
|
if (dataFetched) {
|
resetSearch();
|
}
|
}, [curDeviceType, dataFetched, curZone]);
|
|
useEffect(() => {
|
if (!curSprite) {
|
resetSearch();
|
}
|
}, [curSprite]);
|
|
useEffect(() => {
|
if (!Tool.getMapContainer()) return;
|
if (inputValue !== '' && deviceList.length > 0) {
|
setFilterDeviceList(
|
deviceList.filter((item) => item.value.includes(inputValue))
|
);
|
} else {
|
setFilterDeviceList(deviceList);
|
}
|
}, [inputValue, deviceList]);
|
|
const onSecondSelect = (option) => {
|
if (!option) return;
|
const uuid = option.uuid;
|
const selectSprite = Tool.findSpriteByUuid(uuid);
|
if (selectSprite) {
|
Tool.focusSprite(selectSprite);
|
}
|
switch (mode) {
|
// case MAP_MODE.OBSERVER_MODE:
|
// case MAP_MODE.SETTINGS_MODE:
|
// break;
|
case MAP_MODE.MOVABLE_MODE:
|
setMode(MAP_MODE.SETTINGS_MODE);
|
setTimeout(() => {
|
setCurSprite(selectSprite);
|
}, 200);
|
break;
|
default:
|
setCurSprite(selectSprite);
|
break;
|
}
|
};
|
|
const getAllDeviceList = (curDeviceType) => {
|
const children = Tool.getMapContainer()?.children || [];
|
return children.reduce((list, child) => {
|
if (child?.data) {
|
const { data } = child;
|
if (data.type === curDeviceType && data.no) {
|
list.push({
|
value: data.no,
|
label: data.no,
|
uuid: data.uuid,
|
});
|
}
|
}
|
return list;
|
}, []);
|
};
|
|
return (
|
<Stack direction="row" spacing={1} alignItems="center">
|
<Select
|
variant="outlined"
|
size="small"
|
value={curDeviceType}
|
onChange={(event) => setCurDeviceType(event.target.value)}
|
sx={{ minWidth: 160 }}
|
>
|
{deviceTypeOptions.map((option) => (
|
<MenuItem key={option.value} value={option.value}>
|
<Typography variant="body1" fontWeight="bold">
|
{option.label}
|
</Typography>
|
</MenuItem>
|
))}
|
</Select>
|
<Autocomplete
|
size="small"
|
options={filterDeviceList}
|
getOptionLabel={(option) => option.value}
|
renderOption={(optionProps, option) => {
|
const { key, ...otherProps } = optionProps;
|
return (
|
<li key={option.uuid} {...otherProps}>
|
<Stack direction="row" justifyContent="space-between" width="100%">
|
<Typography variant="body1" fontWeight="bold">
|
{option.label}
|
</Typography>
|
<Typography variant="body2" color="text.secondary">
|
{option.uuid}
|
</Typography>
|
</Stack>
|
</li>
|
)
|
}}
|
renderInput={(params) => (
|
<TextField
|
{...params}
|
variant="outlined"
|
placeholder={translate('common.msg.placeholder')}
|
InputProps={{
|
...params.InputProps,
|
endAdornment: (
|
<>
|
{params.InputProps.endAdornment}
|
{inputValue && (
|
<InputAdornment position="end">
|
<IconButton
|
size="small"
|
onClick={() => {
|
setInputValue('');
|
setSelectedOption(null);
|
setCurSprite(null);
|
}}
|
>
|
<CloseIcon fontSize="small" />
|
</IconButton>
|
</InputAdornment>
|
)}
|
</>
|
),
|
}}
|
sx={{
|
minWidth: 360,
|
marginBottom: '7px',
|
}}
|
/>
|
)}
|
value={selectedOption}
|
onChange={(event, newValue) => {
|
setSelectedOption(newValue);
|
onSecondSelect(newValue);
|
}}
|
inputValue={inputValue}
|
onInputChange={(event, newInputValue) => {
|
setInputValue(newInputValue);
|
}}
|
disableClearable
|
/>
|
</Stack>
|
);
|
};
|
|
export default MapSearch;
|
