updates to web pages

interface/src/project/DeviceIcon.tsx

@@ -1,12 +1,13 @@
+import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
 import { AiOutlineControl, AiOutlineGateway, AiOutlineAlert } from 'react-icons/ai';
 import { CgSmartHomeBoiler } from 'react-icons/cg';
-
 import { FaSolarPanel } from 'react-icons/fa';
 import { GiHeatHaze } from 'react-icons/gi';
-import { MdThermostatAuto, MdOutlineSensors, MdOutlineExtension, MdOutlineDevices } from 'react-icons/md';
+import { MdThermostatAuto, MdOutlineSensors, MdOutlineDevices } from 'react-icons/md';
 import { TiFlowSwitch } from 'react-icons/ti';
 import { VscVmConnect } from 'react-icons/vsc';
 import { DeviceType } from './types';
+
 import type { FC } from 'react';
 
 interface DeviceIconProps {
@@ -41,7 +42,7 @@ const DeviceIcon: FC<DeviceIconProps> = ({ type_id }) => {
     case DeviceType.EXTENSION:
       return <MdOutlineDevices />;
     case DeviceType.CUSTOM:
-      return <MdOutlineExtension />;
+      return <PlaylistAddIcon sx={{ color: 'lightblue', fontSize: 24, verticalAlign: 'middle' }} />;
     default:
       return null;
   }

interface/src/project/Devices.tsx

@@ -33,7 +33,7 @@ import { useSort, SortToggleType } from '@table-library/react-table-library/sort
 import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
 import { useRequest } from 'alova';
-import { useState, useContext, useEffect, useCallback, useLayoutEffect } from 'react';
+import { useState, useEffect, useCallback, useLayoutEffect } from 'react';
 
 import { IconContext } from 'react-icons';
 import { useNavigate } from 'react-router-dom';
@@ -50,12 +50,10 @@ import type { Device, DeviceValue } from './types';
 import type { FC } from 'react';
 import { dialogStyle } from 'CustomTheme';
 import { ButtonRow, SectionContent, MessageBox, useLayoutTitle } from 'components';
-import { AuthenticatedContext } from 'contexts/authentication';
 
 import { useI18nContext } from 'i18n/i18n-react';
 
 const Devices: FC = () => {
-  const { me } = useContext(AuthenticatedContext);
   const { LL } = useI18nContext();
   const [size, setSize] = useState([0, 0]);
   const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>();
@@ -422,11 +420,8 @@ const Devices: FC = () => {
   };
 
   const renderCoreData = () => (
-    <IconContext.Provider value={{ color: 'lightblue', size: '24', style: { verticalAlign: 'middle' } }}>
+    <IconContext.Provider value={{ color: 'lightblue', size: '18', style: { verticalAlign: 'middle' } }}>
       {!coreData.connected && <MessageBox my={2} level="error" message={LL.EMS_BUS_WARNING()} />}
-      {/* {coreData.connected && coreData.devices.length === 0 && (
-        <MessageBox my={2} level="warning" message={LL.EMS_BUS_SCANNING()} />
-      )} */}
 
       {coreData.connected && (
         <Table data={{ nodes: coreData.devices }} select={device_select} theme={device_theme} layout={{ custom: true }}>
@@ -589,7 +584,7 @@ const Devices: FC = () => {
                     <Cell>{renderNameCell(dv)}</Cell>
                     <Cell>{formatValue(LL, dv.v, dv.u)}</Cell>
                     <Cell stiff>
-                      {dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
+                      {dv.c && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
                         <IconButton size="small" onClick={() => showDeviceValue(dv)}>
                           {dv.v === '' && dv.c ? (
                             <PlayArrowIcon color="primary" sx={{ fontSize: 16 }} />
@@ -621,9 +616,7 @@ const Devices: FC = () => {
           onSave={deviceValueDialogSave}
           selectedItem={selectedDeviceValue}
           writeable={
-            me.admin &&
-            selectedDeviceValue.c !== undefined &&
-            !hasMask(selectedDeviceValue.id, DeviceEntityMask.DV_READONLY)
+            selectedDeviceValue.c !== undefined && !hasMask(selectedDeviceValue.id, DeviceEntityMask.DV_READONLY)
           }
           validator={deviceValueItemValidation(selectedDeviceValue)}
           progress={submitting}

interface/src/project/EMSStatus.tsx

@@ -206,7 +206,7 @@ const EMSStatus: FC = () => {
           </ListItem>
           <ListItem>
             <ListItemAvatar>
-              <Avatar>
+              <Avatar sx={{ bgcolor: theme.palette.success.main }}>
                 <DeviceHubIcon />
               </Avatar>
             </ListItemAvatar>
@@ -254,19 +254,20 @@ const EMSStatus: FC = () => {
               {LL.REFRESH()}
             </Button>
           </Box>
-          <Box flexWrap="nowrap" whiteSpace="nowrap">
-            <ButtonRow>
-              <Button
-                startIcon={<PermScanWifiIcon />}
-                variant="outlined"
-                color="primary"
-                disabled={!me.admin}
-                onClick={() => setConfirmScan(true)}
-              >
-                {LL.SCAN_DEVICES()}
-              </Button>
-            </ButtonRow>
-          </Box>
+          {me.admin && (
+            <Box flexWrap="nowrap" whiteSpace="nowrap">
+              <ButtonRow>
+                <Button
+                  startIcon={<PermScanWifiIcon />}
+                  variant="outlined"
+                  color="primary"
+                  onClick={() => setConfirmScan(true)}
+                >
+                  {LL.SCAN_DEVICES()}
+                </Button>
+              </ButtonRow>
+            </Box>
+          )}
         </Box>
       </>
     );

interface/src/project/Sensors.tsx

@@ -8,7 +8,7 @@ import { useSort, SortToggleType } from '@table-library/react-table-library/sort
 import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
 import { useRequest } from 'alova';
-import { useState, useContext, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
 
 import { toast } from 'react-toastify';
 
@@ -27,12 +27,12 @@ import { useI18nContext } from 'i18n/i18n-react';
 
 const Sensors: FC = () => {
   const { LL } = useI18nContext();
-  const { me } = useContext(AuthenticatedContext);
   const [selectedTemperatureSensor, setSelectedTemperatureSensor] = useState<TemperatureSensor>();
   const [selectedAnalogSensor, setSelectedAnalogSensor] = useState<AnalogSensor>();
   const [temperatureDialogOpen, setTemperatureDialogOpen] = useState<boolean>(false);
   const [analogDialogOpen, setAnalogDialogOpen] = useState<boolean>(false);
   const [creating, setCreating] = useState<boolean>(false);
+  const { me } = useContext(AuthenticatedContext);
 
   const { data: sensorData, send: fetchSensorData } = useRequest(() => EMSESP.readSensorData(), {
     initialData: {
@@ -51,8 +51,6 @@ const Sensors: FC = () => {
     immediate: false
   });
 
-  const isAdmin = me.admin;
-
   const common_theme = useTheme({
     BaseRow: `
       font-size: 14px;
@@ -222,10 +220,8 @@ const Sensors: FC = () => {
   }
 
   const updateTemperatureSensor = (ts: TemperatureSensor) => {
-    if (isAdmin) {
-      setSelectedTemperatureSensor(ts);
-      setTemperatureDialogOpen(true);
-    }
+    setSelectedTemperatureSensor(ts);
+    setTemperatureDialogOpen(true);
   };
 
   const onTemperatureDialogClose = () => {
@@ -248,11 +244,9 @@ const Sensors: FC = () => {
   };
 
   const updateAnalogSensor = (as: AnalogSensor) => {
-    if (isAdmin) {
-      setCreating(false);
-      setSelectedAnalogSensor(as);
-      setAnalogDialogOpen(true);
-    }
+    setCreating(false);
+    setSelectedAnalogSensor(as);
+    setAnalogDialogOpen(true);
   };
 
   const onAnalogDialogClose = () => {
@@ -453,7 +447,7 @@ const Sensors: FC = () => {
               {LL.REFRESH()}
             </Button>
           </Box>
-          {sensorData?.analog_enabled === true && (
+          {sensorData?.analog_enabled === true && me.admin && (
             <Button
               variant="outlined"
               color="primary"