Feature: Automatic page reload after firmware upgrade

This will work after the current upgrade if this code was loaded.

webapp/src/locales/de.json

@@ -549,7 +549,7 @@
         "Back": "Zurück",
         "Retry": "Wiederholen",
         "OtaStatus": "OTA-Status",
-        "OtaSuccess": "OTA erfolgreich. Das Gerät wurde automatisch neu gestartet und wird in wenigen Augenblicken wieder zur Verfügung stehen. Bitte nicht vergessen, die Weboberfläche neu zu laden!",
+        "OtaSuccess": "Das Hochladen der Firmware war erfolgreich. Das Gerät wurde automatisch neu gestartet. Wenn das Gerät wieder erreichbar ist wird die automatisch Oberfläche neu geladen.",
         "FirmwareUpload": "Firmware hochladen",
         "UploadProgress": "Hochlade-Fortschritt"
     },

webapp/src/locales/en.json

@@ -549,7 +549,7 @@
         "Back": "Back",
         "Retry": "Retry",
         "OtaStatus": "OTA Status",
-        "OtaSuccess": "OTA Success. The unit has been automatically restarted and will be available again in a few moments. Please do not forget to reload the web interface!",
+        "OtaSuccess": "The firmware upload was successful. The device was restarted automatically. When the device is accessible again, the interface is automatically reloaded.",
         "FirmwareUpload": "Firmware Upload",
         "UploadProgress": "Upload Progress"
     },

webapp/src/locales/fr.json

@@ -549,7 +549,7 @@
         "Back": "Retour",
         "Retry": "Réessayer",
         "OtaStatus": "Statut OTA",
-        "OtaSuccess": "Succès de l'OTA. L'unité a été automatiquement redémarrée et sera à nouveau disponible dans quelques instants. N'oubliez pas de recharger l'interface web !",
+        "OtaSuccess": "Le téléchargement du firmware a réussi. L'appareil a été redémarré automatiquement. Lorsque l'appareil est à nouveau accessible, l'interface est automatiquement rechargée.",
         "FirmwareUpload": "Téléversement du firmware",
         "UploadProgress": "Progression du téléversement"
     },

webapp/src/views/FirmwareUpgradeView.vue

@@ -37,9 +37,11 @@
             <span> {{ $t('firmwareupgrade.OtaSuccess') }} </span>
             <br />
             <br />
-            <button class="btn btn-primary" @click="clear">
+            <div class="text-center">
-                <BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}
+                <div class="spinner-border" role="status">
-            </button>
+                    <span class="visually-hidden"></span>
+                </div>
+            </div>
         </CardElement>
 
         <CardElement :text="$t('firmwareupgrade.FirmwareUpload')" textVariant="text-bg-primary" center-content
@@ -95,6 +97,7 @@ export default defineComponent({
             OTASuccess: false,
             type: "firmware",
             file: {} as Blob,
+            hostCheckInterval: 0
         };
     },
     methods: {
@@ -142,6 +145,7 @@ export default defineComponent({
                 // request.response will hold the response from the server
                 if (request.status === 200) {
                     this.OTASuccess = true;
+                    this.hostCheckInterval = setInterval(this.checkRemoteHostAndReload, 1000);
                 } else if (request.status !== 500) {
                     this.OTAError = `[HTTP ERROR] ${request.statusText}`;
                 } else {
@@ -181,6 +185,32 @@ export default defineComponent({
             this.OTAError = "";
             this.OTASuccess = false;
         },
+        checkRemoteHostAndReload(): void {
+            // Check if the browser is online
+            if (navigator.onLine) {
+                const remoteHostUrl = "/api/system/status";
+
+                // Use a simple fetch request to check if the remote host is reachable
+                fetch(remoteHostUrl, { method: 'HEAD' })
+                    .then(response => {
+                        // Check if the response status is OK (200-299 range)
+                        if (response.ok) {
+                            console.log('Remote host is available. Reloading page...');
+                            clearInterval(this.hostCheckInterval);
+                            this.hostCheckInterval = 0;
+                            // Perform a page reload
+                            window.location.replace("/");
+                        } else {
+                            console.log('Remote host is not reachable. Do something else if needed.');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error checking remote host:', error);
+                    });
+            } else {
+                console.log('Browser is offline. Cannot check remote host.');
+            }
+        },
     },
     mounted() {
         if (!isLoggedIn()) {
@@ -188,5 +218,8 @@ export default defineComponent({
         }
         this.loading = false;
     },
+    unmounted() {
+        clearInterval(this.hostCheckInterval);
+    }
 });
 </script>