#2190

interface/src/api/endpoints.ts

@@ -57,7 +57,10 @@ export const alovaInstance = createAlova({
 });
 
 export const alovaInstanceGH = createAlova({
-  baseURL: process.env.NODE_ENV === 'development' ? '/gh' : 'https://api.github.com/repos/emsesp/EMS-ESP32/releases',
+  baseURL:
+    process.env.NODE_ENV === 'development'
+      ? '/gh'
+      : 'https://api.github.com/repos/emsesp/EMS-ESP32/releases',
   statesHook: ReactHook,
   requestAdapter: xhrRequestAdapter()
 });

interface/src/app/settings/Settings.tsx

@@ -87,7 +87,7 @@ const Settings = () => {
           icon={BuildIcon}
           bgcolor="#72caf9"
           label="EMS-ESP Firmware"
-          text={'v'+data.emsesp_version}
+          text={'v' + data.emsesp_version}
           to="version"
         />
 

interface/src/app/settings/Version.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
+import CheckIcon from '@mui/icons-material/Done';
+import DownloadIcon from '@mui/icons-material/GetApp';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
@@ -11,7 +13,6 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Divider,
   Link,
   Typography
 } from '@mui/material';
@@ -108,9 +109,13 @@ const Version = () => {
 
   useLayoutTitle('EMS-ESP Firmware');
 
+  // see if we have internet access
   const internet_live =
     latestDevVersion !== undefined && latestVersion !== undefined;
 
+  // check for older boards where auto-upgrade is not supported
+  const download_only = data && !data.psram;
+
   const renderUploadDialog = () => {
     if (!internet_live) {
       return null;
@@ -123,26 +128,15 @@ const Version = () => {
         onClose={() => setOpenDialog(false)}
       >
         <DialogTitle>
-          {LL.INSTALL('') +
-            ' ' +
-            (useDev ? LL.DEVELOPMENT() : LL.STABLE()) +
-            ' Firmware'}
+          {(download_only ? LL.DOWNLOAD(0) : LL.INSTALL('')) + ' ' + ' Firmware'}
         </DialogTitle>
         <DialogContent dividers>
           <Typography mb={2}>
-            {LL.INSTALL_VERSION(useDev ? latestDevVersion : latestVersion)}
+            {LL.INSTALL_VERSION(
+              download_only ? LL.DOWNLOAD(1) : LL.INSTALL(''),
+              useDev ? latestDevVersion : latestVersion
+            )}
           </Typography>
-          <Link
-            target="_blank"
-            href={useDev ? DEV_RELNOTES_URL : STABLE_RELNOTES_URL}
-            color="primary"
-          >
-            changelog
-          </Link>
-          &nbsp;|&nbsp;
-          <Link target="_blank" href={getBinURL(useDev)} color="primary">
-            {LL.DOWNLOAD(1)}
-          </Link>
         </DialogContent>
         <DialogActions>
           <Button
@@ -154,19 +148,30 @@ const Version = () => {
             {LL.CANCEL()}
           </Button>
           <Button
-            startIcon={<WarningIcon color="warning" />}
+            startIcon={<DownloadIcon />}
             variant="outlined"
-            onClick={() => installFirmwareURL(getBinURL(useDev))}
+            onClick={() => setOpenDialog(false)}
             color="primary"
           >
-            {LL.INSTALL('')}
+            <Link target="_blank" href={getBinURL(useDev)} color="primary">
+              {LL.DOWNLOAD(1)}
+            </Link>
           </Button>
+          {!download_only && (
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              variant="outlined"
+              onClick={() => installFirmwareURL(getBinURL(useDev))}
+              color="primary"
+            >
+              {LL.INSTALL('')}
+            </Button>
+          )}
         </DialogActions>
       </Dialog>
     );
   };
 
-  // useDevVersion = true to force using the dev version
   const showFirmwareDialog = (useDevVersion: boolean) => {
     if (useDevVersion || data.emsesp_version.includes('dev')) {
       setUseDev(true);
@@ -184,29 +189,23 @@ const Version = () => {
     return (
       <>
         <Box p={2} border="1px solid grey" borderRadius={2}>
-          <Grid container spacing={3}>
+          <Typography sx={{ pb: 2 }} variant="h6" color="primary">
+            Firmware Version
+          </Typography>
+
+          <Grid container spacing={11}>
             <Grid mb={1}>
-              <Typography mb={1} fontWeight={'fontWeightBold'}>
+              <Typography mb={1} color="secondary">
                 {LL.VERSION()}
               </Typography>
-              <Typography mb={1} fontWeight={'fontWeightBold'}>
+              <Typography mb={1} color="secondary">
                 Platform
               </Typography>
-              <Typography mb={1} fontWeight={'fontWeightBold'}>
+              <Typography mb={1} color="secondary">
                 Release Type
               </Typography>
-              {internet_live && (
-                <>
-                  <Typography mb={1} fontWeight={'fontWeightBold'}>
-                    Latest Stable Release
-                  </Typography>
-                  <Typography fontWeight={'fontWeightBold'}>
-                    Latest Development Release
-                  </Typography>
-                </>
-              )}
             </Grid>
-            <Grid>
+            <Grid mb={1}>
               <Typography mb={1}>
                 {data.emsesp_version}
                 {data.build_flags && (
@@ -216,69 +215,101 @@ const Version = () => {
                 )}
               </Typography>
               <Typography mb={1}>{getPlatform()}</Typography>
-              <Typography>
-                {isDev ? LL.DEVELOPMENT() : LL.STABLE()}&nbsp;
-                <Link
-                  target="_blank"
-                  href={isDev ? DEV_RELNOTES_URL : STABLE_RELNOTES_URL}
-                  color="primary"
-                >
-                  (changelog)
-                </Link>
+              <Typography mb={1}>
+                {isDev ? LL.DEVELOPMENT() : LL.STABLE()}
                 {!isDev && internet_live && (
-                  <Button
-                    sx={{ ml: 2 }}
-                    variant="outlined"
-                    color="primary"
-                    size="small"
-                    onClick={() => showFirmwareDialog(true)}
-                  >
-                    {LL.SWITCH_DEV()}
-                  </Button>
+                  <Typography variant="caption">
+                    <Button
+                      sx={{ ml: 2 }}
+                      variant="outlined"
+                      color="primary"
+                      size="small"
+                      onClick={() => showFirmwareDialog(true)}
+                    >
+                      {LL.SWITCH_DEV()}
+                    </Button>
+                  </Typography>
                 )}
               </Typography>
-              {internet_live && (
-                <>
-                  <Typography mt={0.3}>{latestVersion}</Typography>
-                  <Typography mt={1} mb={1}>
-                    {latestDevVersion}
-                  </Typography>
-                </>
-              )}
             </Grid>
           </Grid>
 
-          <Divider />
-
-          <Typography mt={2} color="warning">
-            <InfoOutlinedIcon color="warning" sx={{ verticalAlign: 'middle' }} />
-            &nbsp;&nbsp;
-            {upgradeAvailable ? LL.UPGRADE_AVAILABLE() : LL.LATEST_VERSION()}
-            {upgradeAvailable &&
-              internet_live &&
-              (data.psram ? (
-                <Button
-                  sx={{ ml: 2, textTransform: 'none' }}
-                  variant="outlined"
-                  color="primary"
-                  size="small"
-                  onClick={() => showFirmwareDialog(false)}
-                >
-                  {isDev
-                    ? LL.INSTALL('v' + latestDevVersion)
-                    : LL.INSTALL('v' + latestVersion)}
-                </Button>
-              ) : (
-                <>
-                  &nbsp;&nbsp;
-                  <Link target="_blank" href={getBinURL(isDev)} color="primary">
-                    {LL.DOWNLOAD(1)}&nbsp;v
-                    {isDev ? latestDevVersion : latestVersion}
-                  </Link>
-                </>
-              ))}
+          <Typography sx={{ pb: 2 }} variant="h6" color="primary">
+            Latest Available Versions
           </Typography>
 
+          {internet_live ? (
+            <>
+              <Grid container spacing={4}>
+                <Grid mb={1}>
+                  <Typography mb={1} color="secondary">
+                    Stable Release
+                  </Typography>
+                  <Typography mb={1} color="secondary">
+                    Development Release
+                  </Typography>
+                </Grid>
+                <Grid mb={1}>
+                  <Typography mb={1}>
+                    {latestVersion}&nbsp;&nbsp;
+                    <Link target="_blank" href={STABLE_RELNOTES_URL} color="primary">
+                      (changelog)
+                    </Link>
+                    {!isDev && upgradeAvailable && (
+                      <Button
+                        sx={{ ml: 2 }}
+                        variant="outlined"
+                        color="warning"
+                        size="small"
+                        onClick={() => showFirmwareDialog(false)}
+                      >
+                        Upgrade&hellip;
+                      </Button>
+                    )}
+                  </Typography>
+                  <Typography mb={1}>
+                    {latestDevVersion}&nbsp;&nbsp;
+                    <Link target="_blank" href={DEV_RELNOTES_URL} color="primary">
+                      (changelog)
+                    </Link>
+                    {isDev && upgradeAvailable && (
+                      <Button
+                        sx={{ ml: 2 }}
+                        variant="outlined"
+                        color="warning"
+                        size="small"
+                        onClick={() => showFirmwareDialog(false)}
+                      >
+                        Upgrade&hellip;
+                      </Button>
+                    )}
+                  </Typography>
+                </Grid>
+              </Grid>
+              {upgradeAvailable ? (
+                <Typography color="warning">
+                  <InfoOutlinedIcon
+                    color="warning"
+                    sx={{ verticalAlign: 'middle', mr: 2 }}
+                  />
+                  {LL.UPGRADE_AVAILABLE()}
+                </Typography>
+              ) : (
+                <Typography color="success">
+                  <CheckIcon
+                    color="success"
+                    sx={{ verticalAlign: 'middle', mr: 2 }}
+                  />
+                  {LL.LATEST_VERSION()}
+                </Typography>
+              )}
+            </>
+          ) : (
+            <Typography mb={1} color="warning">
+              not online
+            </Typography>
+          )}
+
           {renderUploadDialog()}
         </Box>
       </>

interface/src/app/settings/security/ManageUsers.tsx

@@ -2,9 +2,9 @@ import { useContext, useState } from 'react';
 import { useBlocker } from 'react-router-dom';
 
 import CancelIcon from '@mui/icons-material/Cancel';
-import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import DeleteIcon from '@mui/icons-material/Delete';
+import CheckIcon from '@mui/icons-material/Done';
 import EditIcon from '@mui/icons-material/Edit';
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
 import VpnKeyIcon from '@mui/icons-material/VpnKey';

interface/src/i18n/cz/index.ts

@@ -331,7 +331,7 @@ const cz: Translation = {
   ALLVALUES: 'Všechny hodnoty',
   SPECIAL_FUNCTIONS: 'Speciální funkce',
   WAIT_FIRMWARE: 'Firmware se nahrává a instaluje',
-  INSTALL_VERSION: 'Tímto se nainstaluje verze {0}. Jste si jistí?',
+  INSTALL_VERSION: 'Tímto se {0} verze {1}. Jste si jistí?',
   SWITCH_DEV: 'přepnout na vývojovou verzi',
   UPGRADE_AVAILABLE: 'Je k dispozici aktualizace firmwaru!',
   LATEST_VERSION: 'Používáte nejnovější verzi firmwaru.',

interface/src/i18n/de/index.ts

@@ -331,7 +331,7 @@ const de: Translation = {
   ALLVALUES: 'Alle Werte',
   SPECIAL_FUNCTIONS: 'Sonderfunktionen',
   WAIT_FIRMWARE: 'Die Firmware wird hochgeladen und installiert.',
-  INSTALL_VERSION: 'Dadurch wird die Version installiert {0}. Sind Sie sicher?',
+  INSTALL_VERSION: 'Dadurch wird die Version {0} {1}. Sind Sie sicher?',
   SWITCH_DEV: 'Wechseln Sie zur Entwicklungsversion!',
   UPGRADE_AVAILABLE: 'Es ist ein Firmware-Upgrade verfügbar.',
   LATEST_VERSION: 'Sie verwenden die neueste Firmware-Version.',

interface/src/i18n/en/index.ts

@@ -331,7 +331,7 @@ const en: Translation = {
   ALLVALUES: 'All Values',
   SPECIAL_FUNCTIONS: 'Special Functions',
   WAIT_FIRMWARE: 'Firmware is uploading and installing',
-  INSTALL_VERSION: 'This will install version {0}. Are you sure?',
+  INSTALL_VERSION: 'This will {0} version {1}. Are you sure?',
   SWITCH_DEV: 'switch to the development version',
   UPGRADE_AVAILABLE: 'There is a firmware upgrade available!',
   LATEST_VERSION: 'You are using the latest firmware version.',

interface/src/i18n/fr/index.ts

@@ -331,7 +331,7 @@ const fr: Translation = {
   ALLVALUES: 'All Values', // TODO translate
   SPECIAL_FUNCTIONS: 'Special Functions',
   WAIT_FIRMWARE: 'Firmware is uploading and installing', // TODO translate
-  INSTALL_VERSION: 'This will install version {0}. Are you sure?', // TODO translate
+  INSTALL_VERSION: 'This will {0} version {1}. Are you sure?', // TODO translate
   SWITCH_DEV: 'switch to the development version', // TODO translate
   UPGRADE_AVAILABLE: 'There is a firmware upgrade available!', // TODO translate
   LATEST_VERSION: 'You are using the latest firmware version.', // TODO translate

interface/src/i18n/it/index.ts

@@ -331,7 +331,7 @@ const it: Translation = {
   ALLVALUES: 'All Values', // TODO translate
   SPECIAL_FUNCTIONS: 'Special Functions', // TODO translate
   WAIT_FIRMWARE: 'Firmware is uploading and installing', // TODO translate
-  INSTALL_VERSION: 'This will install version {0}. Are you sure?', // TODO translate
+  INSTALL_VERSION: 'This will {0} version {1}. Are you sure?', // TODO translate
   SWITCH_DEV: 'switch to the development version', // TODO translate
   UPGRADE_AVAILABLE: 'There is a firmware upgrade available!', // TODO translate
   LATEST_VERSION: 'You are using the latest firmware version.', // TODO translate

interface/src/i18n/nl/index.ts

@@ -331,7 +331,7 @@ const nl: Translation = {
   ALLVALUES: 'All Values', // TODO translate
   SPECIAL_FUNCTIONS: 'Special Functions', // TODO translate
   WAIT_FIRMWARE: 'Firmware is uploading and installing', // TODO translate
-  INSTALL_VERSION: 'This will install version {0}. Are you sure?', // TODO translate
+  INSTALL_VERSION: 'This will {0} version {1}. Are you sure?', // TODO translate
   SWITCH_DEV: 'switch to the development version', // TODO translate
   UPGRADE_AVAILABLE: 'There is a firmware upgrade available!', // TODO translate
   LATEST_VERSION: 'You are using the latest firmware version.', // TODO translate

interface/src/i18n/no/index.ts

@@ -331,7 +331,7 @@ const no: Translation = {
   ALLVALUES: 'All Values', // TODO translate
   SPECIAL_FUNCTIONS: 'Special Functions', // TODO translate
   WAIT_FIRMWARE: 'Firmware is uploading and installing', // TODO translate
-  INSTALL_VERSION: 'This will install version {0}. Are you sure?', // TODO translate
+  INSTALL_VERSION: 'This will {0} version {1}. Are you sure?', // TODO translate
   SWITCH_DEV: 'switch to the development version', // TODO translate
   UPGRADE_AVAILABLE: 'There is a firmware upgrade available!', // TODO translate
   LATEST_VERSION: 'You are using the latest firmware version.', // TODO translate

interface/src/i18n/pl/index.ts

@@ -331,7 +331,7 @@ const pl: BaseTranslation = {
   ALLVALUES: 'All Values', // TODO translate
   SPECIAL_FUNCTIONS: 'Special Functions', // TODO translate
   WAIT_FIRMWARE: 'Firmware is uploading and installing', // TODO translate
-  INSTALL_VERSION: 'This will install version {0}. Are you sure?', // TODO translate
+  INSTALL_VERSION: 'This will {0} version {1}. Are you sure?', // TODO translate
   SWITCH_DEV: 'switch to the development version', // TODO translate
   UPGRADE_AVAILABLE: 'There is a firmware upgrade available!', // TODO translate
   LATEST_VERSION: 'You are using the latest firmware version.', // TODO translate

interface/src/i18n/sk/index.ts

@@ -331,7 +331,7 @@ const sk: Translation = {
   ALLVALUES: 'Všetky hodnoty',
   SPECIAL_FUNCTIONS: 'Špeciálne funkcie',
   WAIT_FIRMWARE: 'Firmvér sa nahráva a inštaluje',
-  INSTALL_VERSION: 'Týmto sa nainštaluje verzia {0}. Si si istý?',
+  INSTALL_VERSION: 'Týmto sa {0} verzia {1}. Si si istý?',
   SWITCH_DEV: 'prejsť na vývojovú verziu',
   UPGRADE_AVAILABLE: 'K dispozícii je aktualizácia firmvéru!',
   LATEST_VERSION: 'Používate poslednú verziu firmvéru.',

interface/src/i18n/sv/index.ts

@@ -331,7 +331,7 @@ const sv: Translation = {
   ALLVALUES: 'All Values', // TODO translate
   SPECIAL_FUNCTIONS: 'Special Functions', // TODO translate
   WAIT_FIRMWARE: 'Firmware is uploading and installing', // TODO translate
-  INSTALL_VERSION: 'This will install version {0}. Are you sure?', // TODO translate
+  INSTALL_VERSION: 'This will {0} version {1}. Are you sure?', // TODO translate
   SWITCH_DEV: 'switch to the development version', // TODO translate
   UPGRADE_AVAILABLE: 'There is a firmware upgrade available!', // TODO translate
   LATEST_VERSION: 'You are using the latest firmware version.', // TODO translate

interface/src/i18n/tr/index.ts

@@ -331,7 +331,7 @@ const tr: Translation = {
   ALLVALUES: 'All Values', // TODO translate
   SPECIAL_FUNCTIONS: 'Special Functions', // TODO translate
   WAIT_FIRMWARE: 'Firmware is uploading and installing', // TODO translate
-  INSTALL_VERSION: 'This will install version {0}. Are you sure?', // TODO translate
+  INSTALL_VERSION: 'This will {0} version {1}. Are you sure?', // TODO translate
   SWITCH_DEV: 'switch to the development version', // TODO translate
   UPGRADE_AVAILABLE: 'There is a firmware upgrade available!', // TODO translate
   LATEST_VERSION: 'You are using the latest firmware version.', // TODO translate