2018-09-10 07:08:06 +00:00
|
|
|
<template>
|
|
|
|
<v-snackbar
|
2019-05-19 16:58:30 +00:00
|
|
|
id="p-alert"
|
2018-09-10 07:08:06 +00:00
|
|
|
v-model="visible"
|
2018-09-13 05:05:13 +00:00
|
|
|
:color="color"
|
2018-10-29 09:56:18 +00:00
|
|
|
:timeout="0"
|
2019-05-08 02:37:45 +00:00
|
|
|
:class="textColor"
|
2018-09-13 05:05:13 +00:00
|
|
|
top
|
|
|
|
right
|
2018-09-10 07:08:06 +00:00
|
|
|
>
|
|
|
|
{{ text }}
|
|
|
|
<v-btn
|
2019-05-08 02:37:45 +00:00
|
|
|
:class="textColor + ' pr-0'"
|
2018-09-11 21:43:03 +00:00
|
|
|
icon
|
2018-09-10 07:08:06 +00:00
|
|
|
flat
|
|
|
|
@click="close"
|
|
|
|
>
|
2018-09-11 21:43:03 +00:00
|
|
|
<v-icon>close</v-icon>
|
2018-09-10 07:08:06 +00:00
|
|
|
</v-btn>
|
|
|
|
</v-snackbar>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Event from 'pubsub-js';
|
|
|
|
|
|
|
|
export default {
|
2019-05-21 15:59:12 +00:00
|
|
|
name: 'p-alert',
|
2018-09-10 07:08:06 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
text: '',
|
2018-09-13 05:05:13 +00:00
|
|
|
color: 'primary',
|
2019-05-08 02:37:45 +00:00
|
|
|
textColor: '',
|
2018-09-10 07:08:06 +00:00
|
|
|
visible: false,
|
|
|
|
messages: [],
|
|
|
|
lastMessageId: 1,
|
|
|
|
lastMessage: '',
|
|
|
|
subscriptionId: '',
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.subscriptionId = Event.subscribe('alert', this.handleAlertEvent);
|
|
|
|
},
|
|
|
|
destroyed() {
|
|
|
|
Event.unsubscribe(this.subscriptionId);
|
|
|
|
},
|
|
|
|
methods: {
|
2019-11-16 15:06:34 +00:00
|
|
|
handleAlertEvent: function (ev, data) {
|
2018-09-10 07:08:06 +00:00
|
|
|
const type = ev.split('.')[1];
|
|
|
|
|
2019-11-16 15:06:34 +00:00
|
|
|
// get message from data object
|
|
|
|
let m = data.msg;
|
|
|
|
|
|
|
|
// first letter uppercase
|
|
|
|
m = m.replace(/^./, m[0].toUpperCase());
|
|
|
|
|
2018-09-10 07:08:06 +00:00
|
|
|
switch (type) {
|
|
|
|
case 'warning':
|
2019-11-16 15:06:34 +00:00
|
|
|
this.addWarningMessage(m);
|
2018-09-10 07:08:06 +00:00
|
|
|
break;
|
|
|
|
case 'error':
|
2019-11-16 15:06:34 +00:00
|
|
|
this.addErrorMessage(m);
|
2018-09-10 07:08:06 +00:00
|
|
|
break;
|
|
|
|
case 'success':
|
2019-11-16 15:06:34 +00:00
|
|
|
this.addSuccessMessage(m);
|
2018-09-10 07:08:06 +00:00
|
|
|
break;
|
|
|
|
case 'info':
|
2019-11-16 15:06:34 +00:00
|
|
|
this.addInfoMessage(m);
|
2018-09-10 07:08:06 +00:00
|
|
|
break;
|
|
|
|
default:
|
2019-11-16 15:06:34 +00:00
|
|
|
alert(m);
|
2018-09-10 07:08:06 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
addWarningMessage: function (message) {
|
2019-06-16 02:06:26 +00:00
|
|
|
this.addMessage('warning', 'black--text', message, 3000);
|
2018-09-10 07:08:06 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
addErrorMessage: function (message) {
|
2019-05-08 02:37:45 +00:00
|
|
|
this.addMessage('error', 'white--text', message, 8000);
|
2018-09-10 07:08:06 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
addSuccessMessage: function (message) {
|
2019-06-16 02:06:26 +00:00
|
|
|
this.addMessage('success', 'white--text', message, 2000);
|
2018-09-10 07:08:06 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
addInfoMessage: function (message) {
|
2019-06-16 02:06:26 +00:00
|
|
|
this.addMessage('info', 'white--text', message, 1250);
|
2018-09-10 07:08:06 +00:00
|
|
|
},
|
|
|
|
|
2019-05-08 02:37:45 +00:00
|
|
|
addMessage: function (color, textColor, message, delay) {
|
2018-09-10 07:08:06 +00:00
|
|
|
if (message === this.lastMessage) return;
|
|
|
|
|
|
|
|
this.lastMessageId++;
|
|
|
|
this.lastMessage = message;
|
|
|
|
|
2019-05-08 02:37:45 +00:00
|
|
|
const alert = {'id': this.lastMessageId, 'color': color, 'textColor': textColor, 'delay': delay, 'msg': message};
|
2018-09-10 07:08:06 +00:00
|
|
|
|
|
|
|
this.messages.push(alert);
|
|
|
|
|
|
|
|
if(!this.visible) {
|
|
|
|
this.show();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
close: function () {
|
|
|
|
this.visible = false;
|
|
|
|
this.show();
|
|
|
|
},
|
|
|
|
show: function () {
|
|
|
|
const message = this.messages.shift();
|
|
|
|
|
|
|
|
if(message) {
|
|
|
|
this.text = message.msg;
|
2018-09-13 05:05:13 +00:00
|
|
|
this.color = message.color;
|
2019-05-08 02:37:45 +00:00
|
|
|
this.textColor = message.textColor;
|
2018-09-10 07:08:06 +00:00
|
|
|
this.visible = true;
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
this.lastMessage = '';
|
|
|
|
this.show();
|
|
|
|
}, message.delay);
|
|
|
|
} else {
|
|
|
|
this.visible = false;
|
|
|
|
this.text = '';
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|