Implement status popup

1 files changed, 20 insertions, 0 deletions

diff --git a/modern/src/StatusView.js b/modern/src/StatusView.js
new file mode 100644
index 0000000..ed0149e
--- /dev/null
+++ b/modern/src/StatusView.js
@@ -0,0 +1,20 @@
+import t from './common/localization'
+import React from 'react';
+import { useSelector } from 'react-redux';
+import formatter from './common/formatter';
+
+const StatusView = (props) => {
+  const device = useSelector(state => state.devices.items[props.deviceId]);
+  const position = useSelector(state => state.positions.items[props.deviceId]);
+
+  return (
+    <>
+      <b>{t('deviceStatus')}:</b> {formatter(device.status, 'status')}<br />
+      <b>{t('positionSpeed')}:</b> {formatter(position.speed, 'speed')}<br />
+      <b>{t('positionCourse')}:</b> {formatter(position.course, 'course')}<br />
+      <b>{t('positionDistance')}:</b> {formatter(position.attributes.totalDistance, 'distance')}<br />
+    </>
+  );
+};
+
+export default StatusView;