light9 Changeset - 15babcd58d48

Changeset - 15babcd58d48

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 7 years ago 2018-05-03 06:31:18
drewp@bigasterisk.com

update collector web to new n3js
Ignore-this: e68cc63a9a7a5828c5d2f3a82a38bc6f

2 files changed with 13 insertions and 11 deletions:

light9/collector/web/index.html

light9/web/resource-display.html

0 comments (0 inline, 0 general)

light9/collector/web/index.html

➞

Show inline comments

 <!doctype html>
 <html>
   <head>
     <title>collector</title>
     <meta charset="utf-8" />
-    <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
+    <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="/lib/N3.js-pull61/browser/n3-browser.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>
     <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;
+         }
          h3 {
              margin-top: 12px;
              margin-bottom: 0;
+         }
          td.nonzero {
              background: #310202;
              color: #e25757;
@@ @@ -41,57 +41,57 @@ @@
+         }
         </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: String, 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) {
+                       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: 18em">
         <template is="dom-repeat" items="{{devices}}">
           <light9-collector-device
               graph="{{graph}}" updates="{{updates}}"
@@ @@ -120,38 +120,40 @@ @@
                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', []);
                    _.uniq(_.sortBy(this.graph.subjects(U('rdf:type'), U(':DeviceClass'))), true).forEach(function(dc) {
                        _.sortBy(this.graph.subjects(U('rdf:type'), dc)).forEach(function(dev) {
                    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>

light9/web/resource-display.html

➞

Show inline comments

 <link rel="import" href="/lib/polymer/polymer.html">
 <link rel="import" href="/lib/paper-dialog/paper-dialog.html">
 <link rel="import" href="/lib/paper-button/paper-button.html">
 <link rel="stylesheet" href="/style.css">
 <dom-module id="resource-display">
   <template>
     <style>
      :host {
          display: inline-block;
          zvertical-align: top;
          zborder: 2px rgba(84, 84, 84, 0.27) outset;
          zborder-radius: 9px;
          zpadding: 2px;
+     }
     </style>
     <span class$="[[resClasses]]"><a href="{{uri}}">
+    <span class$="[[resClasses]]"><a href="{{uri.value}}">
       <!-- type icon goes here -->
       {{label}}
     </a></span>
     <template is="dom-if" if="{{rename}}">
       <button on-click="onRename">Rename</button>
       <paper-dialog id="renameDialog" modal
                     on-iron-overlay-closed="onRenameClosed">
         <p>
           New label:
           <input id="renameTo" autofocus type="text"
                  value="{{renameTo::input}}"
                  on-keydown="onRenameKey">
         </p>
         <div class="buttons">
           <paper-button dialog-dismiss>Cancel</paper-button>
           <paper-button dialog-confirm>OK</paper-button>
         </div>
       </paper-dialog>
     </template>
   </template>
   <script>
    Polymer({
        is: "resource-display",
        properties: {
            graph: { type: Object },
-           uri: { type: String },
+           uri: { type: Object }, // Use .value for the string
            label: { type: String },
            rename: { type: Boolean },
            minor: { type: Boolean },
            resClasses: { type: String, computed: '_resClasses(minor)', value: 'resource' },
            renameTo: { type: String, notify: true },
        },
        observers: ['onUri(graph, uri)'],
        _resClasses: function(minor) {
            return minor ? 'resource minor' : 'resource';
        },
        onUri: function(graph, uri) {
            if (!this.graph) return;
            this.graph.runHandler(this.setLabel.bind(this), `label ${this.uri}`);
+           this.graph.runHandler(this.setLabel.bind(this), `label ${this.uri.value}`);
        },
        setLabel: function() {
            if (!this.uri) {
                this.label = "<no uri>";
                return;
+           }
            try {
                this.label = this.graph.stringValue(this.uri,
                                                    this.graph.Uri('rdfs:label'));
            } catch(e) {
                this.label = null;
+           }
            if (!this.label) {
                this.label = this.uri.replace(/.*\//, '');
+               this.label = this.uri.value.replace(/.*\//, '');
+           }
        },
        onRename: function() {
            this.renameTo = this.label;
            this.querySelector("#renameDialog").open();
            this.querySelector("#renameTo").setSelectionRange(0, -1);
        },
        onRenameKey: function(ev) {
            if (ev.key == 'Enter') {
                this.querySelector("[dialog-confirm]").click();
+           }
            if (ev.key == 'Escape') {
                this.querySelector("[dialog-dismiss]").click();
+           }
        },
        onRenameClosed: function() {
            var dialog = this.querySelector("#renameDialog");
            if (dialog.closingReason.confirmed) {
                var label = this.graph.Uri('rdfs:label');
                var ctxs = this.graph.contextsWithPattern(this.uri, label, null);
                if (ctxs.length != 1) {
                    throw new Error(`${ctxs.length} label stmts for ${this.uri}`);
+                   throw new Error(`${ctxs.length} label stmts for ${this.uri.label}`);
+               }
                this.graph.patchObject(this.uri, label,
                                       this.graph.Literal(this.renameTo),
                                       ctxs[0]);
+           }
+       }
    });
   </script>
 </dom-module>

0 comments (0 inline, 0 general)