Show driver name

7 files changed, 29 insertions, 11 deletions

diff --git a/modern/src/common/attributes/usePositionAttributes.js b/modern/src/common/attributes/usePositionAttributes.js
index e08e91d5..0b191ebc 100644
--- a/modern/src/common/attributes/usePositionAttributes.js
+++ b/modern/src/common/attributes/usePositionAttributes.js
@@ -349,7 +349,7 @@ export default (t) => useMemo(() => ({
     type: 'string',
   },
   driverUniqueId: {
-    name: t('positionDriverUniqueId'),
+    name: t('sharedDriver'),
     type: 'string',
   },
   card: {
diff --git a/modern/src/common/components/DriverValue.js b/modern/src/common/components/DriverValue.js
new file mode 100644
index 00000000..0969ca20
--- /dev/null
+++ b/modern/src/common/components/DriverValue.js
@@ -0,0 +1,9 @@
+import { useSelector } from 'react-redux';
+
+const DriverValue = ({ driverUniqueId }) => {
+  const driver = useSelector((state) => state.drivers.items[driverUniqueId]);
+
+  return driver.name;
+};
+
+export default DriverValue;
diff --git a/modern/src/common/components/PositionValue.jsx b/modern/src/common/components/PositionValue.jsx
index 64f9dc04..b1f8f656 100644
--- a/modern/src/common/components/PositionValue.jsx
+++ b/modern/src/common/components/PositionValue.jsx
@@ -25,6 +25,7 @@ import { useTranslation } from './LocalizationProvider';
 import { useAdministrator } from '../util/permissions';
 import AddressValue from './AddressValue';
 import GeofencesValue from './GeofencesValue';
+import DriverValue from './DriverValue';
 
 const PositionValue = ({ position, property, attribute }) => {
   const t = useTranslation();
@@ -97,26 +98,31 @@ const PositionValue = ({ position, property, attribute }) => {
     case 'image':
     case 'video':
     case 'audio':
-      return (<Link href={`/api/media/${device.uniqueId}/${value}`} target="_blank">{value}</Link>);
+      return <Link href={`/api/media/${device.uniqueId}/${value}`} target="_blank">{value}</Link>;
     case 'totalDistance':
     case 'hours':
       return (
         <>
           {formatValue(value)}
           &nbsp;&nbsp;
-          {admin && (<Link component={RouterLink} underline="none" to={`/settings/accumulators/${position.deviceId}`}>&#9881;</Link>)}
+          {admin && <Link component={RouterLink} underline="none" to={`/settings/accumulators/${position.deviceId}`}>&#9881;</Link>}
         </>
       );
     case 'address':
-      return (<AddressValue latitude={position.latitude} longitude={position.longitude} originalAddress={value} />);
+      return <AddressValue latitude={position.latitude} longitude={position.longitude} originalAddress={value} />;
     case 'network':
       if (value) {
-        return (<Link component={RouterLink} underline="none" to={`/network/${position.id}`}>{t('sharedInfoTitle')}</Link>);
+        return <Link component={RouterLink} underline="none" to={`/network/${position.id}`}>{t('sharedInfoTitle')}</Link>;
       }
       return '';
     case 'geofenceIds':
       if (value) {
-        return (<GeofencesValue geofenceIds={value} />);
+        return <GeofencesValue geofenceIds={value} />;
+      }
+      return '';
+    case 'driverUniqueId':
+      if (value) {
+        return <DriverValue driverUniqueId={value} />;
       }
       return '';
     default:
diff --git a/modern/src/common/components/StatusCard.jsx b/modern/src/common/components/StatusCard.jsx
index 38de944b..04e1d172 100644
--- a/modern/src/common/components/StatusCard.jsx
+++ b/modern/src/common/components/StatusCard.jsx
@@ -211,7 +211,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
                       {positionItems.split(',').filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => (
                         <StatusRow
                           key={key}
-                          name={positionAttributes.hasOwnProperty(key) ? positionAttributes[key].name : key}
+                          name={positionAttributes[key]?.name || key}
                           content={(
                             <PositionValue
                               position={position}
diff --git a/modern/src/other/PositionPage.jsx b/modern/src/other/PositionPage.jsx
index 1a5f6d9d..3ed3498c 100644
--- a/modern/src/other/PositionPage.jsx
+++ b/modern/src/other/PositionPage.jsx
@@ -11,6 +11,7 @@ import { useEffectAsync } from '../reactHelper';
 import { prefixString } from '../common/util/stringUtils';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PositionValue from '../common/components/PositionValue';
+import usePositionAttributes from '../common/attributes/usePositionAttributes';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -30,6 +31,8 @@ const PositionPage = () => {
   const navigate = useNavigate();
   const t = useTranslation();
 
+  const positionAttributes = usePositionAttributes(t);
+
   const { id } = useParams();
 
   const [item, setItem] = useState();
@@ -85,14 +88,14 @@ const PositionPage = () => {
                 {item && Object.getOwnPropertyNames(item).filter((it) => it !== 'attributes').map((property) => (
                   <TableRow key={property}>
                     <TableCell>{property}</TableCell>
-                    <TableCell><strong>{t(prefixString('position', property))}</strong></TableCell>
+                    <TableCell><strong>{positionAttributes[property]?.name || property}</strong></TableCell>
                     <TableCell><PositionValue position={item} property={property} /></TableCell>
                   </TableRow>
                 ))}
                 {item && Object.getOwnPropertyNames(item.attributes).map((attribute) => (
                   <TableRow key={attribute}>
                     <TableCell>{attribute}</TableCell>
-                    <TableCell><strong>{t(prefixString('position', attribute)) || t(prefixString('device', attribute))}</strong></TableCell>
+                    <TableCell><strong>{positionAttributes[attribute]?.name || attribute}</strong></TableCell>
                     <TableCell><PositionValue position={item} attribute={attribute} /></TableCell>
                   </TableRow>
                 ))}
diff --git a/modern/src/settings/PreferencesPage.jsx b/modern/src/settings/PreferencesPage.jsx
index e0673688..bd96b140 100644
--- a/modern/src/settings/PreferencesPage.jsx
+++ b/modern/src/settings/PreferencesPage.jsx
@@ -173,7 +173,7 @@ const PreferencesPage = () => {
                   multiple
                   freeSolo
                   options={Object.keys(positionAttributes)}
-                  getOptionLabel={(option) => (positionAttributes.hasOwnProperty(option) ? positionAttributes[option].name : option)}
+                  getOptionLabel={(option) => (positionAttributes[option]?.name || option)}
                   value={attributes.positionItems?.split(',') || ['speed', 'address', 'totalDistance', 'course']}
                   onChange={(_, option) => {
                     setAttributes({ ...attributes, positionItems: option.join(',') });
diff --git a/modern/src/store/drivers.js b/modern/src/store/drivers.js
index 38933d84..3ebbdd84 100644
--- a/modern/src/store/drivers.js
+++ b/modern/src/store/drivers.js
@@ -7,7 +7,7 @@ const { reducer, actions } = createSlice({
   },
   reducers: {
     update(state, action) {
-      action.payload.forEach((item) => state.items[item.id] = item);
+      action.payload.forEach((item) => state.items[item.uniqueId] = item);
     },
   },
 });