import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { Card, CardContent, Typography, CardActions, IconButton, Table, TableBody, TableRow, TableCell, Menu, MenuItem, CardMedia, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import CloseIcon from '@mui/icons-material/Close'; import ReplayIcon from '@mui/icons-material/Replay'; import PublishIcon from '@mui/icons-material/Publish'; import EditIcon from '@mui/icons-material/Edit'; import DeleteIcon from '@mui/icons-material/Delete'; import InfoIcon from '@mui/icons-material/Info'; import { useTranslation } from '../common/components/LocalizationProvider'; import RemoveDialog from '../common/components/RemoveDialog'; import PositionValue from '../common/components/PositionValue'; import { useDeviceReadonly, useRestriction } from '../common/util/permissions'; import usePersistedState from '../common/util/usePersistedState'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; import { devicesActions } from '../store'; import { useCatch } from '../reactHelper'; const useStyles = makeStyles((theme) => ({ card: { width: theme.dimensions.popupMaxWidth, }, media: { height: theme.dimensions.popupImageHeight, display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-start', }, mediaButton: { color: theme.palette.colors.white, mixBlendMode: 'difference', }, header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: theme.spacing(1, 1, 0, 2), }, content: { paddingTop: theme.spacing(1), paddingBottom: theme.spacing(1), }, negative: { color: theme.palette.colors.negative, }, icon: { width: '25px', height: '25px', filter: 'brightness(0) invert(1)', }, table: { '& .MuiTableCell-sizeSmall': { paddingLeft: 0, paddingRight: 0, }, }, cell: { borderBottom: 'none', }, actions: { justifyContent: 'space-between', }, })); const StatusRow = ({ name, content }) => { const classes = useStyles(); return ( {name} {content} ); }; const StatusCard = ({ deviceId, onClose }) => { const classes = useStyles(); const navigate = useNavigate(); const dispatch = useDispatch(); const t = useTranslation(); const readonly = useRestriction('readonly'); const deviceReadonly = useDeviceReadonly(); const device = useSelector((state) => state.devices.items[deviceId]); const position = useSelector((state) => state.positions.items[deviceId]); const deviceImage = device?.attributes?.deviceImage; const positionAttributes = usePositionAttributes(t); const [positionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']); const [anchorEl, setAnchorEl] = useState(null); const [removing, setRemoving] = useState(false); const handleRemove = useCatch(async (removed) => { if (removed) { const response = await fetch('/api/devices'); if (response.ok) { dispatch(devicesActions.refresh(await response.json())); } else { throw Error(await response.text()); } } setRemoving(false); }); return ( <> {device && ( {deviceImage ? ( ) : (
{device.name}
)} {position && ( {positionItems.filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => ( )} /> ))}
)} setAnchorEl(e.currentTarget)} disabled={!position} > navigate('/replay')} disabled={!position} > navigate(`/settings/command-send/${deviceId}`)} disabled={readonly} > navigate(`/settings/device/${deviceId}`)} disabled={deviceReadonly} > setRemoving(true)} disabled={deviceReadonly} className={classes.negative} >
)} {position && ( setAnchorEl(null)}> navigate(`/position/${position.id}`)}>{t('sharedShowDetails')} {t('linkGoogleMaps')} {t('linkAppleMaps')} {t('linkStreetView')} )} handleRemove(removed)} /> ); }; export default StatusCard;