diff --git a/interface/src/AuthenticatedRouting.tsx b/interface/src/AuthenticatedRouting.tsx
index adf39beb1..2171d81d8 100644
--- a/interface/src/AuthenticatedRouting.tsx
+++ b/interface/src/AuthenticatedRouting.tsx
@@ -15,6 +15,7 @@ import DownloadUpload from 'app/settings/DownloadUpload';
import MqttSettings from 'app/settings/MqttSettings';
import NTPSettings from 'app/settings/NTPSettings';
import Settings from 'app/settings/Settings';
+import Version from 'app/settings/Version';
import Network from 'app/settings/network/Network';
import Security from 'app/settings/security/Security';
import APStatus from 'app/status/APStatus';
@@ -51,6 +52,7 @@ const AuthenticatedRouting = () => {
{me.admin && (
<>
} />
+ } />
} />
} />
} />
diff --git a/interface/src/app/settings/DownloadUpload.tsx b/interface/src/app/settings/DownloadUpload.tsx
index a28e5a267..15a915f23 100644
--- a/interface/src/app/settings/DownloadUpload.tsx
+++ b/interface/src/app/settings/DownloadUpload.tsx
@@ -1,27 +1,13 @@
import { useState } from 'react';
import { toast } from 'react-toastify';
-import CancelIcon from '@mui/icons-material/Cancel';
import DownloadIcon from '@mui/icons-material/GetApp';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import WarningIcon from '@mui/icons-material/Warning';
-import {
- Box,
- Button,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- Link,
- Typography
-} from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
import Grid from '@mui/material/Grid2';
import * as SystemApi from 'api/system';
import { API, callAction } from 'api/app';
-import { getDevVersion, getStableVersion } from 'api/system';
-import { dialogStyle } from 'CustomTheme';
import { useRequest } from 'alova/client';
import type { APIcall } from 'app/main/types';
import RestartMonitor from 'app/status/RestartMonitor';
@@ -38,18 +24,6 @@ const DownloadUpload = () => {
const { LL } = useI18nContext();
const [restarting, setRestarting] = useState(false);
- const [openDialog, setOpenDialog] = useState(false);
- const [useDev, setUseDev] = useState(false);
- const [upgradeAvailable, setUpgradeAvailable] = useState(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 }),
@@ -71,13 +45,6 @@ const DownloadUpload = () => {
const { data, send: loadData, error } = useRequest(SystemApi.readSystemStatus);
- const { send: sendUploadURL } = useRequest(
- (url: string) => callAction({ action: 'uploadURL', param: url }),
- {
- immediate: false
- }
- );
-
const doRestart = async () => {
setRestarting(true);
await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
@@ -87,134 +54,13 @@ const DownloadUpload = () => {
);
};
- // 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
- // immediate: false,
- // initialData: '3.6.5'
- });
-
- // called immediately to get the latest version, on page load, then check for upgrade
- const { data: latestDevVersion } = useRequest(getDevVersion, {
- // uncomment next 2 lines for testing, uses https://github.com/emsesp/EMS-ESP32/releases/download/latest/EMS-ESP-3_7_0-dev_31-ESP32-16MB+.bin
- // immediate: false,
- // initialData: '3.7.0-dev.32'
- }).onSuccess((event) => {
- void sendCheckUpgrade(event.data);
- });
-
- const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
- const STABLE_RELNOTES_URL =
- 'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
-
- const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
- const DEV_RELNOTES_URL =
- 'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
-
- const getBinURL = (useDevVersion: boolean) => {
- if (!latestVersion || !latestDevVersion) {
- return '';
- }
- const filename =
- 'EMS-ESP-' +
- (useDevVersion ? latestDevVersion : latestVersion).replaceAll('.', '_') +
- '-' +
- getPlatform() +
- '.bin';
- return useDevVersion
- ? DEV_URL + filename
- : STABLE_URL + 'v' + latestVersion + '/' + filename;
- };
-
- const getPlatform = () => {
- return (
- [data.esp_platform, data.flash_chip_size >= 16384 ? '16MB' : '4MB'].join('-') +
- (data.psram ? '+' : '')
- );
- };
-
- const installFirmwareURL = async (url: string) => {
- await sendUploadURL(url).catch((error: Error) => {
- toast.error(error.message);
- });
- setRestarting(true);
- };
-
useLayoutTitle(LL.DOWNLOAD_UPLOAD());
- const internet_live =
- latestDevVersion !== undefined && latestVersion !== undefined;
-
- const renderUploadDialog = () => {
- if (!internet_live) {
- return null;
- }
-
- return (
-
- );
- };
-
- // useDevVersion = true to force using the dev version
- const showFirmwareDialog = (useDevVersion: boolean) => {
- if (useDevVersion || data.emsesp_version.includes('dev')) {
- setUseDev(true);
- }
- setOpenDialog(true);
- };
-
const content = () => {
if (!data) {
return ;
}
- const isDev = data.emsesp_version.includes('dev');
-
return (
<>
@@ -232,7 +78,7 @@ const DownloadUpload = () => {
color="primary"
onClick={() => sendExportData('settings')}
>
- {LL.DOWNLOAD(1)} {LL.SETTINGS_OF(LL.APPLICATION())}
+ {LL.SETTINGS_OF(LL.APPLICATION())}
@@ -273,68 +119,6 @@ const DownloadUpload = () => {
-
-
- {LL.EMS_ESP_VER()}
-
-
-
-
- {LL.VERSION() + ':'} {data.emsesp_version}
- {data.build_flags && (
-
- ({data.build_flags})
-
- )}
-
-
- Platform: {getPlatform()}
-
-
- Release: {isDev ? LL.DEVELOPMENT() : LL.STABLE()}
- {!isDev && (
-
- )}
-
-
-
-
- {upgradeAvailable ? LL.UPGRADE_AVAILABLE() : LL.LATEST_VERSION()}
- {upgradeAvailable &&
- internet_live &&
- (data.psram ? (
-
- ) : (
- <>
-
-
- {LL.DOWNLOAD(1)} v
- {isDev ? latestDevVersion : latestVersion}
-
-
- ))}
-
-
- {renderUploadDialog()}
-
);
};
diff --git a/interface/src/app/settings/Settings.tsx b/interface/src/app/settings/Settings.tsx
index 78afb8214..e40c55ed7 100644
--- a/interface/src/app/settings/Settings.tsx
+++ b/interface/src/app/settings/Settings.tsx
@@ -1,6 +1,7 @@
import { useState } from 'react';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import BuildIcon from '@mui/icons-material/Build';
import CancelIcon from '@mui/icons-material/Cancel';
import DeviceHubIcon from '@mui/icons-material/DeviceHub';
import ImportExportIcon from '@mui/icons-material/ImportExport';
@@ -20,7 +21,7 @@ import {
List
} from '@mui/material';
-import { API } from 'api/app';
+import { API, callAction } from 'api/app';
import { dialogStyle } from 'CustomTheme';
import { useRequest } from 'alova/client';
@@ -39,6 +40,11 @@ const Settings = () => {
immediate: false
});
+ // get installed version
+ const { data } = useRequest(() => callAction({ action: 'checkUpgrade' }), {
+ initialData: { emsesp_version: '...' }
+ });
+
const doFormat = async () => {
await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
setConfirmFactoryReset(false);
@@ -77,10 +83,18 @@ const Settings = () => {
const content = () => (
<>
+
+
@@ -88,7 +102,7 @@ const Settings = () => {
@@ -96,7 +110,7 @@ const Settings = () => {
@@ -104,7 +118,7 @@ const Settings = () => {
@@ -112,14 +126,14 @@ const Settings = () => {
diff --git a/interface/src/app/settings/Version.tsx b/interface/src/app/settings/Version.tsx
new file mode 100644
index 000000000..ba4ee53eb
--- /dev/null
+++ b/interface/src/app/settings/Version.tsx
@@ -0,0 +1,261 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ Link,
+ Typography
+} from '@mui/material';
+
+import * as SystemApi from 'api/system';
+import { callAction } from 'api/app';
+import { getDevVersion, getStableVersion } from 'api/system';
+
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova/client';
+import RestartMonitor from 'app/status/RestartMonitor';
+import { FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+const Version = () => {
+ const { LL } = useI18nContext();
+
+ const [restarting, setRestarting] = useState(false);
+ const [openDialog, setOpenDialog] = useState(false);
+ const [useDev, setUseDev] = useState(false);
+ const [upgradeAvailable, setUpgradeAvailable] = useState(false);
+
+ const { send: sendCheckUpgrade } = useRequest(
+ (version: string) => callAction({ action: 'checkUpgrade', param: version }),
+ {
+ immediate: false
+ }
+ ).onSuccess((event) => {
+ setUpgradeAvailable((event.data as { upgradeable: boolean }).upgradeable);
+ });
+
+ const { data, send: loadData, error } = useRequest(SystemApi.readSystemStatus);
+
+ const { send: sendUploadURL } = useRequest(
+ (url: string) => callAction({ action: 'uploadURL', param: url }),
+ {
+ immediate: false
+ }
+ );
+
+ // 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
+ immediate: false,
+ initialData: '3.6.5'
+ });
+
+ // called immediately to get the latest version, on page load, then check for upgrade
+ const { data: latestDevVersion } = useRequest(getDevVersion, {
+ // uncomment next 2 lines for testing, uses https://github.com/emsesp/EMS-ESP32/releases/download/latest/EMS-ESP-3_7_0-dev_31-ESP32-16MB+.bin
+ immediate: false,
+ initialData: '3.7.0-dev.32'
+ }).onSuccess((event) => {
+ void sendCheckUpgrade(event.data);
+ });
+
+ const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
+ const STABLE_RELNOTES_URL =
+ 'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
+
+ const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
+ const DEV_RELNOTES_URL =
+ 'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
+
+ const getBinURL = (useDevVersion: boolean) => {
+ if (!latestVersion || !latestDevVersion) {
+ return '';
+ }
+ const filename =
+ 'EMS-ESP-' +
+ (useDevVersion ? latestDevVersion : latestVersion).replaceAll('.', '_') +
+ '-' +
+ getPlatform() +
+ '.bin';
+ return useDevVersion
+ ? DEV_URL + filename
+ : STABLE_URL + 'v' + latestVersion + '/' + filename;
+ };
+
+ const getPlatform = () => {
+ return (
+ [data.esp_platform, data.flash_chip_size >= 16384 ? '16MB' : '4MB'].join('-') +
+ (data.psram ? '+' : '')
+ );
+ };
+
+ const installFirmwareURL = async (url: string) => {
+ await sendUploadURL(url).catch((error: Error) => {
+ toast.error(error.message);
+ });
+ setRestarting(true);
+ };
+
+ useLayoutTitle(LL.EMS_ESP_VER());
+
+ const internet_live =
+ latestDevVersion !== undefined && latestVersion !== undefined;
+
+ const renderUploadDialog = () => {
+ if (!internet_live) {
+ return null;
+ }
+
+ return (
+
+ );
+ };
+
+ // useDevVersion = true to force using the dev version
+ const showFirmwareDialog = (useDevVersion: boolean) => {
+ if (useDevVersion || data.emsesp_version.includes('dev')) {
+ setUseDev(true);
+ }
+ setOpenDialog(true);
+ };
+
+ const content = () => {
+ if (!data) {
+ return ;
+ }
+
+ const isDev = data.emsesp_version.includes('dev');
+
+ return (
+ <>
+
+ Firmware Version Check
+
+
+
+
+ {LL.VERSION() + ':'} {data.emsesp_version}
+ {data.build_flags && (
+
+ ({data.build_flags})
+
+ )}
+
+
+ Platform: {getPlatform()}
+
+
+
+ Release:
+
+ {isDev ? LL.DEVELOPMENT() : LL.STABLE()}
+
+ {!isDev && (
+
+ )}
+
+
+
+
+
+ {upgradeAvailable ? LL.UPGRADE_AVAILABLE() : LL.LATEST_VERSION()}
+ {upgradeAvailable &&
+ internet_live &&
+ (data.psram ? (
+
+ ) : (
+ <>
+
+
+ {LL.DOWNLOAD(1)} v
+ {isDev ? latestDevVersion : latestVersion}
+
+
+ ))}
+
+
+ {renderUploadDialog()}
+
+
+ );
+ };
+
+ return (
+ {restarting ? : content()}
+ );
+};
+
+export default Version;
diff --git a/interface/src/app/status/Status.tsx b/interface/src/app/status/Status.tsx
index f3a53dbdd..7d0785af9 100644
--- a/interface/src/app/status/Status.tsx
+++ b/interface/src/app/status/Status.tsx
@@ -1,9 +1,7 @@
import { useContext, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import BuildIcon from '@mui/icons-material/Build';
import CancelIcon from '@mui/icons-material/Cancel';
import DeviceHubIcon from '@mui/icons-material/DeviceHub';
import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
@@ -13,7 +11,6 @@ import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
import RouterIcon from '@mui/icons-material/Router';
import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
import TimerIcon from '@mui/icons-material/Timer';
-import UpgradeIcon from '@mui/icons-material/Upgrade';
import WifiIcon from '@mui/icons-material/Wifi';
import {
Avatar,
@@ -46,8 +43,6 @@ import RestartMonitor from './RestartMonitor';
const SystemStatus = () => {
const { LL } = useI18nContext();
- const navigate = useNavigate();
-
useLayoutTitle(LL.STATUS_OF(''));
const { me } = useContext(AuthenticatedContext);
@@ -248,28 +243,6 @@ const SystemStatus = () => {
return (
<>
-
-
-
-
-
-
-
- {me.admin && (
- }
- variant="outlined"
- color="primary"
- onClick={() => navigate('/settings/upload')}
- >
- {LL.UPDATE()}
-
- )}
-
-
@@ -292,6 +265,15 @@ const SystemStatus = () => {
)}
+
+
{
to="/status/activity"
/>
-
-
{
: RouterIcon
}
bgcolor={networkStatusHighlight()}
- label={LL.STATUS_OF(LL.NETWORK(1))}
+ label={LL.NETWORK(1)}
text={networkStatus()}
to="/status/network"
/>
@@ -327,7 +300,7 @@ const SystemStatus = () => {
disabled={!me.admin}
icon={DeviceHubIcon}
bgcolor={activeHighlight(data.mqtt_status)}
- label={LL.STATUS_OF('MQTT')}
+ label="MQTT"
text={data.mqtt_status ? LL.ACTIVE() : LL.INACTIVE(0)}
to="/status/mqtt"
/>
@@ -336,7 +309,7 @@ const SystemStatus = () => {
disabled={!me.admin}
icon={AccessTimeIcon}
bgcolor={ntpStatusHighlight()}
- label={LL.STATUS_OF('NTP')}
+ label="NTP"
text={ntpStatus()}
to="/status/ntp"
/>
@@ -345,7 +318,7 @@ const SystemStatus = () => {
disabled={!me.admin}
icon={SettingsInputAntennaIcon}
bgcolor={activeHighlight(data.ap_status)}
- label={LL.STATUS_OF(LL.ACCESS_POINT(0))}
+ label={LL.ACCESS_POINT(0)}
text={data.ap_status ? LL.ACTIVE() : LL.INACTIVE(0)}
to="/status/ap"
/>