Mercurial > code > home > repos > homeauto

<!doctype html>
<html>
  <head>
    <title>arduinoNode - </title>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
    <link rel="import" href="/lib/polymer/1.0.9/iron-ajax/iron-ajax.html">
    <link rel="import" href="/lib/polymer/1.0.9/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="/lib/polymer/1.0.9/paper-button/paper-button.html">
    <link rel="import" href="/room/ari/static/rdf-observe.html">
    <link rel="import" href="/room/ari/static/rdf-oneshot.html">
    <link rel="import" href="/room/ari/static/rdf-uri.html">
    <link rel="import" href="static/output-widgets.html">
    <link rel="import" href="/rdf/streamed-graph.html">
    <link rel="import" href="/rdf/graph-view.html">
    <style>
     body {
       font-family: monospace;
       display: flex;
       flex-direction: column;
       margin: 0;
       height: 100vh;
     }
    </style>
  </head>
  <body>
    <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/',
       b0: 'http://bigasterisk.com/homeauto/board0/',
     };
    </script>

    <dom-module id="linked-uri">
      <template>
        <a href$="{{href}}">{{compactUri(href)}}</a>
      </template>
      <script>
       HTMLImports.whenReady(function () {
         Polymer({
           is: 'linked-uri',
           properties: { href: { notify: true } },
           behaviors: [BigastUri]
         });
       });
      </script>
    </dom-module>

    <!-- subj/pred are compact uris -->
    <dom-module id="watched-subgraph">
      <style>
       .read { font-weight: bold; }
      </style>
      <template>
        <rdf-observe graph="{{graph}}" subject="{{subj}}" predicate="{{pred}}" out="{{out}}">
        </rdf-observe>

        <div><span>{{compactUri(subj)}}</span>, <span>{{compactUri(pred)}}</span>,
          <span class="read">{{formatted(out)}}</span>
        </div>

      </template>
      <script>
       HTMLImports.whenReady(function () {
         Polymer({
           is: 'watched-subgraph',
           properties: {
             graph: { notify: true },
             out: { notify: true },
             pred: { notify: true },
             subj: { notify: true }
           },
           behaviors: [BigastUri],
           formatted: function (out) {
             var obj = out[this.compactUri(this.pred)];
             if (typeof obj == 'string') {
               return this.compactUri(obj);
             } else {
               return obj['@value'];
             }
           }
         });
       });
      </script>
    </dom-module>

    <dom-module id="arduinonode-boards">
      <style>
       h1 {
         margin: 0;
         font-size: 130%;
       }
       ul {
         padding-left: 5px;
       }
       .board, .device {
         border: 1px solid gray;
         border-radius: 10px;
         margin: 13px;
         padding: 7px;
         box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.14);
       }
       .board {
         background: rgb(244, 244, 244);
       }
       .device {
         background: #fff;
       }
      </style>
      <template>
        <iron-ajax url="boards" auto="true" handle-as="json"
                   last-response="{{ret}}"></iron-ajax>
        <template is="dom-repeat" items="{{ret.boards}}" as="board">
          <div class="board">
            <h1>Board <linked-uri href$="{{board.uri}}"></linked-uri></h1>
            <h2>Devices</h2>
            <ul>
              <template is="dom-repeat" items="{{board.devices}}" as="dev">
                <div class="device">
                  <h1>
                    <span>{{dev.className}}</span>
                    <linked-uri href$="{{dev.uri}}"></linked-uri>
                  </h1>
                  <template is="dom-if" if="{{dev.watchPrefixes.length}}">
                    <div>watching:</div>
                    <ul>
                      <template is="dom-repeat" items="{{dev.watchPrefixes}}" as="prefix">
                        <watched-subgraph graph="{{board.graph}}" subj="{{prefix.0}}" pred="{{prefix.1}}"></watched-subgraph>
                      </template>
                    </ul>
                  </template>

                  <template is="dom-if" if="{{dev.outputWidgets.length}}">
                    <div>send output:</div>
                    <ul>
                      <template is="dom-repeat" items="{{dev.outputWidgets}}" as="out">
                        <div>
                          <output-widget-any desc="{{out}}"></output-widget-any>
                        </div>
                      </template>
                    </ul>
                  </template>
                </div>
              </template>
            </ul>
          </div>
        </template>
        <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
        <graph-view graph="{{graph}}"></graph-view>
      </template>
      <script>
       HTMLImports.whenReady(function () {
         Polymer({
           is: 'arduinonode-boards',
           properties: {
             ret: { type: Object, notify: true, observer: 'onBoards' }
           },
           onBoards: function() {
             document.title = document.title + ' ' + this.ret.host;
           },
           behaviors: [BigastUri]
         });
       });
      </script>
    </dom-module>
    <arduinonode-boards></arduinonode-boards>
  </body>
</html>
author	drewp@bigasterisk.com
date	Tue, 26 Jan 2016 03:46:05 -0800
parents	e606f1d89d89
children	4ebb5cc30002