Merge branch 'dev' into dev2

interface/src/components/routing/useRouterTab.ts

@@ -1,12 +1,12 @@
-import { useMatch, useResolvedPath } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 export const useRouterTab = () => {
-  // const loc = useLocation().pathname;
-  // const routerTab = loc.substring(0, loc.lastIndexOf('/')) ? loc : false;
+  const loc = useLocation().pathname;
+  const routerTab = loc.substring(0, loc.lastIndexOf('/')) ? loc : false;
 
-  const routerTabPath = useResolvedPath(':tab');
-  const routerTabPathMatch = useMatch(routerTabPath.pathname);
-  const routerTab = routerTabPathMatch?.params?.tab || false;
+  // const routerTabPath = useResolvedPath(':tab');
+  // const routerTabPathMatch = useMatch(routerTabPath.pathname);
+  // const routerTab = routerTabPathMatch?.params?.tab || false;
 
   return { routerTab } as const;
 };

interface/src/framework/ap/AccessPoint.tsx

@@ -22,8 +22,12 @@ const AccessPoint: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label={LL.STATUS_OF(LL.ACCESS_POINT(1))} />
-        <Tab value="settings" label={LL.SETTINGS_OF(LL.ACCESS_POINT(1))} disabled={!authenticatedContext.me.admin} />
+        <Tab value="/ap/status" label={LL.STATUS_OF(LL.ACCESS_POINT(1))} />
+        <Tab
+          value="/ap/settings"
+          label={LL.SETTINGS_OF(LL.ACCESS_POINT(1))}
+          disabled={!authenticatedContext.me.admin}
+        />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<APStatusForm />} />
@@ -36,7 +40,7 @@ const AccessPoint: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="/*" element={<Navigate replace to="status" />} />
+        <Route path="*" element={<Navigate replace to="/ap/status" />} />
       </Routes>
     </>
   );

interface/src/framework/mqtt/Mqtt.tsx

@@ -21,8 +21,8 @@ const Mqtt: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label={LL.STATUS_OF('MQTT')} />
-        <Tab value="settings" label={LL.SETTINGS_OF('MQTT')} disabled={!authenticatedContext.me.admin} />
+        <Tab value="/mqtt/status" label={LL.STATUS_OF('MQTT')} />
+        <Tab value="/mqtt/settings" label={LL.SETTINGS_OF('MQTT')} disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<MqttStatusForm />} />
@@ -34,7 +34,7 @@ const Mqtt: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="/*" element={<Navigate replace to="status" />} />
+        <Route path="*" element={<Navigate replace to="/mqtt/status" />} />
       </Routes>
     </>
   );

interface/src/framework/network/NetworkConnection.tsx

@@ -44,9 +44,13 @@ const NetworkConnection: FC = () => {
       }}
     >
       <RouterTabs value={routerTab}>
-        <Tab value="status" label={LL.STATUS_OF(LL.NETWORK(1))} />
-        <Tab value="scan" label={LL.NETWORK_SCAN()} disabled={!authenticatedContext.me.admin} />
-        <Tab value="settings" label={LL.SETTINGS_OF(LL.NETWORK(1))} disabled={!authenticatedContext.me.admin} />
+        <Tab value="/network/status" label={LL.STATUS_OF(LL.NETWORK(1))} />
+        <Tab value="/network/scan" label={LL.NETWORK_SCAN()} disabled={!authenticatedContext.me.admin} />
+        <Tab
+          value="/network/settings"
+          label={LL.SETTINGS_OF(LL.NETWORK(1))}
+          disabled={!authenticatedContext.me.admin}
+        />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<NetworkStatusForm />} />
@@ -66,7 +70,7 @@ const NetworkConnection: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="/*" element={<Navigate replace to="status" />} />
+        <Route path="*" element={<Navigate replace to="/network/status" />} />
       </Routes>
     </WiFiConnectionContext.Provider>
   );

interface/src/framework/ntp/NetworkTime.tsx

@@ -20,8 +20,8 @@ const NetworkTime: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label={LL.STATUS_OF('NTP')} />
-        <Tab value="settings" label={LL.SETTINGS_OF('NTP')} disabled={!authenticatedContext.me.admin} />
+        <Tab value="/ntp/status" label={LL.STATUS_OF('NTP')} />
+        <Tab value="/ntp/settings" label={LL.SETTINGS_OF('NTP')} disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<NTPStatusForm />} />
@@ -33,7 +33,7 @@ const NetworkTime: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="/*" element={<Navigate replace to="status" />} />
+        <Route path="*" element={<Navigate replace to="/ntp/status" />} />
       </Routes>
     </>
   );

