Implement tags

client/components.js

@@ -9,6 +9,7 @@ import summonButton from "./components/summon-button";
 import deviceFaults from "./components/device-faults";
 import allParameters from "./components/all-parameters";
 import deviceActions from "./components/device-actions";
+import tags from "./components/tags";
 
 function get(name) {
   if (name === "parameter") return parameter;
@@ -20,6 +21,7 @@ function get(name) {
   else if (name === "device-faults") return deviceFaults;
   else if (name === "all-parameters") return allParameters;
   else if (name === "device-actions") return deviceActions;
+  else if (name === "tags") return tags;
   else throw new Error(`No such component '${name}'`);
 }
 

client/components/tags.js

@@ -0,0 +1,76 @@
+"use strict";
+
+import m from "mithril";
+import * as notifications from "../notifications";
+import * as store from "../store";
+
+const component = {
+  view: vnode => {
+    const device = vnode.attrs.device;
+    let writable = true;
+    if (vnode.attrs.writable != null) writable = vnode.attrs.writable;
+
+    const tags = [];
+    for (let p of Object.keys(device))
+      if (p.startsWith("Tags.")) tags.push(p.slice(5));
+
+    tags.sort();
+
+    if (!writable) return m(".tags", tags.map(t => m("span.tag", t)));
+
+    return m(
+      ".tags",
+      tags.map(tag =>
+        m(
+          "span.tag",
+          tag,
+          m(
+            "button",
+            {
+              onclick: e => {
+                e.target.disabled = true;
+                store
+                  .updateTags(device["DeviceID.ID"].value[0], { [tag]: false })
+                  .then(() => {
+                    e.target.disabled = false;
+                    notifications.push("success", `Tag '${tag}' unassigned`);
+                    store.fulfill(0, Date.now());
+                  })
+                  .catch(err => notifications.push("error", err.message));
+              }
+            },
+            "✕"
+          )
+        )
+      ),
+      m(
+        "span.tag.writable",
+        m(
+          "button",
+          {
+            onclick: e => {
+              e.target.disabled = true;
+              const tag = prompt(`Enter tag to assign to device:`);
+              if (!tag) {
+                e.target.disabled = false;
+                return;
+              }
+
+              store
+                .updateTags(device["DeviceID.ID"].value[0], { [tag]: true })
+                .then(() => {
+                  e.target.disabled = false;
+                  notifications.push("success", `Tag '${tag}' assigned`);
+                  store.fulfill(0, Date.now());
+                })
+                .catch(err => notifications.push("error", err.message));
+            }
+          },
+          "🞢"
+        )
+      )
+    );
+  }
+};
+
+export default component;

client/css/app.css

@@ -496,3 +496,19 @@ span.na {
     margin-right: 10px;
   }
 }
+
+span.tag {
+  display: inline-block;
+  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="190" height="16"><path d="M6.59 15.42l-6-6a2 2 0 0 1 0-2.83l6-6A2 2 0 0 1 8 0h180a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H8a2 2 0 0 1-1.41-.58zM4.35 6.59A2 2 0 1 0 7.17 9.4 2 2 0 0 0 4.35 6.6z" fill="#e8d5b2"></path></svg>');
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-radius: 0.2em;
+  padding-left: 1em;
+  padding-right: 0.2em;
+}
+
+.tags {
+  & > .tag {
+    margin-right: 0.5em;
+  }
+}

client/store.js

@@ -363,6 +363,14 @@ function postTasks(tasks, callback) {
   });
 }
 
+function updateTags(deviceId, tags) {
+  return m.request({
+    method: "POST",
+    url: `/api/devices/${encodeURIComponent(deviceId)}/tags`,
+    data: tags
+  });
+}
+
 function deleteResource(resourceType, id) {
   return m.request({
     method: "DELETE",
@@ -393,6 +401,7 @@ export {
   unpackFilter,
   getTimestamp,
   postTasks,
+  updateTags,
   deleteResource,
   evaluateExpression
 };