import React, { Fragment } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Divider from '@material-ui/core/Divider';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import Grid from '@material-ui/core/Grid';
import ListItemText from '@material-ui/core/ListItemText';
import { FixedSizeList } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
import BatteryFullIcon from '@material-ui/icons/BatteryFull';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import { devicesActions } from './store';
import EditCollectionView from './EditCollectionView';
import { useEffectAsync } from './reactHelper';
import { formatPosition } from './common/formatter';
const useStyles = makeStyles(theme => ({
list: {
maxHeight: '100%',
},
icon: {
width: '25px',
height: '25px',
filter: 'brightness(0) invert(1)',
},
batteryText: {
fontSize: '0.75rem',
fontWeight: 'normal',
lineHeight: '0.875rem'
},
green: {
color: theme.palette.common.green,
},
red: {
color: theme.palette.common.red,
},
gray: {
color: theme.palette.common.gray
}
}));
const OnlineStatus =({ status }) => {
const classes = useStyles();
switch (status) {
case 'online':
return {status}
case 'offline':
return {status}
case 'unknown':
default:
return {status}
}
}
const DeviceStatus = ({ deviceId }) => {
const classes = useStyles();
let batteryClass = '';
const position = useSelector(state => state.positions.items[deviceId]);
if (!position) {
return null;
}
const batteryLevel = position.attributes.hasOwnProperty('batteryLevel') ? position.attributes.batteryLevel : 'undefined';
if (batteryLevel >= 70) {
batteryClass = classes.green;
} else if (batteryLevel > 30) {
batteryClass = classes.gray;
} else {
batteryClass = classes.red;
}
return (