| | |
| | | import React, { useState, useRef, useEffect } from 'react'; |
| | | import { useTranslate } from "react-admin"; |
| | | import { Drawer, Box, Typography, Tabs, Tab, IconButton, Stack, useTheme, Card, CardContent, CardHeader, Divider } from '@mui/material'; |
| | | import { Drawer, Box, Typography, Tabs, Tab, IconButton, Stack, useTheme, Card, CardContent, Divider } from '@mui/material'; |
| | | import CloseIcon from '@mui/icons-material/Close'; |
| | | import { PAGE_DRAWER_WIDTH } from '@/config/setting'; |
| | | import MapSettings from './MapSettings'; |
| | | import ConfigSettings from './ConfigSettings'; |
| | | |
| | | const Settings = (props) => { |
| | | const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title, setSpriteSettings } = props; |
| | | const theme = useTheme(); |
| | | const themeMode = theme.palette.mode; |
| | | const translate = useTranslate(); |
| | | |
| | | const [lastCopiedSprites, setLastCopiedSprites] = useState([]); |
| | | |
| | | const handleClose = () => { |
| | | onCancel(); |
| | |
| | | const handleTabChange = (event, newValue) => { |
| | | setActiveTab(newValue); |
| | | }; |
| | | |
| | | useEffect(() => { |
| | | console.log(sprite); |
| | | |
| | | }, [sprite]) |
| | | |
| | | return ( |
| | | <> |
| | |
| | | <Stack direction="row" p={2}> |
| | | <Typography variant="h6" flex="1"> |
| | | {sprite |
| | | ? 'No.' + sprite?.data?.uuid + ' - ' + translate(`page.map.devices.${sprite?.data?.type?.toLowerCase()}`) |
| | | ? translate(`page.map.devices.${sprite?.data?.type?.toLowerCase()}`) + ' - ' + sprite?.data?.uuid |
| | | : translate('page.map.settings.title')} |
| | | </Typography> |
| | | <IconButton onClick={handleClose} size="small"> |
| | |
| | | <Box p={3}> |
| | | <Card sx={{ |
| | | transition: '0.3s', |
| | | boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)', |
| | | boxShadow: themeMode === 'light' |
| | | ? '0px 2px 8px rgba(0, 0, 0, 0.1)' |
| | | : '0px 2px 2px rgba(255, 255, 255, 0.1)', |
| | | '&:hover': { |
| | | boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)', |
| | | boxShadow: themeMode === 'light' |
| | | ? '0px 4px 16px rgba(0, 0, 0, 0.2)' |
| | | : '0px 4px 8px rgba(255, 255, 255, 0.2)', |
| | | }, |
| | | borderRadius: '8px', |
| | | }}> |
| | |
| | | indicatorColor="primary" |
| | | textColor="primary" |
| | | variant="fullWidth" |
| | | sx={{ mb: 2 }} |
| | | sx={{ mb: 0 }} |
| | | > |
| | | <Tab label={translate('page.map.settings.map.title')} /> |
| | | <Tab label={translate('page.map.settings.config.title')} /> |
| | |
| | | sprite={sprite} |
| | | setSpriteSettings={setSpriteSettings} |
| | | onSubmit={() => { |
| | | alert('MapSettings') |
| | | }} |
| | | width={width} |
| | | lastCopiedSprites={lastCopiedSprites} |
| | | setLastCopiedSprites={setLastCopiedSprites} |
| | | /> |
| | | )} |
| | | {activeTab === 1 && ( |
| | | <ConfigSettings |
| | | sprite={sprite} |
| | | onSubmit={() => { |
| | | alert('ConfigSettings') |
| | | }} |
| | | /> |
| | | )} |
| | |
| | | )} |
| | | </Drawer> |
| | | </> |
| | | ) |
| | | } |
| | | |
| | | const ConfigSettings = () => { |
| | | |
| | | return ( |
| | | <h1>ConfigSettings</h1> |
| | | ) |
| | | } |
| | | |