Mercurial > code > home > repos > homeauto

changeset 1036:5f56a8c96458

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
convert environment service to <graph-view> for now Ignore-this: 803dc61d3effde3cc172fdb776de532 darcs-hash:b2d92be8fa3097eef546d71ed51aae47dc158f09
author drewp <drewp@bigasterisk.com>
date Thu, 28 Jan 2016 02:48:18 -0800
parents f01d9892ed79
children 8d1a8a96e895
files service/environment/index.html
diffstat 1 files changed, 9 insertions(+), 118 deletions(-) [+]
line wrap: on
line diff
--- a/service/environment/index.html	Thu Jan 28 02:24:32 2016 -0800
+++ b/service/environment/index.html	Thu Jan 28 02:48:18 2016 -0800
@@ -6,126 +6,17 @@
    xmlns="http://projects.bigasterisk.com/room/"
    >
   <head>
-    <style>
-      .subject { margin-left: 20px; border-top: 1px solid gray; }
-      .predicate { margin-left: 20px; }
-      .object { margin-left: 20px; }
-      
-      .subject > .node { border: 2px solid rgb(68, 141, 68); }
-      .literalType { vertical-align: super; font-size: 80%; }
-      .literal { display: inline-block; border: 1px solid gray; background: white; }
-      .resource { display: inline-block; background: lightblue; border-radius: 6px; padding: 1px 6px; margin: 2px; }
-      .comment { color: green; }
-    </style>
-    
-    <script type="text/html" id="node">
-      <!-- ko if: typeof($data) == 'string' -->
-      <span class="node resource" data-bind="html: $root.createCurie($data)"></span>
-      <span class="comment" data-bind="html: $root.docLink($data)"></span>
-      <!-- /ko -->
-      <!-- ko if: typeof($data) != 'string' -->
-         <!-- ko if: type == 'literal' -->
-           <span class="literal" data-bind="text: value"></span>
-           <span class="literalType" data-bind="html: $root.createCurie($data['datatype'] || '')"></span>
-         <!-- /ko -->
-         <!-- ko if: type == 'uri' -->
-           <span class="resource" data-bind="html: $root.createCurie(value)"></span>
-           <span class="comment" data-bind="html: $root.docLink($data)"></span>
-         <!-- /ko -->
-         <!-- ko if: type == 'bnode' -->
-           <span class="resource bnode" data-bind="text: value"></span>
-         <!-- /ko -->
-      <!-- /ko -->
-    </script>
-    
+    <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="/rdf/streamed-graph.html">
+    <link rel="import" href="/rdf/graph-view.html">
   </head>
   <body>
     <h1>env</h1>
-
-    <section>
-      <h2>
-        Current statements (<a href="graph">/graph</a>)
-        <button data-bind="click: refresh">Refresh</button>
-      </h2>
-      <div>
-        These statements are all in the
-        <span data-bind="html: $root.createCurie(graphUri())">...</span> graph.
-      </div>
-      <div data-bind="foreach: {data: Object.keys($root.graph()), as: 'subj'}">
-        <div class="subject">subj: <!-- ko template: 'node' --><!-- /ko -->
-          <div data-bind="foreach: {data: Object.keys($root.graph()[subj]), as: 'pred'}">
-            <div class="predicate">pred: <!-- ko template: 'node' --><!-- /ko -->
-              <div data-bind="foreach: {data: $root.graph()[$parent][pred], as: 'obj'}">
-                <div class="object">obj:
-                  <!-- ko template: 'node' --><!-- /ko -->
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <script src="//bigasterisk.com/lib/underscore-1.5.2.min.js"></script>
-    <script src="//bigasterisk.com/lib/jquery-2.0.3.min.js"></script>
-    <script src="//bigasterisk.com/lib/knockout-2.3.0.js"></script>
-
-    <script src="//bigasterisk.com/lib/rdfquery/r195/jquery.uri.js"></script>
-    <script src="//bigasterisk.com/lib/rdfquery/r195/jquery.datatype.js"></script>
-    <script src="//bigasterisk.com/lib/rdfquery/r195/jquery.rdf.js"></script>
-    <script src="//bigasterisk.com/lib/rdfquery/r195/jquery.xmlns.js"></script>
-    <script src="//bigasterisk.com/lib/rdfquery/r195/jquery.curie.js"></script>
-    <script src="//bigasterisk.com/lib/rdfquery/r195/jquery.rdf.json.js"></script>
-    <script src="//bigasterisk.com/lib/rdfquery/r195/jquery.rdf.turtle.js"></script>
-
-    <script>
-      $(function () {
-          var model = {
-            graph: ko.observable({}),
-            graphUri: ko.observable()
-          };
-          var tryCurie = function(uri) {
-            try {
-              return $('html').createCurie(uri);
-            } catch(e) {
-              return uri;
-            }
-          };
-          model.createCurie = function (uri) {
-            var short = tryCurie(uri);
-            return '<a href="' + _.escape(uri)  + '">' + _.escape(short) + '</a>';
-          };
-          var docs = {}; // uri : observable(doc)
-          model.docLink = function(uri) {
-            if (uri.type == 'uri') {
-              uri = uri.value;
-            }
-            if (_.isUndefined(docs[uri])) {
-              docs[uri] = ko.observable("...");
-              $.getJSON("doc", {uri: uri}, function(data) {
-                docs[uri](data.comment); // might be undefined
-              });
-            }
-            return docs[uri];
-          };
-
-          model.refresh = function() {
-          $.ajax({
-            url: "graph",
-            success: function (data) {
-              var m = data.match(/<(.*?)> \{([^]*)\}/)
-              model.graphUri(m[1]);
-              var ntriplesBody = m[2];
-
-              var rdf = $.rdf().load(ntriplesBody);
-              model.graph(rdf.databank.dump());
-            }
-          });
-        };
-        model.refresh();
-          ko.applyBindings(model);
-
-      });
-      </script>
+    <template is="dom-bind">
+      <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
+      <graph-view graph="{{graph}}"></graph-view>
+    </template>
   </body>
 </html>