# HG changeset patch
# User drewp@bigasterisk.com
# Date 2022-05-21 22:54:35
# Node ID 6fbc1853c0b1679488141868d182ebcde23d0559
# Parent  412f798baf0cbca0701465e332ed50c010de84e3

split collector elements to ts files, minor porting

diff --git a/light9/collector/web/Light9CollectorDevice.ts b/light9/collector/web/Light9CollectorDevice.ts
new file mode 100644
--- /dev/null
+++ b/light9/collector/web/Light9CollectorDevice.ts
@@ -0,0 +1,71 @@
+import * as debug from "debug";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+debug.enable("*");
+
+@customElement("light9-collector-device")
+export class Light9CollectorDevice extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        break-inside: avoid-column;
+        font-size: 80%;
+      }
+      h3 {
+        margin-top: 12px;
+        margin-bottom: 0;
+      }
+      td {
+        white-space: nowrap;
+      }
+
+      td.nonzero {
+        background: #310202;
+        color: #e25757;
+      }
+      td.full {
+        background: #2b0000;
+        color: red;
+        font-weight: bold;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <h3><resource-display graph="{{graph}}" uri="{{uri}}"></resource-display></h3>
+      <table class="borders">
+        <tr>
+          <th>out attr</th>
+          <th>value</th>
+          <th>chan</th>
+        </tr>
+        <template is="dom-repeat" items="{{attrs}}">
+          <tr>
+            <td>{{item.attr}}</td>
+            <td class$="{{item.valClass}}">{{item.val}} →</td>
+            <td>{{item.chan}}</td>
+          </tr>
+        </template>
+      </table>
+    `;
+  }
+  @property() graph: Object = {};
+  @property() uri: Object = {};
+  @property() attrs: Array = [];
+
+  //  observers: [
+  //    "initUpdates(updates)",
+  //  ],
+  initUpdates(updates) {
+    updates.addListener(function (msg) {
+      if (msg.outputAttrsSet && msg.outputAttrsSet.dev == this.uri.value) {
+        this.set("attrs", msg.outputAttrsSet.attrs);
+        this.attrs.forEach(function (row) {
+          row.valClass = row.val == 255 ? "full" : row.val ? "nonzero" : "";
+        });
+      }
+    });
+  }
+}
diff --git a/light9/collector/web/Light9CollectorUi.ts b/light9/collector/web/Light9CollectorUi.ts
new file mode 100644
--- /dev/null
+++ b/light9/collector/web/Light9CollectorUi.ts
@@ -0,0 +1,73 @@
+import { sortBy, uniq } from "underscore";
+import * as debug from "debug";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+debug.enable("*");
+
+class Updates {
+  constructor() {
+    this.listeners = [];
+  }
+  addListener(cb) {
+    this.listeners.push(cb);
+  }
+  onMessage(msg) {
+    this.listeners.forEach(function (lis) {
+      lis(msg);
+    });
+  }
+}
+
+@customElement("light9-collector-ui")
+export class Light9CollectorUi extends LitElement {
+  static styles = [];
+  render() {
+    return html`
+      <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
+
+      <h1>Collector <a href="stats/">[stats]</a></h1>
+
+      <h2>Devices</h2>
+      <div style="column-width: 11em">
+        <template is="dom-repeat" items="{{devices}}">
+          <light9-collector-device graph="{{graph}}" updates="{{updates}}" uri="{{item}}"></light9-collector-device>
+        </template>
+      </div>
+    `;
+  }
+
+  @property() graph: Object = {};
+  @property() updates: Object = {};
+  @property() devices: Array<string> = [];
+  //  observers: [
+  //    'onGraph(graph)',
+  //  ],
+
+  ready() {
+    this.updates = new Updates();
+    reconnectingWebSocket(
+      "updates",
+      function (msg) {
+        this.updates.onMessage(msg);
+      }.bind(this)
+    );
+  }
+
+  onGraph(graph) {
+    this.graph.runHandler(this.findDevices.bind(this), "findDevices");
+  }
+
+  findDevices() {
+    var U = function (x) {
+      return this.graph.Uri(x);
+    };
+    this.set("devices", []);
+
+    let classes = this.graph.subjects(U("rdf:type"), U(":DeviceClass"));
+    uniq(sortBy(classes, "value"), true).forEach((dc) => {
+      sortBy(this.graph.subjects(U("rdf:type"), dc), "value").forEach((dev) => {
+        this.push("devices", dev);
+      });
+    });
+  }
+}
diff --git a/light9/collector/web/index.html b/light9/collector/web/index.html
--- a/light9/collector/web/index.html
+++ b/light9/collector/web/index.html
@@ -1,167 +1,19 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
     <title>collector</title>
     <meta charset="utf-8" />
-    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
-    <script src="/lib/debug/debug-build.js"></script>
-    <script>
-     debug.enable('*');
-    </script>
-    <link rel="import" href="/lib/polymer/polymer.html">
-    <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
-    <link rel="import" href="../rdfdb-synced-graph.html">
-    <link rel="import" href="../resource-display.html">
-    <script src="../lib/jquery/dist/jquery.slim.min.js"></script>
-    <script src="/node_modules/n3/n3-browser.js"></script> 
-    <script src="/lib/async/dist/async.js"></script>
-    <script src="/lib/underscore/underscore-min.js"></script>
-    <script src="../websocket.js"></script>
+
+    <link rel="stylesheet" href="./style.css" />
+    <script type="module" src="../../collector/Light9CollectorUi"></script>
 
-    <link rel="stylesheet"  href="/style.css">
     <style>
-     td { white-space: nowrap; }
+      td {
+        white-space: nowrap;
+      }
     </style>
   </head>
   <body>
-    
-    <dom-module id="light9-collector-device">
-      <template>
-        <style>
-         :host {
-             display: block;
-             break-inside: avoid-column;
-             font-size: 80%;
-         }
-         h3 {
-             margin-top: 12px;
-             margin-bottom: 0;
-         }
-         td { white-space: nowrap; }
-
-         td.nonzero {
-             background: #310202;
-             color: #e25757;
-         }
-         td.full {
-             background: #2b0000;
-             color: red;
-             font-weight: bold;
-         }
-        </style>
-        <h3><resource-display graph="{{graph}}" uri="{{uri}}"></resource-display></h3>
-        <table class="borders">
-          <tr>
-            <th>out attr</th>
-            <th>value</th>
-            <th>chan</th>
-          </tr>
-          <template is="dom-repeat" items="{{attrs}}">
-            <tr>
-              <td>{{item.attr}}</td>
-              <td class$="{{item.valClass}}">{{item.val}} →</td>
-              <td>{{item.chan}}</td>
-            </tr>
-          </template>
-        </table>
-      </template>
-      <script>
-       HTMLImports.whenReady(function () {
-         Polymer({
-           is: "light9-collector-device",
-           properties: {
-             graph: {type: Object, notify: true},
-             uri: {type: Object, notify: true},
-             attrs: {type: Array, notify: true},
-           },
-           observers: [
-             "initUpdates(updates)",
-           ],
-           initUpdates: function(updates) {
-             updates.addListener(function(msg) {
-               if (msg.outputAttrsSet && msg.outputAttrsSet.dev == this.uri.value) {
-                 this.set('attrs', msg.outputAttrsSet.attrs);
-                 this.attrs.forEach(function(row) {
-                   row.valClass = row.val == 255 ? 'full' : (row.val ? 'nonzero' : '');
-                 });
-               }
-             }.bind(this));
-           },
-         });
-       });
-      </script>
-    </dom-module>
-
-
-    <dom-module id="light9-collector-ui">
-      <template>
-        <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
-
-        <h1>Collector <a href="stats/">[stats]</a></h1>
-
-        <h2>Devices</h2>
-        <div style="column-width: 11em">
-          <template is="dom-repeat" items="{{devices}}">
-            <light9-collector-device
-              graph="{{graph}}" updates="{{updates}}"
-              uri="{{item}}"></light9-collector-device>
-          </template>
-        </div>
-      </template>
-      <script>
-       class Updates {
-         constructor() {
-           this.listeners = [];
-           
-         }
-         addListener(cb) {
-           this.listeners.push(cb);
-         }
-         onMessage(msg) {
-           this.listeners.forEach(function(lis) {
-             lis(msg);
-           });
-         }
-       }
-       HTMLImports.whenReady(function () {
-         Polymer({
-           is: "light9-collector-ui",
-           properties: {
-             graph: {type: Object, notify: true},
-             updates: {type: Object, notify: true},
-             devices: {type: Array},
-           },
-           observers: [
-             'onGraph(graph)',
-           ],
-           ready: function() {
-             this.updates = new Updates();
-             reconnectingWebSocket('updates',
-                                   function(msg) {
-                                     this.updates.onMessage(msg);
-                                   }.bind(this));
-           },
-           onGraph: function ong(graph) {
-             this.graph.runHandler(this.findDevices.bind(this), 'findDevices');
-           },
-           findDevices: function() {
-             var U = function(x) {
-               return this.graph.Uri(x);
-             };
-             this.set('devices', []);
-
-             let classes = this.graph.subjects(U('rdf:type'), U(':DeviceClass'));
-             _.uniq(_.sortBy(classes, 'value'), true).forEach(function(dc) {
-               _.sortBy(this.graph.subjects(U('rdf:type'), dc), 'value').forEach(function(dev) {
-                 this.push('devices', dev);
-               }.bind(this));
-             }.bind(this));
-           }
-         });
-       });
-      </script>
-    </dom-module>
-    
-    <light9-collector-ui></light9-collector-ui>    
+    <light9-collector-ui></light9-collector-ui>
   </body>
 </html>