FEAT: use template instead of overriding DOM object

This commit is contained in:
Sebastian Mark 2020-07-26 18:40:10 +02:00
parent c09e62aab8
commit 78e89512db
2 changed files with 24 additions and 45 deletions

View file

@ -29,16 +29,13 @@ Module.register("MMM-covid19", {
// init module and set update intervall // init module and set update intervall
var self = this; var self = this;
Log.log(this.name + ' is started!'); Log.log(this.name + ' is started!');
self.update_data();
setInterval(function() { setInterval(function() {
self.update_data();
self.updateDom(this.config.fadeSpeed); self.updateDom(this.config.fadeSpeed);
}, this.config.updateInterval); }, this.config.updateInterval);
}, },
getStyles: function () {
// load custom css for module
return ["MMM-covid19.css"];
},
getHeader: function() { getHeader: function() {
// set module header // set module header
if (this.config.showHeader) { if (this.config.showHeader) {
@ -50,47 +47,19 @@ Module.register("MMM-covid19", {
return this.data.header; return this.data.header;
}, },
getDom: function() { getStyles: function () {
// get/update covid data // load custom css for module
this.update_data(); return ["MMM-covid19.css"];
},
// create layout and output getTemplate: function () {
var wrapper = document.createElement("div"); // load template for layout
var new7_wrapper = document.createElement("span"); return 'MMM-covid19.njk';
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");
getTemplateData: function () {
wrapper.className = "covid19"; // pass variables to template
return { cases: this.cases }
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;
}, },
update_data: function() { update_data: function() {
@ -115,7 +84,7 @@ Module.register("MMM-covid19", {
// +0: orange (arrow up) // +0: orange (arrow up)
// 0: normal (arrow right) // 0: normal (arrow right)
// -0: green (arrow down) // -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) { if (currentToLastWeekDiff > 10) {
this.cases.trend = "<span class=bad>&nearr;</span>"; this.cases.trend = "<span class=bad>&nearr;</span>";
} else if (currentToLastWeekDiff > 0) { } else if (currentToLastWeekDiff > 0) {

10
MMM-covid19.njk Normal file
View file

@ -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>