#1665

interface/src/components/layout/LayoutMenu.tsx

@@ -1,53 +1,188 @@
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import DeviceHubIcon from '@mui/icons-material/DeviceHub';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import AssessmentIcon from '@mui/icons-material/Assessment';
+import CategoryIcon from '@mui/icons-material/Category';
+import ConstructionIcon from '@mui/icons-material/Construction';
 import InfoIcon from '@mui/icons-material/Info';
-import LockIcon from '@mui/icons-material/Lock';
+import MoreTimeIcon from '@mui/icons-material/MoreTime';
+import PersonIcon from '@mui/icons-material/Person';
+import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
+import SensorsIcon from '@mui/icons-material/Sensors';
 import SettingsIcon from '@mui/icons-material/Settings';
-import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
-import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-import TuneIcon from '@mui/icons-material/Tune';
-import { Divider, List } from '@mui/material';
-import { useContext } from 'react';
-import type { FC } from 'react';
+import {
+  Divider,
+  List,
+  Box,
+  Button,
+  Popover,
+  Avatar,
+  MenuItem,
+  TextField,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText
+} from '@mui/material';
 
+import { useContext, useState } from 'react';
+import type { Locales } from 'i18n/i18n-types';
+import type { FC, ChangeEventHandler } from 'react';
 import LayoutMenuItem from 'components/layout/LayoutMenuItem';
-
 import { AuthenticatedContext } from 'contexts/authentication';
 
