feat(console): display QR code to access remote console via browser (#…

…408)

* Display QR code to access remote console via browser when GUI-v2 is set to default
* Upate translations

package.json

@@ -69,6 +69,7 @@
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.1",
     "react-i18nify": "^6.0.0",
+    "react-qrcode-logo": "^3.0.0",
     "react-refresh": "^0.10.0",
     "react-svg-loader": "^3.0.3",
     "resolve": "^1.22.8",

src/app/Marine2/components/ui/RemoteConsole/RemoteConsole.tsx

@@ -3,6 +3,8 @@ import { observer } from "mobx-react-lite"
 import classnames from "classnames"
 import { translate, Translate } from "react-i18nify"
 import useSize from "@react-hook/size"
+import { useApp } from "@victronenergy/mfd-modules"
+import { QRCode } from "react-qrcode-logo"
 
 const RemoteConsole = ({ host, width, height }: Props) => {
   const iframeRef = useRef<HTMLIFrameElement>(null)
@@ -12,11 +14,28 @@ const RemoteConsole = ({ host, width, height }: Props) => {
   const loading = !iframeLoaded
   const protocol = (typeof window !== "undefined" && window.location.protocol) || "http:"
   const url = protocol + "//" + host
+  const app = useApp()
 
   useEffect(() => {
     iframeRef.current?.focus()
   }, [iframeLoaded])
 
+  console.log(`Venus Running GUI version: ${app.guiVersion}`)
+
+  const consoleUrl = `${window.location.protocol}//venus.local/`
+
+  if (app.guiVersion !== 1) {
+    return (
+      <div className="flex flex-col items-center w-2/3 md:w-1/3 space-y-4">
+        <QRCode value={consoleUrl} />
+        <label className="text-xs text-victron-gray-400 sm-l:text-sm dark:text-victron-gray-500">{consoleUrl}</label>
+        <label className="text-xs text-victron-gray-400 sm-l:text-sm dark:text-victron-gray-500 text-center">
+          <Translate value={"error.remoteConsole.qrCodeMessage"} />
+        </label>
+      </div>
+    )
+  }
+
   return (
     <>
       {

src/app/locales/languages/de.json

@@ -87,7 +87,7 @@
         "off": "Aus",
         "on": "Ein",
         "passthru": "Durchleitung",
-        "pending": "Noch ausstehend",
+        "pending": "Ausstehend",
         "powerSupplyMode": "Stromversorgungsmodus",
         "remainingTime": "Restzeit",
         "running": "In Betrieb",
@@ -143,6 +143,7 @@
         "queryParams": "Abfrageparameter: %{queryParams}",
         "remoteConsole": {
             "connectionFailed": "Verbindung zum GX-Gerät nicht möglich",
+            "qrCodeMessage": "Um auf die GX-Fernbedienungskonsole zuzugreifen, vergewissern Sie sich, dass sich Ihr Telefon im selben WiFi-Netzwerk befindet wie das GX-Gerät, und scannen Sie dann diesen QR-Code.",
             "screenTooSmall": "Auf einem größeren Bildschirm öffnen, um die Remote-Konsole anzuzeigen"
         },
         "userAgent": "User agent: %{userAgent}",

src/app/locales/languages/en.json

@@ -143,6 +143,7 @@
         "queryParams": "Query params: %{queryParams}",
         "remoteConsole": {
             "connectionFailed": "Unable to connect to the GX device",
+            "qrCodeMessage": "To access the GX Remote Console, make sure your phone is on the same WiFi network as the GX device and then scan this QR code.",
             "screenTooSmall": "Open in a larger screen to view remote console"
         },
         "userAgent": "User agent: %{userAgent}",

src/app/locales/languages/fr.json

@@ -143,6 +143,7 @@
         "queryParams": "Query params: %{queryParams}",
         "remoteConsole": {
             "connectionFailed": "Pas possible de se connecter à l'appareil GX",
+            "qrCodeMessage": "Pour accéder à la console à distance GX, assurez-vous que votre téléphone est sur le même réseau Wi-Fi que l'appareil GX, puis scannez ce code QR.",
             "screenTooSmall": "Ouvrir dans un écran plus large pour visualiser la console à distance"
         },
         "userAgent": "User agent: %{userAgent}",
@@ -256,7 +257,7 @@
         "vrmPortID": "ID Portail VRM"
     },
     "widgets": {
-        "acLoads": "Charges AC",
+        "acLoads": "Charges CA",
         "batteries": "Batteries",
         "battery": "Batterie",
         "batteryWithName": "Batterie: : %{name}",

src/app/locales/languages/nl.json

@@ -143,6 +143,7 @@
         "queryParams": "Zoek :  %{queryParams}",
         "remoteConsole": {
             "connectionFailed": "Verbinding met GX apparaat mislukt",
+            "qrCodeMessage": "Om toegang te krijgen tot de GX Remote Console, moet ervoor gezorgd worden dat de telefoon zich op hetzelfde WiFi-netwerk bevindt als het GX-apparaat en vervolgens moet deze QR-code gescanned worden.",
             "screenTooSmall": "Open in een groter scherm om het Remote Console te zien"
         },
         "userAgent": "Gebruiker : %{userAgent}",

src/app/locales/languages/pl.json

@@ -87,7 +87,7 @@
         "off": "Wył.",
         "on": "Wł.",
         "passthru": "Przepuszczanie",
-        "pending": "W oczekiwaniu...",
+        "pending": "W toku",
         "powerSupplyMode": "Tryb zasilania",
         "remainingTime": "Pozostały czas",
         "running": "Działa",
@@ -143,6 +143,7 @@
         "queryParams": "Parametry zapytania: %{queryParams}",
         "remoteConsole": {
             "connectionFailed": "Nie można połączyć się z urządzeniem GX",
+            "qrCodeMessage": "Aby uzyskać dostęp do konsoli GX Remote, upewnij się, że Twój telefon jest w tej samej sieci Wi-Fi, co urządzenie GX, a następnie zeskanuj ten kod QR.",
             "screenTooSmall": "Otwórz na większym ekranie, aby wyświetlić konsolę zdalną"
         },
         "userAgent": "Agent użytkownika: %{userAgent}",

src/app/locales/languages/ru.json

@@ -143,6 +143,7 @@
         "queryParams": "queryParams",
         "remoteConsole": {
             "connectionFailed": "connectionFailed",
+            "qrCodeMessage": "qrCodeMessage",
             "screenTooSmall": "screenTooSmall"
         },
         "userAgent": "userAgent",

src/app/locales/languages/tr.json

@@ -143,6 +143,7 @@
         "queryParams": "Query params: %{queryParams}",
         "remoteConsole": {
             "connectionFailed": "GX cihazına bağlanılamıyor",
+            "qrCodeMessage": "GX Remote Console'a erişmek için telefonunuzun GX cihazıyla aynı WiFi ağında olduğundan emin olun ve ardından bu QR kodunu tarayın.",
             "screenTooSmall": "Uzak konsolu görüntülemek için daha büyük bir ekranda açın"
         },
         "userAgent": "User agent: %{userAgent}",

src/app/locales/languages/uk.json

@@ -143,6 +143,7 @@
         "queryParams": "параметри запиту",
         "remoteConsole": {
             "connectionFailed": "підключення не відбулося",
+            "qrCodeMessage": "Щоб отримати доступ до GX Консолі, переконайтеся, що ваш телефон у тій самій мережі Wi-Fi, що й пристрій GX, а потім відскануйте цей QR-код.",
             "screenTooSmall": "занадто малий екран"
         },
         "userAgent": "користувацький агент",

src/app/locales/languages/zh-CN.json

@@ -143,6 +143,7 @@
         "queryParams": "查询参数: %{queryParams}",
         "remoteConsole": {
             "connectionFailed": "无法连接到 GX 设备",
+            "qrCodeMessage": "要访问 GX 远程控制台，请确保您的手机与 GX 设备位于同一 WiFi 网络上，然后扫描此二维码。",
             "screenTooSmall": "在大屏幕中打开以查看远程控制台"
         },
         "userAgent": "用户代理: %{userAgent}",