|  |  |  | 
|---|
|  |  |  | import { Box, Typography, Tabs, Tab, Stack, useTheme, Divider } from '@mui/material'; | 
|---|
|  |  |  | import ShelfMain from './ShelfMain'; | 
|---|
|  |  |  | import JsonShow from '../../JsonShow'; | 
|---|
|  |  |  | import { getLocGroup } from '../../http'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const ShelfInsight = (props) => { | 
|---|
|  |  |  | const { sprite } = props; | 
|---|
|  |  |  | const { sprite, setTitle } = props; | 
|---|
|  |  |  | const theme = useTheme(); | 
|---|
|  |  |  | const themeMode = theme.palette.mode; | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const [activeTab, setActiveTab] = useState(0); | 
|---|
|  |  |  | const [curShelfInfo, setCurShelfInfo] = useState(null); | 
|---|
|  |  |  | const [curLocNo, setCurLocNo] = useState(null); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const fetchShelfInfo = (row, bay) => { | 
|---|
|  |  |  | getLocGroup(row, bay, (response) => { | 
|---|
|  |  |  | setCurShelfInfo(response); | 
|---|
|  |  |  | const defaultLocNo = response[0]?.locNo; | 
|---|
|  |  |  | setCurLocNo(defaultLocNo); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | if (sprite) { | 
|---|
|  |  |  | const { row, bay } = sprite.data; | 
|---|
|  |  |  | if (row && bay) { | 
|---|
|  |  |  | fetchShelfInfo(row, bay); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return () => { | 
|---|
|  |  |  | setCurLocNo(null); | 
|---|
|  |  |  | setCurShelfInfo(null); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, [sprite]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | if (curLocNo) { | 
|---|
|  |  |  | setTitle(translate('page.map.devices.shelf') + ' - ' + curLocNo); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return () => { | 
|---|
|  |  |  | setTitle(null); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, [curLocNo]) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleTabChange = (event, newValue) => { | 
|---|
|  |  |  | setActiveTab(newValue); | 
|---|
|  |  |  | 
|---|
|  |  |  | <Tabs | 
|---|
|  |  |  | value={activeTab} | 
|---|
|  |  |  | onChange={handleTabChange} | 
|---|
|  |  |  | indicatorColor="primary" | 
|---|
|  |  |  | textColor="primary" | 
|---|
|  |  |  | centered | 
|---|
|  |  |  | sx={{ mb: 0 }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <Tab label={translate('page.map.settings.map.title')} /> | 
|---|
|  |  |  | <Tab label={translate('page.map.settings.config.title')} /> | 
|---|
|  |  |  | <Tab label={translate('page.map.insight.title')} /> | 
|---|
|  |  |  | <Tab label={'JSON'} /> | 
|---|
|  |  |  | </Tabs> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Divider /> | 
|---|
|  |  |  | 
|---|
|  |  |  | <Box flex={1} pt={2}> | 
|---|
|  |  |  | {activeTab === 0 && ( | 
|---|
|  |  |  | <ShelfMain | 
|---|
|  |  |  | data={sprite?.data} | 
|---|
|  |  |  | row={sprite?.data?.row} | 
|---|
|  |  |  | bay={sprite?.data?.bay} | 
|---|
|  |  |  | curLocNo={curLocNo} | 
|---|
|  |  |  | curShelfInfo={curShelfInfo} | 
|---|
|  |  |  | setCurLocNo={setCurLocNo} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | {activeTab === 1 && ( | 
|---|
|  |  |  | <JsonShow | 
|---|
|  |  |  | data={sprite?.data} | 
|---|
|  |  |  | data={curShelfInfo || sprite?.data} | 
|---|
|  |  |  | height={550} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | )} | 
|---|