Merge pull request #1820 from proddy/dev

export DeviceValues and format Device Values window
emsesp · Jun 24, 2024 · c7759a7 · c7759a7
2 parents e037c07 + e3b37e8
commit c7759a7
Show file tree

Hide file tree

Showing 13 changed files with 177 additions and 138 deletions.
diff --git a/.github/workflows/github-releases-to-discord.yml b/.github/workflows/github-releases-to-discord.yml
@@ -10,7 +10,7 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Github Releases To Discord
+      - name: GitHub Releases To Discord
         uses: SethCohen/[email protected]
         with:
           webhook_url: ${{ secrets.WEBHOOK_URL }}

diff --git a/interface/package.json b/interface/package.json
@@ -44,7 +44,7 @@
     "react-dom": "latest",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
-    "react-router-dom": "^6.23.1",
+    "react-router-dom": "^6.24.0",
     "react-toastify": "^10.0.5",
     "typesafe-i18n": "^5.26.2",
     "typescript": "^5.5.2"
@@ -53,7 +53,7 @@
     "@babel/core": "^7.24.7",
     "@eslint/js": "^9.5.0",
     "@preact/compat": "^17.1.2",
-    "@preact/preset-vite": "^2.8.2",
+    "@preact/preset-vite": "^2.8.3",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/babel__core": "^7",
     "concurrently": "^8.2.2",
@@ -63,7 +63,7 @@
     "prettier": "^3.3.2",
     "rollup-plugin-visualizer": "^5.12.0",
     "terser": "^5.31.1",
-    "typescript-eslint": "^7.13.1",
+    "typescript-eslint": "^7.14.1",
     "vite": "^5.3.1",
     "vite-plugin-imagemin": "^0.6.1",
     "vite-tsconfig-paths": "^4.3.2"

