Mercurial > code > home > repos > light9

<!doctype html>
<html>
  <head>
    <title>collector</title>
    <meta charset="utf-8" />
    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></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="/node_modules/n3/n3-browser.js"></script>
    <script src="/lib/async/dist/async.js"></script>
    <script src="/lib/underscore/underscore-min.js"></script>

    <link rel="stylesheet"  href="/style.css">
    <style>
     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>output attr</th>
            <th>value</th>
            <th>output 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>

      </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: 12em">
        <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();
                   var sock = new WebSocket(
                       window.location.href.replace(/^http/, 'ws') + 'updates');
                   sock.onmessage = function(ev) {
                       this.updates.onMessage(JSON.parse(ev.data));
                   }.bind(this);
               },
               onGraph: function(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>
author	Drew Perttula <drewp@bigasterisk.com>
date	Mon, 04 Jun 2018 07:07:11 +0000
parents	15babcd58d48
children	3ab0dc73cf2b