From 7194fcab44807df438b3a802e85d0b4209bbdd35 Mon Sep 17 00:00:00 2001
From: Zaid Abdulla <zaid@genieacs.com>
Date: Sat, 30 Jun 2018 13:11:13 -0700
Subject: [PATCH] Move component labels to containers

---
 client/components/all-parameters.js | 13 +++++--------
 client/components/container.js      | 11 +++++++++++
 client/components/device-faults.js  |  2 +-
 client/css/app.css                  | 10 +++++++++-
 config.json                         | 22 ++++++++++++++++++++--
 5 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/client/components/all-parameters.js b/client/components/all-parameters.js
index 984bc69..4c5e6e9 100644
--- a/client/components/all-parameters.js
+++ b/client/components/all-parameters.js
@@ -103,14 +103,11 @@ const component = {
         return m("tr", attrs, m("td.left", k), m("td.right", val));
       });
 
-    return [
-      m("h2", "Device parameters"),
-      m(
-        ".all-parameters",
-        search,
-        m(".parameter-list", m("table", m("tbody", rows)))
-      )
-    ];
+    return m(
+      ".all-parameters",
+      search,
+      m(".parameter-list", m("table", m("tbody", rows)))
+    );
   }
 };
 
diff --git a/client/components/container.js b/client/components/container.js
index e988e70..e907090 100644
--- a/client/components/container.js
+++ b/client/components/container.js
@@ -2,10 +2,21 @@
 
 import m from "mithril";
 import * as components from "../components";
+import * as store from "../store";
+import Filter from "../../common/filter";
+import * as funcCache from "../../common/func-cache";
 
 const component = {
   view: vnode => {
+    if (vnode.attrs.filter) {
+      const filter = store.unpackFilter(
+        funcCache.get(Filter.parse, vnode.attrs.filter)
+      );
+      if (!filter.test(vnode.attrs.device)) return;
+    }
+
     let children = Object.values(vnode.attrs.components).map(c => {
+      if (typeof c !== "object") return `${c}`;
       const attrs = Object.assign({}, vnode.attrs, c);
       return m(components.get(attrs.type), attrs);
     });
diff --git a/client/components/device-faults.js b/client/components/device-faults.js
index 7c9d928..a2ce634 100644
--- a/client/components/device-faults.js
+++ b/client/components/device-faults.js
@@ -64,7 +64,7 @@ const component = {
         m("tr.empty", m("td", { colspan: headers.length }, "No faults"))
       );
 
-    return [m("h2", "Faults"), m("table.table", thead, tbody)];
+    return m("table.table", thead, tbody);
   }
 };
 
diff --git a/client/css/app.css b/client/css/app.css
index 7abbdcf..5d477ca 100644
--- a/client/css/app.css
+++ b/client/css/app.css
@@ -473,7 +473,6 @@ span.na {
 }
 
 .all-parameters {
-  clear: both;
   font-family: monospace;
   & > input {
     font-family: monospace;
@@ -511,6 +510,15 @@ span.na {
   }
 }
 
+.container-right {
+  float: right;
+  clear: right;
+}
+
+.container-full-width {
+  clear: both;
+}
+
 .device-actions {
   margin-top: 10px;
   & > button {
diff --git a/config.json b/config.json
index f1286fd..e83fbce 100644
--- a/config.json
+++ b/config.json
@@ -246,10 +246,28 @@
         ]
       },
       {
-        "type": "device-faults"
+        "type": "container",
+        "element": "div",
+        "components": [
+          {
+            "type": "container",
+            "element": "h3",
+            "components": ["Faults"]
+          },
+          {"type": "device-faults"}
+        ]
       },
       {
-        "type": "all-parameters"
+        "type": "container",
+        "element": "div.container-full-width",
+        "components": [
+          {
+            "type": "container",
+            "element": "h3",
+            "components": ["All parameters"]
+          },
+          {"type": "all-parameters"}
+        ]
       },
       {
         "type": "device-actions"