diff --git a/interface/src/i18n/de/index.ts b/interface/src/i18n/de/index.ts
@@ -163,9 +163,9 @@ const de: Translation = {
   SUPPORT_INFORMATION: 'Unterstützende Informationen',
   HELP_INFORMATION_1: 'EMS-ESP Konfigurationsanweisungen und mehr finden Sie im Online-Wiki',
   HELP_INFORMATION_2: 'Für einen Live-Community-Chat besuchen Sie unseren Discord-Server',
-  HELP_INFORMATION_3: 'Um neue Funktionen anzufragen oder Fehler zu melden, eröffnen Sie ein Issue auf Github',
+  HELP_INFORMATION_3: 'Um neue Funktionen anzufragen oder Fehler zu melden, eröffnen Sie ein Issue auf GitHub',
   HELP_INFORMATION_4: 'Bitte laden Sie die System-Details und hängen Sie sie an das Support-Issue an. ',
-  HELP_INFORMATION_5: 'EMS-ESP ist ein freies Open-Source Projekt. Bitte unterstützen Sie die zukünftige Entwicklung mit einem "Star" auf Github!',
+  HELP_INFORMATION_5: 'EMS-ESP ist ein freies Open-Source Projekt. Bitte unterstützen Sie die zukünftige Entwicklung mit einem "Star" auf GitHub!',
   UPLOAD: 'Hochladen',
   DOWNLOAD: '{{H|h|h}}erunterladen',
   ABORTED: 'abgebrochen',

diff --git a/interface/src/i18n/en/index.ts b/interface/src/i18n/en/index.ts
@@ -165,7 +165,7 @@ const en: Translation = {
   HELP_INFORMATION_2: 'For live community chat join our Discord server',
   HELP_INFORMATION_3: 'To request a feature or report a bug',
   HELP_INFORMATION_4: 'Download and attach your support information for a faster response when reporting an issue',
-  HELP_INFORMATION_5: 'EMS-ESP is a free and open-source project. Please support its future development by giving it a star on Github!',
+  HELP_INFORMATION_5: 'EMS-ESP is a free and open-source project. Please support its future development by giving it a star on GitHub!',
   UPLOAD: 'Upload',
   DOWNLOAD: '{{D|d|d}}ownload',
   ABORTED: 'aborted',

diff --git a/interface/src/i18n/fr/index.ts b/interface/src/i18n/fr/index.ts
@@ -165,7 +165,7 @@ const fr: Translation = {
   HELP_INFORMATION_2: 'Pour une discussion en direct avec la communauté, rejoignez notre serveur Discord',
   HELP_INFORMATION_3: 'Pour demander une fonctionnalité ou signaler un problème',
   HELP_INFORMATION_4: "N'oubliez pas de télécharger et de joindre les informations relatives à votre système pour obtenir une réponse plus rapide lorsque vous signalez un problème",
-  HELP_INFORMATION_5: 'EMS-ESP est un projet libre et open-source. Merci de soutenir son développement futur en lui donnant une étoile sur Github !',
+  HELP_INFORMATION_5: 'EMS-ESP est un projet libre et open-source. Merci de soutenir son développement futur en lui donnant une étoile sur GitHub !',
   UPLOAD: 'Upload',
   DOWNLOAD: '{{D|d|d}}ownload',
   ABORTED: 'annulé',

diff --git a/interface/src/i18n/it/index.ts b/interface/src/i18n/it/index.ts
@@ -165,7 +165,7 @@ const it: Translation = {
   HELP_INFORMATION_2: 'Per la chat della community dal vivo unisciti al nostro server Discord',
   HELP_INFORMATION_3: 'Per richiedere una funzionalità o segnalare un errore',
   HELP_INFORMATION_4: 'Ricordati di scaricare e allegare le informazioni del tuo sistema per una risposta più rapida quando segnali un problema',
-  HELP_INFORMATION_5: 'EMS-ESP è un progetto gratuito e open-source. Supporta il suo sviluppo futuro assegnandogli una stella su Github!',
+  HELP_INFORMATION_5: 'EMS-ESP è un progetto gratuito e open-source. Supporta il suo sviluppo futuro assegnandogli una stella su GitHub!',
   UPLOAD: 'Carica',
   DOWNLOAD: 'Scarica',
   ABORTED: 'Annullato',

diff --git a/interface/src/i18n/nl/index.ts b/interface/src/i18n/nl/index.ts
@@ -165,7 +165,7 @@ const nl: Translation = {
   HELP_INFORMATION_2: 'Voor de live community ga naar de Discord server',
   HELP_INFORMATION_3: 'Om een nieuwe feature te vragen of een bug te rapporteren',
   HELP_INFORMATION_4: 'Zorg dat je ook je systeem details zijn toevoeged voor een sneller antwoord',
-  HELP_INFORMATION_5: 'EMS-ESP is een gratis en open source project. Steun ons met een Star op Github!',
+  HELP_INFORMATION_5: 'EMS-ESP is een gratis en open source project. Steun ons met een Star op GitHub!',
   UPLOAD: 'Upload',
   DOWNLOAD: '{{D|d|d}}ownload',
   ABORTED: 'afgebroken',

diff --git a/interface/src/i18n/pl/index.ts b/interface/src/i18n/pl/index.ts
@@ -165,7 +165,7 @@ const pl: BaseTranslation = {
   HELP_INFORMATION_2: 'Dołącz do naszego serwera Discord by komunikować się na żywo ze społecznością.',
   HELP_INFORMATION_3: 'Zaproponuj nową funkcjonalność lub zgłoś problem.',
   HELP_INFORMATION_4: 'Zgłaszając problem, nie zapomnij pobrać i dołączyć informacji o swoim systemie!',
-  HELP_INFORMATION_5: 'EMS-ESP jest darmowym projektem typu open-source. Aby go wesprzeć, rozważ przyznanie nam gwiazdki na Github!',
+  HELP_INFORMATION_5: 'EMS-ESP jest darmowym projektem typu open-source. Aby go wesprzeć, rozważ przyznanie nam gwiazdki na GitHub!',
   UPLOAD: 'Wysyłanie',
   DOWNLOAD: '{{P|p||P}}obier{{anie|z||z}}',
   ABORTED: 'zostało przerwane!',

diff --git a/interface/src/i18n/sk/index.ts b/interface/src/i18n/sk/index.ts
@@ -165,7 +165,7 @@ const sk: Translation = {
   HELP_INFORMATION_2: 'Pre živý komunitný chat sa pripojte na náš Discord server',
   HELP_INFORMATION_3: 'Ak chcete požiadať o funkciu alebo nahlásiť chybu',
   HELP_INFORMATION_4: 'nezabudnite si stiahnuť a pripojiť informácie o vašom systéme, aby ste mohli rýchlejšie reagovať pri nahlasovaní problému',
-  HELP_INFORMATION_5: 'EMS-ESP je bezplatný a open source projekt. Podporte jeho budúci vývoj tým, že mu dáte hviezdičku na Github!',
+  HELP_INFORMATION_5: 'EMS-ESP je bezplatný a open source projekt. Podporte jeho budúci vývoj tým, že mu dáte hviezdičku na GitHub!',
   UPLOAD: 'Nahrať',
   DOWNLOAD: '{{S|s|s}}tiahnuť',
   ABORTED: 'zrušené',

diff --git a/interface/src/i18n/tr/index.ts b/interface/src/i18n/tr/index.ts
@@ -165,7 +165,7 @@ const tr: Translation = {
   HELP_INFORMATION_2: 'Canlı topluluk sohbeti için Discord sunucumuza katılın',
   HELP_INFORMATION_3: 'Yeni bir özellik talep etmek yada hata bildirmek için',
   HELP_INFORMATION_4: 'Bir sorun bildirirken daha hızlı bir dönüş için sistem bilginizi indirip eklemeyi unutmayın',
-  HELP_INFORMATION_5: 'EMS-ESP ücretsiz ve açık kaynaklı bir projedir. Lütfen geliştirmeyi desteklemek için Githubda projeye yıldız verin!',
+  HELP_INFORMATION_5: 'EMS-ESP ücretsiz ve açık kaynaklı bir projedir. Lütfen geliştirmeyi desteklemek için GitHubda projeye yıldız verin!',
   UPLOAD: 'Yükleme',
   DOWNLOAD: '{{İ|i|i}}İndirme',
   ABORTED: 'iptal edildi',

diff --git a/interface/src/project/Devices.tsx b/interface/src/project/Devices.tsx
@@ -36,7 +36,11 @@ import {
   List,
   ListItem,
   ListItemText,
-  Typography
+  Tooltip,
+  type TooltipProps,
+  Typography,
+  styled,
+  tooltipClasses
 } from '@mui/material';
 
 import { useRowSelect } from '@table-library/react-table-library/select';
@@ -234,6 +238,20 @@ const Devices: FC = () => {
     }
   ]);
 
+  const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} arrow classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.arrow}`]: {
+      color: theme.palette.success.main
+    },
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: theme.palette.success.main,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 10
+    }
+  }));
+
   const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
@@ -399,13 +417,22 @@ const Devices: FC = () => {
         '\r\n'
     );
 
-    const csvFile = new Blob([csvData], { type: 'text/csv;charset:utf-8' });
-    const downloadLink = document.createElement('a');
-    downloadLink.download = filename;
-    downloadLink.href = window.URL.createObjectURL(csvFile);
-    document.body.appendChild(downloadLink);
-    downloadLink.click();
-    document.body.removeChild(downloadLink);
+    const downloadBlob = (blob: Blob) => {
+      const downloadLink = document.createElement('a');
+      downloadLink.download = filename;
+      downloadLink.href = window.URL.createObjectURL(blob);
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+    };
+
+    downloadBlob(
+      new Blob([JSON.stringify(deviceData, null, 2)], {
+        type: 'text;charset:utf-8'
+      })
+    );
+
+    downloadBlob(new Blob([csvData], { type: 'text/csv;charset:utf-8' }));
   };
 
   useEffect(() => {
@@ -608,11 +635,11 @@ const Devices: FC = () => {
           backgroundColor: 'black',
           position: 'absolute',
           left: () => leftOffset(),
-          right: 16,
+          right: 0,
           bottom: 0,
-          top: 128,
+          top: 64,
           zIndex: 'modal',
-          maxHeight: () => size[1] - 189,
+          maxHeight: () => size[1] - 126,
           border: '1px solid #177ac9'
         }}
       >
@@ -631,53 +658,65 @@ const Devices: FC = () => {
                 coreData.devices[deviceIndex].e +
                 ' ' +
                 LL.ENTITIES(shown_data.length)}
-              <IconButton onClick={() => setShowDeviceInfo(true)}>
-                <InfoOutlinedIcon
-                  color="primary"
-                  sx={{ fontSize: 18, verticalAlign: 'middle' }}
-                />
-              </IconButton>
-              {me.admin && (
-                <IconButton onClick={customize}>
-                  <FormatListNumberedIcon
+              <ButtonTooltip title="Info">
+                <IconButton onClick={() => setShowDeviceInfo(true)}>
+                  <InfoOutlinedIcon
                     color="primary"
                     sx={{ fontSize: 18, verticalAlign: 'middle' }}
                   />
                 </IconButton>
+              </ButtonTooltip>
+              {me.admin && (
+                <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
+                  <IconButton onClick={customize}>
+                    <FormatListNumberedIcon
+                      color="primary"
+                      sx={{ fontSize: 18, verticalAlign: 'middle' }}
+                    />
+                  </IconButton>
+                </ButtonTooltip>
               )}
-              <IconButton onClick={handleDownloadCsv}>
-                <DownloadIcon
-                  color="primary"
-                  sx={{ fontSize: 18, verticalAlign: 'middle' }}
-                />
-              </IconButton>
-              <IconButton onClick={() => setOnlyFav(!onlyFav)}>
-                {onlyFav ? (
-                  <StarIcon
+              <ButtonTooltip title={LL.EXPORT()}>
+                <IconButton onClick={handleDownloadCsv}>
+                  <DownloadIcon
                     color="primary"
                     sx={{ fontSize: 18, verticalAlign: 'middle' }}
                   />
-                ) : (
-                  <StarBorderOutlinedIcon
+                </IconButton>
+              </ButtonTooltip>
+              <ButtonTooltip title="Favorites">
+                <IconButton onClick={() => setOnlyFav(!onlyFav)}>
+                  {onlyFav ? (
+                    <StarIcon
+                      color="primary"
+                      sx={{ fontSize: 18, verticalAlign: 'middle' }}
+                    />
+                  ) : (
+                    <StarBorderOutlinedIcon
+                      color="primary"
+                      sx={{ fontSize: 18, verticalAlign: 'middle' }}
+                    />
+                  )}
+                </IconButton>
+              </ButtonTooltip>
+              <ButtonTooltip title={LL.REFRESH()}>
+                <IconButton onClick={refreshData}>
+                  <RefreshIcon
                     color="primary"
                     sx={{ fontSize: 18, verticalAlign: 'middle' }}
                   />
-                )}
-              </IconButton>
-              <IconButton onClick={refreshData}>
-                <RefreshIcon
-                  color="primary"
-                  sx={{ fontSize: 18, verticalAlign: 'middle' }}
-                />
-              </IconButton>
+                </IconButton>
+              </ButtonTooltip>
             </Typography>
             <Grid item zeroMinWidth justifyContent="flex-end">
-              <IconButton onClick={resetDeviceSelect}>
-                <HighlightOffIcon
-                  color="primary"
-                  sx={{ fontSize: 18, verticalAlign: 'middle' }}
-                />
-              </IconButton>
+              <ButtonTooltip title={LL.CANCEL()}>
+                <IconButton onClick={resetDeviceSelect}>
+                  <HighlightOffIcon
+                    color="primary"
+                    sx={{ fontSize: 18, verticalAlign: 'middle' }}
+                  />
+                </IconButton>
+              </ButtonTooltip>
             </Grid>
           </Grid>
         </Box>