diff --git a/src/Cat/Cat.scss b/src/Cat/Cat.scss index 3722b0c8..baf96969 100644 --- a/src/Cat/Cat.scss +++ b/src/Cat/Cat.scss @@ -17,4 +17,14 @@ h2 { margin: 10px; } + div { + display: flex; + justify-content: space-between; + font-size: 85%; + opacity: 0.75; + span.time { + font-size: 85%; + opacity: 0.75; + } + } } \ No newline at end of file diff --git a/src/Cat/Cat.tsx b/src/Cat/Cat.tsx index b7311d16..f1fe2b72 100644 --- a/src/Cat/Cat.tsx +++ b/src/Cat/Cat.tsx @@ -1,13 +1,19 @@ import React, { useEffect, useState } from 'react' import { IdentityIdContext, IotContext, CredentialsContext } from '../App' -import { Card, CardHeader, CardBody, Alert } from 'reactstrap' +import { Card, CardHeader, CardBody } from 'reactstrap' import { Iot, IotData, S3 } from 'aws-sdk' import { Loading } from '../Loading/Loading' import { Error } from '../Error/Error' import { device } from 'aws-iot-device-sdk' import { RelativeTime } from '../RelativeTime/RelativeTime' import { Map } from '../Map/Map' -import { WarningRounded as WarningIcon } from '@material-ui/icons' +import { + AccessTimeRounded as TimeIcon, + DirectionsRun as SpeedIcon, + Flight as AltitudeIcon, + BatteryStdRounded as BatteryIcon, + CloudDone as CloudIcon, +} from '@material-ui/icons' import './Cat.scss' import { AvatarPicker } from '../Avatar/AvatarPicker' @@ -25,17 +31,17 @@ const ReportedTime = ({ receivedAt: Date }) => ( <> - - reported - {' '} - - (received{' '} - - ) - + + {(receivedAt.getTime() - new Date(reportedAt).getTime()) / 1000 > 300 && ( + <> + {' '} + {' '} + + + )} ) @@ -99,7 +105,9 @@ const ShowCat = ({ ) }) connection.on('message', (topic, payload) => { - const reported = mergeReportedAndMetadata({ shadow: JSON.parse(payload.toString()).current }) + const reported = mergeReportedAndMetadata({ + shadow: JSON.parse(payload.toString()).current, + }) setReported(reported) console.log('Update reported state', catId, reported) }) @@ -184,51 +192,45 @@ const ShowCat = ({ }} /> - - -
-
Last position
- {!reported.gps && ( -
- - Unknown! - -
- )} - {reported.gps && ( -
+ {reported.gps && reported.gps.v && ( +
+ {reported.gps.v.spd && ( + + + {Math.round(reported.gps.v.spd.value)}m/s + + )} + {reported.gps.v.alt && ( + + + {Math.round(reported.gps.v.alt.value)}m + + )} + -
- )} - {reported && reported.bat && reported.bat.v && ( - <> -
Battery
-
- {reported.bat.v.value} -
- -
- - )} - {reported && reported.gps && reported.gps.v && reported.gps.v.spd && ( - <> -
Speed
-
- {reported.gps.v.spd.value}m/s -
- -
- - )} + + + )} + {reported.bat && reported.bat.v && ( +
+ + + {reported.bat.v.value} + + + + +
+ )} + + +
{reported && reported.acc && reported.acc.v && ( <>
Motion