tidy up support download - https://github.com/emsesp/EMS-ESP32/discussions/1489

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
   });
 
@@ -89,8 +89,9 @@ const UploadFileForm: FC = () => {
   onSuccessGetSchedule((event) => {
     saveFile(event.data, 'schedule');
   });
-  onSuccessGetInfo((event) => {
+  onGetAPI((event) => {
-    saveFile(event.data, 'info');
+    const filename = event.sendArgs[0].device + '_' + event.sendArgs[0].entity;
+    saveFile(event.data, filename);
   });
 
   const downloadSettings = async () => {
@@ -112,13 +113,17 @@ const UploadFileForm: FC = () => {
   };
 
   const downloadSchedule = async () => {
-    await getSchedule().catch((error) => {
+    await getSchedule()
+      .catch((error) => {
         toast.error(error.message);
+      })
+      .finally(() => {
+        toast.info(LL.DOWNLOAD_SUCCESSFUL());
       });
   };
 
-  const downloadInfo = async () => {
+  const callAPI = async (device: string, entity: string) => {
-    await getInfo({ device: 'system', entity: 'info', id: 0 }).catch((error) => {
+    await getAPI({ device, entity, id: 0 }).catch((error) => {
       toast.error(error.message);
     });
   };
@@ -143,8 +148,34 @@ const UploadFileForm: FC = () => {
       <SingleUpload onDrop={startUpload} onCancel={cancelUpload} isUploading={isUploading} progress={progress} />
       {!isUploading && (
         <>
-          <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
+          <Typography sx={{ pt: 4, pb: 2 }} variant="h6" color="primary">
-            {LL.DOWNLOAD(0)}
+            {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 +210,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/project/Help.tsx

@@ -1,17 +1,40 @@
 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 + '.json';
+    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,16 +78,28 @@ const Help: FC = () => {
               {LL.CLICK_HERE()}
             </Link>
             <br />
-            <i>({LL.HELP_INFORMATION_4()}</i>&nbsp;
-            <EastIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
-            <Link href={uploadURL} color="primary">
-              {LL.UPLOAD_DOWNLOAD()}
-            </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>