From e9f0913d2b1b66764931b6c1235877a44e72890b Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Sat, 24 Oct 2020 16:42:29 -0700
Subject: Refactor map implementation

---
 modern/src/map/StatusView.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 modern/src/map/StatusView.js

(limited to 'modern/src/map/StatusView.js')

diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
new file mode 100644
index 0000000..3a30426
--- /dev/null
+++ b/modern/src/map/StatusView.js
@@ -0,0 +1,30 @@
+import t from '../common/localization'
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { formatPosition } from '../common/formatter';
+
+const StatusView = ({ deviceId, onShowDetails }) => {
+  const device = useSelector(state => state.devices.items[deviceId]);
+  const position = useSelector(state => state.positions.items[deviceId]);
+
+  const handleClick = e => {
+    e.preventDefault();
+    onShowDetails(position.id);
+  };
+
+  return (
+    <>
+      <b>{t('deviceStatus')}:</b> {formatPosition(device.status, 'status')}<br />
+      <b>{t('sharedLocation')}:</b> {formatPosition(position, 'latitude')} {formatPosition(position, 'longitude')}<br />
+      <b>{t('positionSpeed')}:</b> {formatPosition(position.speed, 'speed')}<br />
+      <b>{t('positionCourse')}:</b> {formatPosition(position.course, 'course')}<br />
+      <b>{t('positionDistance')}:</b> {formatPosition(position.attributes.totalDistance, 'distance')}<br />
+      {position.attributes.batteryLevel &&
+        <><b>{t('positionBattery')}:</b> {formatPosition(position.attributes.batteryLevel, 'batteryLevel')}<br /></>
+      }
+      <a href="#" onClick={handleClick}>{t('sharedShowDetails')}</a>
+    </>
+  );
+};
+
+export default StatusView;
-- 
cgit v1.2.3