MagicMirror/modules/default/alert/alert.js

/* global Module */

/* Magic Mirror
 * Module: alert
 *
 * By Paul-Vincent Roll https://paulvincentroll.com/
 * MIT Licensed.
 */
Module.register("alert",{
	defaults: {
		// scale|slide|genie|jelly|flip|bouncyflip|exploader
		effect: "slide",
		// scale|slide|genie|jelly|flip|bouncyflip|exploader
		alert_effect: "jelly",
		//time a notification is displayed in seconds
		display_time: 3500,
		//Position
		position: "center",
		//shown at startup
		welcome_message: false,
	},
	getScripts: function() {
		return ["notificationFx.js"];
	},
	getStyles: function() {
		return ["notificationFx.css", "font-awesome.css"];
	},
	// Define required translations.
	getTranslations: function() {
		return {
			en: "translations/en.json",
			de: "translations/de.json",
			nl: "translations/nl.json",
		};
	},
	show_notification: function(message) {
		if (this.config.effect === "slide") {this.config.effect = this.config.effect + "-" + this.config.position;}
		let msg = "";
		if (message.title) {
			msg += "<span class='thin dimmed medium'>" + message.title + "</span>";
		}
		if (message.message){
			if (msg !== ""){
				msg+= "<br />";
			}
			msg += "<span class='light bright small'>" + message.message + "</span>";
		}

		new NotificationFx({
			message: msg,
			layout: "growl",
			effect: this.config.effect,
			ttl: message.timer !== undefined ? message.timer : this.config.display_time
		}).show();
	},
	show_alert: function(params, sender) {
		let image = "";
		//Set standard params if not provided by module
		if (typeof params.timer === "undefined") { params.timer = null; }
		if (typeof params.imageHeight === "undefined") { params.imageHeight = "80px"; }
		if (typeof params.imageUrl === "undefined" && typeof params.imageFA === "undefined") {
			params.imageUrl = null;
		} else if (typeof params.imageFA === "undefined"){
			image = "<img src='" + (params.imageUrl).toString() + "' height='" + (params.imageHeight).toString() + "' style='margin-bottom: 10px;'/><br />";
		} else if (typeof params.imageUrl === "undefined"){
			image = "<span class='bright " + "fa fa-" + params.imageFA + "' style='margin-bottom: 10px;font-size:" + (params.imageHeight).toString() + ";'/></span><br />";
		}
		//Create overlay
		const overlay = document.createElement("div");
		overlay.id = "overlay";
		overlay.innerHTML += "<div class=\"black_overlay\"></div>";
		document.body.insertBefore(overlay, document.body.firstChild);

		//If module already has an open alert close it
		if (this.alerts[sender.name]) {
			this.hide_alert(sender);
		}

		//Display title and message only if they are provided in notification parameters
		let message = "";
		if (params.title) {
			message += "<span class='light dimmed medium'>" + params.title + "</span>";
		}
		if (params.message) {
			if (message !== ""){
				message += "<br />";
			}

			message += "<span class='thin bright small'>" + params.message + "</span>";
		}

		//Store alert in this.alerts
		this.alerts[sender.name] = new NotificationFx({
			message: image + message,
			effect: this.config.alert_effect,
			ttl: params.timer,
			al_no: "ns-alert"
		});
		//Show alert
		this.alerts[sender.name].show();
		//Add timer to dismiss alert and overlay
		if (params.timer) {
			setTimeout(() => {
				this.hide_alert(sender);
			}, params.timer);
		}

	},
	hide_alert: function(sender) {
		//Dismiss alert and remove from this.alerts
		if (this.alerts[sender.name]) {
			this.alerts[sender.name].dismiss();
			this.alerts[sender.name] = null;
			//Remove overlay
			const overlay = document.getElementById("overlay");
			overlay.parentNode.removeChild(overlay);
		}
	},
	setPosition: function(pos) {
		//Add css to body depending on the set position for notifications
		const sheet = document.createElement("style");
		if (pos === "center") {sheet.innerHTML = ".ns-box {margin-left: auto; margin-right: auto;text-align: center;}";}
		if (pos === "right") {sheet.innerHTML = ".ns-box {margin-left: auto;text-align: right;}";}
		if (pos === "left") {sheet.innerHTML = ".ns-box {margin-right: auto;text-align: left;}";}
		document.body.appendChild(sheet);

	},
	notificationReceived: function(notification, payload, sender) {
		if (notification === "SHOW_ALERT") {
			if (typeof payload.type === "undefined") { payload.type = "alert"; }
			if (payload.type === "alert") {
				this.show_alert(payload, sender);
			} else if (payload.type === "notification") {
				this.show_notification(payload);
			}
		} else if (notification === "HIDE_ALERT") {
			this.hide_alert(sender);
		}
	},
	start: function() {
		this.alerts = {};
		this.setPosition(this.config.position);
		if (this.config.welcome_message) {
			if (this.config.welcome_message === true){
				this.show_notification({title: this.translate("sysTitle"), message: this.translate("welcome")});
			}
			else{
				this.show_notification({title: this.translate("sysTitle"), message: this.config.welcome_message});
			}
		}
		Log.info("Starting module: " + this.name);
	}
});