1 files changed, 24 insertions, 13 deletions
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 8d10053..b702400 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -18,19 +18,24 @@ const PositionsMap = ({ positions }) => {
   const devices = useSelector((state) => state.devices.items);
 
   const deviceColor = (device) => {
-    switch (device.status) {
-      case 'online':
+    const position = positions[device.id];
+    if (position) {
+      if (position.attributes.ignition) {
         return 'green';
-      case 'offline':
-        return 'red';
-      default:
+      } else if (position.attributes.ignition === undefined) {
         return 'gray';
+      } else {
+        return 'red';
+      }
+    } else {
+      return 'gray';
     }
   };
 
   const createFeature = (devices, position) => {
     const device = devices[position.deviceId];
     return {
+      position: position,
       deviceId: position.deviceId,
       name: device.name,
       category: device.category || 'default',
@@ -48,15 +53,20 @@ const PositionsMap = ({ positions }) => {
       coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360;
     }
 
+    console.log(event);
+
+    const position = JSON.parse(feature.properties.position);
     const placeholder = document.createElement('div');
     ReactDOM.render(
       <Provider store={store}>
         <ThemeProvider theme={theme}>
-          <StatusView
-            deviceId={feature.properties.deviceId}
-            onShowDetails={(positionId) => history.push(`/position/${positionId}`)}
-            onShowHistory={() => history.push('/replay')}
-            onEditClick={(deviceId) => history.push(`/device/${deviceId}`)}
+            <StatusView
+              position={position}
+              deviceId={feature.properties.deviceId}
+              onShowDetails={(positionId) => history.push(`/position/${positionId}`)}
+              onShowHistory={(deviceId) => history.push(`/replay/${deviceId}`)}
+              onEditClick={(deviceId) => history.push(`/device/${deviceId}`)}
+              onCommandsClick={(deviceId) => history.push(`/device/${deviceId}/commands`) }
           />
         </ThemeProvider>
       </Provider>,
@@ -104,18 +114,19 @@ const PositionsMap = ({ positions }) => {
       source: id,
       filter: ['!', ['has', 'point_count']],
       layout: {
-        'icon-image': '{category}-{color}',
+        'icon-image': ['concat', ['downcase', ['get', 'category']], '-map'],
         'icon-allow-overlap': true,
         'text-field': '{name}',
         'text-allow-overlap': true,
         'text-anchor': 'bottom',
         'text-offset': [0, -2],
-        'text-font': ['Roboto Regular'],
+        'text-font': ['Roboto Bold'],
         'text-size': 12,
       },
       paint: {
+        'text-color': 'black',
         'text-halo-color': 'white',
-        'text-halo-width': 1,
+        'text-halo-width': 2,
       },
     });
     map.addLayer({