2 files changed, 14 insertions, 0 deletions
diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js
index 58841939..cc2046da 100644
--- a/modern/src/common/components/PositionValue.js
+++ b/modern/src/common/components/PositionValue.js
@@ -18,6 +18,7 @@ import {
   formatVoltage,
   formatVolume,
   formatConsumption,
+  formatDriverUniqueId,
 } from '../util/formatter';
 import { useAttributePreference, usePreference } from '../util/preferences';
 import { useTranslation } from './LocalizationProvider';
@@ -81,6 +82,8 @@ const PositionValue = ({ position, property, attribute }) => {
         return value != null ? formatDistance(value, distanceUnit, t) : '';
       case 'hours':
         return value != null ? formatNumericHours(value, t) : '';
+      case 'driverUniqueId':
+        return value != null ? formatDriverUniqueId(value) : '';
       default:
         if (typeof value === 'number') {
           return formatNumber(value);
diff --git a/modern/src/common/util/formatter.js b/modern/src/common/util/formatter.js
index 0f7d2cc8..792a4ef0 100644
--- a/modern/src/common/util/formatter.js
+++ b/modern/src/common/util/formatter.js
@@ -1,3 +1,4 @@
+import { useSelector } from 'react-redux';
 import moment from 'moment';
 import {
   altitudeFromMeters,
@@ -68,6 +69,16 @@ export const formatNumericHours = (value, t) => {
   return `${hours} ${t('sharedHourAbbreviation')} ${minutes} ${t('sharedMinuteAbbreviation')}`;
 };
 
+export const formatDriverUniqueId = (value) => {
+  const drivers = useSelector((state) => state.drivers.items);
+  let driverId = `${value}`;
+  const storedDriver = Object.values(drivers).find((d) => d.uniqueId === driverId);
+  if (storedDriver) {
+    driverId += ` (${storedDriver.name})`;
+  }
+  return driverId;
+};
+
 export const formatCoordinate = (key, value, unit) => {
   let hemisphere;
   let degrees;