From 78e89512db3454bc35877d644949d954443f1651 Mon Sep 17 00:00:00 2001
From: Sebastian Mark <smark@posteo.net>
Date: Sun, 26 Jul 2020 18:40:10 +0200
Subject: [PATCH] FEAT: use template instead of overriding DOM object

---
 MMM-covid19.js  | 59 ++++++++++++-------------------------------------
 MMM-covid19.njk | 10 +++++++++
 2 files changed, 24 insertions(+), 45 deletions(-)
 create mode 100644 MMM-covid19.njk

diff --git a/MMM-covid19.js b/MMM-covid19.js
index 01a6e2d..22ff162 100644
--- a/MMM-covid19.js
+++ b/MMM-covid19.js
@@ -29,16 +29,13 @@ Module.register("MMM-covid19", {
 		// init module and set update intervall
 		var self = this;
 		Log.log(this.name + ' is started!');
+		self.update_data();
 		setInterval(function() {
+			self.update_data();
 			self.updateDom(this.config.fadeSpeed);
 		}, this.config.updateInterval);
 	},
 
-	getStyles: function () {
-		// load custom css for module
-		return ["MMM-covid19.css"];
-	},
-
 	getHeader: function() {
 		// set module header
 		if (this.config.showHeader) {
@@ -50,47 +47,19 @@ Module.register("MMM-covid19", {
 		return this.data.header;
 	},
 
-	getDom: function() {
-		// get/update covid data
-		this.update_data();
+	getStyles: function () {
+		// load custom css for module
+		return ["MMM-covid19.css"];
+	},
 
-		// create layout and output
-		var wrapper = document.createElement("div");
-		var new7_wrapper = document.createElement("span");
-		var active_wrapper = document.createElement("span");
-		var total_wrapper = document.createElement("span");
-		var death_wrapper = document.createElement("span");
-		var cured_wrapper = document.createElement("span");
-		var ts_wrapper = document.createElement("div");
+	getTemplate: function () {
+		// load template for layout
+		return 'MMM-covid19.njk';
+	},
 
-
-		wrapper.className = "covid19";
-
-		new7_wrapper.className = "new7";
-		new7_wrapper.innerHTML = "Neu: " + this.cases.new7 + " " + this.cases.trend + "<br>";
-		wrapper.appendChild(new7_wrapper);
-
-		active_wrapper.className = "active";
-		active_wrapper.innerHTML = "Aktiv: " + this.cases.active + "<br>";
-		wrapper.appendChild(active_wrapper);
-
-		total_wrapper.className = "total";
-		total_wrapper.innerHTML = "Gesamt: " + this.cases.total + "<br>";
-		wrapper.appendChild(total_wrapper);
-
-		death_wrapper.className = "death";
-		death_wrapper.innerHTML = "Tote: " + this.cases.death + "<br>";
-		wrapper.appendChild(death_wrapper);
-
-		cured_wrapper.className = "cured";
-		cured_wrapper.innerHTML = "Genesen: " + this.cases.cured + "<br>";
-		wrapper.appendChild(cured_wrapper);
-
-		ts_wrapper.className = "ts";
-		ts_wrapper.innerHTML = "7-Tage Trend, Stand: " + this.cases.ts;
-		wrapper.appendChild(ts_wrapper);
-
-		return wrapper;
+	getTemplateData: function () {
+		// pass variables to template
+		return { cases: this.cases }
 	},
 
 	update_data: function() {
@@ -115,7 +84,7 @@ Module.register("MMM-covid19", {
 		//  +0: orange (arrow up)
 		//   0: normal (arrow right)
 		//  -0: green (arrow down)
-		currentToLastWeekDiff =  (data[this.config.region]["last_7"] * 2) - data[this.config.region]["last_14"]
+		currentToLastWeekDiff = (data[this.config.region]["last_7"] * 2) - data[this.config.region]["last_14"]
 		if (currentToLastWeekDiff > 10) {
 			    this.cases.trend = "<span class=bad>&nearr;</span>";
 		} else if (currentToLastWeekDiff > 0) {
diff --git a/MMM-covid19.njk b/MMM-covid19.njk
new file mode 100644
index 0000000..39525da
--- /dev/null
+++ b/MMM-covid19.njk
@@ -0,0 +1,10 @@
+<div class="covid19">
+	<span class="new7">Neu: {{ cases.new7 }} {{ cases.trend | safe }}</span><br/>
+	<span class="active">Aktiv: {{ cases.active }}</span><br/>
+	<span class="total">Gesamt: {{ cases.total }}</span><br/>
+	<span class="death">Tote: {{ cases.death }}</span><br/>
+	<span class="cured">Genesen: {{ cases.cured }}</span><br/>
+	<div class="ts">
+		<span>7-Tage Trend, Stand {{ cases.ts }}</span>
+	</div>
+</div>