import React from 'react'; import { useSelector } from 'react-redux'; import t from '../common/localization'; import { formatPosition } from '../common/formatter'; import { getPosition } from '../common/selectors'; const StatusView = ({ deviceId, onShowDetails }) => { const device = useSelector((state) => state.devices.items[deviceId]); const position = useSelector(getPosition(deviceId)); const handleClick = (e) => { e.preventDefault(); onShowDetails(position.id); }; return ( <> {t('deviceStatus')} : {' '} {formatPosition(device.status, 'status')}
{t('sharedLocation')} : {' '} {formatPosition(position, 'latitude')} {' '} {formatPosition(position, 'longitude')}
{t('positionSpeed')} : {' '} {formatPosition(position.speed, 'speed')}
{t('positionCourse')} : {' '} {formatPosition(position.course, 'course')}
{t('positionDistance')} : {' '} {formatPosition(position.attributes.totalDistance, 'distance')}
{position.attributes.batteryLevel && ( <> {t('positionBattery')} : {' '} {formatPosition(position.attributes.batteryLevel, 'batteryLevel')}
)} {t('sharedShowDetails')} ); }; export default StatusView;