Mercurial > code > home > repos > homeauto

comparison service/wifi/index.html @ 1444:4afb1830bb5e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
use rx version 3.x Ignore-this: 4232f8e780d35a8d0642e86521eb2801 darcs-hash:747608892b607f78260f4772a4ff2b24c7392f73
author drewp <drewp@bigasterisk.com>
date Tue, 24 Sep 2019 14:04:02 -0700
parents 996a00d72979
children 517cbb905d4c
comparison
equal deleted inserted replaced
1443:99540f1a11f7 1444:4afb1830bb5e
1 <!doctype html> 1 <!doctype html>
2 <html> 2 <html>
3 <head>
4 <title>wifi</title>
5 <meta charset="utf-8" />
6 <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents-lite.min.js"></script>
7 <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
8 <script src="/lib/underscore-1.5.2.min.js"></script>
9 <link rel="import" href="/lib/polymer/1.0.9/iron-ajax/iron-ajax.html">
10 <link rel="import" href="/rdf/n3+polymer/trig-store.html">
11 </head>
12 <body>
13 <h1>Devices on wifi</h1>
14 <p><a href="../dhcpleases">go to dhcpleases</a></p>
15 <dom-module id="wifi-table">
16 <template>
17 <iron-ajax auto url="graph"
18 handle-as="text"
19 last-response="{{ajaxResponse}}"></iron-ajax>
20 <trig-store id="ts" trig-input="{{ajaxResponse}}"></trig-store>
21 3
22 <table> 4 <head>
23 <tr> 5 <title>wifi</title>
24 <th>name</th> 6 <meta charset="utf-8">
25 <th>MAC</th> 7 <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script>
26 <th>Connected</th> 8 <script src="/lib/require/require-2.3.3.js"></script>
27 </tr> 9 <script src="/rdf/common_paths_and_ns.js"></script>
28 <template is="dom-repeat" items="{{devices}}">
29 <tr>
30 <td>{{item.deviceName}}</td>
31 <td>{{item.mac}}</td>
32 <td>{{item.connectedAgo}}</td>
33 </tr>
34 </template>
35 </table>
36 </template>
37
38 <script>
39 HTMLImports.whenReady(function () {
40 Polymer({
41 is: "wifi-table",
42 ready: function() {
43 this.$.ts.addEventListener('store-changed', this.storeChanged.bind(this));
44 this.devices = [];
45 },
46 storeChanged: function(ev) {
47 var store = ev.detail.value;
48 var find = function(s, p, o) { return store.findAllGraphs(s, p, o); };
49 var findOne = function(s, p, o) {
50 var rows = find(s, p, o);
51 return rows[0];
52 };
53 10
54 this.devices = []; 11 <link rel="stylesheet" href="/rdf/browse/style.css">
55
56 find(null, "room:connectedToNetwork", "http://bigasterisk.com/wifiAccessPoints"
57 ).forEach(function(row) {
58 var out = {
59 mac: N3.Util.getLiteralValue(
60 findOne(row.subject, "room:macAddress", null).object),
61 connectedAgo: N3.Util.getLiteralValue(
62 findOne(row.subject, "room:connectedAgo", null).object)
63
64 };
65 try {
66 var dev = findOne(row.subject, "room:deviceName", null).object;
67 out.deviceName = N3.Util.getLiteralValue(dev);
68 } catch(e) {
69 12
70 } 13 <link rel="import" href="/rdf/streamed-graph.html">
71 14 <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
72 this.devices.push(out); 15 </head>
73 }.bind(this)); 16
74 this.devices = _.sortBy(this.devices, 'deviceName'); 17 <body class="rdfBrowsePage">
75 } 18 <template id="t" is="dom-bind">
76 }); 19 <style>
77 }); 20 body {
78 </script> 21 background: black;
79 </dom-module> 22 color: white;
80 <wifi-table></wifi-table> 23 }
81 </body> 24 a {
25 color: #b1b1fd;
26 text-shadow: 1px 1px 0px #0400ff94;
27 text-decoration-color: #00007714;
28 }
29 #subjectRequest {
30 width: 50em;
31 }
32 </style>
33
34 <streamed-graph url="/sse_collector/graph/network" graph="{{graph}}"></streamed-graph>
35 <div id="out">
36 </div>
37
38 <script type="module">
39 import { render } from '/lib/lit-html/1.0.0/lit-html.js';
40 import { graphView } from './wifi.js';
41 const sg = document.querySelector('streamed-graph');
42
43 const out = document.querySelector('#out');
44 const startPainting = () => {
45 if (!sg.graph || !sg.graph.graph) {
46 setTimeout(startPainting, 100);
47 return;
48 }
49
50 let dirty = true;
51
52 const repaint = () => {
53 if (!dirty) {
54 return;
55 }
56 render(graphView(sg.graph.graph), out);
57 dirty = false;
58 };
59
60 sg.addEventListener('graph-changed', (ev) => {
61 dirty = true;
62 requestAnimationFrame(repaint);
63 });
64 repaint();
65 };
66 setTimeout(startPainting, 10);
67 </script>
68 </template>
69 <script>
70
71 </script>
72 </body>
73
82 </html> 74 </html>