Details drawer

modern/src/common/components/StatusCard.jsx

@@ -17,6 +17,7 @@ import {
   MenuItem,
   CardMedia,
   Snackbar,
+  Button,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import CloseIcon from '@mui/icons-material/Close';
@@ -115,7 +116,7 @@ const StatusRow = ({ name, content }) => {
   );
 };
 
-const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPadding = 0 }) => {
+const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPadding = 0, onDetailsClick }) => {
   const classes = useStyles({ desktopPadding });
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -129,6 +130,8 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
 
   const positionAttributes = usePositionAttributes(t);
   const positionItems = useAttributePreference('positionItems', 'speed,address,totalDistance,course');
+  const showDetailsDrawer = useAttributePreference('showDetailsDrawer', true);
+  const quickDetailsBotton = useAttributePreference('quickDetailsBotton', false);
 
   const [anchorEl, setAnchorEl] = useState(null);
 
@@ -188,6 +191,14 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
     }
   }, [deviceId, setShared]);
 
+  const handleDetails = useCatchCallback(async () =>{
+    if (showDetailsDrawer==true) {
+      onDetailsClick();
+      setAnchorEl(null);
+    }else{
+      navigate(`/position/${position.id}`);
+    }
+  })
   return (
     <>
       <div className={classes.root}>
@@ -242,6 +253,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
                       ))}
                     </TableBody>
                   </Table>
+                  {quickDetailsBotton === true && (<Button fullWidth onClick={onDetailsClick}><Typography color="secondary">{t('sharedShowDetails')}</Typography></Button>)}
                 </CardContent>
               )}
               <CardActions classes={{ root: classes.actions }} disableSpacing>