-import { useI18nContext } from 'i18n/i18n-react';
+import DEflag from 'i18n/DE.svg';
+import FRflag from 'i18n/FR.svg';
+import GBflag from 'i18n/GB.svg';
+import ITflag from 'i18n/IT.svg';
+import NLflag from 'i18n/NL.svg';
+import NOflag from 'i18n/NO.svg';
+import PLflag from 'i18n/PL.svg';
+import SKflag from 'i18n/SK.svg';
+import SVflag from 'i18n/SV.svg';
+import TRflag from 'i18n/TR.svg';
+
+import { I18nContext } from 'i18n/i18n-react';
+import { loadLocaleAsync } from 'i18n/i18n-util.async';
 
 const LayoutMenu: FC = () => {
-  const authenticatedContext = useContext(AuthenticatedContext);
-  const { LL } = useI18nContext();
+  const { me, signOut } = useContext(AuthenticatedContext);
+  const { locale, LL, setLocale } = useContext(I18nContext);
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const open = Boolean(anchorEl);
+  const id = anchorEl ? 'app-menu-popover' : undefined;
+
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({ target }) => {
+    const loc = target.value as Locales;
+    localStorage.setItem('lang', loc);
+    await loadLocaleAsync(loc);
+    setLocale(loc);
+  };
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
 
   return (
     <>
-      <List disablePadding component="nav">
-        <LayoutMenuItem icon={DashboardIcon} label={LL.DASHBOARD()} to={`/dashboard`} />
-        <LayoutMenuItem
-          icon={TuneIcon}
-          label={LL.SETTINGS_OF('')}
-          to={`/settings`}
-          disabled={!authenticatedContext.me.admin}
-        />
-        <LayoutMenuItem icon={InfoIcon} label={LL.HELP_OF('')} to={`/help`} />
+      <List component="nav">
+        <LayoutMenuItem icon={CategoryIcon} label={LL.DEVICES()} to={`/devices`} />
+        <LayoutMenuItem icon={SensorsIcon} label={LL.SENSORS()} to={`/sensors`} />
         <Divider />
+        <LayoutMenuItem icon={ConstructionIcon} label={LL.CUSTOMIZATIONS()} to={`/customizations`} />
+        <LayoutMenuItem icon={MoreTimeIcon} label={LL.SCHEDULER()} to={`/scheduler`} />
+        <LayoutMenuItem icon={PlaylistAddIcon} label={LL.CUSTOM_ENTITIES(0)} to={`/customentities`} />
       </List>
-      <List disablePadding component="nav">
-        <LayoutMenuItem icon={SettingsEthernetIcon} label={LL.NETWORK(0)} to="/network" />
-        <LayoutMenuItem icon={SettingsInputAntennaIcon} label={LL.ACCESS_POINT(0)} to="/ap" />
-        <LayoutMenuItem icon={AccessTimeIcon} label="NTP" to="/ntp" />
-        <LayoutMenuItem icon={DeviceHubIcon} label="MQTT" to="/mqtt" />
-        <LayoutMenuItem
-          icon={LockIcon}
-          label={LL.SECURITY(0)}
-          to="/security"
-          disabled={!authenticatedContext.me.admin}
-        />
-        <LayoutMenuItem icon={SettingsIcon} label={LL.SYSTEM(0)} to="/system" />
+      <List style={{ marginTop: `auto` }}>
+        <LayoutMenuItem icon={AssessmentIcon} label={LL.STATUS_OF('')} to="/status" />
+        <LayoutMenuItem icon={SettingsIcon} label={LL.SETTINGS(0)} disabled={!me.admin} to="/settings" />
+        <LayoutMenuItem icon={InfoIcon} label={LL.HELP_OF('')} to={`/help`} />
       </List>
+      <Divider />
+      <List>
+        <ListItem disablePadding onClick={handleClick}>
+          <ListItemButton>
+            <ListItemIcon>
+              <AccountCircleIcon />
+            </ListItemIcon>
+            <ListItemText>{me.username}</ListItemText>
+          </ListItemButton>
+        </ListItem>
+      </List>
+
+      <Popover
+        id={id}
+        sx={{ mt: 1 }}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center'
+        }}
+      >
+        <Box
+          p={2}
+          sx={{
+            borderRadius: 2,
+            border: '2px solid grey'
+          }}
+        >
+          <List>
+            <ListItem disablePadding>
+              <Avatar sx={{ bgcolor: '#b1395f', color: 'white' }}>
+                <PersonIcon />
+              </Avatar>
+              <ListItemText sx={{ pl: 2 }} primary={me.username} secondary={me.admin ? LL.ADMIN() : LL.GUEST()} />
+            </ListItem>
+          </List>
+          <Box p={2}>
+            <TextField
+              name="locale"
+              InputProps={{ style: { fontSize: 10 } }}
+              variant="outlined"
+              value={locale}
+              onChange={onLocaleSelected}
+              size="small"
+              select
+            >
+              <MenuItem key="de" value="de">
+                <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
+                &nbsp;DE
+              </MenuItem>
+              <MenuItem key="en" value="en">
+                <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
+                &nbsp;EN
+              </MenuItem>
+              <MenuItem key="fr" value="fr">
+                <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+                &nbsp;FR
+              </MenuItem>
+              <MenuItem key="it" value="it">
+                <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
+                &nbsp;IT
+              </MenuItem>
+              <MenuItem key="nl" value="nl">
+                <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+                &nbsp;NL
+              </MenuItem>
+              <MenuItem key="no" value="no">
+                <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
+                &nbsp;NO
+              </MenuItem>
+              <MenuItem key="pl" value="pl">
+                <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+                &nbsp;PL
+              </MenuItem>
+              <MenuItem key="sk" value="sk">
+                <img src={SKflag} style={{ width: 16, verticalAlign: 'middle' }} />
+                &nbsp;SK
+              </MenuItem>
+              <MenuItem key="sv" value="sv">
+                <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
+                &nbsp;SV
+              </MenuItem>
+              <MenuItem key="tr" value="tr">
+                <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+                &nbsp;TR
+              </MenuItem>
+            </TextField>
+          </Box>
+          <Box>
+            <Button variant="outlined" fullWidth color="primary" onClick={() => signOut(true)}>
+              {LL.SIGN_OUT()}
+            </Button>
+          </Box>
+        </Box>
+      </Popover>
     </>
   );
 };