interface/src/framework/security/Security.tsx

@@ -17,13 +17,13 @@ const Security: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="users" label={LL.MANAGE_USERS()} />
-        <Tab value="settings" label={LL.SETTINGS_OF(LL.SECURITY(1))} />
+        <Tab value="/security/users" label={LL.MANAGE_USERS()} />
+        <Tab value="/security/settings" label={LL.SETTINGS_OF(LL.SECURITY(1))} />
       </RouterTabs>
       <Routes>
         <Route path="users" element={<ManageUsersForm />} />
         <Route path="settings" element={<SecuritySettingsForm />} />
-        <Route path="/*" element={<Navigate replace to="users" />} />
+        <Route path="*" element={<Navigate replace to="/security/users" />} />
       </Routes>
     </>
   );

interface/src/framework/system/System.tsx

@@ -23,10 +23,10 @@ const System: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label={LL.STATUS_OF(LL.SYSTEM(1))} />
-        <Tab value="log" label={LL.LOG_OF(LL.SYSTEM(2))} />
-        <Tab value="ota" label={LL.SETTINGS_OF('OTA')} disabled={!me.admin} />
-        <Tab value="upload" label={LL.UPLOAD_DOWNLOAD()} disabled={!me.admin} />
+        <Tab value="/system/status" label={LL.STATUS_OF(LL.SYSTEM(1))} />
+        <Tab value="/system/log" label={LL.LOG_OF(LL.SYSTEM(2))} />
+        <Tab value="/system/ota" label={LL.SETTINGS_OF('OTA')} disabled={!me.admin} />
+        <Tab value="/system/upload" label={LL.UPLOAD_DOWNLOAD()} disabled={!me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<SystemStatusForm />} />
@@ -47,7 +47,7 @@ const System: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="/*" element={<Navigate replace to="status" />} />
+        <Route path="*" element={<Navigate replace to="/system/status" />} />
       </Routes>
     </>
   );

interface/src/framework/system/UploadFileForm.tsx

@@ -28,7 +28,7 @@ const UploadFileForm: FC = () => {
   const { send: getSchedule, onSuccess: onSuccessGetSchedule } = useRequest(EMSESP.getSchedule(), {
     immediate: false
   });
-  const { send: getInfo, onSuccess: onSuccessGetInfo } = useRequest((data) => EMSESP.API(data), {
+  const { send: getAPI, onSuccess: onGetAPI } = useRequest((data) => EMSESP.API(data), {
     immediate: false
   });
 
@@ -71,26 +71,26 @@ const UploadFileForm: FC = () => {
         type: 'text/plain'
       })
     );
-    anchor.download = 'emsesp_' + endpoint + '.json';
+    anchor.download = 'emsesp_' + endpoint;
     anchor.click();
     URL.revokeObjectURL(anchor.href);
     toast.info(LL.DOWNLOAD_SUCCESSFUL());
   };
 
   onSuccessGetSettings((event) => {
-    saveFile(event.data, 'settings');
+    saveFile(event.data, 'settings.json');
   });
   onSuccessgetCustomizations((event) => {
-    saveFile(event.data, 'customizations');
+    saveFile(event.data, 'customizations.json');
   });
   onSuccessGetEntities((event) => {
-    saveFile(event.data, 'entities');
+    saveFile(event.data, 'entities.json');
   });
   onSuccessGetSchedule((event) => {
-    saveFile(event.data, 'schedule');
+    saveFile(event.data, 'schedule.json');
   });
