modern/src/map/StatusView.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

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 (
    <>
      <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;