move system info to download page, add a restart warning on upload

interface/src/framework/system/UploadFileForm.tsx

@@ -1,10 +1,13 @@
+import CancelIcon from '@mui/icons-material/Cancel';
 import DownloadIcon from '@mui/icons-material/GetApp';
-import { Typography, Button, Box } from '@mui/material';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import { Typography, Button, Box, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 import { useRequest } from 'alova';
 import { useState, type FC } from 'react';
 import { toast } from 'react-toastify';
 import RestartMonitor from './RestartMonitor';
 
+import { dialogStyle } from 'CustomTheme';
 import * as SystemApi from 'api/system';
 import { SectionContent, SingleUpload } from 'components';
 
@@ -13,7 +16,8 @@ import * as EMSESP from 'project/api';
 
 const UploadFileForm: FC = () => {
   const { LL } = useI18nContext();
-  const [restarting, setRestarting] = useState<boolean>(false);
+  const [restarting, setRestarting] = useState<boolean>();
+  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
   const [md5, setMd5] = useState<string>();
 
   const { send: getSettings, onSuccess: onSuccessGetSettings } = useRequest(EMSESP.getSettings(), {
@@ -28,6 +32,13 @@ const UploadFileForm: FC = () => {
   const { send: getSchedule, onSuccess: onSuccessGetSchedule } = useRequest(EMSESP.getSchedule(), {
     immediate: false
   });
+  const { send: getInfo, onSuccess: onSuccessGetInfo } = useRequest((data) => EMSESP.API(data), {
+    immediate: false
+  });
+
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
 
   const {
     loading: isUploading,
@@ -45,7 +56,7 @@ const UploadFileForm: FC = () => {
       setMd5(data.md5);
       toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
     } else {
-      setRestarting(true);
+      setConfirmRestart(true);
     }
   });
 
@@ -61,6 +72,19 @@ const UploadFileForm: FC = () => {
     });
   };
 
+  const restart = async () => {
+    await restartCommand()
+      .then(() => {
+        setRestarting(true);
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      })
+      .finally(() => {
+        setConfirmRestart(false);
+      });
+  };
+
   const saveFile = (json: any, endpoint: string) => {
     const anchor = document.createElement('a');
     anchor.href = URL.createObjectURL(
@@ -86,6 +110,9 @@ const UploadFileForm: FC = () => {
   onSuccessGetSchedule((event) => {
     saveFile(event.data, 'schedule');
   });
+  onSuccessGetInfo((event) => {
+    saveFile(event.data, 'info');
+  });
 
   const downloadSettings = async () => {
     await getSettings().catch((error) => {
@@ -111,6 +138,32 @@ const UploadFileForm: FC = () => {
     });
   };
 
+  const downloadInfo = async () => {
+    await getInfo({ device: 'system', entity: 'info', id: 0 }).catch((error) => {
+      toast.error(error.message);
+    });
+  };
+
+  const renderRestartDialog = () => (
+    <Dialog sx={dialogStyle} open={confirmRestart} onClose={() => setConfirmRestart(false)}>
+      <DialogTitle>{LL.UPLOAD() + ' ' + LL.SUCCESSFUL()}</DialogTitle>
+      <DialogContent dividers>{LL.RESTART_TEXT()}</DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmRestart(false)}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button startIcon={<PowerSettingsNewIcon />} variant="outlined" onClick={restart} color="primary">
+          {LL.RESTART()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
   const content = () => (
     <>
       <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
@@ -140,7 +193,7 @@ const UploadFileForm: FC = () => {
           </Button>
           <Box color="warning.main">
             <Typography mt={2} mb={1} variant="body2">
-              {LL.DOWNLOAD_CUSTOMIZATION_TEXT()}{' '}
+              {LL.DOWNLOAD_CUSTOMIZATION_TEXT()}
             </Typography>
           </Box>
           <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={downloadCustomizations}>
@@ -157,14 +210,23 @@ const UploadFileForm: FC = () => {
           </Button>
           <Box color="warning.main">
             <Typography mt={2} mb={1} variant="body2">
-              {LL.DOWNLOAD_SCHEDULE_TEXT()}{' '}
+              {LL.DOWNLOAD_SCHEDULE_TEXT()}
             </Typography>
           </Box>
           <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>
         </>
       )}
+      {renderRestartDialog()}
     </>
   );
   return (

interface/src/i18n/de/index.ts

@@ -171,7 +171,6 @@ const de: Translation = {
   HELP_INFORMATION_3: 'Um neue Funktionen anzufragen oder Fehler zu melden, eröffnen Sie ein Issue auf Github',
   HELP_INFORMATION_4: 'Bitte laden Sie die System-Details und hängen Sie sie an das Support-Issue an. ',
   HELP_INFORMATION_5: 'EMS-ESP ist ein freies Open-Source Projekt. Bitte unterstützen Sie die zukünftige Entwicklung mit einem "Star" auf Github!',
-  SUPPORT_INFO: 'Support Info',
   UPLOAD: 'Hochladen',
   DOWNLOAD: '{{H|h|h}}erunterladen',
   ABORTED: 'abgebrochen',

interface/src/i18n/en/index.ts

@@ -171,7 +171,6 @@ const en: Translation = {
   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_5: 'EMS-ESP is a free and open-source project. Please support its future development by giving it a star on Github!',
-  SUPPORT_INFO: 'Support Info',
   UPLOAD: 'Upload',
   DOWNLOAD: '{{D|d|d}}ownload',
   ABORTED: 'aborted',

interface/src/i18n/fr/index.ts

@@ -171,7 +171,6 @@ const fr: Translation = {
   HELP_INFORMATION_3: 'Pour demander une fonctionnalité ou signaler un problème',
   HELP_INFORMATION_4: 'n\'oubliez pas de télécharger et de joindre les informations relatives à votre système pour obtenir une réponse plus rapide lorsque vous signalez un problème',
   HELP_INFORMATION_5: 'EMS-ESP est un projet libre et open-source. Merci de soutenir son développement futur en lui donnant une étoile sur Github !',
-  SUPPORT_INFO: 'Information de support',
   UPLOAD: 'Upload',
   DOWNLOAD: '{{D|d|d}}ownload',
   ABORTED: 'annulé',

interface/src/i18n/it/index.ts

@@ -173,7 +173,6 @@ const it: Translation = {
   HELP_INFORMATION_3: 'Per richiedere una funzionalità o segnalare un errore',
   HELP_INFORMATION_4: 'ricordati di scaricare e allegare le informazioni del tuo sistema per una risposta più rapida quando segnali un problema',
   HELP_INFORMATION_5: 'EMS-ESP è un progetto gratuito e open-source. Supporta il suo sviluppo futuro assegnandogli una stella su Github!',
-  SUPPORT_INFO: 'Info Supporto',
   UPLOAD: 'Carica',
   DOWNLOAD: 'Scarica',
   ABORTED: 'Annullato',

interface/src/i18n/nl/index.ts

@@ -171,7 +171,6 @@ const nl: Translation = {
   HELP_INFORMATION_3: 'Om een nieuwe feature te vragen of een bug te rapporteren',
   HELP_INFORMATION_4: 'zorg dat je ook je systeem details zijn toevoeged voor een sneller antwoord',
   HELP_INFORMATION_5: 'EMS-ESP is een gratis en open source project. Steun ons met een Star op Github!',
-  SUPPORT_INFO: 'Support Info',
   UPLOAD: 'Upload',
   DOWNLOAD: '{{D|d|d}}ownload',
   ABORTED: 'afgebroken',

interface/src/i18n/no/index.ts

@@ -171,7 +171,6 @@ const no: Translation = {
   HELP_INFORMATION_3: 'For å be om en ny funksjon eller melde feil',
   HELP_INFORMATION_4: 'husk å laste ned og legg ved din systeminformasjon for en raskere respons når du rapporterer et problem',
   HELP_INFORMATION_5: 'EMS-ESP er gratis og åpen kildekode. Bidra til utviklingen ved å gi oss en stjerne på GitHub!',
-  SUPPORT_INFO: 'Supportinfo',
   UPLOAD: 'Opplasning',
   DOWNLOAD: '{{N|n|n}}edlasting',
   ABORTED: 'avbrutt',

interface/src/i18n/pl/index.ts

@@ -171,7 +171,6 @@ const pl: BaseTranslation = {
   HELP_INFORMATION_3: 'Aby zaproponować nową funkcjonalność lub zgłosić problem',
   HELP_INFORMATION_4: 'Zgłaszając problem, nie zapomnij dołączyć informacji o swoim systemie!',
   HELP_INFORMATION_5: 'EMS-ESP jest darmowym projektem typu open-source. Aby go wesprzeć, rozważ przyznanie nam gwiazdki na Github!',
-  SUPPORT_INFO: 'Pobierz informacje',
   UPLOAD: 'Wysyłanie',
   DOWNLOAD: '{{P|p||P}}obier{{anie|z||z}}',
   ABORTED: 'zostało przerwane!',

interface/src/i18n/sv/index.ts

@@ -171,7 +171,6 @@ const sv: Translation = {
   HELP_INFORMATION_3: 'Önska en ny funktion eller rapportera en bugg',
   HELP_INFORMATION_4: 'Bifoga din systeminformation för snabbare hantering när du rapporterar ett problem',
   HELP_INFORMATION_5: 'EMS-ESP är gratis och är öppen källkod. Bidra till utvecklingen genom att ge oss en stjärna på GitHub!',
-  SUPPORT_INFO: 'Supportinfo',
   UPLOAD: 'Uppladdning',
   DOWNLOAD: '{{N|n|n}}edladdning',
   ABORTED: 'Avbruten',

interface/src/i18n/tr/index.ts

@@ -171,7 +171,6 @@ const tr: Translation = {
   HELP_INFORMATION_3: 'Yeni bir özellik talep etmek yada hata bildirmek için',
   HELP_INFORMATION_4: 'Bir sorun bildirirken daha hızlı bir dönüş için sistem bilginizi indirip eklemeyi unutmayın',
   HELP_INFORMATION_5: 'EMS-ESP ücretsiz ve açık kaynaklı bir projedir. Lütfen geliştirmeyi desteklemek için Githubda projeye yıldız verin!',
-  SUPPORT_INFO: 'Destek Bilgisi',
   UPLOAD: 'Yükleme',
   DOWNLOAD: '{{İ|i|i}}İndirme',
   ABORTED: 'iptal edildi',

interface/src/project/DashboardDevices.tsx

@@ -53,9 +53,9 @@ import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 
 const DashboardDevices: FC = () => {
-  const [size, setSize] = useState([0, 0]);
   const { me } = useContext(AuthenticatedContext);
   const { LL } = useI18nContext();
+  const [size, setSize] = useState([0, 0]);
   const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>();
   const [onlyFav, setOnlyFav] = useState(false);
   const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false);
@@ -485,6 +485,7 @@ const DashboardDevices: FC = () => {
           bottom: 0,
           top: 128,
           zIndex: 'modal',
+          maxHeight: () => size[1] - 189,
           border: '1px solid #177ac9'
         }}
       >

interface/src/project/HelpInformation.tsx

@@ -1,12 +1,8 @@
 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 { Typography, Button, Box, List, ListItem, ListItemText, Link, ListItemAvatar } from '@mui/material';
+import { Typography, Box, List, ListItem, ListItemText, Link, ListItemAvatar } from '@mui/material';
-import { useRequest } from 'alova';
-import { toast } from 'react-toastify';
-import * as EMSESP from './api';
 import type { FC } from 'react';
 
 import { SectionContent } from 'components';
@@ -16,30 +12,7 @@ import { useI18nContext } from 'i18n/i18n-react';
 const HelpInformation: FC = () => {
   const { LL } = useI18nContext();
 
-  const { send: API, onSuccess: onSuccessAPI } = useRequest((data) => EMSESP.API(data), {
+  const uploadURL = window.location.origin + '/system/upload';
-    immediate: false
-  });
-
-  onSuccessAPI((event) => {
-    const a = document.createElement('a');
-    const filename = 'emsesp_info.txt';
-    a.href = URL.createObjectURL(
-      new Blob([JSON.stringify(event.data, null, 2)], {
-        type: 'text/plain'
-      })
-    );
-    a.setAttribute('download', filename);
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    toast.info(LL.DOWNLOAD_SUCCESSFUL());
-  });
-
-  const callAPI = async () => {
-    await API({ device: 'system', entity: 'info', id: 0 }).catch((error) => {
-      toast.error(error.message);
-    });
-  };
 
   return (
     <SectionContent title={LL.SUPPORT_INFORMATION()} titleGutter>
@@ -83,17 +56,11 @@ const HelpInformation: FC = () => {
               {LL.CLICK_HERE()}
             </Link>
             <br />
-            <i>({LL.HELP_INFORMATION_4()}</i>&nbsp;&nbsp;
+            <i>({LL.HELP_INFORMATION_4()}</i>&nbsp;
-            <Button
+            <Link href={uploadURL} color="primary">
-              startIcon={<DownloadIcon />}
+              {LL.UPLOAD()}
-              size="small"
+            </Link>
-              variant="outlined"
+            )
-              color="primary"
-              onClick={() => callAPI()}
-            >
-              {LL.SUPPORT_INFO()}
-            </Button>
-            &nbsp;)
           </ListItemText>
         </ListItem>
       </List>

mock-api/server.js

@@ -2162,7 +2162,7 @@ rest_server.post(UPLOAD_FILE_ENDPOINT, progress_middleware, upload.single('file'
     console.log(req.file);
     console.log('ext: ' + ext);
 
-    if (ext === 'bin') {
+    if (ext === 'bin' || ext === 'json') {
       return res.sendStatus(200);
     } else if (ext === 'md5') {
       return res.json({ md5: 'ef4304fc4d9025a58dcf25d71c882d2c' });