Skip to content

Commit

Permalink
webapp: Added global reboot wait screen
Browse files Browse the repository at this point in the history
  • Loading branch information
tbnobody committed Oct 21, 2024
1 parent 2e23c7e commit 521fce3
Show file tree
Hide file tree
Showing 11 changed files with 105 additions and 43 deletions.
7 changes: 7 additions & 0 deletions lang/es.lang.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,13 @@
"Release": "Soltar para refrescar",
"Close": "Cerrar"
},
"wait": {
"NotReady": "OpenDTU is not yet ready",
"PleaseWait": "Please wait. You will be automatically redirected to the home page."
},
"Error": {
"Oops": "Oops!"
},
"localeswitcher": {
"Dark": "Oscuro",
"Light": "Claro",
Expand Down
4 changes: 4 additions & 0 deletions lang/it.lang.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@
"Release": "Rilascia per aggiornare",
"Close": "Chiudi"
},
"wait": {
"NotReady": "OpenDTU is not yet ready",
"PleaseWait": "Please wait. You will be automatically redirected to the home page."
},
"Error": {
"Oops": "Oops!"
},
Expand Down
4 changes: 4 additions & 0 deletions webapp/src/locales/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
"Release": "Loslassen zum Aktualisieren",
"Close": "Schließen"
},
"wait": {
"NotReady": "OpenDTU ist noch nicht bereit",
"PleaseWait": "Bitte warten. Sie werden automatisch auf die Startseite weitergeleitet."
},
"Error": {
"Oops": "Oops!"
},
Expand Down
4 changes: 4 additions & 0 deletions webapp/src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
"Release": "Release to refresh",
"Close": "Close"
},
"wait": {
"NotReady": "OpenDTU is not yet ready",
"PleaseWait": "Please wait. You will be automatically redirected to the home page."
},
"Error": {
"Oops": "Oops!"
},
Expand Down
4 changes: 4 additions & 0 deletions webapp/src/locales/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
"Release": "Release to refresh",
"Close": "Fermer"
},
"wait": {
"NotReady": "OpenDTU is not yet ready",
"PleaseWait": "Please wait. You will be automatically redirected to the home page."
},
"Error": {
"Oops": "Oops!"
},
Expand Down
6 changes: 6 additions & 0 deletions webapp/src/router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import NtpAdminView from '@/views/NtpAdminView.vue';
import NtpInfoView from '@/views/NtpInfoView.vue';
import SecurityAdminView from '@/views/SecurityAdminView.vue';
import SystemInfoView from '@/views/SystemInfoView.vue';
import WaitRestartView from '@/views/WaitRestartView.vue';
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
Expand Down Expand Up @@ -118,6 +119,11 @@ const router = createRouter({
name: 'Device Reboot',
component: MaintenanceRebootView,
},
{
path: '/wait',
name: 'Wait Restart',
component: WaitRestartView,
},
],
});

Expand Down
7 changes: 7 additions & 0 deletions webapp/src/utils/waitRestart.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { Router } from 'vue-router';

export function waitRestart(router: Router) {
setTimeout(() => {
router.push('/wait');
}, 1000);
}
7 changes: 2 additions & 5 deletions webapp/src/views/ConfigAdminView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,6 @@
<BIconCheckCircle />
</span>
<span> {{ $t('fileadmin.UploadSuccess') }} </span>
<br />
<br />
<button class="btn btn-primary" @click="clearUpload">
<BIconArrowLeft /> {{ $t('fileadmin.Back') }}
</button>
</div>

<div v-else-if="!uploading">
Expand Down Expand Up @@ -137,6 +132,7 @@ import ModalDialog from '@/components/ModalDialog.vue';
import type { AlertResponse } from '@/types/Alert';
import type { FileInfo } from '@/types/File';
import { authHeader, handleResponse } from '@/utils/authentication';
import { waitRestart } from '@/utils/waitRestart';
import * as bootstrap from 'bootstrap';
import {
BIconArrowLeft,
Expand Down Expand Up @@ -251,6 +247,7 @@ export default defineComponent({
// request.response will hold the response from the server
if (request.status === 200) {
this.UploadSuccess = true;
waitRestart(this.$router);
} else if (request.status !== 500) {
this.UploadError = `[HTTP ERROR] ${request.statusText}`;
} else {
Expand Down
40 changes: 2 additions & 38 deletions webapp/src/views/FirmwareUpgradeView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,6 @@
<BIconCheckCircle />
</span>
<span> {{ $t('firmwareupgrade.OtaSuccess') }} </span>
<br />
<br />
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
</CardElement>

<CardElement
Expand Down Expand Up @@ -88,6 +81,7 @@ import { authHeader, isLoggedIn } from '@/utils/authentication';
import { BIconArrowLeft, BIconArrowRepeat, BIconCheckCircle, BIconExclamationCircleFill } from 'bootstrap-icons-vue';
import SparkMD5 from 'spark-md5';
import { defineComponent } from 'vue';
import { waitRestart } from '@/utils/waitRestart';
export default defineComponent({
components: {
Expand All @@ -107,7 +101,6 @@ export default defineComponent({
OTASuccess: false,
type: 'firmware',
file: {} as Blob,
hostCheckInterval: 0,
};
},
methods: {
Expand Down Expand Up @@ -154,7 +147,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);
waitRestart(this.$router);
} else if (request.status !== 500) {
this.OTAError = `[HTTP ERROR] ${request.statusText}`;
} else {
Expand Down Expand Up @@ -193,32 +186,6 @@ 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: 'GET' })
.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()) {
Expand All @@ -229,8 +196,5 @@ export default defineComponent({
}
this.loading = false;
},
unmounted() {
clearInterval(this.hostCheckInterval);
},
});
</script>
2 changes: 2 additions & 0 deletions webapp/src/views/MaintenanceRebootView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import ModalDialog from '@/components/ModalDialog.vue';
import { authHeader, handleResponse, isLoggedIn } from '@/utils/authentication';
import * as bootstrap from 'bootstrap';
import { defineComponent } from 'vue';
import { waitRestart } from '@/utils/waitRestart';
export default defineComponent({
components: {
Expand Down Expand Up @@ -80,6 +81,7 @@ export default defineComponent({
this.alertMessage = this.$t('apiresponse.' + data.code, data.param);
this.alertType = data.type;
this.showAlert = true;
waitRestart(this.$router);
});
this.onCloseModal(this.performReboot);
},
Expand Down
63 changes: 63 additions & 0 deletions webapp/src/views/WaitRestartView.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
<BasePage :title="$t('wait.NotReady')">
<CardElement :text="$t('wait.PleaseWait')" textVariant="text-bg-primary">
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
</CardElement>
</BasePage>
</template>

<script lang="ts">
import BasePage from '@/components/BasePage.vue';
import CardElement from '@/components/CardElement.vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
BasePage,
CardElement,
},
data() {
return {
hostCheckInterval: 0,
};
},
mounted() {
this.hostCheckInterval = setInterval(this.checkRemoteHostAndReload, 1000);
},
unmounted() {
clearInterval(this.hostCheckInterval);
},
methods: {
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: 'GET' })
.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.');
}
},
},
});
</script>

0 comments on commit 521fce3

Please sign in to comment.