Mercurial > code > home > repos > homeauto

<!doctype html>
<html>
  <head>
    <title>front door lock</title>
    <meta charset="utf-8">
    <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 src="/rdf/common_paths_and_ns.js"></script>

    <link rel="stylesheet" href="/rdf/browse/style.css">

    <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 class="rdfBrowsePage">
    <dom-module id="door-control">
      <style>
       button {
           min-width: 12em;
           min-height: 4em;
       }
       .fade {
           color: #0000002b;
       }
       div#form {
           margin: 2px;
           background: #454a47;
           padding: 10px;
           line-height: 30px;
           text-align: center;
           border: 2px groove white;
           width: 20em;
           margin-bottom: 6em;
       }
       .invis-true {
           visibility: hidden;
       }

      </style>
      <template>
        <h1>Front door lock</h1>
        <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]]">
            <span class="fade">⟪</span>&#128275;<span class="fade">⟫</span> Unlock 6 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">&#128275; 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">
                &#128274; Release hold; lock door</button>
            </template>
          </div>
        </div>
        <div>
          <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
          <streamed-graph url="/store/store/events" graph="{{storeGraph}}"></streamed-graph>
        </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>

    <template id="t" is="dom-bind">
      <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
      <div id="out"></div>
      <script type="module" src="/rdf/streamed_graph_view.js"></script>
    </template>


    <div class="served-resources">
      <a href=".">root</a>
      <a href="simple/">/simple/</a>
      <a href="stats/">/stats/</a>
      <a href="graph">/graph</a>
      <a href="graph/events">/graph/events</a>
      <a href="output">(post) output</a>
    </div>
  </body>
</html>
author	drewp <drewp@bigasterisk.com>
date	Wed, 25 Sep 2019 17:36:44 -0700
parents	1a7cd0cff3eb
children