-  onSuccessGetInfo((event) => {
-    saveFile(event.data, 'info');
+  onGetAPI((event) => {
+    saveFile(event.data, event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt');
   });
 
   const downloadSettings = async () => {
@@ -112,13 +112,17 @@ const UploadFileForm: FC = () => {
   };
 
   const downloadSchedule = async () => {
-    await getSchedule().catch((error) => {
-      toast.error(error.message);
-    });
+    await getSchedule()
+      .catch((error) => {
+        toast.error(error.message);
+      })
+      .finally(() => {
+        toast.info(LL.DOWNLOAD_SUCCESSFUL());
+      });
   };
 
-  const downloadInfo = async () => {
-    await getInfo({ device: 'system', entity: 'info', id: 0 }).catch((error) => {
+  const callAPI = async (device: string, entity: string) => {
+    await getAPI({ device, entity, id: 0 }).catch((error) => {
       toast.error(error.message);
     });
   };
@@ -143,8 +147,34 @@ const UploadFileForm: FC = () => {
       <SingleUpload onDrop={startUpload} onCancel={cancelUpload} isUploading={isUploading} progress={progress} />
       {!isUploading && (
         <>
-          <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-            {LL.DOWNLOAD(0)}
+          <Typography sx={{ pt: 4, pb: 2 }} variant="h6" color="primary">
+            {LL.DOWNLOAD(0)}&nbsp;{LL.SUPPORT_INFORMATION()}
+          </Typography>
+          <Box color="warning.main">
+            <Typography mb={1} variant="body2">
+              {LL.HELP_INFORMATION_4()}
+            </Typography>
+          </Box>
+          <Button
+            startIcon={<DownloadIcon />}
+            variant="outlined"
+            color="primary"
+            onClick={() => callAPI('system', 'info')}
+          >
+            {LL.SUPPORT_INFORMATION()}
+          </Button>
+          <Button
+            sx={{ ml: 2 }}
+            startIcon={<DownloadIcon />}
+            variant="outlined"
+            color="primary"
+            onClick={() => callAPI('system', 'allvalues')}
+          >
+            All Values
+          </Button>
+
+          <Typography sx={{ pt: 4, pb: 2 }} variant="h6" color="primary">
+            {LL.DOWNLOAD(0)}&nbsp;{LL.SETTINGS()}
           </Typography>
           <Box color="warning.main">
             <Typography mb={1} variant="body2">
@@ -179,14 +209,6 @@ const UploadFileForm: FC = () => {
           <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={downloadSchedule}>
             {LL.SCHEDULE(0)}
           </Button>
-          <Box color="warning.main">
-            <Typography mt={2} mb={1} variant="body2">
-              {LL.DOWNLOAD(0)}&nbsp;{LL.SUPPORT_INFORMATION()}
-            </Typography>
-          </Box>
-          <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={downloadInfo}>
-            {LL.SUPPORT_INFORMATION()}
-          </Button>
         </>
       )}
     </>

interface/src/i18n/en/index.ts

@@ -169,7 +169,7 @@ const en: Translation = {
   HELP_INFORMATION_1: 'Visit the online wiki to get instructions on how to configure EMS-ESP',
   HELP_INFORMATION_2: 'For live community chat join our Discord server',
   HELP_INFORMATION_3: 'To request a feature or report a bug',
-  HELP_INFORMATION_4: 'remember to download and attach your system information for a faster response when reporting an issue',
+  HELP_INFORMATION_4: 'remember to download and attach your support information for a faster response when reporting an issue',
   HELP_INFORMATION_5: 'EMS-ESP is a free and open-source project. Please support its future development by giving it a star on Github!',
   UPLOAD: 'Upload',
   DOWNLOAD: '{{D|d|d}}ownload',

interface/src/project/Dashboard.tsx

@@ -20,15 +20,15 @@ const Dashboard: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="devices" label={LL.DEVICES()} />
-        <Tab value="sensors" label={LL.SENSORS()} />
-        <Tab value="status" label="Status" />
+        <Tab value="/dashboard/devices" label={LL.DEVICES()} />
+        <Tab value="/dashboard/sensors" label={LL.SENSORS()} />
+        <Tab value="/dashboard/status" label="Status" />
       </RouterTabs>
       <Routes>
         <Route path="devices" element={<DashboardDevices />} />
         <Route path="sensors" element={<DashboardSensors />} />
         <Route path="status" element={<DashboardStatus />} />
-        <Route path="/*" element={<Navigate replace to="devices" />} />
+        <Route path="*" element={<Navigate replace to="/dashboard/devices" />} />
       </Routes>
     </>
   );

interface/src/project/Help.tsx

@@ -1,17 +1,42 @@
 import CommentIcon from '@mui/icons-material/CommentTwoTone';
 import EastIcon from '@mui/icons-material/East';
+import DownloadIcon from '@mui/icons-material/GetApp';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import MenuBookIcon from '@mui/icons-material/MenuBookTwoTone';
-import { Box, List, ListItem, ListItemAvatar, ListItemText, Link, Typography } from '@mui/material';
+import { Box, List, ListItem, ListItemAvatar, ListItemText, Link, Typography, Button } from '@mui/material';
+import { useRequest } from 'alova';
+import { toast } from 'react-toastify';
 import type { FC } from 'react';
 import { SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
+import * as EMSESP from 'project/api';
 
 const Help: FC = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.HELP_OF(''));
 
-  const uploadURL = window.location.origin + '/system/upload';
+  const { send: getAPI, onSuccess: onGetAPI } = useRequest((data) => EMSESP.API(data), {
+    immediate: false
+  });
+
+  onGetAPI((event) => {
+    const anchor = document.createElement('a');
+    anchor.href = URL.createObjectURL(
+      new Blob([JSON.stringify(event.data, null, 2)], {
+        type: 'text/plain'
+      })
+    );
+    anchor.download = 'emsesp_' + event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt';
+    anchor.click();
+    URL.revokeObjectURL(anchor.href);
+    toast.info(LL.DOWNLOAD_SUCCESSFUL());
+  });
+
+  const callAPI = async (device: string, entity: string) => {
+    await getAPI({ device, entity, id: 0 }).catch((error) => {
+      toast.error(error.message);
+    });
+  };
 
   return (
     <SectionContent title={LL.SUPPORT_INFORMATION()} titleGutter>
@@ -55,15 +80,28 @@ const Help: FC = () => {
               {LL.CLICK_HERE()}
             </Link>
             <br />
-            <i>({LL.HELP_INFORMATION_4()}</i>&nbsp;
-            <Link href={uploadURL} color="primary">
-              {LL.UPLOAD()}
-            </Link>
-            )
           </ListItemText>
         </ListItem>
       </List>
 
+      <Box color="warning.main">
+        <Typography mb={1} variant="body2">
+          {LL.HELP_INFORMATION_4()}
+        </Typography>
+      </Box>
+      <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={() => callAPI('system', 'info')}>
+        {LL.SUPPORT_INFORMATION()}
+      </Button>
+      <Button
+        sx={{ ml: 2 }}
+        startIcon={<DownloadIcon />}
+        variant="outlined"
+        color="primary"
+        onClick={() => callAPI('system', 'allvalues')}
+      >
+        All Values
+      </Button>
+
       <Box border={1} p={1} mt={4} color="orange">
         <Typography align="center" variant="subtitle1" color="orange">
           <b>{LL.HELP_INFORMATION_5()}</b>

interface/src/project/Settings.tsx

@@ -18,17 +18,17 @@ const Settings: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="application" label={LL.APPLICATION_SETTINGS()} />
-        <Tab value="customization" label={LL.CUSTOMIZATIONS()} />
-        <Tab value="scheduler" label={LL.SCHEDULER()} />
-        <Tab value="customentities" label={LL.CUSTOM_ENTITIES(0)} />
+        <Tab value="/settings/application" label={LL.APPLICATION_SETTINGS()} />
+        <Tab value="/settings/customization" label={LL.CUSTOMIZATIONS()} />
+        <Tab value="/settings/scheduler" label={LL.SCHEDULER()} />
+        <Tab value="/settings/customentities" label={LL.CUSTOM_ENTITIES(0)} />
       </RouterTabs>
       <Routes>
         <Route path="application" element={<SettingsApplication />} />
         <Route path="customization" element={<SettingsCustomization />} />
         <Route path="scheduler" element={<SettingsScheduler />} />
         <Route path="customentities" element={<SettingsEntities />} />
-        <Route path="/*" element={<Navigate replace to="application" />} />
+        <Route path="*" element={<Navigate replace to="/settings/application" />} />
       </Routes>
     </>
   );

interface/src/project/api.ts

@@ -19,7 +19,8 @@ import { alovaInstance } from 'api/endpoints';
 export const readCoreData = () => alovaInstance.Get<CoreData>(`/rest/coreData`);
 export const readDeviceData = (id: number) =>
   alovaInstance.Get<DeviceData>('/rest/deviceData', {
-    params: { id },
+    // alovaInstance.Get<DeviceData>(`/rest/deviceData/${id}`, {
+    params: { id }, // TODO remove later
     responseType: 'arraybuffer' // uses msgpack
   });
 export const writeDeviceValue = (data: any) => alovaInstance.Post('/rest/writeDeviceValue', data);
@@ -53,8 +54,9 @@ export const getSchedule = () => alovaInstance.Get('/rest/getSchedule');
 
 // SettingsCustomization
 export const readDeviceEntities = (id: number) =>
-  alovaInstance.Get<DeviceEntity[]>('/rest/deviceEntities', {
-    params: { id },
+  // alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities/${id}`, {
+  alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities`, {
+    params: { id }, // TODO remove later
     responseType: 'arraybuffer',
     transformData(data: any) {
       return data.map((de: DeviceEntity) => ({ ...de, o_m: de.m, o_cn: de.cn, o_mi: de.mi, o_ma: de.ma }));