view lib/homeauto_anynode/static/index.html @ 1462:2b29f14eb6bd

try new graph+view widget Ignore-this: d5f9c5dc52f04324368716ba2f604fdb darcs-hash:44e85a5c075ef73c34a58deaa3a3c1e8390dae52
author drewp <drewp@bigasterisk.com>
date Sun, 24 Nov 2019 00:01:00 -0800
parents c451aad69f65
children
line wrap: on
line source

<!doctype html>
<html>
  <head>
    <title>ha - </title>
    <meta charset="utf-8">
    <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="/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="/rdf/rdf-oneshot.html">
    <link rel="import" href="/rdf/rdf-uri.html">
    <link rel="import" href="/rdf/streamed-graph.html">
    <link rel="import" href="output-widgets.html">
  </head>
  <body class="rdfBrowsePage">
    <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>

    <dom-module id="watched-subgraph">
      <style>
       .read { font-weight: bold; }
      </style>
      <template>
        <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: {
             streamedGraph: { notify: true, observer: 'onGraphChange' }, // streamed-graph output
             out: { notify: true },
             pred: { notify: true }, // uri
             subj: { notify: true } // uri
           },
           behaviors: [BigastUri],
           onGraphChange: function(streamedGraph) {
             if (!streamedGraph.graph) {
               return;
             }
             var env = streamedGraph.graph.store.rdf;
             streamedGraph.graph.quadStore.quads({subject: env.createNamedNode(this.subj),
                                                  predicate: env.createNamedNode(this.pred)},
                                                 function(quad) {
                                                   this.out = quad.object.valueOf();
                                                 }.bind(this));
           },
           formatted: function (obj) {
             if (typeof(obj) == 'string') {
               return this.compactUri(obj);
             } else {
               return obj;
             }
           }
         });
       });
      </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);
       }

      </style>
      <template>
        <streamed-graph url="graph/events" graph="{{graph}}" expanded="true"></streamed-graph>
        <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 class="devs">
              <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 streamed-graph="{{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 streamed-graph="{{graph}}" desc="{{out}}"></output-widget-any>
                        </div>
                      </template>
                    </ul>
                  </template>
                </div>
              </template>
            </ul>
          </div>
        </template>

      </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>