URL updates

interface/src/app/main/Help.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CommentIcon from '@mui/icons-material/CommentTwoTone';
@@ -16,18 +16,17 @@ import {
   ListItemAvatar,
   ListItemButton,
   ListItemText,
-  Paper,
   Stack,
-  Typography,
-  styled
+  Typography
 } from '@mui/material';
 
 import { useRequest } from 'alova/client';
 import { SectionContent, useLayoutTitle } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
+import { saveFile } from 'utils/file';
 
-import { API } from '../../api/app';
+import { API, callAction } from '../../api/app';
 import type { APIcall } from './types';
 
 const Help = () => {
@@ -36,33 +35,79 @@ const Help = () => {
 
   const { me } = useContext(AuthenticatedContext);
 
-  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
-    immediate: false
-  }).onSuccess((event) => {
-    const anchor = document.createElement('a');
-    anchor.href = URL.createObjectURL(
-      new Blob([JSON.stringify(event.data, null, 2)], {
-        type: 'text/plain'
-      })
-    );
+  const [customSupportIMG, setCustomSupportIMG] = useState<string | null>(null);
+  const [customSupportHTML, setCustomSupportHTML] = useState<string | null>(null);
 
-    anchor.download =
-      'emsesp_' + event.args[0].device + '_' + event.args[0].entity + '.txt';
-    anchor.click();
-    URL.revokeObjectURL(anchor.href);
-    toast.info(LL.DOWNLOAD_SUCCESSFUL());
-  });
+  useRequest(() => callAction({ action: 'customSupport' })).onSuccess(
+    (event: { data: { img_url: string; html: string[] } }) => {
+      if (event.data) {
+        setCustomSupportIMG(event.data.img_url);
+        setCustomSupportHTML(event.data.html.join('<br/>'));
+      }
+    }
+  );
 
-  const callAPI = async (device: string, cmd: string) => {
-    await sendAPI({ device, cmd, id: 0 }).catch((error: Error) => {
+  const { send: sendExportAllValues } = useRequest(
+    () => callAction({ action: 'export', param: 'allvalues' }),
+    {
+      immediate: false
+    }
+  )
+    .onSuccess((event) => {
+      saveFile(event.data, 'allvalues', '.txt');
+      toast.info(LL.DOWNLOAD_SUCCESSFUL());
+    })
+    .onError((error) => {
+      toast.error(error.message);
+    });
+
+  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
+    immediate: false
+  })
+    .onSuccess((event) => {
+      saveFile(event.data, 'system_info', '.json');
+      toast.info(LL.DOWNLOAD_SUCCESSFUL());
+    })
+    .onError((error) => {
       toast.error(error.message);
     });
-  };
 
   return (
     <>
       <SectionContent>
-        {me.admin ? (
+        <Stack
+          padding={1}
+          mb={2}
+          direction="row"
+          divider={<Divider orientation="vertical" flexItem />}
+          sx={{
+            borderRadius: 3,
+            border: '2px solid grey',
+            justifyContent: 'space-evenly',
+            alignItems: 'center'
+          }}
+        >
+          <Typography variant="subtitle1">
+            {customSupportHTML ? (
+              <div dangerouslySetInnerHTML={{ __html: customSupportHTML }} />
+            ) : (
+              LL.HELP_INFORMATION_5()
+            )}
+          </Typography>
+          <Box
+            component="img"
+            sx={{
+              maxHeight: 250
+            }}
+            src={
+              customSupportIMG
+                ? customSupportIMG
+                : 'https://emsesp.org/_media/images/installer.jpeg'
+            }
+          />
+        </Stack>
+
+        {me.admin && (
           <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
             <ListItem>
               <ListItemButton component="a" href="https://emsesp.org">
@@ -100,31 +145,6 @@ const Help = () => {
               </ListItemButton>
             </ListItem>
           </List>
-        ) : (
-          <Stack
-            spacing={1}
-            padding={1}
-            direction="row"
-            divider={<Divider orientation="vertical" flexItem />}
-            sx={{
-              borderRadius: 3,
-              border: '2px solid grey',
-              justifyContent: 'space-around',
-              alignItems: 'center'
-            }}
-          >
-            <Typography border="red" variant="subtitle1">
-              {LL.HELP_INFORMATION_5()}
-            </Typography>
-            <Box
-              padding={1}
-              component="img"
-              sx={{
-                maxHeight: { xs: 100, md: 250 }
-              }}
-              src="https://emsesp.org/_media/images/installer.jpeg"
-            />
-          </Stack>
         )}
 
         <Box p={2} color="warning.main">
@@ -135,7 +155,7 @@ const Help = () => {
             startIcon={<DownloadIcon />}
             variant="outlined"
             color="primary"
-            onClick={() => callAPI('system', 'info')}
+            onClick={() => sendAPI({ device: 'system', cmd: 'info', id: 0 })}
           >
             {LL.DOWNLOAD(1)}&nbsp;{LL.SUPPORT_INFORMATION(0)}
           </Button>
@@ -146,7 +166,7 @@ const Help = () => {
           startIcon={<DownloadIcon />}
           variant="outlined"
           color="primary"
-          onClick={() => callAPI('system', 'allvalues')}
+          onClick={() => sendExportAllValues()}
         >
           {LL.DOWNLOAD(1)}&nbsp;{LL.ALLVALUES()}
         </Button>