light9 Changeset - 6fbc1853c0b1

Changeset - 6fbc1853c0b1

Parent rev.

Child rev.

[Not reviewed]

default

0 1 2

drewp@bigasterisk.com - 3 years ago 2022-05-21 22:54:35
drewp@bigasterisk.com

split collector elements to ts files, minor porting

3 files changed with 151 insertions and 155 deletions:

light9/collector/web/Light9CollectorDevice.ts

light9/collector/web/Light9CollectorUi.ts

light9/collector/web/index.html

155

0 comments (0 inline, 0 general)

light9/collector/web/Light9CollectorDevice.ts

➞

Show inline comments

@@ new file 100644 @@
 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" : "";
         });
+      }
     });
+  }
+}

light9/collector/web/Light9CollectorUi.ts

➞

Show inline comments

@@ new file 100644 @@
 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);
       });
     });
+  }
+}

light9/collector/web/index.html

➞

Show inline comments

-<!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>
   </body>
 </html>

0 comments (0 inline, 0 general)