diff --git a/interface/src/app/settings/DownloadUpload.tsx b/interface/src/app/settings/DownloadUpload.tsx index 75ebe91a0..3ef8f7927 100644 --- a/interface/src/app/settings/DownloadUpload.tsx +++ b/interface/src/app/settings/DownloadUpload.tsx @@ -1,6 +1,8 @@ +import { useState } from 'react'; import { toast } from 'react-toastify'; import DownloadIcon from '@mui/icons-material/GetApp'; +import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import { Box, Button, Divider, Link, Typography } from '@mui/material'; import * as SystemApi from 'api/system'; @@ -15,8 +17,10 @@ import { getDevVersion, getStableVersion } from 'api/system'; import { useRequest } from 'alova/client'; import type { APIcall } from 'app/main/types'; +import RestartMonitor from 'app/status/RestartMonitor'; import { FormLoader, + MessageBox, SectionContent, SingleUpload, useLayoutTitle @@ -26,6 +30,9 @@ import { useI18nContext } from 'i18n/i18n-react'; const DownloadUpload = () => { const { LL } = useI18nContext(); + const [restarting, setRestarting] = useState(false); + const [restartNeeded, setRestartNeeded] = useState(false); + const { send: sendSettings } = useRequest(getSettings(), { immediate: false }).onSuccess((event) => { @@ -41,7 +48,7 @@ const DownloadUpload = () => { const { send: sendEntities } = useRequest(getEntities(), { immediate: false }).onSuccess((event) => { - saveFile(event.data, 'entities.json'); + saveFile(event.data, 'custom_entities.json'); }); const { send: sendSchedule } = useRequest(getSchedule(), { @@ -65,6 +72,20 @@ const DownloadUpload = () => { error } = useRequest(SystemApi.readHardwareStatus); + const { send: restartCommand } = useRequest(SystemApi.restart(), { + immediate: false + }); + + const restart = async () => { + await restartCommand() + .then(() => { + setRestarting(true); + }) + .catch((error: Error) => { + toast.error(error.message); + }); + }; + // called immediately to get the latest version, on page load // set immediate to false to avoid calling the API on page load and GH blocking while testing! const { data: latestVersion } = useRequest(getStableVersion, { @@ -100,14 +121,14 @@ const DownloadUpload = () => { return data.esp_platform; }; - const saveFile = (json: unknown, endpoint: string) => { + 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_' + endpoint; + anchor.download = 'emsesp_' + filename; anchor.click(); URL.revokeObjectURL(anchor.href); toast.info(LL.DOWNLOAD_SUCCESSFUL()); @@ -284,12 +305,27 @@ const DownloadUpload = () => { )} - + + + {restartNeeded && ( + + + + )} ); }; - return {content()}; + return ( + {restarting ? : content()} + ); }; export default DownloadUpload; diff --git a/interface/src/components/upload/DragNdrop.tsx b/interface/src/components/upload/DragNdrop.tsx index f31402cd2..a917ca862 100644 --- a/interface/src/components/upload/DragNdrop.tsx +++ b/interface/src/components/upload/DragNdrop.tsx @@ -1,5 +1,4 @@ -// Code inspired by https://medium.com/@dprincecoder/creating-a-drag-and-drop-file-upload-component-in-react-a-step-by-step-guide-4d93b6cc21e0 -// (c) Prince Azubuike +// Code inspired by Prince Azubuike from https://medium.com/@dprincecoder/creating-a-drag-and-drop-file-upload-component-in-react-a-step-by-step-guide-4d93b6cc21e0 import { type ChangeEvent, useRef, useState } from 'react'; import CancelIcon from '@mui/icons-material/Cancel'; diff --git a/interface/src/components/upload/SingleUpload.tsx b/interface/src/components/upload/SingleUpload.tsx index 4fb55ee74..72a8e9b63 100644 --- a/interface/src/components/upload/SingleUpload.tsx +++ b/interface/src/components/upload/SingleUpload.tsx @@ -2,23 +2,17 @@ import { useEffect, useState } from 'react'; import { toast } from 'react-toastify'; import CancelIcon from '@mui/icons-material/Cancel'; -import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import { Box, Button, LinearProgress, Typography } from '@mui/material'; import * as SystemApi from 'api/system'; import { useRequest } from 'alova/client'; -import RestartMonitor from 'app/status/RestartMonitor'; -import MessageBox from 'components/MessageBox'; import { useI18nContext } from 'i18n/i18n-react'; import DragNdrop from './DragNdrop'; -const SingleUpload = () => { +const SingleUpload = ({ setRestartNeeded }) => { const [md5, setMd5] = useState(); - const [restarting, setRestarting] = useState(false); - const [restartNeeded, setRestartNeeded] = useState(false); - const [file, setFile] = useState(); const { LL } = useI18nContext(); @@ -39,17 +33,6 @@ const SingleUpload = () => { } }); - const { send: restartCommand } = useRequest(SystemApi.restart(), { - immediate: false - }); - - const restart = async () => { - await restartCommand().catch((error: Error) => { - toast.error(error.message); - }); - setRestarting(true); - }; - useEffect(async () => { if (file) { console.log('going to upload file ', file.name); @@ -75,7 +58,7 @@ const SingleUpload = () => { {LL.UPLOAD_TEXT()} - {isUploading || restartNeeded ? ( + {isUploading ? ( <> { /> - {!restartNeeded && ( - - )} + ) : ( @@ -111,21 +92,6 @@ const SingleUpload = () => { {'MD5: ' + md5} )} - - {restartNeeded && ( - - - - )} - - {restarting && } ); };