Mercurial > code > home > repos > homeauto
view service/frontDoorLock/index.html @ 1229:02e4b84821d5
talk to store graph, second button for holding unlocked, etc
Ignore-this: c2ae7d756e743c26e5e01d99772899bd
darcs-hash:a0750d0bbc4dc7c0f65f63f3e7342b35a175141b
author | drewp <drewp@bigasterisk.com> |
---|---|
date | Thu, 04 Apr 2019 02:16:22 -0700 |
parents | a72e9245cc72 |
children | 756ff1170342 |
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> <streamed-graph url="/store/graph/events" graph="{{storeGraph}}"></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" disabled$="[[!isLocked]]">Unlock 10 seconds</button> <div class$="invis-[[!autoLockIsComing]]"> Locking in {{autoLockInSec}} </div> <div> <rdf-oneshot id="hold" post="/store/values" subject="room:frontDoorLockRequest" predicate="room:state" object="room:unlocked" ></rdf-oneshot> <template is="dom-if" if="{{!isHeld}}"> <button on-click="hold">Hold unlocked</button> </template> <rdf-oneshot id="releaseHold" post="/store/values" subject="room:frontDoorLockRequest" predicate="room:state" object="room:unset" ></rdf-oneshot> <rdf-oneshot id="lockNow" post="output" subject="room:frontDoorLock" predicate="room:state" object="room:locked" ></rdf-oneshot> <template is="dom-if" if="{{isHeld}}"> <button on-click="releaseHold">Release hold; lock door</button> </template> </div> </div> </template> <script> HTMLImports.whenReady(function () { Polymer({ is: 'door-control', properties: { graph: { type: Object, notify: true, observer: "_onGraph" }, storeGraph: { type: Object, notify: true, observer: "_onStoreGraph" }, lockState: { type: String }, autoLockIsComing: { type: Boolean }, autoLockInSec: { type: String}, isHeld: { type: Boolean }, }, behaviors: [BigastUri], _onGraph: function(graph) { if (!graph.graph) return; const env = graph.graph.store.rdf; const unlocked = env.createNamedNode('room:unlocked'); const locked = env.createNamedNode('room:locked'); this.isLocked = null; graph.graph.quadStore.quads( {subject: env.createNamedNode('room:frontDoorLock'), predicate: env.createNamedNode('room:state'), }, (q) => { this.lockState = q.object.toString().replace(/.*\//, ''); this.isLocked = q.object.equals(locked) ? true : (q.object.equals(unlocked) ? false : null); }); 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()); }); }, _onStoreGraph: function(graph) { if (!graph.graph) return; const env = graph.graph.store.rdf; const unlocked = env.createNamedNode('room:unlocked'); const locked = env.createNamedNode('room:locked'); this.isHeld = false; graph.graph.quadStore.quads( {subject: env.createNamedNode('room:frontDoorLockRequest'), predicate: env.createNamedNode('room:state'), }, (q) => { this.isHeld = q.object.equals(unlocked); }); }, unlock: function() { this.$.unlockOneshot.go(); }, hold: function () { this.$.hold.go(); }, releaseHold: function() { this.$.releaseHold.go(); this.$.lockNow.go(); // may race with releaseHold? }, }); }); </script> </dom-module> <door-control></door-control> </body> </html>