Generalize store quering functions

client/components/overview-dot.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import m from "mithril";
+import * as config from "../config";
+import * as store from "../store";
+
+const CHARTS = config.get("ui.overview.charts");
+
+const component = {
+  view: vnode => {
+    const device = vnode.attrs.device;
+    const chart = CHARTS[vnode.attrs.chart];
+    for (let slice of Object.values(chart.slices)) {
+      const filter = store.unpackFilter(slice.filter);
+      if (filter.test(device)) {
+        const dot = m(
+          "svg",
+          {
+            width: "1em",
+            height: "1em",
+            xmlns: "http://www.w3.org/2000/svg",
+            "xmlns:xlink": "http://www.w3.org/1999/xlink"
+          },
+          m("circle", {
+            cx: "0.5em",
+            cy: "0.5em",
+            r: "0.4em",
+            fill: slice.color
+          })
+        );
+        return m("span.overview-dot", dot, `${slice.label}`);
+      }
+    }
+  }
+};
+
+export default component;

client/components/parameter-list.js

@@ -0,0 +1,27 @@
+"use strict";
+
+import m from "mithril";
+import * as components from "../components";
+
+const component = {
+  view: vnode => {
+    const device = vnode.attrs.device;
+    const parameters = vnode.attrs.parameters;
+    const filtered = Object.values(parameters).filter(
+      p => p.parameter in device
+    );
+    const rows = filtered.map(p =>
+      m(
+        "tr",
+        m("th", p.label),
+        m(
+          "td",
+          m(components.get("parameter"), Object.assign({ device: device }, p))
+        )
+      )
+    );
+    return m("table.parameter-list", rows);
+  }
+};
+
+export default component;

client/components/parameter-table.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import m from "mithril";
+import * as components from "../components";
+
+const component = {
+  view: vnode => {
+    const device = vnode.attrs.device;
+    const object = vnode.attrs.object;
+    const parameters = vnode.attrs.parameters;
+
+    if (!device[object]) return null;
+
+    const instances = new Set();
+    for (let p in device)
+      if (p.startsWith(object))
+        instances.add(p.slice(0, p.indexOf(".", object.length + 1)));
+
+    const thead = m(
+      "thead",
+      m("tr", Object.values(parameters).map(p => m("th", p.label)))
+    );
+    const rows = [];
+    for (let i of instances) {
+      const row = Object.values(parameters).map(p =>
+        m(
+          "td",
+          m(
+            components.get("parameter"),
+            Object.assign({ device: device }, p, {
+              parameter: `${i}.${p.parameter}`
+            })
+          )
+        )
+      );
+      rows.push(m("tr", row));
+    }
+    return m("table.parameter-table", thead, m("tbody", rows));
+  }
+};
+
+export default component;

client/components/parameter.js

@@ -0,0 +1,30 @@
+"use strict";
+
+import m from "mithril";
+import * as components from "../components";
+
+const component = {
+  view: vnode => {
+    const param = vnode.attrs.device[vnode.attrs.parameter];
+    if (!param || !param.value) return m("span.na", "N/A");
+    let value = param.value[0];
+    if (param.value[1] === "xsd:dateTime")
+      value = new Date(value).toISOString();
+
+    let meta;
+    if (vnode.attrs.meta) {
+      const metaAttrs = Object.assign(
+        { device: vnode.attrs.device, parameter: vnode.attrs.parameter },
+        vnode.attrs.meta
+      );
+      meta = m("span", [
+        " (",
+        m(components.get(metaAttrs.type), metaAttrs),
+        ")"
+      ]);
+    }
+    return [m("span", { title: param.valueTimestamp }, value), meta];
+  }
+};
+
+export default component;