u-toast implementation

Author: mathertel

elements.json

@@ -24,12 +24,12 @@
   },
 
   "element": {
-    "properties": ["loglevel", "title", "description"],
+    "properties": ["title", "description", "room", "loglevel", "startup"],
     "actions": ["start", "stop"]
   },
 
   "sensor": {
-    "properties": ["warmuptime", "readtime", "resendtime", "restart"]
+    "properties": ["readtime", "resendtime", "warmuptime", "restart"]
   },
 
   "analog": { "extends": "sensor",
@@ -92,22 +92,24 @@
     "events": ["onvalue", "onhigh", "onlow"]
   },
 
-  "displaydot": {
+  "displayoutput": {
     "sys": "false",
-    "properties": ["page", "x", "y", "color"],
+    "properties": ["x", "y", "w", "h", "page", "color", "background", "border"],
     "actions": ["value", "clear", "redraw"]
   },
 
-  "displaytext": {
+  "displaydot": { "extends": "displayoutput" },
+
+  "displayrect": { "extends": "displayoutput" },
+
+  "displaytext": { "extends": "displayoutput",
     "sys": "false",
-    "properties": ["page", "x", "y", "color", "fontsize", "prefix", "postfix"],
-    "actions": ["value", "clear", "redraw"]
+    "properties": ["fontsize", "prefix", "postfix"]
   },
 
-  "displayline": {
+  "displayline": { "extends": "displayoutput",
     "sys": "false",
-    "properties": ["page", "x", "y", "x1", "y1", "color"],
-    "actions": ["redraw"]
+    "properties": ["x1", "y1"]
   },
 
   "displaybutton": {
@@ -237,7 +239,7 @@
   },  
 
   "dht": { "extends": "sensor", "ui": "air",
-    "properties": ["pin"],
+    "properties": ["pin", "type", "powerpin", "powerinvert"],
     "events": ["ontemperature", "onhumidity"]
   },
 

elementsvg.js

@@ -14,32 +14,34 @@ function createBox(tName, txt) {
   pObj.appendChild(cn);
 
   // document.documentElement.setAttribute('viewBox', '0 0 120 ' + (y + 20));
-  document.documentElement.setAttribute('height', (2*(y + 18)));
+  document.documentElement.setAttribute('height', (2 * (y + 18)));
   y += 12;
 }
 
-function create(def) {
-  // remove old blocks
-  pObj.querySelectorAll('g.block').forEach(function (x) {
-    pObj.removeChild(x)
-  });
-  y = 12;
+function create(def, bClean = false) {
+  if (bClean) {
+    // remove old blocks
+    pObj.querySelectorAll('g.block').forEach(function(x) {
+      pObj.removeChild(x);
+    });
+    y = 12;
+  }
 
   // header
   pObj.querySelector('text').textContent = def.name;
   var iconName = def.icon || def.name;
   pObj.querySelector('use').setAttribute("href", "/icons.svg#" + iconName);
 
   if (def.properties)
-    def.properties.forEach(function (e) {
+    def.properties.forEach(function(e) {
       createBox("property", e);
     });
   if (def.events)
-    def.events.forEach(function (e) {
+    def.events.forEach(function(e) {
       createBox("event", e);
     });
   if (def.actions)
-    def.actions.forEach(function (e) {
+    def.actions.forEach(function(e) {
       createBox("action", e);
     });
 }
@@ -48,18 +50,23 @@ document.api = {
   create: create
 };
 
-window.addEventListener("load", function () {
+window.addEventListener("load", async function() {
   var s = document.location.search;
   if (s.length > 1) {
     var qElem = s.substring(1);
-    fetch('elements.json')
-      .then(function (result) { return result.json(); })
-      .then(function (e) {
-        var def = e[qElem];
-        if (def) {
-          def.name = qElem;
-          create(def);
-        }
-      });
+
+    let e = await fetch('elements.json');
+    e = await e.json();
+    var def = e[qElem];
+    if (def) {
+      // create element level
+      create(e["element"], true);
+
+      if (def.extends)
+        create(e[def.extends]);
+
+      def.name = qElem;
+      create(def);
+    }
   }
 });

packdist.js

@@ -9,7 +9,7 @@
 import yargs from 'yargs';
 import debug from 'debug';
 
-import sass from 'sass';
+import * as sass from 'sass';
 import * as HTMLMinifier from 'html-minifier-terser';
 import * as JSMinifier from 'terser';
 
@@ -129,6 +129,9 @@ const assets = [
   // { m: 'xml', src: 'i/no.svg' },
   { m: 'css', src: 'iotstyle.scss', tar: 'iotstyle.css' },
 
+  { m: 'm', src: 'u-toast.css', tar: 'u-toast.css' },
+  { m: 'js', src: 'u-toast.js' },
+
   { m: 'xml', src: 'chartline.svg' },
   { m: 'js', src: 'chartline.js' },
   { m: 'xml', src: 'chartpie.svg' },

packminimal.js

@@ -9,7 +9,7 @@
 import yargs from 'yargs';
 import debug from 'debug';
 
-import sass from 'sass';
+import * as sass from 'sass';
 import * as HTMLMinifier from 'html-minifier-terser';
 import * as JSMinifier from 'terser';
 

u-toast.css

@@ -0,0 +1,52 @@
+/* styles for u-toast */
+
+u-toast {
+  display: block;
+  position: absolute;
+  width: 320px;
+  top: 1rem;
+  right: 1rem;
+
+  .u-box {
+    position: relative;
+    transition: all 0.5s linear;
+    overflow-y: hidden;
+    padding-bottom: 1em;
+
+    &.u-fade {
+      height: 0;
+      padding-bottom: 0;
+    }
+
+    >.u-text {
+      padding: 0.25em;
+      border-radius: 0.4em;
+      color: black;
+      background-color: white;
+      border-left: 0.8em solid gray;
+    }
+
+    >button {
+      position: absolute;
+      right: 0;
+      top: 0.2em;
+      padding: 0;
+      border: 0;
+      min-width: 1em;
+      color: black;
+      background-color: white;
+    }
+  }
+
+  .u-text.u-log {
+    border-color: black;
+  }
+
+  .u-text.u-info {
+    border-color: #00cc00;
+  }
+
+  .u-text.u-error {
+    border-color: #cc0000;
+  }
+}

u-toast.js

@@ -0,0 +1,69 @@
+// micro toast notification implementation
+
+class ToastMessageComponent extends HTMLElement {
+
+  defaults = {
+    design: "u-log",
+    duration: 3000,
+    close: false
+  };
+
+  _closeToast(box) {
+    box.style.height = '';
+    box.classList.add('u-fade');
+  }
+
+  // create a box for logs, alerts...
+  _box(msg, options) {
+    options = Object.assign({}, this.defaults, options);
+
+    const box = document.createElement('div');
+    box.className = 'u-box';
+
+    const txt = document.createElement('div');
+    txt.className = 'u-text';
+    txt.classList.add(options.design);
+    box.appendChild(txt);
+    txt.innerText = msg;
+    this.appendChild(box);
+
+    // set height of box to the full value
+    window.setTimeout(() => {
+      box.style.height = box.clientHeight + 'px';
+    }, 100);
+
+    if (options.close) {
+      // add close button to box
+      const b = document.createElement('button');
+      b.textContent = 'x';
+      box.appendChild(b);
+      b.addEventListener("click", () => {
+        this._closeToast(box);
+      }, box);
+    }
+
+    // close box after duration ....
+    if (options.duration) {
+      window.setTimeout(() => { this._closeToast(box); }, options.duration);
+    }
+
+    // finally remove box
+    box.addEventListener("transitionend", () => { box.remove(); }, box);
+
+  }
+
+  // pre-configured toastr types.
+  log(msg) {
+    this._box(msg);
+  }
+
+  info(msg) {
+    this._box(msg, { design: 'u-info' });
+  }
+
+  error(msg) {
+    this._box(msg, { design: 'u-error', close: true, duration: 8000 });
+  }
+}
+
+customElements.define('u-toast', ToastMessageComponent);