Mercurial > code > home > repos > homeauto

comparison service/frontDoorLock/index.html @ 655:013e2a89b345

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
index page rewrite. mqtt subscribe update. new store/events graph uri Ignore-this: f0e59d3487ebfc90f8f4a830a7084023
author drewp@bigasterisk.com
date Wed, 25 Sep 2019 17:36:44 -0700
parents f0d45c651817
children
comparison
equal deleted inserted replaced
654:f0d45c651817 655:013e2a89b345
1 <!doctype html> 1 <!doctype html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>front door lock</title> 4 <title>front door lock</title>
5 <meta charset="utf-8" /> 5 <meta charset="utf-8">
6 <meta name="mobile-web-app-capable" content="yes">
7 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1">
7
8 <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script> 8 <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script>
9 <script src="/lib/require/require-2.3.3.js"></script> 9 <script src="/lib/require/require-2.3.3.js"></script>
10 <script src="/rdf/common_paths_and_ns.js"></script> 10 <script src="/rdf/common_paths_and_ns.js"></script>
11
12 <link rel="stylesheet" href="/rdf/browse/style.css">
13
11 <link rel="import" href="/rdf/streamed-graph.html"> 14 <link rel="import" href="/rdf/streamed-graph.html">
12 <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html"> 15 <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
13 <link rel="import" href="/rdf/rdf-oneshot.html"> 16 <link rel="import" href="/rdf/rdf-oneshot.html">
14 <link rel="import" href="/rdf/rdf-uri.html"> 17 <link rel="import" href="/rdf/rdf-uri.html">
15 </head> 18 </head>
16 <body> 19 <body class="rdfBrowsePage">
17 <dom-module id="door-control"> 20 <dom-module id="door-control">
18 <style> 21 <style>
19 button { 22 button {
20 min-width: 60px; 23 min-width: 12em;
21 min-height: 40px; 24 min-height: 4em;
25 }
26 .fade {
27 color: #0000002b;
22 } 28 }
23 div#form { 29 div#form {
24 margin: 2px; 30 margin: 2px;
25 background: #dff5e5; 31 background: #454a47;
26 padding: 10px; 32 padding: 10px;
27 line-height: 30px; 33 line-height: 30px;
28 text-align: center; 34 text-align: center;
29 border: 2px groove white; 35 border: 2px groove white;
36 width: 20em;
37 margin-bottom: 6em;
30 } 38 }
31 .invis-true { 39 .invis-true {
32 visibility: hidden; 40 visibility: hidden;
33 } 41 }
34 42
35 </style> 43 </style>
36 <template> 44 <template>
37 <h1>Front door lock</h1> 45 <h1>Front door lock</h1>
38 <div id="form"> 46 <div id="form">
39 47
47 subject="room:frontDoorLock" 55 subject="room:frontDoorLock"
48 predicate="room:state" 56 predicate="room:state"
49 object="room:unlocked" 57 object="room:unlocked"
50 ></rdf-oneshot> 58 ></rdf-oneshot>
51 <button on-click="unlock" 59 <button on-click="unlock"
52 disabled$="[[!isLocked]]">Unlock 10 seconds</button> 60 disabled$="[[!isLocked]]">
53 61 <span class="fade">⟪</span>&#128275;<span class="fade">⟫</span> Unlock 6 seconds
54 <div class$="invis-[[!autoLockIsComing]]"> 62 </button>
55 Locking in {{autoLockInSec}} 63
56 </div> 64 <div class$="invis-[[!autoLockIsComing]]">
65 Locking in {{autoLockInSec}}
66 </div>
57 67
58 <div> 68 <div>
59 <rdf-oneshot 69 <rdf-oneshot
60 id="hold" 70 id="hold"
61 post="/store/values" 71 post="/store/values"
62 subject="room:frontDoorLockRequest" 72 subject="room:frontDoorLockRequest"
63 predicate="room:state" 73 predicate="room:state"
64 object="room:unlocked" 74 object="room:unlocked"
65 ></rdf-oneshot> 75 ></rdf-oneshot>
66 <template is="dom-if" if="{{!isHeld}}"> 76 <template is="dom-if" if="{{!isHeld}}">
67 <button on-click="hold">Hold unlocked</button> 77 <button on-click="hold">&#128275; Hold unlocked</button>
68 </template> 78 </template>
69 <rdf-oneshot 79 <rdf-oneshot
70 id="releaseHold" 80 id="releaseHold"
71 post="/store/values" 81 post="/store/values"
72 subject="room:frontDoorLockRequest" 82 subject="room:frontDoorLockRequest"
79 subject="room:frontDoorLock" 89 subject="room:frontDoorLock"
80 predicate="room:state" 90 predicate="room:state"
81 object="room:locked" 91 object="room:locked"
82 ></rdf-oneshot> 92 ></rdf-oneshot>
83 <template is="dom-if" if="{{isHeld}}"> 93 <template is="dom-if" if="{{isHeld}}">
84 <button on-click="releaseHold">Release hold; lock door</button> 94 <button on-click="releaseHold">
95 &#128274; Release hold; lock door</button>
85 </template> 96 </template>
86 </div> 97 </div>
87 </div> 98 </div>
88 <div> 99 <div>
89 <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph> 100 <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
116 }, 127 },
117 (q) => { 128 (q) => {
118 this.lockState = q.object.toString().replace(/.*\//, ''); 129 this.lockState = q.object.toString().replace(/.*\//, '');
119 this.isLocked = q.object.equals(locked) ? true : (q.object.equals(unlocked) ? false : null); 130 this.isLocked = q.object.equals(locked) ? true : (q.object.equals(unlocked) ? false : null);
120 }); 131 });
121 132
122 this.autoLockIsComing = false; 133 this.autoLockIsComing = false;
123 graph.graph.quadStore.quads( 134 graph.graph.quadStore.quads(
124 {subject: env.createNamedNode('room:frontDoorLock'), 135 {subject: env.createNamedNode('room:frontDoorLock'),
125 predicate: env.createNamedNode('room:autoLockInSec'), 136 predicate: env.createNamedNode('room:autoLockInSec'),
126 }, 137 },
127 (q) => { 138 (q) => {
128 this.autoLockIsComing = true; 139 this.autoLockIsComing = true;
129 this.autoLockInSec = parseFloat(q.object.valueOf()); 140 this.autoLockInSec = parseFloat(q.object.valueOf());
130 }); 141 });
131 }, 142 },
132 _onStoreGraph: function(graph) { 143 _onStoreGraph: function(graph) {
133 if (!graph.graph) return; 144 if (!graph.graph) return;
134 const env = graph.graph.store.rdf; 145 const env = graph.graph.store.rdf;
135 const unlocked = env.createNamedNode('room:unlocked'); 146 const unlocked = env.createNamedNode('room:unlocked');
145 }, 156 },
146 unlock: function() { 157 unlock: function() {
147 this.$.unlockOneshot.go(); 158 this.$.unlockOneshot.go();
148 }, 159 },
149 hold: function () { 160 hold: function () {
150 this.$.hold.go(); 161 this.$.hold.go();
151 }, 162 },
152 releaseHold: function() { 163 releaseHold: function() {
153 this.$.releaseHold.go(); 164 this.$.releaseHold.go();
154 this.$.lockNow.go(); // may race with releaseHold? 165 this.$.lockNow.go(); // may race with releaseHold?
155 }, 166 },
163 <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph> 174 <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
164 <div id="out"></div> 175 <div id="out"></div>
165 <script type="module" src="/rdf/streamed_graph_view.js"></script> 176 <script type="module" src="/rdf/streamed_graph_view.js"></script>
166 </template> 177 </template>
167 178
168 <style>
169 .served-resources {
170 margin-top: 4em;
171 border-top: 1px solid gray;
172 padding-top: 1em;
173 }
174 .served-resources a {
175 padding-right: 2em;
176 }
177 </style>
178 179
179 <div class="served-resources"> 180 <div class="served-resources">
180 <a href=".">root</a> 181 <a href=".">root</a>
181 <a href="simple/">/simple/</a> 182 <a href="simple/">/simple/</a>
182 <a href="stats/">/stats/</a> 183 <a href="stats/">/stats/</a>