migrate manual DOM creation for notifications to nunjuck template

modules/default/alert/alert.js

@@ -39,6 +39,10 @@ Module.register("alert", {
 		};
 	},
 
+	getTemplate(type) {
+		return `templates/${type}.njk`;
+	},
+
 	start() {
 		Log.info(`Starting module: ${this.name}`);
 
@@ -52,23 +56,14 @@ Module.register("alert", {
 		}
 	},
 
-	showNotification(message) {
-		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>";
-		}
+	async showNotification(notification) {
+		const message = await this.renderMessage("notification", notification);
 
 		new NotificationFx({
-			message: msg,
+			message,
 			layout: "growl",
 			effect: this.config.effect,
-			ttl: message.timer !== undefined ? message.timer : this.config.display_time
+			ttl: notification.timer || this.config.display_time
 		}).show();
 	},
 
@@ -143,6 +138,18 @@ Module.register("alert", {
 		}
 	},
 
+	renderMessage(type, data) {
+		return new Promise((resolve) => {
+			this.nunjucksEnvironment().render(this.getTemplate(type), data, function (err, res) {
+				if (err) {
+					Log.error("Failed to render alert", err);
+				}
+
+				resolve(res);
+			});
+		});
+	},
+
 	notificationReceived(notification, payload, sender) {
 		if (notification === "SHOW_ALERT") {
 			if (payload.type === "notification") {

modules/default/alert/templates/notification.njk

@@ -0,0 +1,9 @@
+{% if title %}
+  <span class="thin dimmed medium">{{ title }}</span>
+{% endif %}
+{% if message %}
+  {% if title %}
+    <br/>
+  {% endif %}
+  <span class="light bright small">{{ message }}</span>
+{% endif %}