mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-16 22:42:16 +00:00
fhcAlert: slight improvements 2
This commit is contained in:
cgfhtw
+57
-119
@@ -93,91 +93,12 @@
|
||||
* @return void
|
||||
*/
|
||||
|
||||
let toast_component = null;
|
||||
const toast_queue = [];
|
||||
|
||||
function _add_to_toast(...args) {
|
||||
toast_component.add.apply(toast_component, args);
|
||||
}
|
||||
let toast_add = function _add_to_toast_queue(...args) {
|
||||
toast_queue.push(args);
|
||||
};
|
||||
|
||||
let alert_component = null;
|
||||
const alert_queue = [];
|
||||
|
||||
function _add_to_alert(...args) {
|
||||
alert_component.add.apply(alert_component, args);
|
||||
}
|
||||
let alert_add = function _add_to_alert_queue(...args) {
|
||||
alert_queue.push(args);
|
||||
};
|
||||
|
||||
let confirm_component = null;
|
||||
const confirm_queue = [];
|
||||
|
||||
function _require_confirm(...args) {
|
||||
confirm_component.confirmListener.apply(confirm_component, args);
|
||||
}
|
||||
let confirm_require = function _add_to_confirm_queue(...args) {
|
||||
confirm_queue.push(args);
|
||||
};
|
||||
|
||||
|
||||
const helperAppContainer = document.createElement('div');
|
||||
|
||||
const helperApp = Vue.createApp({
|
||||
setup() {
|
||||
return self => {
|
||||
return [
|
||||
Vue.h(primevue.toast, {
|
||||
ref: 'toast',
|
||||
baseZIndex: 99999
|
||||
}),
|
||||
Vue.h(primevue.toast, {
|
||||
ref: 'alert',
|
||||
baseZIndex: 99999,
|
||||
position: 'center',
|
||||
}, {
|
||||
message: slotProps => {
|
||||
const messageCard = Vue.h('div', {
|
||||
ref: 'messageCard',
|
||||
id: 'collapseMessageCard',
|
||||
class: 'collapse mt-3'
|
||||
}, [
|
||||
Vue.h('div', {class: 'card card-body text-body small', style: 'white-space: pre-wrap'}, slotProps.message.detail)
|
||||
]);
|
||||
return [
|
||||
Vue.h('i', {class: 'fa fa-circle-exclamation fa-2xl mt-3'}),
|
||||
Vue.h('div', {class: 'p-toast-message-text'}, [
|
||||
Vue.h('span', {class: 'p-toast-summary'}, slotProps.message.summary),
|
||||
Vue.h('div', {class: 'p-toast-detail my-3'}, 'Sorry! Ein interner technischer Fehler ist aufgetreten.'),
|
||||
Vue.h('div', {class: 'd-flex justify-content-between align-items-center'}, [
|
||||
Vue.h('a', {
|
||||
class: 'align-bottom flex-fill me-2',
|
||||
dataBsToggle: 'collapse',
|
||||
href: '#collapseMessageCard',
|
||||
role: 'button',
|
||||
ariaExpanded: 'false',
|
||||
ariaControls: 'collapseMessageCard',
|
||||
onClick: () => { bootstrap.Collapse.getOrCreateInstance(messageCard.el).toggle(); }
|
||||
}, 'Fehler anzeigen'),
|
||||
Vue.h('a', {
|
||||
class: 'btn btn-primary flex-fill',
|
||||
target: '_blank',
|
||||
href: self.mailToUrl(slotProps),
|
||||
}, 'Fehler melden')
|
||||
]),
|
||||
messageCard,
|
||||
]),
|
||||
];
|
||||
}
|
||||
}),
|
||||
Vue.h(primevue.confirmdialog, {
|
||||
ref: 'confirm'
|
||||
})
|
||||
];
|
||||
};
|
||||
components: {
|
||||
PvToast: primevue.toast,
|
||||
PvConfirm: primevue.confirmdialog
|
||||
},
|
||||
methods: {
|
||||
mailToUrl(slotProps) {
|
||||
@@ -197,66 +118,83 @@ const helperApp = Vue.createApp({
|
||||
Wir kümmern uns um eine rasche Behebung des Problems!`
|
||||
|
||||
return "mailto:" + mailTo + "?subject=" + subject + "&body=" + body;
|
||||
},
|
||||
openMessagecard() {
|
||||
bootstrap.Collapse.getOrCreateInstance(this.$refs.messageCard).toggle();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
toast_component = this.$refs.toast;
|
||||
toast_add = _add_to_toast;
|
||||
while (toast_queue.length)
|
||||
_add_to_toast(toast_queue.unshift());
|
||||
|
||||
alert_component = this.$refs.alert;
|
||||
alert_add = _add_to_alert;
|
||||
while (alert_queue.length)
|
||||
_add_to_alert(alert_queue.unshift());
|
||||
|
||||
confirm_component = this.$refs.confirm;
|
||||
confirm_require = _require_confirm;
|
||||
while (confirm_queue.length)
|
||||
_require_confirm(confirm_queue.unshift());
|
||||
},
|
||||
beforeUnmount() {
|
||||
toast_add = _add_to_toast_queue;
|
||||
toast_component = null;
|
||||
|
||||
alert_add = _add_to_alert_queue;
|
||||
alert_component = null;
|
||||
|
||||
confirm_require = _add_to_confirm_queue;
|
||||
confirm_component = null;
|
||||
},
|
||||
unmounted() {
|
||||
helperAppContainer.parentElement.removeChild(helperAppContainer);
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<pv-toast ref="toast" base-z-index="99999"></pv-toast>
|
||||
<pv-toast ref="alert" base-z-index="99999" position="center">
|
||||
<template #message="slotProps">
|
||||
<i class="fa fa-circle-exclamation fa-2xl mt-3"></i>
|
||||
<div class="p-toast-message-text">
|
||||
<span class="p-toast-summary">{{slotProps.message.summary}}</span>
|
||||
<div class="p-toast-detail my-3">Sorry! Ein interner technischer Fehler ist aufgetreten.</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a
|
||||
class="align-bottom flex-fill me-2"
|
||||
data-bs-toggle="collapse"
|
||||
href="#collapseMessageCard"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapseMessageCard"
|
||||
@click="openMessagecard"
|
||||
>
|
||||
Fehler anzeigen
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-primary flex-fill"
|
||||
target="_blank"
|
||||
:href="mailToUrl(slotProps)"
|
||||
>
|
||||
Fehler melden
|
||||
</a>
|
||||
</div>
|
||||
<div ref="messageCard" id="collapseMessageCard" class="collapse mt-3">
|
||||
<div class="card card-body text-body small" style="white-space: pre-wrap">
|
||||
{{slotProps.message.detail}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</pv-toast>
|
||||
<pv-confirm group="fhcAlertConfirm"></pv-confirm>`
|
||||
});
|
||||
|
||||
helperApp
|
||||
.use(primevue.config.default)
|
||||
.mount(helperAppContainer);
|
||||
helperApp.use(primevue.config.default)
|
||||
helperApp.use(primevue.confirmationservice)
|
||||
|
||||
const helperAppInstance = helperApp.mount(helperAppContainer);
|
||||
|
||||
document.body.appendChild(helperAppContainer);
|
||||
|
||||
|
||||
export default {
|
||||
install: (app, options) => {
|
||||
const $fhcAlert = {
|
||||
alertSuccess(message) {
|
||||
toast_add({ severity: 'success', summary: 'Info', detail: message, life: 1000});
|
||||
helperAppInstance.$refs.toast.add({ severity: 'success', summary: 'Info', detail: message, life: 1000});
|
||||
},
|
||||
alertInfo(message) {
|
||||
toast_add({ severity: 'info', summary: 'Info', detail: message, life: 3000 });
|
||||
helperAppInstance.$refs.toast.add({ severity: 'info', summary: 'Info', detail: message, life: 3000 });
|
||||
},
|
||||
alertWarning(message) {
|
||||
toast_add({ severity: 'warn', summary: 'Achtung', detail: message});
|
||||
helperAppInstance.$refs.toast.add({ severity: 'warn', summary: 'Achtung', detail: message});
|
||||
},
|
||||
alertError(message) {
|
||||
toast_add({ severity: 'error', summary: 'Achtung', detail: message });
|
||||
helperAppInstance.$refs.toast.add({ severity: 'error', summary: 'Achtung', detail: message });
|
||||
},
|
||||
alertSystemError(message) {
|
||||
alert_add({ severity: 'error', summary: 'Systemfehler', detail: message});
|
||||
helperAppInstance.$refs.alert.add({ severity: 'error', summary: 'Systemfehler', detail: message});
|
||||
},
|
||||
confirmDelete() {
|
||||
return new Promise((resolve, reject) => {
|
||||
confirm_require({
|
||||
helperAppInstance.$confirm.require({
|
||||
group: 'fhcAlertConfirm',
|
||||
header: 'Achtung',
|
||||
message: 'Möchten Sie sicher löschen?',
|
||||
acceptLabel: 'Löschen',
|
||||
@@ -278,7 +216,7 @@ export default {
|
||||
if (!sticky)
|
||||
options.life = 3000;
|
||||
|
||||
toast_add(options);
|
||||
helperAppInstance.$refs.toast.add(options);
|
||||
},
|
||||
alertMultiple(messageArray, severity = 'info', title = 'Info', sticky = false){
|
||||
// Check, if array has only string values
|
||||
|
||||
Reference in New Issue
Block a user