Merge pull request #4 from jalibu/refactoring

Refactoring

JastUtils.js

@@ -0,0 +1,82 @@
+class JastUtils {
+  static getCurrentValue(stock, exchangeData) {
+    let currentValue = "-";
+    if (stock.current) {
+      currentValue = stock.current;
+      if (
+        exchangeData &&
+        stock.tradeCurrency &&
+        stock.displayCurrency &&
+        stock.tradeCurrency !== stock.displayCurrency
+      ) {
+        const exchange = exchangeData.find(
+          (exchange) =>
+            exchange.from === stock.tradeCurrency &&
+            exchange.to === stock.displayCurrency
+        );
+        if (exchange) {
+          currentValue = currentValue * exchange.rate;
+        }
+      }
+      currentValue = currentValue.toFixed(2);
+    }
+    return currentValue;
+  }
+
+  static getCurrency(stock, exchangeData, config) {
+    let currency = config.defaultCurrency;
+    if (stock.displayCurrency) {
+      const exchange = exchangeData.find(
+        (exchange) =>
+          exchange.from === stock.tradeCurrency &&
+          exchange.to === stock.displayCurrency
+      );
+      if (exchange) {
+        currency = stock.displayCurrency;
+      } else if (stock.tradeCurrency) {
+        currency = stock.tradeCurrency;
+      }
+    }
+    return currency;
+  }
+
+  static getStockChange(stock) {
+    if (stock.current && stock.last) {
+      return (((stock.current - stock.last) / stock.last) * 100).toFixed(1);
+    } else {
+      return 0;
+    }
+  }
+
+  static getDepotGrowth(config, exchangeData) {
+    let growth = 0;
+    let errors = false;
+    config.stocks.forEach((stock) => {
+      if (stock.current && stock.last) {
+        let change =
+          stock.current * stock.quantity - stock.last * stock.quantity;
+
+        if (
+          stock.tradeCurrency &&
+          stock.tradeCurrency !== config.defaultCurrency
+        ) {
+          const exchange = exchangeData.find(
+            (exchange) =>
+              exchange.from === stock.tradeCurrency &&
+              exchange.to === stock.displayCurrency
+          );
+          if (exchange) {
+            change = change * exchange.rate;
+          } else {
+            errors = true;
+          }
+        } else {
+          errors = true;
+        }
+        growth = growth + change;
+      }
+    });
+
+    return { value: growth.toFixed(2), errors };
+  }
+}

MMM-Jast.css

@@ -1,53 +1,56 @@
 @keyframes tickerh {
   0% {
-    transform: translate3d(0, 0, 0);
+    transform: translate(0, 0);
   }
   100% {
-    transform: translate3d(-100%, 0, 0);
+    transform: translate(-100%, 0);
   }
 }
