view service/frontDoorLock/index.html @ 425:d495d4382a07

comments and console layout Ignore-this: b45fcf8177a1200c126b80bf9f43aafa
author drewp@bigasterisk.com
date Thu, 04 Apr 2019 02:14:48 -0700
parents 67cebf7a14de
children bfe555dd0c91
line wrap: on
line source

<!doctype html>
<html>
  <head>
    <title>front door lock</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="/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="door-control">
      <style>
       button {
           min-width: 60px;
           min-height: 40px;
       }
       div#form {
           margin: 2px;
           background: #dff5e5;
           padding: 10px;
           line-height: 30px;
           text-align: center;
           border: 2px groove white;
       }
       .invis-true {
           visibility: hidden;
       }
       
      </style>
      <template>
        <div>
          <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
        </div>

        <div id="form">

          <div>
            Door is {{lockState}}
          </div>

          <rdf-oneshot
            id="unlockOneshot"
            post="output"
            subject="room:frontDoorLock"
            predicate="room:state"
            object="room:unlocked"
          ></rdf-oneshot>
          <button on-click="unlock">Unlock</button>
          
          <template is="dom-if" if="{{autoLockIsComing}}">
            <div>
              Locking in {{autoLockInSec}}
            </div>
          </template>
        </div>
      </template>
      <script>
       HTMLImports.whenReady(function () {
         Polymer({
           is: 'door-control',
           properties: {
             graph: { type: Object, notify: true, observer: "_onGraph" },
             lockState: { type: String },
             autoLockIsComing: { type: Boolean },
             autoLockInSec: { type: String},
           },
           behaviors: [BigastUri],
           _onGraph: function(graph) {
             if (!graph.graph) return;
             const env = graph.graph.store.rdf;
             graph.graph.quadStore.quads(
               {subject: env.createNamedNode('room:frontDoorLock'),
                predicate: env.createNamedNode('room:state'),
               },
               (q) => {
                 this.lockState = q.object.toString().replace(/.*\//, '');
               });
             
             this.autoLockIsComing = false;
             graph.graph.quadStore.quads(
               {subject: env.createNamedNode('room:frontDoorLock'),
                predicate: env.createNamedNode('room:autoLockInSec'),
               },
               (q) => {
                 this.autoLockIsComing = true;
                 this.autoLockInSec = parseFloat(q.object.valueOf());
               });
           },
           unlock: function() {
             this.$.unlockOneshot.go();
           }
         });
       });
      </script>
    </dom-module>
    <door-control></door-control>
  </body>
</html>