From 18bf43634ba99e8a77571b6bcf650f4687c6df68 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sun, 15 May 2022 16:18:01 -0700
Subject: Combine position attributes

---
 .../src/common/attributes/usePositionAttributes.js | 52 ++++++++++++++++++++
 .../src/common/attributes/usePositionProperties.js | 56 ----------------------
 modern/src/main/StatusCard.js                      | 20 ++++----
 modern/src/reports/ChartReportPage.js              |  9 ++--
 modern/src/reports/RouteReportPage.js              |  7 +--
 modern/src/settings/PreferencesPage.js             |  7 +--
 6 files changed, 69 insertions(+), 82 deletions(-)
 delete mode 100644 modern/src/common/attributes/usePositionProperties.js

(limited to 'modern')

diff --git a/modern/src/common/attributes/usePositionAttributes.js b/modern/src/common/attributes/usePositionAttributes.js
index 2d3c1bfe..d6ee5805 100644
--- a/modern/src/common/attributes/usePositionAttributes.js
+++ b/modern/src/common/attributes/usePositionAttributes.js
@@ -1,6 +1,58 @@
 import { useMemo } from 'react';
 
 export default (t) => useMemo(() => ({
+  id: {
+    name: t('deviceIdentifier'),
+    type: 'number',
+  },
+  latitude: {
+    name: t('positionLatitude'),
+    type: 'number',
+  },
+  longitude: {
+    name: t('positionLongitude'),
+    type: 'number',
+  },
+  speed: {
+    name: t('positionSpeed'),
+    type: 'number',
+  },
+  course: {
+    name: t('positionCourse'),
+    type: 'number',
+  },
+  altitude: {
+    name: t('positionAltitude'),
+    type: 'number',
+  },
+  accuracy: {
+    name: t('positionAccuracy'),
+    type: 'number',
+  },
+  valid: {
+    name: t('positionValid'),
+    type: 'boolean',
+  },
+  protocol: {
+    name: t('positionProtocol'),
+    type: 'string',
+  },
+  address: {
+    name: t('positionAddress'),
+    type: 'string',
+  },
+  deviceTime: {
+    name: t('positionDeviceTime'),
+    type: 'string',
+  },
+  fixTime: {
+    name: t('positionFixTime'),
+    type: 'string',
+  },
+  serverTime: {
+    name: t('positionServerTime'),
+    type: 'string',
+  },
   raw: {
     name: t('positionRaw'),
     type: 'string',
diff --git a/modern/src/common/attributes/usePositionProperties.js b/modern/src/common/attributes/usePositionProperties.js
deleted file mode 100644
index a31700d6..00000000
--- a/modern/src/common/attributes/usePositionProperties.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useMemo } from 'react';
-
-export default (t) => useMemo(() => ({
-  id: {
-    name: t('deviceIdentifier'),
-    type: 'number',
-  },
-  latitude: {
-    name: t('positionLatitude'),
-    type: 'number',
-  },
-  longitude: {
-    name: t('positionLongitude'),
-    type: 'number',
-  },
-  speed: {
-    name: t('positionSpeed'),
-    type: 'number',
-  },
-  course: {
-    name: t('positionCourse'),
-    type: 'number',
-  },
-  altitude: {
-    name: t('positionAltitude'),
-    type: 'number',
-  },
-  accuracy: {
-    name: t('positionAccuracy'),
-    type: 'number',
-  },
-  valid: {
-    name: t('positionValid'),
-    type: 'boolean',
-  },
-  protocol: {
-    name: t('positionProtocol'),
-    type: 'string',
-  },
-  address: {
-    name: t('positionAddress'),
-    type: 'string',
-  },
-  deviceTime: {
-    name: t('positionDeviceTime'),
-    type: 'string',
-  },
-  fixTime: {
-    name: t('positionFixTime'),
-    type: 'string',
-  },
-  serverTime: {
-    name: t('positionServerTime'),
-    type: 'string',
-  },
-}), [t]);
diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index 92de7bba..10ea8a3f 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -17,7 +17,6 @@ import PositionValue from '../common/components/PositionValue';
 import dimensions from '../common/theme/dimensions';
 import { useDeviceReadonly, useReadonly } from '../common/util/permissions';
 import usePersistedState from '../common/util/usePersistedState';
-import usePositionProperties from '../common/attributes/usePositionProperties';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 
 const useStyles = makeStyles((theme) => ({
@@ -69,9 +68,7 @@ const StatusCard = ({ deviceId, onClose }) => {
   const device = useSelector((state) => state.devices.items[deviceId]);
   const position = useSelector((state) => state.positions.items[deviceId]);
 
-  const positionProperties = usePositionProperties(t);
   const positionAttributes = usePositionAttributes(t);
-  const positionObject = { ...positionProperties, ...positionAttributes };
   const [positionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']);
 
   const [removeDialogShown, setRemoveDialogShown] = useState(false);
@@ -100,13 +97,16 @@ const StatusCard = ({ deviceId, onClose }) => {
                 <Table size="small" classes={{ root: classes.table }}>
                   <TableBody>
                     {positionItems.map((key) => (
-                      <StatusRow name={positionObject[key].name} content={
-                        <PositionValue
-                          position={position}
-                          property={position.hasOwnProperty(key) ? key : null}
-                          attribute={position.hasOwnProperty(key) ? null : key}
-                        />
-                      } />
+                      <StatusRow
+                        name={positionAttributes[key].name}
+                        content={(
+                          <PositionValue
+                            position={position}
+                            property={position.hasOwnProperty(key) ? key : null}
+                            attribute={position.hasOwnProperty(key) ? null : key}
+                          />
+                        )}
+                      />
                     ))}
                   </TableBody>
                 </Table>
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index f9698102..dbc205fc 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -10,7 +10,6 @@ import { formatDate } from '../common/util/formatter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
-import usePositionProperties from '../common/attributes/usePositionProperties';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 
 const useStyles = makeStyles(() => ({
@@ -25,9 +24,7 @@ const ChartReportPage = () => {
   const filterClasses = useFilterStyles();
   const t = useTranslation();
 
-  const positionProperties = usePositionProperties(t);
   const positionAttributes = usePositionAttributes(t);
-  const typesObject = { ...positionProperties, ...positionAttributes };
 
   const [items, setItems] = useState([]);
   const [type, setType] = useState('speed');
@@ -61,8 +58,8 @@ const ChartReportPage = () => {
           <FormControl variant="filled" fullWidth>
             <InputLabel>{t('reportChartType')}</InputLabel>
             <Select value={type} onChange={(e) => setType(e.target.value)}>
-              {Object.keys(typesObject).filter((key) => typesObject[key].type === 'number').map((key) => (
-                <MenuItem key={key} value={key}>{typesObject[key].name}</MenuItem>
+              {Object.keys(positionAttributes).filter((key) => positionAttributes[key].type === 'number').map((key) => (
+                <MenuItem key={key} value={key}>{positionAttributes[key].name}</MenuItem>
               ))}
             </Select>
           </FormControl>
@@ -80,7 +77,7 @@ const ChartReportPage = () => {
               <XAxis dataKey="fixTime" />
               <YAxis type="number" domain={[`dataMin - ${dataRange / 5}`, `dataMax + ${dataRange / 5}`]} />
               <CartesianGrid strokeDasharray="3 3" />
-              <Tooltip formatter={(value, name) => [value, typesObject[name].name]} />
+              <Tooltip formatter={(value, name) => [value, positionAttributes[name].name]} />
               <Line type="natural" dataKey={type} />
             </LineChart>
           </ResponsiveContainer>
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index e1dd59a0..cd2c3694 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -9,15 +9,12 @@ import ReportsMenu from './components/ReportsMenu';
 import usePersistedState from '../common/util/usePersistedState';
 import PositionValue from '../common/components/PositionValue';
 import ColumnSelect from './components/ColumnSelect';
-import usePositionProperties from '../common/attributes/usePositionProperties';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 
 const RouteReportPage = () => {
   const t = useTranslation();
 
-  const positionProperties = usePositionProperties(t);
   const positionAttributes = usePositionAttributes(t);
-  const columnsObject = { ...positionProperties, ...positionAttributes };
 
   const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']);
   const [items, setItems] = useState([]);
@@ -45,14 +42,14 @@ const RouteReportPage = () => {
         <ColumnSelect
           columns={columns}
           setColumns={setColumns}
-          columnsObject={columnsObject}
+          columnsObject={positionAttributes}
         />
       </ReportFilter>
       <TableContainer>
         <Table>
           <TableHead>
             <TableRow>
-              {columns.map((key) => (<TableCell>{columnsObject[key].name}</TableCell>))}
+              {columns.map((key) => (<TableCell>{positionAttributes[key].name}</TableCell>))}
             </TableRow>
           </TableHead>
           <TableBody>
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index a7ce6903..94d55adf 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -7,7 +7,6 @@ import { useLocalization, useTranslation } from '../common/components/Localizati
 import usePersistedState from '../common/util/usePersistedState';
 import PageLayout from '../common/components/PageLayout';
 import SettingsMenu from './components/SettingsMenu';
-import usePositionProperties from '../common/attributes/usePositionProperties';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 
 const useStyles = makeStyles((theme) => ({
@@ -26,9 +25,7 @@ const PreferencesPage = () => {
   const { languages, language, setLanguage } = useLocalization();
   const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name }));
 
-  const positionProperties = usePositionProperties(t);
   const positionAttributes = usePositionAttributes(t);
-  const positionObject = { ...positionProperties, ...positionAttributes };
   const [positionItems, setPositionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']);
 
   const [mapLiveRoutes, setMapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
@@ -68,8 +65,8 @@ const PreferencesPage = () => {
                 renderValue={(it) => it.length}
                 multiple
               >
-                {Object.keys(positionObject).map((key) => (
-                  <MenuItem key={key} value={key}>{positionObject[key].name}</MenuItem>
+                {Object.keys(positionAttributes).map((key) => (
+                  <MenuItem key={key} value={key}>{positionAttributes[key].name}</MenuItem>
                 ))}
               </Select>
             </FormControl>
-- 
cgit v1.2.3