61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import {Controller} from '@hotwired/stimulus';
|
|
|
|
/*
|
|
* The following line makes this controller "lazy": it won't be downloaded until needed
|
|
* See https://github.com/symfony/stimulus-bridge#lazy-controllers
|
|
*/
|
|
/* stimulusFetch: 'lazy' */
|
|
export default class extends Controller {
|
|
static targets = ['alert', 'icon', 'message']
|
|
|
|
connect() {
|
|
window.addEventListener('alert:show', this.showAlert.bind(this));
|
|
}
|
|
|
|
// ...
|
|
showAlert(event) {
|
|
const detail = event.detail;
|
|
const message = detail.message;
|
|
const level = detail.level;
|
|
|
|
let alertClass = "";
|
|
let iconClass = "";
|
|
switch (level) {
|
|
case 'success':
|
|
alertClass = "bg-green-500";
|
|
iconClass = "fa-circle-check";
|
|
break;
|
|
case 'warning':
|
|
alertClass = "bg-yellow-500";
|
|
iconClass = "fa-circle-exclamation";
|
|
break;
|
|
case 'error':
|
|
alertClass = "bg-red-500";
|
|
iconClass = "fa-circle-xmark";
|
|
break;
|
|
case 'info':
|
|
default:
|
|
alertClass = "bg-blue-500";
|
|
iconClass = "fa-circle-info";
|
|
break;
|
|
}
|
|
|
|
this.messageTarget.innerHTML = message;
|
|
this.alertTarget.classList.add(alertClass);
|
|
this.iconTarget.classList.add(iconClass);
|
|
this.alertTarget.style.display = "block";
|
|
|
|
setTimeout(() => {
|
|
this.alertTarget.style.opacity = 0;
|
|
|
|
setTimeout(() => {
|
|
this.alertTarget.style.display = 'none';
|
|
this.alertTarget.classList.remove(alertClass);
|
|
this.alertTarget.style.opacity = 1;
|
|
this.iconTarget.classList.remove(iconClass);
|
|
this.messageTarget.innerHTML = message;
|
|
}, 1000);
|
|
}, 3000);
|
|
}
|
|
}
|