diff options
author | Anton Tananaev <anton@traccar.org> | 2023-08-19 13:58:45 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2023-08-19 13:59:07 -0700 |
commit | d3c7705bedebd65c94f9eea691aaf2fe03b0cafe (patch) | |
tree | 5f98b3d9bbbd4fe8067b5a334e84aff008b8db22 /modern/src/main/DeviceRow.js | |
parent | 0161ae449d4a7bd0781c0665d663353663ab0faf (diff) | |
download | trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.tar.gz trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.tar.bz2 trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.zip |
Move to Vite
Diffstat (limited to 'modern/src/main/DeviceRow.js')
-rw-r--r-- | modern/src/main/DeviceRow.js | 142 |
1 files changed, 0 insertions, 142 deletions
diff --git a/modern/src/main/DeviceRow.js b/modern/src/main/DeviceRow.js deleted file mode 100644 index 44da58f9..00000000 --- a/modern/src/main/DeviceRow.js +++ /dev/null @@ -1,142 +0,0 @@ -import React from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import makeStyles from '@mui/styles/makeStyles'; -import { - IconButton, Tooltip, Avatar, ListItemAvatar, ListItemText, ListItemButton, -} from '@mui/material'; -import BatteryFullIcon from '@mui/icons-material/BatteryFull'; -import BatteryChargingFullIcon from '@mui/icons-material/BatteryChargingFull'; -import Battery60Icon from '@mui/icons-material/Battery60'; -import BatteryCharging60Icon from '@mui/icons-material/BatteryCharging60'; -import Battery20Icon from '@mui/icons-material/Battery20'; -import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20'; -import ErrorIcon from '@mui/icons-material/Error'; -import moment from 'moment'; -import { devicesActions } from '../store'; -import { - formatAlarm, formatBoolean, formatPercentage, formatStatus, getStatusColor, -} from '../common/util/formatter'; -import { useTranslation } from '../common/components/LocalizationProvider'; -import { mapIconKey, mapIcons } from '../map/core/preloadImages'; -import { useAdministrator } from '../common/util/permissions'; -import { ReactComponent as EngineIcon } from '../resources/images/data/engine.svg'; -import { useAttributePreference } from '../common/util/preferences'; - -const useStyles = makeStyles((theme) => ({ - icon: { - width: '25px', - height: '25px', - filter: 'brightness(0) invert(1)', - }, - batteryText: { - fontSize: '0.75rem', - fontWeight: 'normal', - lineHeight: '0.875rem', - }, - positive: { - color: theme.palette.colors.positive, - }, - medium: { - color: theme.palette.colors.medium, - }, - negative: { - color: theme.palette.colors.negative, - }, - neutral: { - color: theme.palette.colors.neutral, - }, -})); - -const DeviceRow = ({ data, index, style }) => { - const classes = useStyles(); - const dispatch = useDispatch(); - const t = useTranslation(); - - const admin = useAdministrator(); - - const item = data[index]; - const position = useSelector((state) => state.session.positions[item.id]); - - const devicePrimary = useAttributePreference('devicePrimary', 'name'); - const deviceSecondary = useAttributePreference('deviceSecondary', ''); - - const secondaryText = () => { - let status; - if (item.status === 'online' || !item.lastUpdate) { - status = formatStatus(item.status, t); - } else { - status = moment(item.lastUpdate).fromNow(); - } - return ( - <> - {deviceSecondary && item[deviceSecondary] && `${item[deviceSecondary]} • `} - <span className={classes[getStatusColor(item.status)]}>{status}</span> - </> - ); - }; - - return ( - <div style={style}> - <ListItemButton - key={item.id} - onClick={() => dispatch(devicesActions.selectId(item.id))} - disabled={!admin && item.disabled} - > - <ListItemAvatar> - <Avatar> - <img className={classes.icon} src={mapIcons[mapIconKey(item.category)]} alt="" /> - </Avatar> - </ListItemAvatar> - <ListItemText - primary={item[devicePrimary]} - primaryTypographyProps={{ noWrap: true }} - secondary={secondaryText()} - secondaryTypographyProps={{ noWrap: true }} - /> - {position && ( - <> - {position.attributes.hasOwnProperty('alarm') && ( - <Tooltip title={`${t('eventAlarm')}: ${formatAlarm(position.attributes.alarm, t)}`}> - <IconButton size="small"> - <ErrorIcon fontSize="small" className={classes.negative} /> - </IconButton> - </Tooltip> - )} - {position.attributes.hasOwnProperty('ignition') && ( - <Tooltip title={`${t('positionIgnition')}: ${formatBoolean(position.attributes.ignition, t)}`}> - <IconButton size="small"> - {position.attributes.ignition ? ( - <EngineIcon width={20} height={20} className={classes.positive} /> - ) : ( - <EngineIcon width={20} height={20} className={classes.neutral} /> - )} - </IconButton> - </Tooltip> - )} - {position.attributes.hasOwnProperty('batteryLevel') && ( - <Tooltip title={`${t('positionBatteryLevel')}: ${formatPercentage(position.attributes.batteryLevel)}`}> - <IconButton size="small"> - {position.attributes.batteryLevel > 70 ? ( - position.attributes.charge - ? (<BatteryChargingFullIcon fontSize="small" className={classes.positive} />) - : (<BatteryFullIcon fontSize="small" className={classes.positive} />) - ) : position.attributes.batteryLevel > 30 ? ( - position.attributes.charge - ? (<BatteryCharging60Icon fontSize="small" className={classes.medium} />) - : (<Battery60Icon fontSize="small" className={classes.medium} />) - ) : ( - position.attributes.charge - ? (<BatteryCharging20Icon fontSize="small" className={classes.negative} />) - : (<Battery20Icon fontSize="small" className={classes.negative} />) - )} - </IconButton> - </Tooltip> - )} - </> - )} - </ListItemButton> - </div> - ); -}; - -export default DeviceRow; |