reorder upload and download, fix minor issues

2025-12-06 15:59:52 +03:00 · 2024-08-15 16:23:21 +02:00
parent e0765f1c5b
commit b1d5d07cab
18 changed files with 150 additions and 194 deletions
--- a/interface/package.json
+++ b/interface/package.json
@@ -60,7 +60,7 @@
    "rollup-plugin-visualizer": "^5.12.0",
    "terser": "^5.31.6",
    "typescript-eslint": "8.1.0",
-    "vite": "^5.4.0",
+    "vite": "^5.4.1",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-tsconfig-paths": "^5.0.1"
  },
--- a/interface/src/AuthenticatedRouting.tsx
+++ b/interface/src/AuthenticatedRouting.tsx
@@ -10,10 +10,10 @@ import Scheduler from 'app/main/Scheduler';
 import Sensors from 'app/main/Sensors';
 import APSettings from 'app/settings/APSettings';
 import ApplicationSettings from 'app/settings/ApplicationSettings';
+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 UploadDownload from 'app/settings/UploadDownload';
 import Network from 'app/settings/network/Network';
 import Security from 'app/settings/security/Security';
 import APStatus from 'app/status/APStatus';
@@ -54,7 +54,7 @@ const AuthenticatedRouting = () => {
            <Route path="/settings/ntp" element={<NTPSettings />} />
            <Route path="/settings/ap" element={<APSettings />} />
            <Route path="/settings/modules" element={<Modules />} />
-            <Route path="/settings/upload" element={<UploadDownload />} />
+            <Route path="/settings/upload" element={<DownloadUpload />} />

            <Route path="/settings/network/*" element={<Network />} />
            <Route path="/settings/security/*" element={<Security />} />
--- a/interface/src/app/settings/DownloadUpload.tsx
+++ b/interface/src/app/settings/DownloadUpload.tsx
@@ -23,7 +23,7 @@ import {
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';

-const UploadDownload = () => {
+const DownloadUpload = () => {
  const { LL } = useI18nContext();

  const { send: sendSettings } = useRequest(getSettings(), {
@@ -66,8 +66,13 @@ const UploadDownload = () => {
  } = useRequest(SystemApi.readHardwareStatus);

  // called immediately to get the latest version, on page load
-  const { data: latestVersion } = useRequest(getStableVersion);
-  const { data: latestDevVersion } = useRequest(getDevVersion);
+  // set immediate to false to avoid calling the API on page load and GH blocking while testing!
+  const { data: latestVersion } = useRequest(getStableVersion, {
+    immediate: true
+  });
+  const { data: latestDevVersion } = useRequest(getDevVersion, {
+    immediate: true
+  });

  const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
  const STABLE_RELNOTES_URL =
@@ -138,7 +143,7 @@ const UploadDownload = () => {
    });
  };

-  useLayoutTitle(LL.UPLOAD_DOWNLOAD());
+  useLayoutTitle(LL.DOWNLOAD_UPLOAD());

  const content = () => {
    if (!data) {
@@ -148,58 +153,6 @@ const UploadDownload = () => {
    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;({getPlatform()})
-          <Divider />
-          {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>
-
-        <SingleUpload />
-
-        <Typography sx={{ pt: 4, pb: 2 }} variant="h6" color="primary">
          {LL.DOWNLOAD(0)}
        </Typography>
        <Box color="warning.main">
@@ -215,6 +168,7 @@ const UploadDownload = () => {
          >
            {LL.SUPPORT_INFORMATION(0)}
          </Button>
+          {/* TODO translate All Values */}
          <Button
            sx={{ ml: 2 }}
            startIcon={<DownloadIcon />}
@@ -278,6 +232,60 @@ const UploadDownload = () => {
            {LL.SCHEDULE(0)}
          </Button>
        </Box>
+
+        <Box color="warning.main">
+          <Typography mt={2} variant="body2">
+            {LL.EMS_ESP_VER()}
+          </Typography>
+        </Box>
+        <Box p={2} mt={2} border="1px solid grey" borderRadius={2}>
+          {LL.VERSION_ON() + ' '}
+          <b>{data.emsesp_version}</b>&nbsp;({getPlatform()})
+          <Divider />
+          {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>
+
+        <SingleUpload />
      </>
    );
  };
@@ -285,4 +293,4 @@ const UploadDownload = () => {
  return <SectionContent>{content()}</SectionContent>;
 };

-export default UploadDownload;
+export default DownloadUpload;
--- a/interface/src/app/settings/Settings.tsx
+++ b/interface/src/app/settings/Settings.tsx
@@ -136,8 +136,8 @@ const Settings = () => {
        <ListMenuItem
          icon={ImportExportIcon}
          bgcolor="#5d89f7"
-          label={LL.UPLOAD_DOWNLOAD()}
-          text={LL.UPLOAD_DOWNLOAD_1()}
+          label={LL.DOWNLOAD_UPLOAD()}
+          text={LL.DOWNLOAD_UPLOAD_1()}
          to="upload"
        />
      </List>
--- a/interface/src/components/upload/DragNdrop.tsx
+++ b/interface/src/components/upload/DragNdrop.tsx
@@ -1,15 +1,17 @@
+// 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
 import { type ChangeEvent, useRef, useState } from 'react';
-import { AiOutlineCloudUpload } from 'react-icons/ai';
-import { MdClear } from 'react-icons/md';

+import CancelIcon from '@mui/icons-material/Cancel';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import UploadIcon from '@mui/icons-material/Upload';
-import { Button } from '@mui/material';
+import { Box, Button } from '@mui/material';

 import { useI18nContext } from 'i18n/i18n-react';

 import './drag-drop.css';

-const DragNdrop = ({ onFileSelected, width, height }) => {
+const DragNdrop = ({ onFileSelected }) => {
  const [file, setFile] = useState<File>();
  const inputRef = useRef<HTMLInputElement | null>(null);
  const { LL } = useI18nContext();
@@ -19,6 +21,7 @@ const DragNdrop = ({ onFileSelected, width, height }) => {
      return;
    }
    setFile(e.target.files[0]);
+    e.target.value = ''; // this is to allow the same file to be selected again
  };

  const handleDrop = (event) => {
@@ -44,60 +47,55 @@ const DragNdrop = ({ onFileSelected, width, height }) => {
  };

  return (
-    <section className="drag-drop" style={{ width: width, height: height }}>
    <div
      className={`document-uploader ${file ? 'upload-box active' : 'upload-box'}`}
      onDrop={handleDrop}
      onDragOver={(event) => event.preventDefault()}
      onClick={handleBrowseClick}
    >
-        <>
      <div className="upload-info">
-            <AiOutlineCloudUpload />
-            <div>
-              <p>Drag and drop a file here or click to select one</p>
-            </div>
+        <CloudUploadIcon sx={{ marginRight: 4 }} color="primary" fontSize="large" />
+        {/* TODO translate */}
+        <p>drag and drop a file here or click to select one</p>
      </div>

      <input
        type="file"
        hidden
-            id="browse"
        onChange={handleFileChange}
        ref={inputRef}
        accept=".json,.txt,.csv,.bin"
        multiple={false}
+        style={{ display: 'none' }}
      />
-        </>

      {file && (
        <>
-            <div className="file-list">
-              <div className="file-item">
          <div className="file-info">
            <p>{file.name}</p>
          </div>
-                <div className="file-actions">
-                  <MdClear
-                    style={{ width: 18, verticalAlign: 'middle' }}
-                    onClick={(e) => handleRemoveFile(e)}
-                  />
-                </div>
-              </div>
-            </div>
-
+          <Box>
            <Button
+              startIcon={<CancelIcon />}
+              variant="outlined"
+              color="error"
+              onClick={(e) => handleRemoveFile(e)}
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              sx={{ ml: 2 }}
              startIcon={<UploadIcon />}
              variant="outlined"
-              color="secondary"
+              color="primary"
              onClick={handleUploadClick}
            >
              {LL.UPLOAD()}
            </Button>
+          </Box>
        </>
      )}
    </div>
-    </section>
  );
 };

--- a/interface/src/components/upload/SingleUpload.tsx
+++ b/interface/src/components/upload/SingleUpload.tsx
@@ -103,7 +103,7 @@ const SingleUpload = () => {
          )}
        </>
      ) : (
-        <DragNdrop onFileSelected={setFile} width="340px" height="140px" />
+        <DragNdrop onFileSelected={setFile} />
      )}

      {md5 && (
--- a/interface/src/components/upload/drag-drop.css
+++ b/interface/src/components/upload/drag-drop.css
@@ -1,12 +1,6 @@
-.drag-drop {
-  /* background: #fff; */
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-}
-
 .document-uploader {
  border: 2px dashed #4282fe;
-  /* background-color: #f4fbff; */
+  background-color: #2e3339;
  padding: 10px;
  display: flex;
  flex-direction: column;
@@ -23,61 +17,17 @@
  .upload-info {
    display: flex;
    align-items: center;
-    margin-bottom: 1rem;
-
-    svg {
-      font-size: 36px;
-      margin-right: 1rem;
  }

-    div {
-      p {
-        margin: 0;
-        font-size: 14px;
-      }
-    }
-  }
-
-  .file-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  .file-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-
  .file-info {
    display: flex;
    flex-direction: column;
-      gap: 0.25rem;
-      flex: 1;
-
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
    p {
-        margin: 0;
      font-size: 14px;
      color: #6dc24b;
    }
  }
-
-    .file-actions {
-      cursor: pointer;
-
-      &:hover {
-        svg {
-          color: #d44;
-        }
-      }
-    }
-  }
-
-  input[type='file'] {
-    display: none;
-  }
 }
--- a/interface/src/i18n/de/index.ts
+++ b/interface/src/i18n/de/index.ts
@@ -169,7 +169,7 @@ const de: Translation = {
  SYSTEM: 'System',
  LOG_OF: '{0}protokoll',
  STATUS_OF: '{0} Status',
-  UPLOAD_DOWNLOAD: 'Hoch-/Herunterladen',
+  DOWNLOAD_UPLOAD: 'Herunterladen/Hochladen',
  VERSION_ON: 'Sie verwenden derzeit',
  CLOSE: 'Schließen',
  USE: 'Verwenden Sie',
@@ -324,7 +324,7 @@ const de: Translation = {
  SYSTEM_MEMORY: 'Systemspeicher',
  APPLICATION_SETTINGS_1: 'Ändern Sie die EMS-ESP-Anwendungseinstellungen',
  SECURITY_1: 'Benutzer hinzufügen oder entfernen',
-  UPLOAD_DOWNLOAD_1: 'Einstellungen und Firmware hochladen/herunterladen',
+  DOWNLOAD_UPLOAD_1: 'Einstellungen und Firmware herunterladen/hochladen',
  MODULES: 'Module',
  MODULES_1: 'Externe Module aktivieren oder deaktivieren',
  MODULES_UPDATED: 'Module aktualisiert',
--- a/interface/src/i18n/en/index.ts
+++ b/interface/src/i18n/en/index.ts
@@ -169,7 +169,7 @@ const en: Translation = {
  SYSTEM: 'System',
  LOG_OF: '{0} Log',
  STATUS_OF: '{0} Status',
-  UPLOAD_DOWNLOAD: 'Upload/Download',
+  DOWNLOAD_UPLOAD: 'Download/Upload',
  VERSION_ON: 'You are currently on version',
  CLOSE: 'Close',
  USE: 'Use',
@@ -324,7 +324,7 @@ const en: Translation = {
  SYSTEM_MEMORY: 'System Memory',
  APPLICATION_SETTINGS_1: 'Modify EMS-ESP Application Settings',
  SECURITY_1: 'Add or remove users',
-  UPLOAD_DOWNLOAD_1: 'Upload/Download Settings and Firmware',
+  DOWNLOAD_UPLOAD_1: 'Download and Upload Settings and Firmware',
  MODULES: 'Modules',
  MODULES_1: 'Activate or deactivate external modules',
  MODULES_UPDATED: 'Modules updated',
--- a/interface/src/i18n/fr/index.ts
+++ b/interface/src/i18n/fr/index.ts
@@ -169,7 +169,7 @@ const fr: Translation = {
  SYSTEM: 'Système',
  LOG_OF: '{0} Log',
  STATUS_OF: 'Statut {0}',
-  UPLOAD_DOWNLOAD: 'Upload/Download',
+  DOWNLOAD_UPLOAD: 'Download/Upload', // TODO translate
  VERSION_ON: 'You are currently on', // TODO translate
  CLOSE: 'Fermer',
  USE: 'Utiliser',
@@ -324,7 +324,7 @@ const fr: Translation = {
  SYSTEM_MEMORY: 'System Memory', // TODO translate
  APPLICATION_SETTINGS_1: 'Modify EMS-ESP Application Settings', // TODO translate
  SECURITY_1: 'Add or remove users', // TODO translate
-  UPLOAD_DOWNLOAD_1: 'Upload/Download Settings and Firmware', // TODO translate
+  DOWNLOAD_UPLOAD_1: 'Download and Upload Settings and Firmware', // TODO translate
  MODULES: 'Module', // TODO translate
  MODULES_1: 'Activer ou désactiver les modules externes', // TODO translate
  MODULES_UPDATED: 'Modules updated', // TODO translate
--- a/interface/src/i18n/it/index.ts
+++ b/interface/src/i18n/it/index.ts
@@ -169,7 +169,7 @@ const it: Translation = {
  SYSTEM: 'Sistema',
  LOG_OF: 'Registro {0}',
  STATUS_OF: 'Stato {0}',
-  UPLOAD_DOWNLOAD: 'Caricamento/Scaricamento',
+  DOWNLOAD_UPLOAD: 'Scaricamento/Caricamento',
  VERSION_ON: 'Attualmente stai eseguendo la versione',
  CLOSE: 'Chiudere',
  USE: 'Usa',
@@ -324,7 +324,7 @@ const it: Translation = {
  SYSTEM_MEMORY: 'System Memory', // TODO translate
  APPLICATION_SETTINGS_1: 'Modify EMS-ESP Application Settings', // TODO translate
  SECURITY_1: 'Add or remove users', // TODO translate
-  UPLOAD_DOWNLOAD_1: 'Upload/Download Settings and Firmware', // TODO translate
+  DOWNLOAD_UPLOAD_1: 'Download and Upload Settings and Firmware', // TODO translate
  MODULES: 'Module', // TODO translate
  MODULES_1: 'Attiva o disattiva i moduli esterni', // TODO translate
  MODULES_UPDATED: 'Modules updated', // TODO translate
--- a/interface/src/i18n/nl/index.ts
+++ b/interface/src/i18n/nl/index.ts
@@ -169,7 +169,7 @@ const nl: Translation = {
  SYSTEM: 'Systeem',
  LOG_OF: '{0} Log',
  STATUS_OF: '{0} Status',
-  UPLOAD_DOWNLOAD: 'Upload/Download',
+  DOWNLOAD_UPLOAD: 'Download/Upload',
  VERSION_ON: 'U bevindt zich momenteel op versie',
  CLOSE: 'Sluiten',
  USE: 'Gebruik',
@@ -324,7 +324,7 @@ const nl: Translation = {
  SYSTEM_MEMORY: 'System Geheugen',
  APPLICATION_SETTINGS_1: 'Applicatie-instellingen wijzigen',
  SECURITY_1: 'Gebruikers toevoegen of verwijderen',
-  UPLOAD_DOWNLOAD_1: 'Upload-/downloadinstellingen en firmware',
+  DOWNLOAD_UPLOAD_1: 'Download en upload instellingen en firmware',
  MODULES: 'Module',
  MODULES_1: 'Externe modules activeren of deactiveren', // TODO translate
  MODULES_UPDATED: 'Modules geüpdatet', 
--- a/interface/src/i18n/no/index.ts
+++ b/interface/src/i18n/no/index.ts
@@ -169,7 +169,7 @@ const no: Translation = {
  SYSTEM: 'System',
  LOG_OF: '{0} Logg',
  STATUS_OF: '{0} Status',
-  UPLOAD_DOWNLOAD: 'Opp/Nedlasting',
+  DOWNLOAD_UPLOAD: 'Nedlasting/Opp',
  VERSION_ON: 'You are currently on', // TODO translate
  CLOSE: 'Steng',
  USE: 'Bruk',
@@ -324,7 +324,7 @@ const no: Translation = {
  SYSTEM_MEMORY: 'System Memory', // TODO translate
  APPLICATION_SETTINGS_1: 'Modify EMS-ESP Application Settings', // TODO translate
  SECURITY_1: 'Add or remove users', // TODO translate
-  UPLOAD_DOWNLOAD_1: 'Upload/Download Settings and Firmware', // TODO translate
+  DOWNLOAD_UPLOAD_1: 'Download and Upload Settings and Firmware', // TODO translate
  MODULES: 'Module', // TODO translate
  MODULES_1: 'Aktiver eller deaktiver eksterne moduler', // TODO translate
  MODULES_UPDATED: 'Modules updated', // TODO translate
--- a/interface/src/i18n/pl/index.ts
+++ b/interface/src/i18n/pl/index.ts
@@ -169,7 +169,7 @@ const pl: BaseTranslation = {
  SYSTEM: '{{S|s||s}}yste{{m|mu||mowy}}',
  LOG_OF: 'Log {0}',
  STATUS_OF: 'Status {0}',
-  UPLOAD_DOWNLOAD: 'Przesyłanie plików',
+  DOWNLOAD_UPLOAD: 'Plików przesyłanie',
  VERSION_ON: 'Aktualnie używasz',
  CLOSE: 'Zamknij',
  USE: 'Aby zaktualizować firmware skorzystaj z funkcji',
@@ -324,7 +324,7 @@ const pl: BaseTranslation = {
  SYSTEM_MEMORY: 'Pamięć systemowa',
  APPLICATION_SETTINGS_1: 'Modyfikacja ustawień aplikacji EMS-ESP',
  SECURITY_1: 'Dodawanie i usuwanie użytkowników',
-  UPLOAD_DOWNLOAD_1: 'Wysyłanie/pobieranie ustawień i firmware',
+  DOWNLOAD_UPLOAD_1: 'Pobieranie/wysyłanie ustawień i firmware',
  MODULES: 'Module', // TODO translate
  MODULES_1: 'Aktywuj lub dezaktywuj moduły zewnętrzne', // TODO translate
  MODULES_UPDATED: 'Modules updated', // TODO translate
--- a/interface/src/i18n/sk/index.ts
+++ b/interface/src/i18n/sk/index.ts
@@ -169,7 +169,7 @@ const sk: Translation = {
  SYSTEM: 'Systém',
  LOG_OF: '{0} Log',
  STATUS_OF: '{0} Stav',
-  UPLOAD_DOWNLOAD: 'Nahrať/Stiahnuť',
+  DOWNLOAD_UPLOAD: 'Stiahnuť/Nahrať',
  VERSION_ON: 'Momentálne nainštalovaná verzia: ',
  CLOSE: 'Zatvoriť',
  USE: 'Použiť',
@@ -324,7 +324,7 @@ const sk: Translation = {
  SYSTEM_MEMORY: 'System Memory', // TODO translate
  APPLICATION_SETTINGS_1: 'Modify EMS-ESP Application Settings', // TODO translate
  SECURITY_1: 'Add or remove users', // TODO translate
-  UPLOAD_DOWNLOAD_1: 'Upload/Download Settings and Firmware', // TODO translate
+  DOWNLOAD_UPLOAD_1: 'Download and Upload Settings and Firmware', // TODO translate
  MODULES: 'Module', // TODO translate
  MODULES_1: 'Aktivujte alebo deaktivujte externé moduly', // TODO translate
  MODULES_UPDATED: 'Modules updated', // TODO translate
--- a/interface/src/i18n/sv/index.ts
+++ b/interface/src/i18n/sv/index.ts
@@ -169,7 +169,7 @@ const sv: Translation = {
  SYSTEM: 'System',
  LOG_OF: '{0} Logg',
  STATUS_OF: '{0} Status',
-  UPLOAD_DOWNLOAD: 'Upp/Nedladdning',
+  DOWNLOAD_UPLOAD: 'Nedladdning/Upp',
  VERSION_ON: 'You are currently on', // TODO translate
  CLOSE: 'Stäng',
  USE: 'Använd',
@@ -324,7 +324,7 @@ const sv: Translation = {
  SYSTEM_MEMORY: 'System Memory', // TODO translate
  APPLICATION_SETTINGS_1: 'Modify EMS-ESP Application Settings', // TODO translate
  SECURITY_1: 'Add or remove users', // TODO translate
-  UPLOAD_DOWNLOAD_1: 'Upload/Download Settings and Firmware', // TODO translate
+  DOWNLOAD_UPLOAD_1: 'Download and Upload Settings and Firmware', // TODO translate
  MODULES: 'Module', // TODO translate
  MODULES_1: 'Aktivera eller avaktivera externa moduler', // TODO translate
  MODULES_UPDATED: 'Modules updated', // TODO translate
--- a/interface/src/i18n/tr/index.ts
+++ b/interface/src/i18n/tr/index.ts
@@ -169,7 +169,7 @@ const tr: Translation = {
  SYSTEM: 'Sistem',
  LOG_OF: '{0} Kaydı',
  STATUS_OF: '{0} Durumu',
-  UPLOAD_DOWNLOAD: 'Yükleme/İndirme',
+  DOWNLOAD_UPLOAD: 'İndirme/Yükleme',
  VERSION_ON: 'You are currently on', // TODO translate
  CLOSE: 'Kapat',
  USE: 'KUllan',
@@ -324,7 +324,7 @@ const tr: Translation = {
  SYSTEM_MEMORY: 'System Memory', // TODO translate
  APPLICATION_SETTINGS_1: 'Modify EMS-ESP Application Settings', // TODO translate
  SECURITY_1: 'Add or remove users', // TODO translate
-  UPLOAD_DOWNLOAD_1: 'Upload/Download Settings and Firmware', // TODO translate
+  DOWNLOAD_UPLOAD_1: 'Download and Upload Settings and Firmware', // TODO translate
  MODULES: 'Module', // TODO translate
  MODULES_1: 'Harici modülleri etkinleştirin veya devre dışı bırakın', // TODO translate
  MODULES_UPDATED: 'Modules updated', // TODO translate
--- a/interface/yarn.lock
+++ b/interface/yarn.lock
@@ -1701,7 +1701,7 @@ __metadata:
    typesafe-i18n: "npm:^5.26.2"
    typescript: "npm:^5.5.4"
    typescript-eslint: "npm:8.1.0"
-    vite: "npm:^5.4.0"
+    vite: "npm:^5.4.1"
    vite-plugin-imagemin: "npm:^0.6.1"
    vite-tsconfig-paths: "npm:^5.0.1"
  languageName: unknown
@@ -5620,7 +5620,7 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss@npm:^8.4.40":
+"postcss@npm:^8.4.41":
  version: 8.4.41
  resolution: "postcss@npm:8.4.41"
  dependencies:
@@ -7037,13 +7037,13 @@ __metadata:
  languageName: node
  linkType: hard

-"vite@npm:^5.4.0":
-  version: 5.4.0
-  resolution: "vite@npm:5.4.0"
+"vite@npm:^5.4.1":
+  version: 5.4.1
+  resolution: "vite@npm:5.4.1"
  dependencies:
    esbuild: "npm:^0.21.3"
    fsevents: "npm:~2.3.3"
-    postcss: "npm:^8.4.40"
+    postcss: "npm:^8.4.41"
    rollup: "npm:^4.13.0"
  peerDependencies:
    "@types/node": ^18.0.0 || >=20.0.0
@@ -7076,7 +7076,7 @@ __metadata:
      optional: true
  bin:
    vite: bin/vite.js
-  checksum: 10c0/122de7795e1c3c08cd0acc7d77296f908398266b424492be7310400107f37a3cf4c9506f2b4b16619e57299ca2859b8ca187aac5e25f8e66d84f9204a1d72d18
+  checksum: 10c0/b9ea824f1a946aa494f756e6d9dd88869baa62ae5ba3071b32b6a20958fd622cb624c860bdd7daee201c83ca029feaf8bbe2d2a6e172a5d49308772f8899d86d
  languageName: node
  linkType: hard