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>

interface/src/app/main/types.ts

@@ -265,6 +265,12 @@ export interface APIcall {
   cmd: string;
   id: number;
 }
+
+export interface Action {
+  action: string;
+  param?: string; // optional
+}
+
 export interface WriteAnalogSensor {
   id: number;
   gpio: number;

interface/src/app/settings/DownloadUpload.tsx

@@ -18,7 +18,7 @@ import {
 import Grid from '@mui/material/Grid2';
 
 import * as SystemApi from 'api/system';
-import { API, exportData } from 'api/app';
+import { API, callAction } from 'api/app';
 import {
   checkUpgrade,
   getDevVersion,
@@ -37,6 +37,7 @@ import {
   useLayoutTitle
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
+import { saveFile } from 'utils/file';
 
 const DownloadUpload = () => {
   const { LL } = useI18nContext();
@@ -46,11 +47,23 @@ const DownloadUpload = () => {
   const [useDev, setUseDev] = useState<boolean>(false);
   const [upgradeAvailable, setUpgradeAvailable] = useState<boolean>(false);
 
-  const { send: sendExportData } = useRequest((type: string) => exportData(type), {
-    immediate: false
-  })
+  const { send: sendCheckUpgrade } = useRequest(
+    (version: string) => callAction({ action: 'checkUpgrade', param: version }),
+    {
+      immediate: false
+    }
+  ).onSuccess((event) => {
+    setUpgradeAvailable((event.data as { upgradeable: boolean }).upgradeable);
+  });
+
+  const { send: sendExportData } = useRequest(
+    (type: string) => callAction({ action: 'export', param: type }),
+    {
+      immediate: false
+    }
+  )
     .onSuccess((event) => {
-      saveFile(event.data, event.args[0]);
+      saveFile(event.data, event.args[0], '.json');
       toast.info(LL.DOWNLOAD_SUCCESSFUL());
     })
     .onError((error) => {
@@ -83,12 +96,6 @@ const DownloadUpload = () => {
     );
   };
 
-  const { send: sendCheckUpgrade } = useRequest(checkUpgrade, {
-    immediate: false
-  }).onSuccess((event) => {
-    setUpgradeAvailable(event.data.upgradeable);
-  });
-
   // called immediately to get the latest version, on page load
   const { data: latestVersion } = useRequest(getStableVersion, {
     // uncomment next 2 lines for testing, uses https://github.com/emsesp/EMS-ESP32/releases/download/v3.6.5/EMS-ESP-3_6_5-ESP32-16MB+.bin
@@ -102,7 +109,7 @@ const DownloadUpload = () => {
     // immediate: false,
     // initialData: '3.7.0-dev.32'
   }).onSuccess((event) => {
-    void sendCheckUpgrade({ version: event.data });
+    void sendCheckUpgrade(event.data);
   });
 
   const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
@@ -142,18 +149,6 @@ const DownloadUpload = () => {
     setRestarting(true);
   };
 
-  const saveFile = (json: unknown, filename: string) => {
-    const anchor = document.createElement('a');
-    anchor.href = URL.createObjectURL(
-      new Blob([JSON.stringify(json, null, 2)], {
-        type: 'text/plain'
-      })
-    );
-    anchor.download = 'emsesp_' + filename + '.json';
-    anchor.click();
-    URL.revokeObjectURL(anchor.href);
-  };
-
   useLayoutTitle(LL.DOWNLOAD_UPLOAD());
 
   const internet_live =