@@ -284,7 +296,9 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
       </div>
       {position && (
         <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
-          <MenuItem onClick={() => navigate(`/position/${position.id}`)}><Typography color="secondary">{t('sharedShowDetails')}</Typography></MenuItem>
+          {!quickDetailsBotton && (
+          <MenuItem onClick={handleDetails}><Typography color="secondary">{t('sharedShowDetails')}</Typography></MenuItem>
+          )}
           <MenuItem onClick={handleGeofence}>{t('sharedCreateGeofence')}</MenuItem>
           <MenuItem component="a" target="_blank" href={`https://www.google.com/maps/search/?api=1&query=${position.latitude}%2C${position.longitude}`}>{t('linkGoogleMaps')}</MenuItem>
           <MenuItem component="a" target="_blank" href={`http://maps.apple.com/?ll=${position.latitude},${position.longitude}`}>{t('linkAppleMaps')}</MenuItem>

modern/src/common/theme/dimensions.js

@@ -6,6 +6,7 @@ export default {
   drawerHeightPhone: '250px',
   filterFormWidth: '160px',
   eventsDrawerWidth: '320px',
+  detailsDrawerWidth: '350px',
   bottomBarHeight: 56,
   popupMapOffset: 300,
   popupMaxWidth: 288,

modern/src/main/DetailsDrawer.jsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  Drawer, Toolbar, Typography, Table, TableHead, TableRow, TableCell, TableBody, AppBar, IconButton,
+} from '@mui/material';
+
+import CloseIcon from '@mui/icons-material/Close';
+import { makeStyles } from '@mui/styles';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import { prefixString } from '../common/util/stringUtils';
+import { useEffectAsync } from '../reactHelper';
+import PositionValue from '../common/components/PositionValue';
+import usePositionAttributes from '../common/attributes/usePositionAttributes';
+
+const useStyles = makeStyles((theme) => ({
+  drawer: {
+    width: theme.dimensions.detailsDrawerWidth,
+  },
+  toolbar: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
+
+const DetailsDrawer = ({ deviceId, open, onClose }) => {
+  const classes = useStyles();
+  const t = useTranslation();
+  const positionAttributes = usePositionAttributes(t);
+
+  const device = useSelector((state) => state.devices.items[deviceId]);
+
+  const [item, setItem] = useState();
+
+  useEffectAsync(async () => {
+    if (device) {
+      const response = await fetch(`/api/positions?id=${device.positionId}`);
+      if (response.ok) {
+        const positions = await response.json();
+        if (positions.length > 0) {
+          setItem(positions[0]);
+        }
+      } else {
+        throw Error(await response.text());
+      }
+    }
+  }, [deviceId]);
+
+  const deviceName = useSelector((state) => {
+    if (item) {
+      const device = state.devices.items[item.deviceId];
+      if (device) {
+        return device.name;
+      }
+    }
+    return null;
+  });
+
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={onClose}
+    >
+      <AppBar position="sticky" color="inherit">
+        <Toolbar className={classes.toolbar} disableGutters>
+          <Typography variant="h6" className={classes.title}>
+            {deviceName}
+          </Typography>
+          <IconButton size="small" color="inherit" onClick={onClose}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>{t('stateName')}</TableCell>
+            <TableCell>{t('sharedName')}</TableCell>
+            <TableCell>{t('stateValue')}</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {item && Object.getOwnPropertyNames(item).filter((it) => it !== 'attributes').map((property) => (
+            <TableRow key={property}>
+              <TableCell>{property}</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>{positionAttributes[attribute]?.name || attribute}</strong></TableCell>
+              <TableCell><PositionValue position={item} attribute={attribute} /></TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Drawer>
+  );
+};
+
+export default DetailsDrawer;

modern/src/main/MainPage.jsx

@@ -16,6 +16,7 @@ import useFilter from './useFilter';
 import MainToolbar from './MainToolbar';
 import MainMap from './MainMap';
 import { useAttributePreference } from '../common/util/preferences';
+import DetailsDrawer from './DetailsDrawer';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -88,8 +89,10 @@ const MainPage = () => {
 
   const [devicesOpen, setDevicesOpen] = useState(desktop);
   const [eventsOpen, setEventsOpen] = useState(false);
+  const [detailsOpen, setDetailsOpen] = useState(false);
 
   const onEventsClick = useCallback(() => setEventsOpen(true), [setEventsOpen]);
+  const onDetailsClick = useCallback(() => setDetailsOpen(true), [setDetailsOpen]);
 
   useEffect(() => {
     if (!desktop && mapOnSelect && selectedDeviceId) {
@@ -150,8 +153,16 @@ const MainPage = () => {
           deviceId={selectedDeviceId}
           position={selectedPosition}
           onClose={() => dispatch(devicesActions.selectId(null))}
+          onDetailsClick={onDetailsClick}
           desktopPadding={theme.dimensions.drawerWidthDesktop}
         />
+      )}      
+      {selectedDeviceId && (
+        <DetailsDrawer
+          deviceId={selectedDeviceId}
+          open={detailsOpen}
+          onClose={() => setDetailsOpen(false)}
+        />
       )}
     </div>
   );

modern/src/resources/l10n/en.json

@@ -115,6 +115,8 @@
     "calendarFriday": "Friday",
     "calendarSaturday": "Saturday",
     "attributeShowGeofences": "Show Geofences",
+    "attributeShowDetailsOnDrawer": "Show Details on Drawer",
+    "attributeQuickDetailsBotton": "Show Quick Button Details",
     "attributeSpeedLimit": "Speed Limit",
     "attributeFuelDropThreshold": "Fuel Drop Threshold",
     "attributeFuelIncreaseThreshold": "Fuel Increase Threshold",

modern/src/settings/PreferencesPage.jsx

@@ -279,6 +279,24 @@ const PreferencesPage = () => {
                   titleGetter={(it) => t(it.name)}
                   label={t('deviceSecondaryInfo')}
                 />
+                <FormControlLabel
+                  control={(
+                    <Checkbox
+                      checked={attributes.hasOwnProperty('showDetailsDrawer') ? attributes.showDetailsDrawer : true}
+                      onChange={(e) => setAttributes({ ...attributes, showDetailsDrawer: e.target.checked })}
+                    />
+                  )}
+                  label={t('attributeShowDetailsOnDrawer')}
+                />
+                <FormControlLabel
+                  control={(
+                    <Checkbox
+                      checked={attributes.hasOwnProperty('quickDetailsBotton') ? attributes.quickDetailsBotton : false}
+                      onChange={(e) => setAttributes({ ...attributes, quickDetailsBotton: e.target.checked })}
+                    />
+                  )}
+                  label={t('attributeQuickDetailsBotton')}
+                />
               </AccordionDetails>
             </Accordion>
             <Accordion>