From e20e1adae62caf1a0aa0a8f25c8994fcd8cf8c8c Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Mon, 26 Jul 2021 16:47:10 +0530
Subject: Rebases the pull request

Initial Draft of Device Quick Menu

Initial Draft
---
 modern/public/styles.css       |   4 +
 modern/src/common/formatter.js |  22 +++++
 modern/src/map/PositionsMap.js |  11 ++-
 modern/src/map/StatusView.js   | 177 +++++++++++++++++++++++++++++------------
 4 files changed, 161 insertions(+), 53 deletions(-)

diff --git a/modern/public/styles.css b/modern/public/styles.css
index e7aee86..3d925d1 100644
--- a/modern/public/styles.css
+++ b/modern/public/styles.css
@@ -10,3 +10,7 @@ canvas {
 .mapboxgl-ctrl {
   margin: 10px;
 }
+
+.maplibregl-popup {
+  max-width: 330px!important;
+}
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index 3c0341b..f0bb2e1 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -98,3 +98,25 @@ export const formatCoordinate = (key, value, unit) => {
       return `${value.toFixed(6)}°`;
   }
 };
+
+export const getStatusColor = (status) => {
+  switch (status) {
+    case 'online':
+      return 'green';
+    case 'offline':
+      return 'red';
+    case 'unknown':
+    default:
+      return 'gray';
+  }
+};
+
+export const getBatteryStatus = (batteryLevel) => {
+  if (batteryLevel >= 70) {
+    return 'green';
+  }
+  if (batteryLevel > 30) {
+    return 'gray';
+  }
+  return 'red';
+};
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 2de01d2..9719b45 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import ReactDOM from 'react-dom';
+import { ThemeProvider } from '@material-ui/core/styles';
 import maplibregl from 'maplibre-gl';
 import { Provider, useSelector } from 'react-redux';
 
@@ -7,6 +8,7 @@ import { useHistory } from 'react-router-dom';
 import { map } from './Map';
 import store from '../store';
 import StatusView from './StatusView';