-.ticker-wrap {
+.jast-wrapper {
   overflow: hidden;
 }
-.ticker-wrap.vertical {
-  height: 26px;
-}
-.ticker-wrap.horizontal {
-  padding-left: 100%;
+.jast-wrapper.horizontal {
+  margin: 0 auto;
+  white-space: nowrap;
 }
-.ticker-wrap ul {
+.jast-wrapper ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
+}
+.jast-wrapper.vertical {
+  height: 26px;
+}
+.jast-wrapper.vertical > ul {
+  animation-name: tickerv;
   animation-iteration-count: infinite;
   animation-timing-function: cubic-bezier(1, 0, 0.5, 0);
 }
-.ticker-wrap.vertical ul {
-  animation-name: tickerv;
+.jast-wrapper.horizontal .jast-hticker {
+  margin: 0 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  position: absolute;
 }
-.ticker-wrap.horizontal ul {
-  padding-right: 100%;
+
+.jast-wrapper.horizontal span.jast-tickerframe {
   display: inline-block;
-  white-space: nowrap;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  animation-name: tickerh;
+  padding-left: 100%;
 }
-.ticker-wrap.horizontal ul li:before {
+
+.jast-wrapper.horizontal span.jast-stock:before {
   content: "\2022";
   margin-right: 0.4em;
+  margin-left: 0.4em;
 }
-.ticker-wrap ul li {
+.jast-wrapper .jast-stock {
   font-size: 18px;
   line-height: 26px;
 }
-.ticker-wrap.horizontal ul li {
-  display: inline-block;
-  padding: 0 0.3rem;
-}
-.ticker-wrap ul li span.high {
+
+.jast-wrapper .jast-stock span.high {
   color: green;
 }
-.ticker-wrap ul li span.low {
+.jast-wrapper .jast-stock span.low {
   color: red;
 }

MMM-Jast.js

@@ -1,130 +1,106 @@
 "use strict";
 
 Module.register("MMM-Jast", {
-  result: {},
   defaults: {
     debug: false,
+    header: null,
     updateIntervalInSeconds: 1800,
     requestIntervalInSeconds: 62,
-    fadeSpeedInSeconds: 3.5,
+    fadeSpeedInSeconds: 3.5, // Higher value: vertical -> faster // horizontal -> slower
     stocks: [
       { name: "BASF", symbol: "BAS.DE" },
       { name: "SAP", symbol: "SAP.DE" },
       { name: "Henkel", symbol: "HEN3.DE" },
       { name: "AbbVie", symbol: "4AB.DE" },
-      { name: "Alibaba", symbol: "BABA", tradeCurrency: "USD", displayCurrency: "EUR", quantity: 10 },
+      {
+        name: "Alibaba",
+        symbol: "BABA",
+        tradeCurrency: "USD",
+        displayCurrency: "EUR",
+        quantity: 10
+      }
     ],
     defaultCurrency: "EUR",
     baseURL: "https://www.alphavantage.co/",
     apiKey: "",
     scroll: "vertical",
-    maxWidth: "300px",
-    showDepotGrowth: false,
+    //maxWidth: "300px",
+    showDepotGrowth: false
   },
 
-  getStyles: function () {
+  getStyles() {
     return ["MMM-Jast.css"];
   },
 
-  getTranslations: function () {
+  getScripts() {
+    return [this.file("JastUtils.js")];
+  },
+
+  getTranslations() {
     return {
       en: "translations/en.json",
-      de: "translations/de.json",
+      de: "translations/de.json"
+    };
+  },
+
+  getTemplate() {
+    return "templates/MMM-Jast.njk";
+  },
+
+  getTemplateData() {
+    return {
+      config: this.config,
+      exchangeData: this.exchangeData,
+      utils: JastUtils
     };
   },
 
-  start: function () {
-    this.exchangeData = {};
+  getHeader() {
+    return this.config.header;
+  },
+
+  start() {
+    this.exchangeData = [];
     this.getExchangeRate();
     this.getStocks();
     this.scheduleUpdate();
   },
 
-  getDom: function () {
-    this.setVerticalScrollingKeyframes();
-    let app = document.createElement("div");
-    let depotChange = 0;
-    let entryCount = this.config.showDepotGrowth ? this.config.stocks.length + 1 : this.config.stocks.length;
-    let ticker = `<div class="ticker-wrap ${
-      this.config.scroll === "horizontal" || this.config.scroll === "vertical" ? this.config.scroll : ""
-    }" style="max-width: ${this.config.maxWidth}" >`;
-    ticker += `<ul style="animation-duration: ${entryCount * this.config.fadeSpeedInSeconds}s">`;
-    this.config.stocks.forEach((stock) => {
-      let currentValue = "-";
-      if (stock.current) {
-        currentValue = stock.current;
-        if (stock.tradeCurrency && stock.DisplayCurrency && stock.tradeCurrency !== stock.DisplayCurrency) {
-          const exchange = this.exchangeData.find(
-            (exchange) => exchange.from === stock.tradeCurrency && exchange.to === stock.displayCurrency
-          );
-          if (exchange) {
-            currentValue = currentValue * exchange.rate;
-          }
-        }
-        currentValue = currentValue.toFixed(2);
-      }
-      const currency = stock.displayCurrency || this.config.defaultCurrency;
-
-      ticker += `<li>${stock.name} `;
-      ticker += `<span class=${this.getColorClass(stock.current - stock.last)}>${currentValue} ${currency} ${
-        stock.current ? "(" + (((stock.current - stock.last) / stock.last) * 100).toFixed(1) + "%)" : ""
-      }</span>`;
-      ticker += `</li>`;
-      if (stock.current && stock.quantity) {
-        depotChange = depotChange + (stock.current - stock.last) * stock.quantity;
-      }
-    });
-    if (this.config.showDepotGrowth) {
-      ticker += `<li>${this.translate("depotGrowth")} <span class=${this.getColorClass(
-        depotChange
-      )}>${depotChange.toFixed(2)} EUR</span></li>`;
-    }
-    ticker += `</ul>`;
-    ticker += `</div>`;
-    app.innerHTML = ticker;
-    return app;
-  },
-
-  scheduleUpdate: function () {
+  scheduleUpdate() {
     const self = this;
     setInterval(function () {
       self.getExchangeRate();
       self.getStocks();
     }, this.config.requestIntervalInSeconds * 1000);
   },
 
-  getStocks: function () {
+  getStocks() {
     this.sendSocketNotification("GET_STOCKS", this.config);
   },
 
-  getExchangeRate: function () {
-    this.sendSocketNotification("GET_EXCHANGE", { config: this.config, rates: this.exchangeData });
-  },
-
-  getColorClass: function (depotChange) {
-    if (depotChange > 0) {
-      return "high";
-    } else if (depotChange < 0) {
-      return "low";
-    } else {
-      return "neutral";
-    }
+  getExchangeRate() {
+    this.sendSocketNotification("GET_EXCHANGE", {
+      config: this.config,
+      rates: this.exchangeData
+    });
   },
 
-  socketNotificationReceived: function (notification, payload) {
+  socketNotificationReceived(notification, payload) {
     if (notification === "STOCK_RESULT") {
-      let { symbol, current, last } = payload;
-      let stockIndex = this.config.stocks.findIndex((stock) => stock.symbol === symbol);
-      if (stockIndex >= 0) {
-        this.config.stocks[stockIndex].current = current;
-        this.config.stocks[stockIndex].last = last;
-        this.config.stocks[stockIndex].lastUpdate = Date.now();
+      const { symbol, current, last } = payload;
+      const currentStock = this.config.stocks.find(
+        (stock) => stock.symbol === symbol
+      );
+      if (currentStock) {
+        currentStock.current = current;
+        currentStock.last = last;
+        currentStock.lastUpdate = Date.now();
         this.updateDom();
       }
     } else if (notification === "EXCHANGE_RESULT") {
       let { from, to, rate } = payload;
-      this.exchangeData[from + to] = { from, to, rate };
-      this.exchangeData[from + to].lastUpdate = Date.now();
+      this.exchangeData.push({ from, to, rate, lastUpdate: Date.now() });
+
       this.updateDom();
     }
   },
@@ -142,12 +118,15 @@ Module.register("MMM-Jast", {
       document.head.appendChild(vkf);
     }
     let innerText = `@keyframes tickerv {`;
-    const itemCount = this.config.stocks.length > 0 ? this.config.stocks.length + offset : 1; // avoid divition by zero
+    const itemCount =
+      this.config.stocks.length > 0 ? this.config.stocks.length + offset : 1; // avoid divition by zero
     const percentPerItem = 100 / itemCount;
     for (let i = 0; i <= itemCount; i++) {
-      innerText += `  ${i * percentPerItem}% { margin-top: ${i == 0 || i == itemCount ? "0" : i * -26 + "px"}; }`;
+      innerText += `  ${i * percentPerItem}% { margin-top: ${
+        i === 0 || i === itemCount ? "0" : i * -26 + "px"
+      }; }`;
     }
     innerText += `}`;
     vkf.innerText = innerText;
-  },
+  }
 });