Merge branch 'traccar:master' into Teltonika-io30-faultCount

8 files changed, 30 insertions, 20 deletions

diff --git a/modern/src/common/attributes/usePositionAttributes.js b/modern/src/common/attributes/usePositionAttributes.js
index 78e27e9e..b1b6af1d 100644
--- a/modern/src/common/attributes/usePositionAttributes.js
+++ b/modern/src/common/attributes/usePositionAttributes.js
@@ -68,6 +68,10 @@ export default (t) => useMemo(() => ({
     type: 'string',
     property: true,
   },
+  geofenceIds: {
+    name: t('sharedGeofences'),
+    property: true,
+  },
   raw: {
     name: t('positionRaw'),
     type: 'string',
diff --git a/modern/src/common/components/GeofencesValue.js b/modern/src/common/components/GeofencesValue.js
new file mode 100644
index 00000000..4808a8a2
--- /dev/null
+++ b/modern/src/common/components/GeofencesValue.js
@@ -0,0 +1,9 @@
+import { useSelector } from 'react-redux';
+
+const GeofencesValue = ({ geofenceIds }) => {
+  const geofences = useSelector((state) => state.geofences.items);
+
+  return geofenceIds.map((id) => geofences[id]?.name).join(', ');
+};
+
+export default GeofencesValue;
diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js
index a819a018..a6b38e31 100644
--- a/modern/src/common/components/PositionValue.js
+++ b/modern/src/common/components/PositionValue.js
@@ -9,6 +9,7 @@ import { useAttributePreference, usePreference } from '../util/preferences';
 import { useTranslation } from './LocalizationProvider';
 import { useAdministrator } from '../util/permissions';
 import AddressValue from './AddressValue';
+import GeofencesValue from './GeofencesValue';
 
 const PositionValue = ({ position, property, attribute }) => {
   const t = useTranslation();
@@ -83,6 +84,11 @@ const PositionValue = ({ position, property, attribute }) => {
         return (<Link component={RouterLink} underline="none" to={`/network/${position.id}`}>{t('sharedInfoTitle')}</Link>);
       }
       return '';
+    case 'geofenceIds':
+      if (value) {
+        return (<GeofencesValue geofenceIds={value} />);
+      }
+      return '';
     default:
       return formatValue(value);
   }
diff --git a/modern/src/main/DeviceRow.js b/modern/src/main/DeviceRow.js
index bf5aec3e..44da58f9 100644
--- a/modern/src/main/DeviceRow.js
+++ b/modern/src/main/DeviceRow.js
@@ -57,22 +57,9 @@ const DeviceRow = ({ data, index, style }) => {
   const item = data[index];
   const position = useSelector((state) => state.session.positions[item.id]);
 
-  const geofences = useSelector((state) => state.geofences.items);
-
   const devicePrimary = useAttributePreference('devicePrimary', 'name');
   const deviceSecondary = useAttributePreference('deviceSecondary', '');
 
-  const formatProperty = (key) => {
-    if (key === 'geofenceIds') {
-      const geofenceIds = item[key] || [];
-      return geofenceIds
-        .filter((id) => geofences.hasOwnProperty(id))
-        .map((id) => geofences[id].name)
-        .join(', ');
-    }
-    return item[key];
-  };
-
   const secondaryText = () => {
     let status;
     if (item.status === 'online' || !item.lastUpdate) {
@@ -82,7 +69,7 @@ const DeviceRow = ({ data, index, style }) => {
     }
     return (
       <>
-        {deviceSecondary && item[deviceSecondary] && `${formatProperty(deviceSecondary)} • `}
+        {deviceSecondary && item[deviceSecondary] && `${item[deviceSecondary]} • `}
         <span className={classes[getStatusColor(item.status)]}>{status}</span>
       </>
     );
@@ -101,7 +88,7 @@ const DeviceRow = ({ data, index, style }) => {
           </Avatar>
         </ListItemAvatar>
         <ListItemText
-          primary={formatProperty(devicePrimary)}
+          primary={item[devicePrimary]}
           primaryTypographyProps={{ noWrap: true }}
           secondary={secondaryText()}
           secondaryTypographyProps={{ noWrap: true }}
diff --git a/modern/src/reports/CombinedReportPage.js b/modern/src/reports/CombinedReportPage.js
index 4efc7b9c..ecd65a24 100644
--- a/modern/src/reports/CombinedReportPage.js
+++ b/modern/src/reports/CombinedReportPage.js
@@ -56,7 +56,7 @@ const CombinedReportPage = () => {
   });
 
   return (
-    <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}>
+    <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportCombined']}>
       <div className={classes.container}>
         {Boolean(items.length) && (
           <div className={classes.containerMap}>
diff --git a/modern/src/reports/ScheduledPage.js b/modern/src/reports/ScheduledPage.js
index 7dd225ba..50e335d5 100644
--- a/modern/src/reports/ScheduledPage.js
+++ b/modern/src/reports/ScheduledPage.js
@@ -62,7 +62,7 @@ const ScheduledPage = () => {
   };
 
   return (
-    <PageLayout menu={<ReportsMenu />} breadcrumbs={['settingsTitle', 'sharedDrivers']}>
+    <PageLayout menu={<ReportsMenu />} breadcrumbs={['settingsTitle', 'reportScheduled']}>
       <Table>
         <TableHead>
           <TableRow>
diff --git a/modern/src/settings/DevicesPage.js b/modern/src/settings/DevicesPage.js
index 5a053766..d3ebc85f 100644
--- a/modern/src/settings/DevicesPage.js
+++ b/modern/src/settings/DevicesPage.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import {
   Table, TableRow, TableCell, TableHead, TableBody,
@@ -29,6 +30,8 @@ const DevicesPage = () => {
   const navigate = useNavigate();
   const t = useTranslation();
 
+  const groups = useSelector((state) => state.groups.items);
+
   const hours12 = usePreference('twelveHourFormat');
 
   const deviceReadonly = useDeviceReadonly();
@@ -60,13 +63,14 @@ const DevicesPage = () => {
   };
 
   return (
-    <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedDrivers']}>
+    <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'deviceTitle']}>
       <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} />
       <Table>
         <TableHead>
           <TableRow>
             <TableCell>{t('sharedName')}</TableCell>
             <TableCell>{t('deviceIdentifier')}</TableCell>
+            <TableCell>{t('groupParent')}</TableCell>
             <TableCell>{t('sharedPhone')}</TableCell>
             <TableCell>{t('deviceModel')}</TableCell>
             <TableCell>{t('deviceContact')}</TableCell>
@@ -79,6 +83,7 @@ const DevicesPage = () => {
             <TableRow key={item.id}>
               <TableCell>{item.name}</TableCell>
               <TableCell>{item.uniqueId}</TableCell>
+              <TableCell>{item.groupId ? groups[item.groupId].name : null}</TableCell>
               <TableCell>{item.phone}</TableCell>
               <TableCell>{item.model}</TableCell>
               <TableCell>{item.contact}</TableCell>
@@ -94,7 +99,7 @@ const DevicesPage = () => {
                 />
               </TableCell>
             </TableRow>
-          )) : (<TableShimmer columns={6} endAction />)}
+          )) : (<TableShimmer columns={7} endAction />)}
         </TableBody>
       </Table>
       <CollectionFab editPath="/settings/device" />
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index fcf34739..a05924a9 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -27,7 +27,6 @@ const deviceFields = [
   { id: 'phone', name: 'sharedPhone' },
   { id: 'model', name: 'deviceModel' },
   { id: 'contact', name: 'deviceContact' },
-  { id: 'geofenceIds', name: 'sharedGeofences' },
 ];
 
 const useStyles = makeStyles((theme) => ({