TypeScript!

ui/components/all-parameters.ts

@@ -1,5 +1,4 @@
-"use strict";
-
+import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import * as taskQueue from "../task-queue";
 import { parse } from "../../lib/common/expression-parser";
@@ -7,30 +6,30 @@ import memoize from "../../lib/common/memoize";
 
 const memoizedParse = memoize(parse);
 
-function escapeRegExp(str) {
+function escapeRegExp(str): string {
   return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
 }
 
-export default function component() {
+const component: ClosureComponent = (): Component => {
   return {
     view: vnode => {
-      const device = vnode.attrs.device;
+      const device = vnode.attrs["device"];
 
       const search = m("input", {
         type: "text",
         placeholder: "Search parameters",
         oninput: e => {
-          vnode.state.searchString = e.target.value;
+          vnode.state["searchString"] = e.target.value;
           e.redraw = false;
-          clearTimeout(vnode.state.timeout);
-          vnode.state.timeout = setTimeout(m.redraw, 500);
+          clearTimeout(vnode.state["timeout"]);
+          vnode.state["timeout"] = setTimeout(m.redraw, 500);
         }
       });
 
       const instanceRegex = /\.[0-9]+$/;
       let re;
-      if (vnode.state.searchString) {
-        const keywords = vnode.state.searchString.split(" ").filter(s => s);
+      if (vnode.state["searchString"]) {
+        const keywords = vnode.state["searchString"].split(" ").filter(s => s);
         if (keywords.length)
           re = new RegExp(keywords.map(s => escapeRegExp(s)).join(".*"), "i");
       }
@@ -43,7 +42,7 @@ export default function component() {
           const attrs = {};
           if (re) {
             const str = p.value && p.value[0] ? `${k} ${p.value[0]}` : k;
-            if (!re.test(str)) attrs.style = "display: none;";
+            if (!re.test(str)) attrs["style"] = "display: none;";
           }
 
           if (p.object === false) {
@@ -132,4 +131,6 @@ export default function component() {
       );
     }
   };
-}
+};
+
+export default component;

ui/components/container.js

@@ -1,22 +0,0 @@
-"use strict";
-
-import { m } from "../components";
-import * as store from "../store";
-
-export default function component() {
-  return {
-    view: vnode => {
-      if (vnode.attrs.filter) {
-        if (!store.evaluateExpression(vnode.attrs.filter, vnode.attrs.device))
-          return null;
-      }
-
-      const children = Object.values(vnode.attrs.components).map(c => {
-        if (typeof c !== "object") return `${c}`;
-        return m(c.type, c);
-      });
-      if (vnode.attrs.element) return m(vnode.attrs.element, children);
-      else return children;
-    }
-  };
-}

ui/components/container.ts

@@ -0,0 +1,28 @@
+import { ClosureComponent, Component } from "mithril";
+import { m } from "../components";
+import * as store from "../store";
+
+const component: ClosureComponent = (): Component => {
+  return {
+    view: vnode => {
+      if (vnode.attrs["filter"]) {
+        if (
+          !store.evaluateExpression(
+            vnode.attrs["filter"],
+            vnode.attrs["device"]
+          )
+        )
+          return null;
+      }
+
+      const children = Object.values(vnode.attrs["components"]).map(c => {
+        if (typeof c !== "object") return `${c}`;
+        return m(c["type"], c);
+      });
+      if (vnode.attrs["element"]) return m(vnode.attrs["element"], children);
+      else return children;
+    }
+  };
+};
+
+export default component;

ui/components/device-actions.ts

@@ -1,14 +1,13 @@
-"use strict";
-
+import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import * as taskQueue from "../task-queue";
 import * as notifications from "../notifications";
 import * as store from "../store";
 
-export default function component() {
+const component: ClosureComponent = (): Component => {
   return {
     view: vnode => {
-      const device = vnode.attrs.device;
+      const device = vnode.attrs["device"];
 
       const buttons = [];
 
@@ -87,4 +86,6 @@ export default function component() {
       return m(".actions-bar", buttons);
     }
   };
-}
+};
+
+export default component;

ui/components/device-faults.ts

@@ -1,13 +1,12 @@
-"use strict";
-
+import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import * as store from "../store";
 import * as notifications from "../notifications";
 
-export default function component() {
+const component: ClosureComponent = (): Component => {
   return {
     view: vnode => {
-      const device = vnode.attrs.device;
+      const device = vnode.attrs["device"];
       const deviceId = device["DeviceID.ID"].value[0];
       const faults = store.fetch("faults", [
         "AND",
@@ -72,4 +71,6 @@ export default function component() {
       return m("table.table", thead, tbody);
     }
   };
-}
+};
+
+export default component;

ui/components/device-link.ts

@@ -1,18 +1,17 @@
-"use strict";
-
+import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 
-export default function component() {
+const component: ClosureComponent = (): Component => {
   return {
     view: vnode => {
       let deviceId;
-      if (vnode.attrs.device)
-        deviceId = vnode.attrs.device["DeviceID.ID"].value[0];
+      if (vnode.attrs["device"])
+        deviceId = vnode.attrs["device"]["DeviceID.ID"].value[0];
 
-      const children = Object.values(vnode.attrs.components).map(c => {
+      const children = Object.values(vnode.attrs["components"]).map(c => {
         if (typeof c !== "object") return `${c}`;
         const attrs = Object.assign({}, vnode.attrs, c);
-        return m(attrs.type, attrs);
+        return m(attrs["type"], attrs);
       });
       if (deviceId) {
         return m(
@@ -25,4 +24,6 @@ export default function component() {
       }
     }
   };
-}
+};
+
+export default component;

ui/components/overview-dot.ts

@@ -1,18 +1,17 @@
-"use strict";
-
+import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import config from "../config";
 import * as store from "../store";
 
 const CHARTS = config.ui.overview.charts;
 
-export default function component() {
+const component: ClosureComponent = (): Component => {
   return {
     view: vnode => {
-      const device = vnode.attrs.device;
-      const chart = CHARTS[vnode.attrs.chart];
+      const device = vnode.attrs["device"];
+      const chart = CHARTS[vnode.attrs["chart"]];
       for (const slice of Object.values(chart.slices)) {
-        const filter = slice.filter;
+        const filter = slice["filter"];
         if (store.evaluateExpression(filter, device)) {
           const dot = m(
             "svg",
@@ -26,13 +25,15 @@ export default function component() {
               cx: "0.5em",
               cy: "0.5em",
               r: "0.4em",
-              fill: slice.color
+              fill: slice["color"]
             })
           );
-          return m("span.overview-dot", dot, `${slice.label}`);
+          return m("span.overview-dot", dot, `${slice["label"]}`);
         }
       }
       return null;
     }
   };
-}
+};
+
+export default component;

ui/components/parameter-list.js

@@ -1,35 +0,0 @@
-"use strict";
-
-import { m } from "../components";
-
-export default function component() {
-  return {
-    view: vnode => {
-      const device = vnode.attrs.device;
-
-      const rows = Object.values(vnode.attrs.parameters).map(parameter => {
-        const p = m.context(
-          {
-            device: device,
-            parameter: parameter.parameter
-          },
-          parameter.type || "parameter",
-          parameter
-        );
-
-        return m(
-          "tr",
-          {
-            onupdate: vn => {
-              vn.dom.style.display = p.dom ? "" : "none";
-            }
-          },
-          m("th", parameter.label),
-          m("td", p)
-        );
-      });
-
-      return m("table.parameter-list", rows);
-    }
-  };
-}

ui/components/parameter-list.ts

@@ -0,0 +1,38 @@
+import { ClosureComponent, Component, VnodeDOM } from "mithril";
+import { m } from "../components";
+
+const component: ClosureComponent = (): Component => {
+  return {
+    view: vnode => {
+      const device = vnode.attrs["device"];
+
+      const rows = Object.values(vnode.attrs["parameters"]).map(parameter => {
+        const p = m.context(
+          {
+            device: device,
+            parameter: parameter["parameter"]
+          },
+          parameter["type"] || "parameter",
+          parameter
+        );
+
+        return m(
+          "tr",
+          {
+            onupdate: vn => {
+              (vn.dom as HTMLElement).style.display = (p as VnodeDOM).dom
+                ? ""
+                : "none";
+            }
+          },
+          m("th", parameter["label"]),
+          m("td", p)
+        );
+      });
+
+      return m("table.parameter-list", rows);
+    }
+  };
+};
+
+export default component;

ui/components/parameter-table.ts

@@ -1,23 +1,22 @@
-"use strict";
-
+import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import * as taskQueue from "../task-queue";
 import * as store from "../store";
 import * as expressionParser from "../../lib/common/expression-parser";
 
-export default function component() {
+const component: ClosureComponent = (): Component => {
   return {
     oninit: vnode => {
-      const obj = vnode.attrs.parameter;
-      if (!Array.isArray(obj) || !obj[0] === "PARAM")
+      const obj = vnode.attrs["parameter"];
+      if (!Array.isArray(obj) || obj[0] !== "PARAM")
         throw new Error("Object must be a parameter path");
-      vnode.state.object = obj[1];
-      vnode.state.parameters = Object.values(vnode.attrs.childParameters);
+      vnode.state["object"] = obj[1];
+      vnode.state["parameters"] = Object.values(vnode.attrs["childParameters"]);
     },
     view: vnode => {
-      const device = vnode.attrs.device;
-      const object = store.evaluateExpression(vnode.state.object, device);
-      const parameters = vnode.state.parameters;
+      const device = vnode.attrs["device"];
+      const object = store.evaluateExpression(vnode.state["object"], device);
+      const parameters = vnode.state["parameters"];
 
       if (!device[object]) return null;
 
@@ -31,13 +30,14 @@ export default function component() {
         }
       }
 
-      const headers = Object.values(parameters).map(p => m("th", p.label));
+      const headers = Object.values(parameters).map(p => m("th", p["label"]));
 
       const thead = m("thead", m("tr", headers));
 
       const rows = [];
       for (const i of instances) {
-        let filter = vnode.attrs.filter != null ? vnode.attrs.filter : true;
+        let filter =
+          vnode.attrs["filter"] != null ? vnode.attrs["filter"] : true;
 
         filter = expressionParser.map(filter, e => {
           if (Array.isArray(e) && e[0] === "PARAM")
@@ -126,9 +126,11 @@ export default function component() {
       }
 
       let label;
-      if (vnode.attrs.label) label = m("h2", vnode.attrs.label);
+      if (vnode.attrs["label"]) label = m("h2", vnode.attrs["label"]);
 
       return [label, m("table.table", thead, m("tbody", rows))];
     }
   };
-}
+};
+
+export default component;

ui/components/parameter.ts

@@ -1,5 +1,4 @@
-"use strict";
-
+import { ClosureComponent, Component, VnodeDOM } from "mithril";
 import { m } from "../components";
 import * as taskQueue from "../task-queue";
 import * as store from "../store";
@@ -31,14 +30,14 @@ const evaluateParam = memoize((exp, obj, now) => {
   return { value, timestamp, parameter };
 });
 
-export default function component() {
+const component: ClosureComponent = (): Component => {
   return {
     view: vnode => {
-      const device = vnode.attrs.device;
+      const device = vnode.attrs["device"];
 
       const { value, timestamp, parameter } = evaluateParam(
-        vnode.attrs.parameter,
-        vnode.attrs.device,
+        vnode.attrs["parameter"],
+        vnode.attrs["device"],
         store.getTimestamp()
       );
 
@@ -77,7 +76,7 @@ export default function component() {
           onmouseover: e => {
             e.redraw = false;
             // Don't update any child element
-            if (e.target === el.dom) {
+            if (e.target === (el as VnodeDOM).dom) {
               const now = Date.now();
               const localeString = new Date(timestamp).toLocaleString();
               e.target.title = `${localeString} (${timeAgo(now - timestamp)})`;
@@ -89,4 +88,6 @@ export default function component() {
       );
     }
   };
-}
+};
+
+export default component;

ui/components/ping.js

@@ -1,56 +0,0 @@
-"use strict";
-
-import { m } from "../components";
-import * as store from "../store";
-
-const REFRESH_INTERVAL = 3000;
-
-export default function component() {
-  return {
-    oninit: vnode => {
-      vnode.state.timestamp = 0;
-      vnode.state.ping = null;
-      vnode.state.host = null;
-      vnode.state.timeout = null;
-    },
-    view: vnode => {
-      const refresh = () => {
-        const device = vnode.attrs.device;
-        let param =
-          device["InternetGatewayDevice.ManagementServer.ConnectionRequestURL"];
-        if (!param)
-          param = device["Device.ManagementServer.ConnectionRequestURL"];
-        if (!param || !param.value) return;
-
-        const url = new URL(param.value[0]);
-        vnode.state.host = url.hostname;
-        vnode.state.timestamp = Date.now();
-        store
-          .ping(vnode.state.host)
-          .then(res => {
-            vnode.state.ping = res;
-          })
-          .catch(() => {
-            // Do nothing
-          });
-      };
-
-      const t = vnode.state.timestamp + REFRESH_INTERVAL - Date.now();
-      clearTimeout(vnode.state.timeout);
-      if (t <= 0) refresh();
-      else vnode.state.timeout = setTimeout(refresh, t);
-
-      if (vnode.state.host) {
-        let status = "";
-        if (vnode.state.ping) {
-          if (vnode.state.ping.avg != null)
-            status = `${Math.trunc(vnode.state.ping.avg)} ms`;
-          else status = "Unreachable";
-        }
-
-        return m("div", `Pinging ${vnode.state.host}: ${status}`);
-      }
-      return null;
-    }
-  };
-}

ui/components/ping.ts

@@ -0,0 +1,57 @@
+import { ClosureComponent, Component } from "mithril";
+import { m } from "../components";
+import * as store from "../store";
+
+const REFRESH_INTERVAL = 3000;
+
+const component: ClosureComponent = (): Component => {
+  return {
+    oninit: vnode => {
+      vnode.state["timestamp"] = 0;
+      vnode.state["ping"] = null;
+      vnode.state["host"] = null;
+      vnode.state["timeout"] = null;
+    },
+    view: vnode => {
+      const refresh = (): void => {
+        const device = vnode.attrs["device"];
+        let param =
+          device["InternetGatewayDevice.ManagementServer.ConnectionRequestURL"];
+        if (!param)
+          param = device["Device.ManagementServer.ConnectionRequestURL"];
+        if (!param || !param.value) return;
+
+        const url = new URL(param.value[0]);
+        vnode.state["host"] = url.hostname;
+        vnode.state["timestamp"] = Date.now();
+        store
+          .ping(vnode.state["host"])
+          .then(res => {
+            vnode.state["ping"] = res;
+          })
+          .catch(() => {
+            // Do nothing
+          });
+      };
+
+      const t = vnode.state["timestamp"] + REFRESH_INTERVAL - Date.now();
+      clearTimeout(vnode.state["timeout"]);
+      if (t <= 0) refresh();
+      else vnode.state["timeout"] = setTimeout(refresh, t);
+
+      if (vnode.state["host"]) {
+        let status = "";
+        if (vnode.state["ping"]) {
+          if (vnode.state["ping"].avg != null)
+            status = `${Math.trunc(vnode.state["ping"].avg)} ms`;
+          else status = "Unreachable";
+        }
+
+        return m("div", `Pinging ${vnode.state["host"]}: ${status}`);
+      }
+      return null;
+    }
+  };
+};
+
+export default component;

ui/components/summon-button.ts

@@ -1,14 +1,13 @@
-"use strict";
-
+import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import * as taskQueue from "../task-queue";
 import * as store from "../store";
 import * as notifications from "../notifications";
 
-export default function component() {
+const component: ClosureComponent = (): Component => {
   return {
     view: vnode => {
-      const device = vnode.attrs.device;
+      const device = vnode.attrs["device"];
 
       return m(
         "button.primary",
@@ -16,9 +15,9 @@ export default function component() {
           title: "Initiate session and refresh basic parameters",
           onclick: e => {
             e.target.disabled = true;
-            const params = Object.values(vnode.attrs.parameters)
+            const params = Object.values(vnode.attrs["parameters"])
               .map(exp => {
-                if (!Array.isArray(exp) || !exp[0] === "PARAM") return null;
+                if (!Array.isArray(exp) || exp[0] !== "PARAM") return null;
                 return store.evaluateExpression(exp[1], device);
               })
               .filter(exp => !!exp);
@@ -68,4 +67,6 @@ export default function component() {
       );
     }
   };
-}
+};
+
+export default component;

ui/components/tags.ts

@@ -1,15 +1,14 @@
-"use strict";
-
+import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import * as notifications from "../notifications";
 import * as store from "../store";
 
-export default function component() {
+const component: ClosureComponent = (): Component => {
   return {
     view: vnode => {
-      const device = vnode.attrs.device;
+      const device = vnode.attrs["device"];
       let writable = true;
-      if (vnode.attrs.writable != null) writable = vnode.attrs.writable;
+      if (vnode.attrs["writable"] != null) writable = vnode.attrs["writable"];
 
       const tags = [];
       for (const p of Object.keys(device))
@@ -87,4 +86,6 @@ export default function component() {
       );
     }
   };
-}
+};
+
+export default component;