view service/rfid/index.html @ 1462:2b29f14eb6bd

try new graph+view widget Ignore-this: d5f9c5dc52f04324368716ba2f604fdb darcs-hash:44e85a5c075ef73c34a58deaa3a3c1e8390dae52
author drewp <drewp@bigasterisk.com>
date Sun, 24 Nov 2019 00:01:00 -0800
parents c5b13d630d90
children b87b6e9cedb2
line wrap: on
line source

<!doctype html>
<html>
  <head>
    <title>rfid</title>
    <meta charset="utf-8" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script>
    <script src="/lib/require/require-2.3.3.js"></script>
    <script>
     requirejs.config({
       paths: {
         "streamed-graph": "/rdf/streamed-graph",
         "quadstore": "/rdf/quadstore",
         "async-module": "/lib/async/80f1793/async",
         "async": "/lib/async/80f1793/async",
         "jsonld-module": "/lib/jsonld.js/0.4.11/js/jsonld",
         "jsonld": "/lib/jsonld.js/0.4.11/js/jsonld",
         "rdfstore": "/lib/rdf_store/0.9.7/dist/rdfstore",
         "moment": "/lib/moment.min",
         "underscore": "/lib/underscore-1.5.2.min",
       }
     });
    </script>
    <script>
     window.NS = {
       dev: 'http://projects.bigasterisk.com/device/',
       room: 'http://projects.bigasterisk.com/room/',
       rdfs: 'http://www.w3.org/2000/01/rdf-schema#',
       sensor: 'http://bigasterisk.com/homeauto/sensor/',
     };
    </script>
    <link rel="import" href="/lib/polymer/1.0.9/iron-ajax/iron-ajax.html">
    <link rel="import" href="/rdf/streamed-graph.html">
    <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
    <link rel="import" href="/rdf/rdf-oneshot.html">
    <link rel="import" href="/rdf/rdf-uri.html">
  </head>
  <body>
    <dom-module id="rfid-control">
      <style>
       button {
           min-width: 60px;
           min-height: 40px;
       }
       table {
           border-collapse: collapse;
       }
       
       td, th {
           border: 1px solid gray;
       }
      </style>
      <template>
        <div>
          <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
          <!-- also get a graph of users so we can look up cards -->
        </div>
        
        <iron-ajax id="rewrite" url="rewrite" method="POST"></iron-ajax>
        
        Current reads: 
        <table>
          <tr><th>Card UID</th><th>Card text</th><th></th></tr>
          <template is="dom-repeat" items="{{currentReads}}">
            <tr>
              <td>{{item.uidDisplay}}</td>
              <td>{{item.text}}</td>
              <td>
                <div id="form">
                  <button on-click="rewrite">Rewrite</button>
                </div>
              </td>
            </tr>
          </template>
        </table>
        
      </template>
      <script>
       HTMLImports.whenReady(function () {
         Polymer({
           is: 'rfid-control',
           properties: {
             graph: { type: Object, notify: true, observer: "_onGraph" },
             currentReads: { type: Array, value: [] },
           },
           behaviors: [BigastUri],
           _onGraph: function(graph) {
             if (!graph.graph) return;
             const env = graph.graph.store.rdf;

             this.splice('currentReads', 0, this.currentReads.length);
             graph.graph.quadStore.quads(
               {subject: env.createNamedNode('room:frontDoorWindowRfid'),
                predicate: env.createNamedNode('room:reading'),
               },
               (q) => {
                 graph.graph.quadStore.quads(
                   {subject: q.object,
                    predicate: env.createNamedNode('room:cardText'),
                   },
                   (q2) => {
                     this.push(
                       'currentReads', {
                         'cardUid': q.object,
                         'uidDisplay': q.object.toString().replace(/.*\//, ""),
                         'text': q2.object.toString()
                       });
                   });
               });
           },
           rewrite: function(ev) {
             const cardUid = ev.model.item.cardUid;

             // ask for user first

             this.$.rewrite.contentType = "application/json";
             this.$.rewrite.body = {'cardUid': cardUid.toString(),
                                    'user': "some foaf"};
             this.$.rewrite.generateRequest();
           }
         });
       });
      </script>
    </dom-module>
    <rfid-control></rfid-control>
  </body>
</html>