+import theme from '../theme';
 
 const PositionsMap = ({ positions }) => {
   const id = 'positions';
@@ -49,7 +51,14 @@ const PositionsMap = ({ positions }) => {
     const placeholder = document.createElement('div');
     ReactDOM.render(
       <Provider store={store}>
-        <StatusView deviceId={feature.properties.deviceId} onShowDetails={(positionId) => history.push(`/position/${positionId}`)} />
+        <ThemeProvider theme={theme}>
+          <StatusView
+            deviceId={feature.properties.deviceId}
+            onShowDetails={(positionId) => history.push(`/position/${positionId}`)}
+            onShowHistory={() => history.push('/replay')}
+            onEditClick={(deviceId) => history.push(`/device/${deviceId}`)}
+          />
+        </ThemeProvider>
       </Provider>,
       placeholder,
     );
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index c0f723d..735fbab 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -1,70 +1,143 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+  makeStyles, Paper, IconButton, Grid, Button,
+} from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
 import { useSelector } from 'react-redux';
+
+import ReplayIcon from '@material-ui/icons/Replay';
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
+import EditIcon from '@material-ui/icons/Edit';
+import DeleteIcon from '@material-ui/icons/Delete';
+
+import {
+  formatPosition, getStatusColor, getBatteryStatus, formatDistance, formatSpeed,
+} from '../common/formatter';
+import { useAttributePreference } from '../common/preferences';
+import RemoveDialog from '../RemoveDialog';
 import t from '../common/localization';
 import { formatPosition } from '../common/formatter';
 import { getPosition } from '../common/selectors';
 
-const StatusView = ({ deviceId, onShowDetails }) => {
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    width: '300px',
+  },
+  green: {
+    color: theme.palette.common.green,
+  },
+  red: {
+    color: theme.palette.common.red,
+  },
+  gray: {
+    color: theme.palette.common.gray,
+  },
+  listItemContainer: {
+    maxWidth: '240px',
+  },
+}));
+
+const StatusView = ({
+  deviceId, onShowDetails, onShowHistory, onEditClick,
+}) => {
+  const classes = useStyles();
+
+  const [removeDialogShown, setRemoveDialogShown] = useState(false);
   const device = useSelector((state) => state.devices.items[deviceId]);
   const position = useSelector(getPosition(deviceId));
 
+  const distanceUnit = useAttributePreference('distanceUnit');
+  const speedUnit = useAttributePreference('speedUnit');
+
   const handleClick = (e) => {
     e.preventDefault();
     onShowDetails(position.id);
   };
 
+  const handleEditClick = (e) => {
+    e.preventDefault();
+    onEditClick(deviceId);
+  };
+
+  const handleRemove = () => {
+    setRemoveDialogShown(true);
+  };
+
+  const handleRemoveResult = () => {
+    setRemoveDialogShown(false);
+  };
+
   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>
+      <Paper className={classes.paper} elevation={0} square>
+        <Grid container direction="column">
+          <Grid item>
+            <List>
+              <ListItem classes={{ container: classes.listItemContainer }}>
+                <ListItemText primary={t('deviceStatus')} />
+                <ListItemSecondaryAction>
+                  <span className={classes[getStatusColor(device.status)]}>{device.status}</span>
+                </ListItemSecondaryAction>
+              </ListItem>
+              <ListItem classes={{ container: classes.listItemContainer }}>
+                <ListItemText primary={t('positionSpeed')} />
+                <ListItemSecondaryAction>
+                  <span>{formatSpeed(position.speed, speedUnit)}</span>
+                </ListItemSecondaryAction>
+              </ListItem>
+              {position.attributes.batteryLevel && (
+                <ListItem classes={{ container: classes.listItemContainer }}>
+                  <ListItemText primary={t('positionBattery')} />
+                  <ListItemSecondaryAction>
+                    <span className={classes[getBatteryStatus(position.attributes.batteryLevel)]}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel')}</span>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              )}
+              <ListItem classes={{ container: classes.listItemContainer }}>
+                <ListItemText primary={t('positionDistance')} />
+                <ListItemSecondaryAction>
+                  <span>{formatDistance(position.attributes.totalDistance, distanceUnit)}</span>
+                </ListItemSecondaryAction>
+              </ListItem>
+              <ListItem classes={{ container: classes.listItemContainer }}>
+                <ListItemText primary={t('positionCourse')} />
+                <ListItemSecondaryAction>
+                  <span>{formatPosition(position.course, 'course')}</span>
+                </ListItemSecondaryAction>
+              </ListItem>
+            </List>
+          </Grid>
+          <Grid item container>
+            <Grid item>
+              <Button color="secondary" onClick={handleClick}>More Info</Button>
+            </Grid>
+            <Grid item>
+              <IconButton onClick={onShowHistory}>
+                <ReplayIcon />
+              </IconButton>
+            </Grid>
+            <Grid item>
+              <IconButton>
+                <ExitToAppIcon />
+              </IconButton>
+            </Grid>
+            <Grid item>
+              <IconButton onClick={handleEditClick}>
+                <EditIcon />
+              </IconButton>
+            </Grid>
+            <Grid item>
+              <IconButton onClick={handleRemove} className={classes.red}>
+                <DeleteIcon />
+              </IconButton>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Paper>
+      <RemoveDialog open={removeDialogShown} endpoint="devices" itemId={deviceId} onResult={handleRemoveResult} />
     </>
   );
 };
-- 
cgit v1.2.3


From 8deaba8e1f7511348d734f173b238271fd7b84be Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Fri, 6 Aug 2021 14:58:15 +0530
Subject: Minor update to rebase PR

---
 modern/src/map/StatusView.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index 735fbab..e37699a 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -19,7 +19,6 @@ import {
 import { useAttributePreference } from '../common/preferences';
 import RemoveDialog from '../RemoveDialog';
 import t from '../common/localization';
-import { formatPosition } from '../common/formatter';
 import { getPosition } from '../common/selectors';
 
 const useStyles = makeStyles((theme) => ({
-- 
cgit v1.2.3


From 27f718e72df9300f013a6db78fc2982622772792 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Sat, 7 Aug 2021 17:14:47 +0530
Subject: Showing status view on device click

---
 modern/src/map/SelectedDeviceMap.js | 50 ++++++++++++++++++++++++++++++++++---
 modern/src/map/StatusView.js        | 10 +-------
 modern/src/theme/palette.js         | 11 ++++++++
 3 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
index e6c5f58..e55ee10 100644
--- a/modern/src/map/SelectedDeviceMap.js
+++ b/modern/src/map/SelectedDeviceMap.js
@@ -1,21 +1,63 @@
-import { useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
 
+import { ThemeProvider } from '@material-ui/core/styles';
+import maplibregl from 'maplibre-gl';
+import { Provider, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import { map } from './Map';
+import store from '../store';
+import StatusView from './StatusView';
+import theme from '../theme';
+
+let popup;
 
 const SelectedDeviceMap = () => {
+  const history = useHistory();
+
   const mapCenter = useSelector((state) => {
     if (state.devices.selectedId) {
       const position = state.positions.items[state.devices.selectedId] || null;
       if (position) {
-        return [position.longitude, position.latitude];
+        return { deviceId: state.devices.selectedId, position: [position.longitude, position.latitude] };
       }
     }
     return null;
   });
 
+  const showStatus = (deviceId, coordinates) => {
+    const placeholder = document.createElement('div');
+    ReactDOM.render(
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <StatusView
+            deviceId={deviceId}
+            onShowDetails={(positionId) => history.push(`/position/${positionId}`)}
+            onShowHistory={() => history.push('/replay')}
+            onEditClick={(deviceId) => history.push(`/device/${deviceId}`)}
+          />
+        </ThemeProvider>
+      </Provider>,
+      placeholder,
+    );
+
+    if (popup) {
+      popup.remove();
+    }
+    popup = new maplibregl.Popup({
+      offset: 25,
+      anchor: 'top',
+      closeOnClick: true,
+    });
+
+    popup.setDOMContent(placeholder).setLngLat(coordinates).addTo(map);
+  };
+
   useEffect(() => {
-    map.easeTo({ center: mapCenter });
+    if (mapCenter) {
+      map.easeTo({ center: mapCenter.position });
+      showStatus(mapCenter.deviceId, mapCenter.position);
+    }
   }, [mapCenter]);
 
   return null;
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index e37699a..00d36c5 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -25,15 +25,7 @@ const useStyles = makeStyles((theme) => ({
   paper: {
     width: '300px',
   },
-  green: {
-    color: theme.palette.common.green,
-  },
-  red: {
-    color: theme.palette.common.red,
-  },
-  gray: {
-    color: theme.palette.common.gray,
-  },
+  ...theme.palette.colors,
   listItemContainer: {
     maxWidth: '240px',
   },
diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js
index ac26e57..622e49b 100644
--- a/modern/src/theme/palette.js
+++ b/modern/src/theme/palette.js
@@ -18,4 +18,15 @@ export default {
     main: traccarGreen,
     contrastText: traccarWhite,
   },
+  colors: {
+    red: {
+      color: traccarRed,
+    },
+    green: {
+      color: traccarGreen,
+    },
+    gray: {
+      color: traccarGray,
+    },
+  },
 };
-- 
cgit v1.2.3


From 1521abf0372dd1f91d690e2931cc87d71642acb6 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Sat, 7 Aug 2021 17:21:53 +0530
Subject: Minor css formatting fix

---
 modern/public/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modern/public/styles.css b/modern/public/styles.css
index 3d925d1..147c3e3 100644
--- a/modern/public/styles.css
+++ b/modern/public/styles.css
@@ -12,5 +12,5 @@ canvas {
 }
 
 .maplibregl-popup {
-  max-width: 330px!important;
+  max-width: 330px !important;
 }
-- 
cgit v1.2.3