patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webapp: finally show alert

Browse Source
This commit is contained in:
Thomas Basler 2022-04-17 14:26:55 +02:00
parent e30c43a66a
commit e6c954456e
2 changed files with 100 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
webapp/src/components/NetworkAdminView.vue
View File

@ -3,9 +3,9 @@
<div class="page-header">
<h1>Network Settings</h1>
</div>
<!--<BootstrapAlert v-bind:variant="this.infoType" v-bind:show="this.infoShow">-->
{{ this.infoMessage }}
<!--</BootstrapAlert>-->
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveNetworkConfig">
<div class="card">
<div class="card-header text-white bg-primary">WiFi Configuration</div>
@ -172,9 +172,9 @@ export default {
return {
networkConfigList: [],
test: {},
infoMessage: "",
infoType: "info",
infoShow: false,
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
created() {
@ -196,20 +196,18 @@ export default {
method: "POST",
body: formData,
})
.then(
function (response) {
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
}.bind(this)
)
})
.then(
function (response) {
this.infoMessage = response.message;
this.infoType = response.type;
this.infoShow = true;
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
},

135
webapp/src/components/partials/BootstrapAlert.vue
View File

@ -1,5 +1,11 @@
<template>
<div v-if="isAlertVisible" ref="element" class="alert" role="alert" :class="classes">
<div
v-if="isAlertVisible"
ref="element"
class="alert"
role="alert"
:class="classes"
>
<slot />
<button
v-if="dismissible"
@ -13,92 +19,109 @@
</template>
<script>
import {computed, defineComponent, onBeforeUnmount, ref, watch} from 'vue'
import Alert from 'bootstrap/js/dist/alert'
import { computed, defineComponent, onBeforeUnmount, ref, watch } from "vue";
import Alert from "bootstrap/js/dist/alert";
export const toInteger = (value, defaultValue = NaN) => {
return Number.isInteger(value) ? value : defaultValue;
};
export default defineComponent({
name: 'BAlert',
name: "BAlert",
props: {
dismissLabel: {type: String, default: 'Close'},
dismissLabel: { type: String, default: "Close" },
dismissible: { type: Boolean, default: false },
fade: { type: Boolean, default: false },
modelValue: { type: [Boolean, Number], default: false },
show: { type: Boolean, default: false },
variant: {type: String, default: 'info'},
variant: { type: String, default: "info" },
},
emits: ['dismissed', 'dismiss-count-down', 'update:modelValue'],
emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
setup(props, { emit }) {
const element = 0; // = ref<HTMLElement>()
const instance = 0; // = ref<Alert>()
const element = undefined;
let instance = undefined;
const classes = computed(() => ({
[`alert-${props.variant}`]: props.variant,
'show': props.modelValue,
'alert-dismissible': props.dismissible,
'fade': props.modelValue,
}))
let _countDownTimeout = 0
show: props.modelValue,
"alert-dismissible": props.dismissible,
fade: props.modelValue,
}));
let _countDownTimeout = 0;
const parseCountDown = (value) => {
if (typeof value === 'boolean') {
return 0
}
const numberValue = value || 0
return numberValue > 0 ? numberValue : 0
if (typeof value === "boolean") {
return 0;
}
const numberValue = toInteger(value, 0);
return numberValue > 0 ? numberValue : 0;
};
const clearCountDownInterval = () => {
if (_countDownTimeout === undefined) return
clearTimeout(_countDownTimeout)
_countDownTimeout = undefined
}
const countDown = ref(parseCountDown(props.modelValue))
const isAlertVisible = computed(() => props.modelValue || props.show)
if (_countDownTimeout === undefined) return;
clearTimeout(_countDownTimeout);
_countDownTimeout = undefined;
};
const countDown = ref(parseCountDown(props.modelValue));
const isAlertVisible = computed(() => props.modelValue || props.show);
onBeforeUnmount(() => {
clearCountDownInterval()
instance.value?.dispose()
instance.value = undefined
})
clearCountDownInterval();
instance?.dispose();
instance = undefined;
});
const parsedModelValue = computed(() => {
if (props.modelValue === true) {
return true
return true;
}
if (props.modelValue === false) return false
if ((props.modelValue || 0) < 1) {
if (props.modelValue === false) return false;
if (toInteger(props.modelValue, 0) < 1) {
// Boolean will always return false for the above comparison
return false
return false;
}
return !!props.modelValue
})
return !!props.modelValue;
});
const handleShowAndModelChanged = () => {
countDown.value = parseCountDown(props.modelValue)
if ((parsedModelValue.value || props.show) && !instance.value)
instance.value = new Alert(element.value)
}
countDown.value = parseCountDown(props.modelValue);
if ((parsedModelValue.value || props.show) && !instance)
instance = new Alert(element);
};
const dismissClicked = () => {
if (typeof props.modelValue === 'boolean') {
emit('update:modelValue', false)
if (typeof props.modelValue === "boolean") {
emit("update:modelValue", false);
} else {
emit('update:modelValue', 0)
emit("update:modelValue", 0);
}
emit('dismissed')
}
watch(() => props.modelValue, handleShowAndModelChanged)
watch(() => props.show, handleShowAndModelChanged)
emit("dismissed");
};
watch(() => props.modelValue, handleShowAndModelChanged);
watch(() => props.show, handleShowAndModelChanged);
watch(countDown, (newValue) => {
clearCountDownInterval()
if (typeof props.modelValue === 'boolean') return
emit('dismiss-count-down', newValue)
if (newValue === 0 && props.modelValue > 0) emit('dismissed')
if (props.modelValue !== newValue) emit('update:modelValue', newValue)
clearCountDownInterval();
if (typeof props.modelValue === "boolean") return;
emit("dismiss-count-down", newValue);
if (newValue === 0 && props.modelValue > 0) emit("dismissed");
if (props.modelValue !== newValue) emit("update:modelValue", newValue);
if (newValue > 0) {
_countDownTimeout = setTimeout(() => {
countDown.value--
}, 1000)
countDown.value--;
}, 1000);
}
})
});
return {
dismissClicked,
isAlertVisible,
element,
classes,
}
};
},
})
});
</script>