Implement all params component

client/components.js

@@ -7,6 +7,7 @@ import overviewDot from "./components/overview-dot";
 import container from "./components/container";
 import summonButton from "./components/summon-button";
 import deviceFaults from "./components/device-faults";
+import allParameters from "./components/all-parameters";
 
 function get(name) {
   if (name === "parameter") return parameter;
@@ -16,6 +17,7 @@ function get(name) {
   else if (name === "container") return container;
   else if (name === "summon-button") return summonButton;
   else if (name === "device-faults") return deviceFaults;
+  else if (name === "all-parameters") return allParameters;
   else throw new Error(`No such component '${name}'`);
 }
 

client/components/all-parameters.js

@@ -0,0 +1,117 @@
+"use strict";
+
+import m from "mithril";
+import * as components from "../components";
+import * as taskQueue from "../task-queue";
+
+function escapeRegExp(str) {
+  return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
+}
+
+const component = {
+  view: vnode => {
+    const device = vnode.attrs.device;
+
+    let search = m("input", {
+      type: "text",
+      placeholder: "Search parameters",
+      oninput: e => {
+        vnode.state.searchString = e.target.value;
+      }
+    });
+
+    let instanceRegex = /\.[0-9]+$/;
+    let re;
+    if (vnode.state.searchString) {
+      let keywords = vnode.state.searchString.split(" ").filter(s => s);
+      if (keywords.length)
+        re = new RegExp(keywords.map(s => escapeRegExp(s)).join(".*"), "i");
+    }
+
+    const rows = Object.keys(device)
+      .sort()
+      .map(k => {
+        let p = device[k];
+        let val = [];
+        let attrs = {};
+        if (re) {
+          let str = p.value && p.value[0] ? `${k} ${p.value[0]}` : k;
+          if (!re.test(str)) attrs.style = "display: none;";
+        }
+
+        if (p.object === false)
+          val.push(
+            m(
+              components.get("parameter"),
+              Object.assign({ device: device, parameter: k })
+            )
+          );
+        else if (p.object && p.writable)
+          if (instanceRegex.test(k)) {
+            val.push(
+              m(
+                "button",
+                {
+                  title: "Delete this instance",
+                  onclick: () => {
+                    taskQueue.queueTask({
+                      name: "deleteObject",
+                      device: device["DeviceID.ID"].value[0],
+                      objectName: k
+                    });
+                  }
+                },
+                "✕"
+              )
+            );
+          } else {
+            val.push(
+              m(
+                "button",
+                {
+                  title: "Create a new instance",
+                  onclick: () => {
+                    taskQueue.queueTask({
+                      name: "addObject",
+                      device: device["DeviceID.ID"].value[0],
+                      objectName: k
+                    });
+                  }
+                },
+                "🞢"
+              )
+            );
+          }
+
+        val.push(
+          m(
+            "button",
+            {
+              title: "Refresh tree",
+              onclick: () => {
+                taskQueue.queueTask({
+                  name: "getParameterValues",
+                  device: device["DeviceID.ID"].value[0],
+                  parameterNames: [k]
+                });
+              }
+            },
+            "↺"
+          )
+        );
+
+        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)))
+      )
+    ];
+  }
+};
+
+export default component;

client/css/app.css

@@ -447,3 +447,46 @@ span.inform {
     }
   }
 }
+
+span.na {
+  color: var(--disabled);
+}
+
+.all-parameters {
+  clear: both;
+  font-family: monospace;
+  & > input {
+    font-family: monospace;
+    margin-bottom: 2px;
+    padding: 4px;
+    width: 600px;
+  }
+
+  & > .parameter-list {
+    overflow-y: scroll;
+    height: 200px;
+
+    & > table {
+      width: 100%;
+      border-spacing: 0;
+      & > tbody {
+        & > tr {
+          & > td {
+            border-bottom: 1px dotted var(--color1);
+          }
+          transition: background-color var(--fade);
+          &:hover {
+            background-color: var(--color3);
+          }
+
+          & > td.left {
+          }
+          & > td.right {
+            text-align: right;
+            padding-right: 0.5em;
+          }
+        }
+      }
+    }
+  }
+}

config.json

@@ -93,5 +93,6 @@
   "ui.device.2.parameters.2.parameter": "IPAddress",
   "ui.device.2.parameters.3.label": "MAC address",
   "ui.device.2.parameters.3.parameter": "MACAddress",
-  "ui.device.3.type": "device-faults"
+  "ui.device.3.type": "device-faults",
+  "ui.device.4.type": "all-parameters"
 }