updates to settng page

interface/src/components/upload/SingleUpload.tsx

@@ -63,7 +63,7 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, isUploading, pr
     <Box
       {...getRootProps({
         sx: {
-          py: 8,
+          py: 4,
           px: 2,
           borderWidth: 2,
           borderRadius: 2,

interface/src/framework/Settings.tsx

@@ -1,24 +1,172 @@
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import CancelIcon from '@mui/icons-material/Cancel';
 import CastIcon from '@mui/icons-material/Cast';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import ImportExportIcon from '@mui/icons-material/ImportExport';
 import LockIcon from '@mui/icons-material/Lock';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import TuneIcon from '@mui/icons-material/Tune';
-import { List, ListItem, ListItemAvatar, ListItemText, Avatar, ListItemButton, ListItemIcon } from '@mui/material';
+
+import {
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Avatar,
+  ListItemButton,
+  ListItemIcon,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Box
+} from '@mui/material';
+import { useRequest } from 'alova';
+import { useState, type FC } from 'react';
 import { Link } from 'react-router-dom';
-import type { FC } from 'react';
-import { SectionContent, useLayoutTitle } from 'components';
+import { toast } from 'react-toastify';
+import RestartMonitor from './system/RestartMonitor';
+import { dialogStyle } from 'CustomTheme';
+import * as SystemApi from 'api/system';
+import { ButtonRow, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
 const Settings: FC = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.SETTINGS(0));
 
-  return (
-    <SectionContent>
+  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
+  const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
+  const [processing, setProcessing] = useState<boolean>(false);
+  const [restarting, setRestarting] = useState<boolean>();
+
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
+
+  const { send: factoryResetCommand } = useRequest(SystemApi.factoryReset(), {
+    immediate: false
+  });
+
+  const { send: partitionCommand } = useRequest(SystemApi.partition(), {
+    immediate: false
+  });
+
+  const restart = async () => {
+    setProcessing(true);
+    await restartCommand()
+      .then(() => {
+        setRestarting(true);
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      })
+      .finally(() => {
+        setConfirmRestart(false);
+        setProcessing(false);
+      });
+  };
+
+  const factoryReset = async () => {
+    setProcessing(true);
+    await factoryResetCommand()
+      .then(() => {
+        setRestarting(true);
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      })
+      .finally(() => {
+        setConfirmFactoryReset(false);
+        setProcessing(false);
+      });
+  };
+
+  const partition = async () => {
+    setProcessing(true);
+    await partitionCommand()
+      .then(() => {
+        setRestarting(true);
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      })
+      .finally(() => {
+        setConfirmRestart(false);
+        setProcessing(false);
+      });
+  };
+
+  const renderRestartDialog = () => (
+    <Dialog sx={dialogStyle} open={confirmRestart} onClose={() => setConfirmRestart(false)}>
+      <DialogTitle>{LL.RESTART()}</DialogTitle>
+      <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmRestart(false)}
+          disabled={processing}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<PowerSettingsNewIcon />}
+          variant="outlined"
+          onClick={restart}
+          disabled={processing}
+          color="primary"
+        >
+          {LL.RESTART()}
+        </Button>
+        <Button
+          startIcon={<PowerSettingsNewIcon />}
+          variant="outlined"
+          onClick={partition}
+          disabled={processing}
+          color="primary"
+        >
+          EMS-ESP-Loader
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
+  const renderFactoryResetDialog = () => (
+    <Dialog sx={dialogStyle} open={confirmFactoryReset} onClose={() => setConfirmFactoryReset(false)}>
+      <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
+      <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmFactoryReset(false)}
+          disabled={processing}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<SettingsBackupRestoreIcon />}
+          variant="outlined"
+          onClick={factoryReset}
+          disabled={processing}
+          color="error"
+        >
+          {LL.FACTORY_RESET()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
+  const content = () => (
+    <>
       <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
         <ListItem
           disablePadding
@@ -164,8 +312,38 @@ const Settings: FC = () => {
           </ListItemButton>
         </ListItem>
       </List>
-    </SectionContent>
+      {renderRestartDialog()}
+      {renderFactoryResetDialog()}
+      <Box display="flex" flexWrap="wrap">
+        <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
+          <ButtonRow>
+            <Button
+              startIcon={<PowerSettingsNewIcon />}
+              variant="outlined"
+              color="primary"
+              onClick={() => setConfirmRestart(true)}
+            >
+              {LL.RESTART()}
+            </Button>
+          </ButtonRow>
+        </Box>
+        <Box flexWrap="nowrap" whiteSpace="nowrap">
+          <ButtonRow>
+            <Button
+              startIcon={<SettingsBackupRestoreIcon />}
+              variant="outlined"
+              onClick={() => setConfirmFactoryReset(true)}
+              color="error"
+            >
+              {LL.FACTORY_RESET()}
+            </Button>
+          </ButtonRow>
+        </Box>
+      </Box>
+    </>
   );
+
+  return <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>;
 };
 
 export default Settings;

interface/src/framework/system/SystemStatusForm.tsx

@@ -1,42 +1,20 @@
 import AppsIcon from '@mui/icons-material/Apps';
 import BuildIcon from '@mui/icons-material/Build';
-import CancelIcon from '@mui/icons-material/Cancel';
 import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
 import DevicesIcon from '@mui/icons-material/Devices';
 import FolderIcon from '@mui/icons-material/Folder';
 import MemoryIcon from '@mui/icons-material/Memory';
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import SdCardAlertIcon from '@mui/icons-material/SdCardAlert';
 import SdStorageIcon from '@mui/icons-material/SdStorage';
-import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import TimerIcon from '@mui/icons-material/Timer';
-import {
-  Avatar,
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText
-} from '@mui/material';
+import { Avatar, Box, Button, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
 
 import { useRequest } from 'alova';
-import { useContext, useState } from 'react';
-import { toast } from 'react-toastify';
-import RestartMonitor from './RestartMonitor';
-import SystemStatusVersionDialog from './SystemStatusVersionDialog';
 import type { FC } from 'react';
 
-import { dialogStyle } from 'CustomTheme';
 import * as SystemApi from 'api/system';
 import { ButtonRow, FormLoader, SectionContent } from 'components';
-import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 
 function formatNumber(num: number) {
@@ -46,138 +24,8 @@ function formatNumber(num: number) {
 const SystemStatusForm: FC = () => {
   const { LL } = useI18nContext();
 
-  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
-  const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
-  const [processing, setProcessing] = useState<boolean>(false);
-  const [restarting, setRestarting] = useState<boolean>();
-  const [versionDialogOpen, setVersionDialogOpen] = useState<boolean>(false);
-
-  const { me } = useContext(AuthenticatedContext);
-
-  const { send: restartCommand } = useRequest(SystemApi.restart(), {
-    immediate: false
-  });
-
-  const { send: factoryResetCommand } = useRequest(SystemApi.factoryReset(), {
-    immediate: false
-  });
-
-  const { send: partitionCommand } = useRequest(SystemApi.partition(), {
-    immediate: false
-  });
-
   const { data: data, send: loadData, error } = useRequest(SystemApi.readSystemStatus, { force: true });
 
-  const restart = async () => {
-    setProcessing(true);
-    await restartCommand()
-      .then(() => {
-        setRestarting(true);
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      })
-      .finally(() => {
-        setConfirmRestart(false);
-        setProcessing(false);
-      });
-  };
-
-  const factoryReset = async () => {
-    setProcessing(true);
-    await factoryResetCommand()
-      .then(() => {
-        setRestarting(true);
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      })
-      .finally(() => {
-        setConfirmFactoryReset(false);
-        setProcessing(false);
-      });
-  };
-
-  const partition = async () => {
-    setProcessing(true);
-    await partitionCommand()
-      .then(() => {
-        setRestarting(true);
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      })
-      .finally(() => {
-        setConfirmRestart(false);
-        setProcessing(false);
-      });
-  };
-
-  const renderRestartDialog = () => (
-    <Dialog sx={dialogStyle} open={confirmRestart} onClose={() => setConfirmRestart(false)}>
-      <DialogTitle>{LL.RESTART()}</DialogTitle>
-      <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setConfirmRestart(false)}
-          disabled={processing}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<PowerSettingsNewIcon />}
-          variant="outlined"
-          onClick={restart}
-          disabled={processing}
-          color="primary"
-        >
-          {LL.RESTART()}
-        </Button>
-        {data?.has_loader && (
-          <Button
-            startIcon={<PowerSettingsNewIcon />}
-            variant="outlined"
-            onClick={partition}
-            disabled={processing}
-            color="primary"
-          >
-            EMS-ESP-Loader
-          </Button>
-        )}
-      </DialogActions>
-    </Dialog>
-  );
-
-  const renderFactoryResetDialog = () => (
-    <Dialog sx={dialogStyle} open={confirmFactoryReset} onClose={() => setConfirmFactoryReset(false)}>
-      <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
-      <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setConfirmFactoryReset(false)}
-          disabled={processing}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<SettingsBackupRestoreIcon />}
-          variant="outlined"
-          onClick={factoryReset}
-          disabled={processing}
-          color="error"
-        >
-          {LL.FACTORY_RESET()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
@@ -193,9 +41,6 @@ const SystemStatusForm: FC = () => {
               </Avatar>
             </ListItemAvatar>
             <ListItemText primary={LL.EMS_ESP_VER()} secondary={data.emsesp_version} />
-            <Button color="primary" onClick={() => setVersionDialogOpen(true)}>
-              {LL.VERSION_CHECK(0)}
-            </Button>
           </ListItem>
           <Divider variant="inset" component="li" />
           <ListItem>
@@ -316,48 +161,12 @@ const SystemStatusForm: FC = () => {
               </Button>
             </ButtonRow>
           </Box>
-          {me.admin && (
-            <Box flexWrap="nowrap" whiteSpace="nowrap">
-              <ButtonRow>
-                <Button
-                  startIcon={<PowerSettingsNewIcon />}
-                  variant="outlined"
-                  color="primary"
-                  onClick={() => setConfirmRestart(true)}
-                >
-                  {LL.RESTART()}
-                </Button>
-                <Button
-                  startIcon={<SettingsBackupRestoreIcon />}
-                  variant="outlined"
-                  onClick={() => setConfirmFactoryReset(true)}
-                  color="error"
-                >
-                  {LL.FACTORY_RESET()}
-                </Button>
-              </ButtonRow>
-            </Box>
-          )}
         </Box>
-        {renderRestartDialog()}
-        {renderFactoryResetDialog()}
       </>
     );
   };
 
-  return (
-    <SectionContent title={LL.STATUS_OF(LL.SYSTEM(1))}>
-      {restarting ? <RestartMonitor /> : content()}
-      {data && (
-        <SystemStatusVersionDialog
-          open={versionDialogOpen}
-          onClose={() => setVersionDialogOpen(false)}
-          version={data.emsesp_version}
-          platform={data.esp_platform}
-        />
-      )}
-    </SectionContent>
-  );
+  return <SectionContent title={LL.STATUS_OF(LL.SYSTEM(1))}>{content()}</SectionContent>;
 };
 
 export default SystemStatusForm;

interface/src/framework/system/SystemStatusVersionDialog.tsx

@@ -1,112 +0,0 @@
-import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, Typography } from '@mui/material';
-import { useRequest } from 'alova';
-import { useCallback, useEffect } from 'react';
-import { dialogStyle } from 'CustomTheme';
-import * as SystemApi from 'api/system';
-
-import MessageBox from 'components/MessageBox';
-import { useI18nContext } from 'i18n/i18n-react';
-
-type SystemStatusVersionDialogProps = {
-  open: boolean;
-  onClose: () => void;
-  version: string;
-  platform: string;
-};
-
-const SystemStatusVersionDialog = ({ open, onClose, version, platform }: SystemStatusVersionDialogProps) => {
-  const { LL } = useI18nContext();
-  const { send: getLatestVersion, data: latestVersion } = useRequest(SystemApi.getStableVersion, {
-    immediate: false,
-    force: true
-  });
-  const { send: getLatestDevVersion, data: latestDevVersion } = useRequest(SystemApi.getDevVersion, {
-    immediate: false,
-    force: true
-  });
-
-  const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
-  const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
-
-  const STABLE_RELNOTES_URL = 'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
-  const DEV_RELNOTES_URL = 'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
-
-  const uploadURL = window.location.origin + '/settings/upload';
-
-  const connected = latestVersion && latestDevVersion;
-
-  const getVersions = useCallback(async () => {
-    await getLatestVersion();
-    await getLatestDevVersion();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    if (open) {
-      void getVersions();
-    }
-  }, [getVersions, open]);
-
-  const getBinURL = (v: string) => 'EMS-ESP-' + v.replaceAll('.', '_') + '-' + platform.replaceAll('-', '_') + '.bin';
-
-  return (
-    <Dialog sx={dialogStyle} open={open} onClose={onClose}>
-      <DialogTitle>{LL.VERSION_CHECK(1)}</DialogTitle>
-      <DialogContent dividers>
-        <MessageBox my={0} level="info" message={LL.VERSION_ON() + ' ' + version + ' (' + platform + ')'} />
-        {latestVersion && (
-          <Box mt={2} mb={2}>
-            {LL.THE_LATEST()}&nbsp;<b>{LL.OFFICIAL()}</b>&nbsp;{LL.RELEASE_IS()}&nbsp;<b>{latestVersion}</b>
-            &nbsp;(
-            <Link target="_blank" href={STABLE_RELNOTES_URL} color="primary">
-              {LL.RELEASE_NOTES()}
-            </Link>
-            )&nbsp;(
-            <Link
-              target="_blank"
-              href={STABLE_URL + 'v' + latestVersion + '/' + getBinURL(latestVersion)}
-              color="primary"
-            >
-              {LL.DOWNLOAD(1)}
-            </Link>
-            )
-          </Box>
-        )}
-        {latestDevVersion && (
-          <Box mt={2} mb={2}>
-            {LL.THE_LATEST()}&nbsp;<b>{LL.DEVELOPMENT()}</b>&nbsp;{LL.RELEASE_IS()}&nbsp;
-            <b>{latestDevVersion}</b>
-            &nbsp;(
-            <Link target="_blank" href={DEV_RELNOTES_URL} color="primary">
-              {LL.RELEASE_NOTES()}
-            </Link>
-            )&nbsp;(
-            <Link target="_blank" href={DEV_URL + getBinURL(latestDevVersion)} color="primary">
-              {LL.DOWNLOAD(1)}
-            </Link>
-            )
-          </Box>
-        )}
-        {connected && (
-          <Box color="warning.main" mt={2}>
-            <Typography variant="body2">
-              {LL.USE()}&nbsp;
-              <Link href={uploadURL} color="primary">
-                {LL.UPLOAD()}
-              </Link>
-              &nbsp;{LL.SYSTEM_APPLY_FIRMWARE()}
-            </Typography>
-          </Box>
-        )}
-        {!connected && <MessageBox my={2} level="warning" message="No internet connection" />}
-      </DialogContent>
-      <DialogActions>
-        <Button variant="outlined" onClick={onClose} color="secondary">
-          {LL.CLOSE()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default SystemStatusVersionDialog;

interface/src/framework/system/UploadDownload.tsx

@@ -1,12 +1,12 @@
 import DownloadIcon from '@mui/icons-material/GetApp';
-import { Typography, Button, Box } from '@mui/material';
+import { Typography, Button, Box, Link } from '@mui/material';
 import { useRequest } from 'alova';
 import { useState, type FC } from 'react';
 import { toast } from 'react-toastify';
 import RestartMonitor from './RestartMonitor';
 
 import * as SystemApi from 'api/system';
-import { SectionContent, SingleUpload, useLayoutTitle } from 'components';
+import { FormLoader, SectionContent, SingleUpload, useLayoutTitle } from 'components';
 
 import { useI18nContext } from 'i18n/i18n-react';
 import * as EMSESP from 'project/api';
@@ -32,6 +32,26 @@ const UploadDownload: FC = () => {
     immediate: false
   });
 
+  const { data: data, send: loadData, error } = useRequest(SystemApi.readSystemStatus, { force: true });
+
+  const { data: latestVersion } = useRequest(SystemApi.getStableVersion, {
+    immediate: true,
+    force: true
+  });
+  const { data: latestDevVersion } = useRequest(SystemApi.getDevVersion, {
+    immediate: true,
+    force: true
+  });
+
+  const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
+  const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
+
+  const STABLE_RELNOTES_URL = 'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
+  const DEV_RELNOTES_URL = 'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
+
+  const getBinURL = (v: string) =>
+    'EMS-ESP-' + v.replaceAll('.', '_') + '-' + data.esp_platform.replaceAll('-', '_') + '.bin';
+
   const {
     loading: isUploading,
     uploading: progress,
@@ -129,88 +149,158 @@ const UploadDownload: FC = () => {
 
   useLayoutTitle(LL.UPLOAD_DOWNLOAD());
 
-  const content = () => (
-    <>
-      <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-        {LL.UPLOAD()}
-      </Typography>
-      <Box mb={2} color="warning.main">
-        <Typography variant="body2">
-          {LL.UPLOAD_TEXT()}
-          <br />
-          <br />
-          {LL.RESTART_TEXT(1)}.
-        </Typography>
-      </Box>
-      {md5 && (
-        <Box mb={2}>
-          <Typography variant="body2">{'MD5: ' + md5}</Typography>
-        </Box>
-      )}
-      <SingleUpload onDrop={startUpload} onCancel={cancelUpload} isUploading={isUploading} progress={progress} />
-      {!isUploading && (
-        <>
-          <Typography sx={{ pt: 4, pb: 2 }} variant="h6" color="primary">
-            {LL.DOWNLOAD(0)}&nbsp;{LL.SUPPORT_INFORMATION(1)}
-          </Typography>
-          <Button
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => callAPI('system', 'info')}
-          >
-            {LL.SUPPORT_INFORMATION(0)}
-          </Button>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => callAPI('system', 'allvalues')}
-          >
-            All Values
-          </Button>
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    }
 
-          <Typography sx={{ pt: 4, pb: 2 }} variant="h6" color="primary">
-            {LL.DOWNLOAD(0)}&nbsp;{LL.SETTINGS(1)}
+    return (
+      <>
+        <Typography sx={{ pb: 2 }} variant="h6" color="primary">
+          {LL.EMS_ESP_VER()}
+        </Typography>
+        <Box p={2} border="2px solid grey" borderRadius={2}>
+          {LL.VERSION_ON() + ' '}
+          <b>{data.emsesp_version}</b>&nbsp;({data.esp_platform})
+          {latestVersion && (
+            <Box mt={2}>
+              {LL.THE_LATEST()}&nbsp;{LL.OFFICIAL()}&nbsp;{LL.RELEASE_IS()}&nbsp;<b>{latestVersion}</b>
+              &nbsp;(
+              <Link target="_blank" href={STABLE_RELNOTES_URL} color="primary">
+                {LL.RELEASE_NOTES()}
+              </Link>
+              )&nbsp;(
+              <Link
+                target="_blank"
+                href={STABLE_URL + 'v' + latestVersion + '/' + getBinURL(latestVersion)}
+                color="primary"
+              >
+                {LL.DOWNLOAD(1)}
+              </Link>
+              )
+            </Box>
+          )}
+          {latestDevVersion && (
+            <Box mt={2}>
+              {LL.THE_LATEST()}&nbsp;{LL.DEVELOPMENT()}&nbsp;{LL.RELEASE_IS()}&nbsp;
+              <b>{latestDevVersion}</b>
+              &nbsp;(
+              <Link target="_blank" href={DEV_RELNOTES_URL} color="primary">
+                {LL.RELEASE_NOTES()}
+              </Link>
+              )&nbsp;(
+              <Link target="_blank" href={DEV_URL + getBinURL(latestDevVersion)} color="primary">
+                {LL.DOWNLOAD(1)}
+              </Link>
+              )
+            </Box>
+          )}
+        </Box>
+
+        <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
+          {LL.UPLOAD()}
+        </Typography>
+        <Box mb={2} color="warning.main">
+          <Typography variant="body2">
+            {LL.UPLOAD_TEXT()}
+            <br />
+            <br />
+            {LL.RESTART_TEXT(1)}.
           </Typography>
-          <Box color="warning.main">
-            <Typography mb={1} variant="body2">
-              {LL.DOWNLOAD_SETTINGS_TEXT()}
-            </Typography>
+        </Box>
+        {md5 && (
+          <Box mb={2}>
+            <Typography variant="body2">{'MD5: ' + md5}</Typography>
           </Box>
-          <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={downloadSettings}>
-            {LL.SETTINGS_OF('')}
-          </Button>
-          <Box color="warning.main">
-            <Typography mt={2} mb={1} variant="body2">
-              {LL.DOWNLOAD_CUSTOMIZATION_TEXT()}
+        )}
+        <SingleUpload onDrop={startUpload} onCancel={cancelUpload} isUploading={isUploading} progress={progress} />
+        {!isUploading && (
+          <>
+            <Typography sx={{ pt: 4, pb: 2 }} variant="h6" color="primary">
+              {LL.DOWNLOAD(0)}
             </Typography>
-          </Box>
-          <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={downloadCustomizations}>
-            {LL.CUSTOMIZATIONS()}
-          </Button>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={downloadEntities}
-          >
-            {LL.CUSTOM_ENTITIES(0)}
-          </Button>
-          <Box color="warning.main">
-            <Typography mt={2} mb={1} variant="body2">
-              {LL.DOWNLOAD_SCHEDULE_TEXT()}
-            </Typography>
-          </Box>
-          <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={downloadSchedule}>
-            {LL.SCHEDULE(0)}
-          </Button>
-        </>
-      )}
-    </>
-  );
+            <Box color="warning.main">
+              <Typography mb={1} variant="body2">
+                {LL.HELP_INFORMATION_4()}
+              </Typography>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={() => callAPI('system', 'info')}
+              >
+                {LL.SUPPORT_INFORMATION(0)}
+              </Button>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={() => callAPI('system', 'allvalues')}
+              >
+                All Values
+              </Button>
+            </Box>
+
+            <Box color="warning.main">
+              <Typography mt={2} mb={1} variant="body2">
+                {LL.DOWNLOAD_SETTINGS_TEXT()}
+              </Typography>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={downloadSettings}
+              >
+                {LL.SETTINGS_OF('')}
+              </Button>
+            </Box>
+
+            <Box color="warning.main">
+              <Typography mt={2} mb={1} variant="body2">
+                {LL.DOWNLOAD_CUSTOMIZATION_TEXT()}
+              </Typography>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={downloadCustomizations}
+              >
+                {LL.CUSTOMIZATIONS()}
+              </Button>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={downloadEntities}
+              >
+                {LL.CUSTOM_ENTITIES(0)}
+              </Button>
+              <Box color="warning.main">
+                <Typography mt={2} mb={1} variant="body2">
+                  {LL.DOWNLOAD_SCHEDULE_TEXT()}
+                </Typography>
+              </Box>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={downloadSchedule}
+              >
+                {LL.SCHEDULE(0)}
+              </Button>
+            </Box>
+          </>
+        )}
+      </>
+    );
+  };
+
   return <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>;
 };
 

interface/src/i18n/de/index.ts

@@ -176,13 +176,11 @@ const de: Translation = {
   STATUS_OF: '{0} Status',
   UPLOAD_DOWNLOAD: 'Hoch-/Herunterladen',
   VERSION_ON: 'Sie verwenden derzeit',
-  SYSTEM_APPLY_FIRMWARE: 'um die neue Firmware anzuwenden',
   CLOSE: 'Schließen',
   USE: 'Verwenden Sie',
   FACTORY_RESET: 'Werkseinstellung',
   SYSTEM_FACTORY_TEXT: 'EMS-ESP wurde auf Werkseinstellung gesetzt und startet als Zugangspunkt neu',
   SYSTEM_FACTORY_TEXT_DIALOG: 'Sind Sie sicher alle Einstellungen auf Werkseinstellung zu setzen?',
-  VERSION_CHECK: 'Versionsprüfung',
   THE_LATEST: 'Die neueste',
   OFFICIAL: 'offizielle',
   DEVELOPMENT: 'Entwicklungs',

interface/src/i18n/en/index.ts

@@ -176,13 +176,11 @@ const en: Translation = {
   STATUS_OF: '{0} Status',
   UPLOAD_DOWNLOAD: 'Upload/Download',
   VERSION_ON: 'You are currently on version',
-  SYSTEM_APPLY_FIRMWARE: 'to apply the new firmware',
   CLOSE: 'Close',
   USE: 'Use',
   FACTORY_RESET: 'Factory Reset',
   SYSTEM_FACTORY_TEXT: 'Device has been factory reset and will now restart',
   SYSTEM_FACTORY_TEXT_DIALOG: 'Are you sure you want to reset EMS-ESP to its factory defaults?',
-  VERSION_CHECK: 'Version Check',
   THE_LATEST: 'The latest',
   OFFICIAL: 'official',
   DEVELOPMENT: 'development',

interface/src/i18n/fr/index.ts

@@ -176,13 +176,11 @@ const fr: Translation = {
   STATUS_OF: 'Statut {0}',
   UPLOAD_DOWNLOAD: 'Upload/Download',
   VERSION_ON: 'You are currently on', // TODO translate
-  SYSTEM_APPLY_FIRMWARE: 'pour appliquer le nouveau firmware',
   CLOSE: 'Fermer',
   USE: 'Utiliser',
   FACTORY_RESET: 'Réinitialisation',
   SYSTEM_FACTORY_TEXT: 'L\'appareil a été réinitialisé et va maintenant redémarrer',
   SYSTEM_FACTORY_TEXT_DIALOG: 'Êtes-vous sûr de vouloir réinitialiser l\'appareil à ses paramètres d\'usine ?',
-  VERSION_CHECK: 'Vérification de la version',
   THE_LATEST: 'La dernière',
   OFFICIAL: 'officielle',
   DEVELOPMENT: 'développement',

interface/src/i18n/it/index.ts

@@ -178,13 +178,11 @@ const it: Translation = {
   STATUS_OF: 'Stato {0}',
   UPLOAD_DOWNLOAD: 'Caricamento/Scaricamento',
   VERSION_ON: 'Attualmente stai eseguendo la versione',
-  SYSTEM_APPLY_FIRMWARE: 'per applicare il nuovo firmware',
   CLOSE: 'Chiudere',
   USE: 'Usa',
   FACTORY_RESET: 'Impostazioni di fabbrica',
   SYSTEM_FACTORY_TEXT: 'Il dispositivo è stato ripristinato alle impostazioni di fabbrica e ora verrà riavviato',
   SYSTEM_FACTORY_TEXT_DIALOG: 'Sei sicuro di voler ripristinare il dispositivo alle impostazioni di fabbrica??',
-  VERSION_CHECK: 'Verifica Versione',
   THE_LATEST: 'Ultima',
   OFFICIAL: 'ufficiale',
   DEVELOPMENT: 'sviluppo',

interface/src/i18n/nl/index.ts

@@ -176,13 +176,11 @@ const nl: Translation = {
   STATUS_OF: '{0} Status',
   UPLOAD_DOWNLOAD: 'Upload/Download',
   VERSION_ON: 'U bevindt zich momenteel op versie',
-  SYSTEM_APPLY_FIRMWARE: 'om de nieuwe firmware te activeren',
   CLOSE: 'Sluiten',
   USE: 'Gebruik',
   FACTORY_RESET: 'Fabrieksinstellingen',
   SYSTEM_FACTORY_TEXT: 'Gateway is gereset en start nu weer op met fabrieksinstellingen',
   SYSTEM_FACTORY_TEXT_DIALOG: 'Weet je zeker dat je een reset naar fabrieksinstellingen uit wilt voeren?',
-  VERSION_CHECK: 'Versie Check',
   THE_LATEST: 'De laatste',
   OFFICIAL: 'official',
   DEVELOPMENT: 'development',

interface/src/i18n/no/index.ts

@@ -176,13 +176,11 @@ const no: Translation = {
   STATUS_OF: '{0} Status',
   UPLOAD_DOWNLOAD: 'Opp/Nedlasting',
   VERSION_ON: 'You are currently on', // TODO translate
-  SYSTEM_APPLY_FIRMWARE: 'for å aktivere ny firmware',
   CLOSE: 'Steng',
   USE: 'Bruk',
   FACTORY_RESET: 'Sett tilbake til fabrikkinstilling',
   SYSTEM_FACTORY_TEXT: 'Enhet har blitt satt tilbake til fabrikkinstilling og vil restarte',
   SYSTEM_FACTORY_TEXT_DIALOG: 'Er du sikker på at du vil resette enheten til fabrikkinstillinger?',
-  VERSION_CHECK: 'Versjonsjekk',
   THE_LATEST: 'Den nyeste',
   OFFICIAL: 'official',
   DEVELOPMENT: 'development',

interface/src/i18n/pl/index.ts

@@ -176,13 +176,11 @@ const pl: BaseTranslation = {
   STATUS_OF: 'Status {0}',
   UPLOAD_DOWNLOAD: 'Przesyłanie plików',
   VERSION_ON: 'Aktualnie używasz',
-  SYSTEM_APPLY_FIRMWARE: '',
   CLOSE: 'Zamknij',
   USE: 'Aby zaktualizować firmware skorzystaj z funkcji',
   FACTORY_RESET: 'Ustawienia fabryczne',
   SYSTEM_FACTORY_TEXT: 'Interfejs EMS-ESP został przywrócony do ustawień fabrycznych i zostanie teraz ponownie uruchomiony.',
   SYSTEM_FACTORY_TEXT_DIALOG: 'Na pewno chcesz przywrócić ustawienia fabryczne interfejsu EMS-ESP? ',
-  VERSION_CHECK: 'Sprawd{{ź|zanie|}} wersj{{ę|i|}}',
   THE_LATEST: 'Najnowsze',
   OFFICIAL: 'oficjalne',
   DEVELOPMENT: 'testowe',

interface/src/i18n/sk/index.ts

@@ -176,13 +176,11 @@ const sk: Translation = {
   STATUS_OF: '{0} Stav',
   UPLOAD_DOWNLOAD: 'Nahrať/Stiahnuť',
   VERSION_ON: 'Momentálne ste vo verzii',
-  SYSTEM_APPLY_FIRMWARE: 'na použitie nového firmvéru',
   CLOSE: 'Zatvoriť',
   USE: 'Použiť',
   FACTORY_RESET: 'Továrenské nastavenia',
   SYSTEM_FACTORY_TEXT: 'Zariadenie bolo obnovené z výroby a teraz sa reštartuje',
   SYSTEM_FACTORY_TEXT_DIALOG: 'Naozaj chcete resetovať EMS-ESP na predvolené výrobné nastavenia?',
-  VERSION_CHECK: 'Kontrola verzie',
   THE_LATEST: 'Posledná',
   OFFICIAL: 'officiálna',
   DEVELOPMENT: 'vývojárska',

interface/src/i18n/sv/index.ts

@@ -176,13 +176,11 @@ const sv: Translation = {
   STATUS_OF: '{0} Status',
   UPLOAD_DOWNLOAD: 'Upp/Nedladdning',
   VERSION_ON: 'You are currently on', // TODO translate
-  SYSTEM_APPLY_FIRMWARE: 'för att aktivera ny firmware',
   CLOSE: 'Stäng',
   USE: 'Använd',
   FACTORY_RESET: 'Fabriksåterställning',
   SYSTEM_FACTORY_TEXT: 'Enheten har blivit fabriksåterställd och startar nu om',
   SYSTEM_FACTORY_TEXT_DIALOG: 'Är du säker att du vill fabriksåterställa enheten?',
-  VERSION_CHECK: 'Senaste versioner',
   THE_LATEST: 'Den senaste',
   OFFICIAL: 'officiell',
   DEVELOPMENT: 'utveckling',

interface/src/i18n/tr/index.ts

@@ -176,13 +176,11 @@ const tr: Translation = {
   STATUS_OF: '{0} Durumu',
   UPLOAD_DOWNLOAD: 'Yükleme/İndirme',
   VERSION_ON: 'You are currently on', // TODO translate
-  SYSTEM_APPLY_FIRMWARE: 'yeni bellenimi uygulamak için',
   CLOSE: 'Kapat',
   USE: 'KUllan',
   FACTORY_RESET: 'Fabrika ayarına dönme',
   SYSTEM_FACTORY_TEXT: 'Cihaz fabrika ayarlarına döndü ve şimdi yendiden başlatılacak',
   SYSTEM_FACTORY_TEXT_DIALOG: 'Cihazı fabrika ayarlarına döndürmek istediğinize emin misiniz?',
-  VERSION_CHECK: 'Sürüm Kontrolü',
   THE_LATEST: 'En son',
   OFFICIAL: 'resmi',
   DEVELOPMENT: 'geliştirme',

interface/src/project/DeviceIcon.tsx

@@ -42,7 +42,7 @@ const DeviceIcon: FC<DeviceIconProps> = ({ type_id }) => {
     case DeviceType.EXTENSION:
       return <MdOutlineDevices />;
     case DeviceType.CUSTOM:
-      return <PlaylistAddIcon sx={{ color: 'lightblue', fontSize: 24, verticalAlign: 'middle' }} />;
+      return <PlaylistAddIcon sx={{ color: 'lightblue', fontSize: 22, verticalAlign: 'middle' }} />;
     default:
       return null;
   }

interface/src/types/system.ts

@@ -1,4 +1,5 @@
 export interface SystemStatus {
+  // TODO fix this next
   emsesp_version: string;
   esp_platform: string;
   max_alloc_heap: number;