Mercurial > code > home > repos > light9
annotate web/collector/Light9CollectorDevice.ts @ 2378:6c98a6677a7d
update js libs
author | drewp@bigasterisk.com |
---|---|
date | Sun, 12 May 2024 19:05:02 -0700 |
parents | 4556eebe5d73 |
children |
rev | line source |
---|---|
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
1 import debug from "debug"; |
2065
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
2 import { css, html, LitElement } from "lit"; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
3 import { customElement, property } from "lit/decorators.js"; |
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
4 import { NamedNode } from "n3"; |
2151 | 5 export { ResourceDisplay } from "../../web/ResourceDisplay"; |
2076
33f65e2d0e59
who needs a single emitter of all graph change events that anyone on the page can find?
drewp@bigasterisk.com
parents:
2074
diff
changeset
|
6 |
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
7 const log = debug("device-el"); |
2065
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
8 |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
9 @customElement("light9-collector-device") |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
10 export class Light9CollectorDevice extends LitElement { |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
11 static styles = [ |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
12 css` |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
13 :host { |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
14 display: block; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
15 break-inside: avoid-column; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
16 font-size: 80%; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
17 } |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
18 h3 { |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
19 margin-top: 12px; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
20 margin-bottom: 0; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
21 } |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
22 td { |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
23 white-space: nowrap; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
24 } |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
25 |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
26 td.nonzero { |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
27 background: #310202; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
28 color: #e25757; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
29 } |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
30 td.full { |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
31 background: #2b0000; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
32 color: red; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
33 font-weight: bold; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
34 } |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
35 `, |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
36 ]; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
37 |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
38 render() { |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
39 return html` |
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
40 <h3><resource-display .uri=${this.uri}></resource-display></h3> |
2065
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
41 <table class="borders"> |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
42 <tr> |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
43 <th>out attr</th> |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
44 <th>value</th> |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
45 <th>chan</th> |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
46 </tr> |
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
47 ${this.attrs.map( |
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
48 (item) => html` |
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
49 <tr> |
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
50 <td>${item.attr}</td> |
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
51 <td class=${item.valClass}>${item.val} →</td> |
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
52 <td>${item.chan}</td> |
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
53 </tr> |
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
54 ` |
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
55 )} |
2065
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
56 </table> |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
57 `; |
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
58 } |
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
59 @property({ |
2077
46a8f5a8a4dd
fix collector display to show real values from py
drewp@bigasterisk.com
parents:
2076
diff
changeset
|
60 converter: acceptStringOrUri(), |
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
61 }) |
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
62 uri: NamedNode = new NamedNode(""); |
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
63 @property() attrs: Array<{ attr: string; valClass: string; val: string; chan: string }> = []; |
2065
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
64 |
2077
46a8f5a8a4dd
fix collector display to show real values from py
drewp@bigasterisk.com
parents:
2076
diff
changeset
|
65 setAttrs(attrs: any) { |
46a8f5a8a4dd
fix collector display to show real values from py
drewp@bigasterisk.com
parents:
2076
diff
changeset
|
66 this.attrs = attrs; |
46a8f5a8a4dd
fix collector display to show real values from py
drewp@bigasterisk.com
parents:
2076
diff
changeset
|
67 this.attrs.forEach(function (row: any) { |
46a8f5a8a4dd
fix collector display to show real values from py
drewp@bigasterisk.com
parents:
2076
diff
changeset
|
68 row.valClass = row.val == 255 ? "full" : row.val ? "nonzero" : ""; |
46a8f5a8a4dd
fix collector display to show real values from py
drewp@bigasterisk.com
parents:
2076
diff
changeset
|
69 }); |
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
2065
diff
changeset
|
70 } |
2065
6fbc1853c0b1
split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff
changeset
|
71 } |
2077
46a8f5a8a4dd
fix collector display to show real values from py
drewp@bigasterisk.com
parents:
2076
diff
changeset
|
72 |
46a8f5a8a4dd
fix collector display to show real values from py
drewp@bigasterisk.com
parents:
2076
diff
changeset
|
73 function acceptStringOrUri() { |
46a8f5a8a4dd
fix collector display to show real values from py
drewp@bigasterisk.com
parents:
2076
diff
changeset
|
74 return (s: string | null) => new NamedNode(s || ""); |
46a8f5a8a4dd
fix collector display to show real values from py
drewp@bigasterisk.com
parents:
2076
diff
changeset
|
75 } |