webapp: Use object notation for all alerts

This commit is contained in:
Thomas Basler
2025-04-30 21:28:24 +02:00
parent 20ec93a710
commit 714b1cf261
8 changed files with 65 additions and 75 deletions

View File

@@ -1,7 +1,7 @@
<template>
<BasePage :title="$t('deviceadmin.DeviceManager')" :isLoading="dataLoading || pinMappingLoading || languageLoading">
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
<BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
{{ alert.message }}
</BootstrapAlert>
<form @submit="savePinConfig">
@@ -259,6 +259,7 @@ import BootstrapAlert from '@/components/BootstrapAlert.vue';
import FormFooter from '@/components/FormFooter.vue';
import InputElement from '@/components/InputElement.vue';
import PinInfo from '@/components/PinInfo.vue';
import type { AlertResponse } from '@/types/AlertResponse';
import type { DeviceConfig, Led } from '@/types/DeviceConfig';
import type { PinMapping, Device } from '@/types/PinMapping';
import { authHeader, handleResponse } from '@/utils/authentication';
@@ -279,9 +280,7 @@ export default defineComponent({
languageLoading: true,
deviceConfigList: {} as DeviceConfig,
pinMappingList: {} as PinMapping,
alertMessage: '',
alertType: 'info',
showAlert: false,
alert: {} as AlertResponse,
equalBrightnessCheckVal: false,
displayRotationList: [
{ key: 0, value: 'rot0' },
@@ -339,11 +338,11 @@ export default defineComponent({
})
.catch((error) => {
if (error.status != 404) {
this.alertMessage = this.$t('deviceadmin.ParseError', {
this.alert.message = this.$t('deviceadmin.ParseError', {
error: error.message,
});
this.alertType = 'danger';
this.showAlert = true;
this.alert.type = 'danger';
this.alert.show = true;
}
this.pinMappingList = Array<Device>();
})
@@ -381,9 +380,9 @@ export default defineComponent({
})
.then((response) => handleResponse(response, this.$emitter, this.$router))
.then((response) => {
this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
this.alertType = response.type;
this.showAlert = true;
this.alert.message = this.$t('apiresponse.' + response.code, response.param);
this.alert.type = response.type;
this.alert.show = true;
});
},
getLedIdFromNumber(ledNo: number): string {

View File

@@ -1,7 +1,7 @@
<template>
<BasePage :title="$t('dtuadmin.DtuSettings')" :isLoading="dataLoading">
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
<BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
{{ alert.message }}
</BootstrapAlert>
<form @submit="saveDtuConfig">
@@ -119,6 +119,7 @@ import BootstrapAlert from '@/components/BootstrapAlert.vue';
import CardElement from '@/components/CardElement.vue';
import FormFooter from '@/components/FormFooter.vue';
import InputElement from '@/components/InputElement.vue';
import type { AlertResponse } from '@/types/AlertResponse';
import type { DtuConfig } from '@/types/DtuConfig';
import { authHeader, handleResponse } from '@/utils/authentication';
import { BIconInfoCircle } from 'bootstrap-icons-vue';
@@ -143,9 +144,7 @@ export default defineComponent({
{ key: 2, value: 'High', db: '-6' },
{ key: 3, value: 'Max', db: '0' },
],
alertMessage: '',
alertType: 'info',
showAlert: false,
alert: {} as AlertResponse,
};
},
created() {
@@ -208,9 +207,9 @@ export default defineComponent({
})
.then((response) => handleResponse(response, this.$emitter, this.$router))
.then((response) => {
this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
this.alertType = response.type;
this.showAlert = true;
this.alert.message = this.$t('apiresponse.' + response.code, response.param);
this.alert.type = response.type;
this.alert.show = true;
});
},
},

View File

@@ -1,7 +1,7 @@
<template>
<BasePage :title="$t('login.Login')" :isLoading="dataLoading">
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
<BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
{{ alert.message }}
</BootstrapAlert>
<CardElement :text="$t('login.SystemLogin')" textVariant="text-bg-danger">
@@ -48,6 +48,7 @@ import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from '@/components/BootstrapAlert.vue';
import CardElement from '@/components/CardElement.vue';
import router from '@/router';
import type { AlertResponse } from '@/types/AlertResponse';
import { login } from '@/utils';
import { defineComponent } from 'vue';
@@ -60,9 +61,7 @@ export default defineComponent({
data() {
return {
dataLoading: false,
alertMessage: '',
alertType: 'info',
showAlert: false,
alert: {} as AlertResponse,
returnUrl: '',
username: '',
password: '',
@@ -91,9 +90,9 @@ export default defineComponent({
},
(error) => {
this.$emitter.emit('logged-out');
this.alertMessage = error;
this.alertType = 'danger';
this.showAlert = true;
this.alert.message = error;
this.alert.type = 'danger';
this.alert.show = true;
this.dataLoading = false;
}
);

View File

@@ -1,7 +1,7 @@
<template>
<BasePage :title="$t('maintenancereboot.DeviceReboot')" :isLoading="dataLoading">
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
<BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
{{ alert.message }}
</BootstrapAlert>
<CardElement :text="$t('maintenancereboot.PerformReboot')" textVariant="text-bg-primary" center-content>
@@ -33,6 +33,7 @@ import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from '@/components/BootstrapAlert.vue';
import CardElement from '@/components/CardElement.vue';
import ModalDialog from '@/components/ModalDialog.vue';
import type { AlertResponse } from '@/types/AlertResponse';
import { authHeader, handleResponse, isLoggedIn } from '@/utils/authentication';
import * as bootstrap from 'bootstrap';
import { defineComponent } from 'vue';
@@ -48,12 +49,8 @@ export default defineComponent({
data() {
return {
performReboot: {} as bootstrap.Modal,
dataLoading: false,
alertMessage: '',
alertType: 'info',
showAlert: false,
alert: {} as AlertResponse,
};
},
mounted() {
@@ -78,9 +75,9 @@ export default defineComponent({
})
.then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => {
this.alertMessage = this.$t('apiresponse.' + data.code, data.param);
this.alertType = data.type;
this.showAlert = true;
this.alert.message = this.$t('apiresponse.' + data.code, data.param);
this.alert.type = data.type;
this.alert.show = true;
waitRestart(this.$router);
});
this.onCloseModal(this.performReboot);

View File

@@ -1,7 +1,7 @@
<template>
<BasePage :title="$t('mqttadmin.MqttSettings')" :isLoading="dataLoading">
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
<BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
{{ alert.message }}
</BootstrapAlert>
<form @submit="saveMqttConfig">
@@ -222,6 +222,7 @@ import BootstrapAlert from '@/components/BootstrapAlert.vue';
import CardElement from '@/components/CardElement.vue';
import FormFooter from '@/components/FormFooter.vue';
import InputElement from '@/components/InputElement.vue';
import type { AlertResponse } from '@/types/AlertResponse';
import type { MqttConfig } from '@/types/MqttConfig';
import { authHeader, handleResponse } from '@/utils/authentication';
import { defineComponent } from 'vue';
@@ -238,9 +239,7 @@ export default defineComponent({
return {
dataLoading: true,
mqttConfigList: {} as MqttConfig,
alertMessage: '',
alertType: 'info',
showAlert: false,
alert: {} as AlertResponse,
qosTypeList: [
{ key: 0, value: 'QOS0' },
{ key: 1, value: 'QOS1' },
@@ -274,9 +273,9 @@ export default defineComponent({
})
.then((response) => handleResponse(response, this.$emitter, this.$router))
.then((response) => {
this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
this.alertType = response.type;
this.showAlert = true;
this.alert.message = this.$t('apiresponse.' + response.code, response.param);
this.alert.type = response.type;
this.alert.show = true;
});
},
},

View File

@@ -1,7 +1,7 @@
<template>
<BasePage :title="$t('networkadmin.NetworkSettings')" :isLoading="dataLoading">
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
<BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
{{ alert.message }}
</BootstrapAlert>
<form @submit="saveNetworkConfig">
@@ -133,6 +133,7 @@ import BootstrapAlert from '@/components/BootstrapAlert.vue';
import CardElement from '@/components/CardElement.vue';
import FormFooter from '@/components/FormFooter.vue';
import InputElement from '@/components/InputElement.vue';
import type { AlertResponse } from '@/types/AlertResponse';
import type { NetworkConfig } from '@/types/NetworkConfig';
import { authHeader, handleResponse } from '@/utils/authentication';
import { defineComponent } from 'vue';
@@ -149,9 +150,7 @@ export default defineComponent({
return {
dataLoading: true,
networkConfigList: {} as NetworkConfig,
alertMessage: '',
alertType: 'info',
showAlert: false,
alert: {} as AlertResponse,
};
},
created() {
@@ -180,9 +179,9 @@ export default defineComponent({
})
.then((response) => handleResponse(response, this.$emitter, this.$router))
.then((response) => {
this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
this.alertType = response.type;
this.showAlert = true;
this.alert.message = this.$t('apiresponse.' + response.code, response.param);
this.alert.type = response.type;
this.alert.show = true;
});
},
},

View File

@@ -1,7 +1,7 @@
<template>
<BasePage :title="$t('ntpadmin.NtpSettings')" :isLoading="dataLoading || timezoneLoading">
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
<BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
{{ alert.message }}
</BootstrapAlert>
<form @submit="saveNtpConfig">
@@ -95,6 +95,7 @@ import BootstrapAlert from '@/components/BootstrapAlert.vue';
import CardElement from '@/components/CardElement.vue';
import InputElement from '@/components/InputElement.vue';
import FormFooter from '@/components/FormFooter.vue';
import type { AlertResponse } from '@/types/AlertResponse';
import type { NtpConfig } from '@/types/NtpConfig';
import { authHeader, handleResponse } from '@/utils/authentication';
import { defineComponent } from 'vue';
@@ -119,9 +120,7 @@ export default defineComponent({
mcuTime: new Date(),
localTime: new Date(),
dataAgeInterval: 0,
alertMessage: '',
alertType: 'info',
showAlert: false,
alert: {} as AlertResponse,
sunsetTypeList: [
{ key: 0, value: 'OFFICIAL' },
{ key: 1, value: 'NAUTICAL' },
@@ -198,9 +197,9 @@ export default defineComponent({
})
.then((response) => handleResponse(response, this.$emitter, this.$router))
.then((response) => {
this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
this.alertType = response.type;
this.showAlert = true;
this.alert.message = this.$t('apiresponse.' + response.code, response.param);
this.alert.type = response.type;
this.alert.show = true;
})
.then(() => {
this.getCurrentTime();
@@ -219,9 +218,9 @@ export default defineComponent({
})
.then((response) => handleResponse(response, this.$emitter, this.$router))
.then((response) => {
this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
this.alertType = response.type;
this.showAlert = true;
this.alert.message = this.$t('apiresponse.' + response.code, response.param);
this.alert.type = response.type;
this.alert.show = true;
});
},
},

View File

@@ -1,7 +1,7 @@
<template>
<BasePage :title="$t('securityadmin.SecuritySettings')" :isLoading="dataLoading">
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
<BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
{{ alert.message }}
</BootstrapAlert>
<form @submit="savePasswordConfig">
@@ -43,6 +43,7 @@ import BootstrapAlert from '@/components/BootstrapAlert.vue';
import CardElement from '@/components/CardElement.vue';
import FormFooter from '@/components/FormFooter.vue';
import InputElement from '@/components/InputElement.vue';
import type { AlertResponse } from '@/types/AlertResponse';
import type { SecurityConfig } from '@/types/SecurityConfig';
import { authHeader, handleResponse } from '@/utils/authentication';
import { defineComponent } from 'vue';
@@ -58,9 +59,7 @@ export default defineComponent({
data() {
return {
dataLoading: true,
alertMessage: '',
alertType: 'info',
showAlert: false,
alert: {} as AlertResponse,
securityConfigList: {} as SecurityConfig,
passwordRepeat: '',
@@ -84,9 +83,9 @@ export default defineComponent({
e.preventDefault();
if (this.securityConfigList.password != this.passwordRepeat) {
this.alertMessage = 'Passwords are not equal';
this.alertType = 'warning';
this.showAlert = true;
this.alert.message = 'Passwords are not equal';
this.alert.type = 'warning';
this.alert.show = true;
return;
}
@@ -100,9 +99,9 @@ export default defineComponent({
})
.then((response) => handleResponse(response, this.$emitter, this.$router))
.then((response) => {
this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
this.alertType = response.type;
this.showAlert = true;
this.alert.message = this.$t('apiresponse.' + response.code, response.param);
this.alert.type = response.type;
this.alert.show = true;
});
},
},