Merge pull request #3 from drolx:fix-and-improve-device-rows

Fix and improve device rows
drolx · Oct 20, 2024 · 1652e34 · 1652e34
2 parents d141e20 + c8b4aa6
commit 1652e34
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 14 deletions.
diff --git a/src/common/components/DesktopMenu.jsx b/src/common/components/DesktopMenu.jsx
@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Paper, Button, Avatar, Menu, MenuItem, ListItemIcon, Divider, Typography, } from '@mui/material';
+import SettingsIcon from '@mui/icons-material/Settings';
+import DescriptionIcon from '@mui/icons-material/Description';
+import PersonIcon from '@mui/icons-material/Person';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import { useNavigate } from 'react-router-dom';
+import { sessionActions } from '../../store';
+import { useTranslation } from './LocalizationProvider';
+import { nativePostMessage } from './NativeInterface';
+
+const DesktopMenu = () => {
+    const navigate = useNavigate();
+    const dispatch = useDispatch();
+    const t = useTranslation();
+    const user = useSelector((state) => state.session.user);
+
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    /** TODO: Fix duplicate of logout method */
+    const handleLogout = async () => {
+        setAnchorEl(null);
+
+        const notificationToken = window.localStorage.getItem('notificationToken');
+        if (notificationToken && !user.readonly) {
+            window.localStorage.removeItem('notificationToken');
+            const tokens = user.attributes.notificationTokens?.split(',') || [];
+            if (tokens.includes(notificationToken)) {
+                const updatedUser = {
+                    ...user,
+                    attributes: {
+                        ...user.attributes,
+                        notificationTokens: tokens.length > 1 ? tokens.filter((it) => it !== notificationToken).join(',') : undefined,
+                    },
+                };
+                await fetch(`/api/users/${user.id}`, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(updatedUser),
+                });
+            }
+        }
+
+        await fetch('/api/session', { method: 'DELETE' });
+        nativePostMessage('logout');
+        navigate('/login');
+        dispatch(sessionActions.updateUser(null));
+    };
+    return (
+        <Paper elevation={3}>
+            <Button color="primary" size="large" onClick={handleClick} sx={{ textTransform: 'none' }}>
+                <Avatar color="primary" sx={{ width: 32, height: 32, mr: 1 }}>
+                    <PersonIcon />
+                </Avatar>
+                <Typography sx={{ minWidth: 80 }}>{(user && user.name) ?? t('settingsUser')}</Typography>
+            </Button>
+            <Menu
+                anchorEl={anchorEl}
+                id="account-menu"
+                open={open}
+                onClose={handleClose}
+                onClick={handleClose}
+                transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                PaperProps={{
+                    style: {
+                        width: '200px',
+                        marginTop: '8px',
+                    },
+                }}
+            >
+                <MenuItem onClick={() => navigate(`/settings/user/${user.id}`)}>
+                    <ListItemIcon>
+                        <PersonIcon />
+                    </ListItemIcon>
+                    <Typography>{t('settingsUser')}</Typography>
+                </MenuItem>
+                <Divider />
+                <MenuItem onClick={() => navigate('/reports/route')}>
+                    <ListItemIcon>
+                        <DescriptionIcon />
+                    </ListItemIcon>
+                    <Typography>{t('reportTitle')}</Typography>
+                </MenuItem>
+                <MenuItem onClick={() => navigate('/settings/preferences')}>
+                    <ListItemIcon>
+                        <SettingsIcon />
+                    </ListItemIcon>
+                    <Typography>{t('settingsTitle')}</Typography>
+                </MenuItem>
+                <MenuItem onClick={handleLogout}>
+                    <ListItemIcon>
+                        <ExitToAppIcon />
+                    </ListItemIcon>
+                    <Typography>{t('loginLogout')}</Typography>
+                </MenuItem>
+            </Menu>
+        </Paper>
+    );
+};
+
+export default DesktopMenu;
+
diff --git a/src/common/components/StatusFilterToobar.jsx b/src/common/components/StatusFilterToobar.jsx
@@ -0,0 +1,6 @@
+
+const StatusFilterToobar = () => (
+    <div>
+        {'State Filter'}
+    </div>
+)
diff --git a/src/main/DeviceRow.jsx b/src/main/DeviceRow.jsx
@@ -93,24 +93,25 @@ const DeviceRow = ({ data, index, style }) => {
   const primarySection = () => {
     const time = dayjs(item.lastUpdate).fromNow() ?? 'None';
 
-    return (<div>
-      <div className={classes.mnimalText}>{time}</div>
-      <div>
+    return (<>
+      <span className={classes.mnimalText}>{time}</span>
+      <span>
         {item[devicePrimary]}
         {deviceSecondary && item[deviceSecondary] && ` • ${item[deviceSecondary]}`}
-      </div>
-    </div>)
+      </span>
+    </>)
   };
 
   const secondarySection = () => {
-    return (<div>
+    return (<>
       {position && (
-        <span>{position.address}</span>
+        <Tooltip title={`${position.latitude}, ${position.longitude}`}>
+          <span style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{position.address ?? `${position.latitude}, ${position.longitude}` }</span>
+        </Tooltip>
       )}
-    </div>)
+    </>)
   };
 
-
   return (
     <div style={style}>
       <ListItemButton
@@ -125,12 +126,12 @@ const DeviceRow = ({ data, index, style }) => {
         </ListItemIcon>
         <ListItemText
           primary={primarySection()}
-          primaryTypographyProps={{ noWrap: true, fontSize: '0.85rem' }}
+          primaryTypographyProps={{ noWrap: true, fontSize: '0.85rem', display: 'grid' }}
           secondary={secondarySection()}
           secondaryTypographyProps={{ noWrap: true, fontSize: '0.7rem' }}
         />
         {position && (
-          <div>
+          <div style={{ whiteSpace: 'nowrap' }}>
             <span className={classes.mnimalText}>{formatSpeed(position.speed, speedUnit, t)}</span>
             {position.attributes.hasOwnProperty('alarm') && (
               <Tooltip title={`${t('eventAlarm')}: ${formatAlarm(position.attributes.alarm, t)}`}>

diff --git a/src/main/MainPage.jsx b/src/main/MainPage.jsx
@@ -7,7 +7,7 @@ import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useDispatch, useSelector } from 'react-redux';
 import DeviceList from './DeviceList';
-import BottomMenu from '../common/components/BottomMenu';
+import DesktopMenu from '../common/components/DesktopMenu';
 import StatusCard from '../common/components/StatusCard';
 import { devicesActions } from '../store';
 import usePersistedState from '../common/util/usePersistedState';
@@ -39,6 +39,15 @@ const useStyles = makeStyles((theme) => ({
       width: '100%',
     },
   },
+  menu: {
+    top: 0,
+    right: 0,
+    display: 'flex',
+    position: 'fixed',
+    pointerEvents: 'auto',
+    zIndex: 6,
+    margin: '0.75rem 5rem 0px 0px',
+  },
   header: {
     pointerEvents: 'auto',
     zIndex: 6,
@@ -108,8 +117,13 @@ const MainPage = () => {
           onEventsClick={onEventsClick}
         />
       )}
+      {desktop && (
+        <div className={classes.menu}>
+          <DesktopMenu />
+        </div>
+      )}
       <div className={classes.sidebar}>
-        <Paper square elevation={3} className={classes.header}>
+        <Paper elevation={3} className={classes.header}>
           <MainToolbar
             filteredDevices={filteredDevices}
             devicesOpen={devicesOpen}
@@ -140,7 +154,8 @@ const MainPage = () => {
         </div>
         {desktop && (
           <div className={classes.footer}>
-            <BottomMenu />
+            {/* TODO: Change to device filter toolbar */}
+            {/* <BottomMenu /> */}
           </div>
         )}
       </div>