feat: add style rules (#10)

* feat: add style rules * fix: style Rules null if not specified
DanielHabenicht · Jan 9, 2022 · 949ff92 · 949ff92
1 parent 139e28e
commit 949ff92
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 12 deletions.
diff --git a/MMM-json.js b/MMM-json.js
@@ -8,7 +8,8 @@ Module.register("MMM-json", {
   // Default module config.
   defaults: {
     url: "https://jsonplaceholder.typicode.com/users",
-    refreshInterval: 1000 * 60 * 5 // 5 minutes
+    refreshInterval: 1000 * 60 * 5, // 5 minutes
+    styleRules: []
   },
 
   start: function () {
@@ -70,7 +71,7 @@ Module.register("MMM-json", {
   // Override dom generator.
   getDom: function () {
     var wrapper = document.createElement("div");
-    if (this.config.url === "") {
+    if (this.config.url == null || this.config.url === "") {
       wrapper.innerHTML = "Missing configuration.";
       return wrapper;
     }
@@ -111,14 +112,25 @@ Module.register("MMM-json", {
 
       titleTr.innerHTML = this.response[i].title + ":";
       dataTr.innerHTML =
-        (this.response[i].prefix ? this.response[i].prefix : "") +
-        " " +
+        (this.response[i].prefix ? this.response[i].prefix + " " : "") +
         this.response[i].value +
-        " " +
-        (this.response[i].suffix ? this.response[i].suffix : "");
-
-      titleTr.className += " small regular bright";
-      dataTr.className += " small light bright";
+        (this.response[i].suffix ? " " + this.response[i].suffix : "");
+
+      titleTr.className = "small regular bright";
+      dataTr.className = "small light bright";
+
+      if (this.config.styleRules != null && this.config.styleRules.length > 0) {
+        for (var j = 0; j < this.config.styleRules.length; j++) {
+          if (this.config.styleRules[j].match(this.response[i].value)) {
+            if (this.config.styleRules[j].style != null) {
+              dataTr.style = this.config.styleRules[j].style;
+            }
+            if (this.config.styleRules[j].class != null) {
+              dataTr.className += " " + this.config.styleRules[j].class;
+            }
+          }
+        }
+      }
 
       row.appendChild(titleTr);
       row.appendChild(dataTr);

diff --git a/README.md b/README.md
@@ -27,7 +27,13 @@ npm install
   module: 'MMM-json',
   position: 'bottom_left',
   config: {
-    url: "https://jsonplaceholder.typicode.com/users", // Path to your json api
+    url: "https://jsonplaceholder.typicode.com/users/1", // Path to your json api
+    styleRules: [ // Provide custom style rules for any value
+      {
+        match: (value) => value == 1,
+        style: "color: red;",
+        class: "large"
+      }
   }
 },
 ```
@@ -148,12 +154,19 @@ npm install
       </td>
     </tr>
     <tr>
-      <td><code>values</code></td>
-      <td>Custom Configuration of the values you want to display (see below)
+      <td><a href="#value-configuration"><code>values</code></a></td>
+      <td>Custom Configuration of the values you want to display (<a href="#value-configuration">see below</a>)
         <br><b>Type:</b> <code>array</code>
         <br><b>Default:</b> <code>[]</code> Which means it displays all first level attributes (or the first element of an array).
       </td>
     </tr>
+    <tr>
+      <td><a href="#stylerules-configuration"><code>styleRules</code></a></td>
+      <td>Custom Style Rules matching for applying styles to any value (<a href="#stylerules-configuration">see below</a>)
+        <br><b>Type:</b> <code>array</code>
+        <br><b>Default:</b> <code>[]</code> No style rules are applied.
+      </td>
+    </tr>
   </tbody>
 </table>
 
@@ -198,6 +211,58 @@ npm install
   </tbody>
 </table>
 
+### styleRules Configuration
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>Value-Property</th>
+      <th width="100%">Description</th>
+    </tr>
+  <thead>
+  <tbody>
+    <tr>
+      <td><code>match</code></td>
+      <td>The matching rule determining if the style
+        <br><b>Type:</b> <code>function</code> (with the value as parameter and returning a boolean)
+        <br><b>Example:</b> <code>(value) => value > 10</code>
+      </td>
+    </tr>
+    <tr>
+      <td><code>style</code></td>
+      <td>The style that should be applied to the value element.
+        <br><b>Type:</b> <code>string</code>
+        <br><b>Example:</b> <code>color: ref</code>
+        <br><b>Default:</b> <code></code> (none)
+      </td>
+    </tr>
+    <tr>
+      <td><code>class</code></td>
+      <td>A string that will be appended to the class attribute of the value element.
+        <br><b>Type:</b> <code>string</code>
+        <br><b>Example:</b> <code>class-name</code>
+        <br><b>Default:</b> <code></code> (none)
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+# Testing
+
+```
+echo '{
+   "test": {
+     "id": 1,
+     "title": "json-server",
+     "author": "typicode",
+     "test": ["test1", "test2"]
+   }
+ }
+' > db.json
+npm install -g json-server
+json-server --watch db.json
+```
+
 # Attribution
 
 Attribution of some basic work and inspiration goes to