Mercurial > code > home > repos > light9
annotate web/live/Light9DeviceSettings.ts @ 2437:26f84fc67ab1
start 2024 show
author | drewp@bigasterisk.com |
---|---|
date | Wed, 29 May 2024 17:28:01 -0700 |
parents | 4556eebe5d73 |
children |
rev | line source |
---|---|
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
1 import debug from "debug"; |
2087 | 2 import { css, html, LitElement, PropertyValues } from "lit"; |
3 import { customElement, property } from "lit/decorators.js"; | |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
4 import { NamedNode } from "n3"; |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
5 import { sortBy, uniq } from "underscore"; |
2372
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2332
diff
changeset
|
6 import { Patch } from "../patch"; |
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2332
diff
changeset
|
7 import { getTopGraph } from "../RdfdbSyncedGraph"; |
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2332
diff
changeset
|
8 import { SyncedGraph } from "../SyncedGraph"; |
2290 | 9 import { Effect, newEffect } from "./Effect"; |
2372
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2332
diff
changeset
|
10 export { EditChoice } from "../EditChoice"; |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
11 export { Light9DeviceControl as Light9LiveDeviceControl } from "./Light9DeviceControl"; |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
12 const log = debug("settings"); |
2081
c57cf4049004
dice up the live/ elements and code into ts files (no conversion yet except auto coffee->ts)
drewp@bigasterisk.com
parents:
diff
changeset
|
13 |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
14 @customElement("light9-device-settings") |
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
15 export class Light9DeviceSettings extends LitElement { |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
16 graph!: SyncedGraph; |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
17 |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
18 static styles = [ |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
19 css` |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
20 :host { |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
21 display: flex; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
22 flex-direction: column; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
23 } |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
24 #preview { |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
25 width: 100%; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
26 } |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
27 #deviceControls { |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
28 flex-grow: 1; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
29 position: relative; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
30 width: 100%; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
31 overflow-y: auto; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
32 } |
2081
c57cf4049004
dice up the live/ elements and code into ts files (no conversion yet except auto coffee->ts)
drewp@bigasterisk.com
parents:
diff
changeset
|
33 |
2248 | 34 light9-device-control > div { |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
35 break-inside: avoid-column; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
36 } |
2248 | 37 light9-device-control { |
38 vertical-align: top; | |
2081
c57cf4049004
dice up the live/ elements and code into ts files (no conversion yet except auto coffee->ts)
drewp@bigasterisk.com
parents:
diff
changeset
|
39 } |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
40 `, |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
41 ]; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
42 |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
43 render() { |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
44 return html` |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
45 <rdfdb-synced-graph></rdfdb-synced-graph> |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
46 |
2247 | 47 <h1>effect DeviceSettings</h1> |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
48 |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
49 <div id="save"> |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
50 <div> |
2087 | 51 <button @click=${this.newEffect}>New effect</button> |
2332
2aeceb6f03aa
edit-choice defaults to no 'rename' button
drewp@bigasterisk.com
parents:
2290
diff
changeset
|
52 <edit-choice .uri=${this.currentEffect ? this.currentEffect.uri : null} @edited=${this.onEffectChoice2} rename></edit-choice> |
2087 | 53 <button @click=${this.clearAll}>clear settings in this effect</button> |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
54 </div> |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
55 </div> |
2245
a1f6f3139995
WIP trying to clarify how /live page works
drewp@bigasterisk.com
parents:
2238
diff
changeset
|
56 |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
57 <div id="deviceControls"> |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
58 ${this.devices.map( |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
59 (device: NamedNode) => html` |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
60 <light9-device-control .uri=${device} .effect=${this.currentEffect}> .graphToControls={this.graphToControls} </light9-device-control> |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
61 ` |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
62 )} |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
63 </div> |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
64 `; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
65 } |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
66 |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
67 devices: Array<NamedNode> = []; |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
68 @property() currentEffect: Effect | null = null; |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
69 okToWriteUrl: boolean = false; |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
70 |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
71 constructor() { |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
72 super(); |
2087 | 73 |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
74 getTopGraph().then((g) => { |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
75 this.graph = g; |
2259 | 76 this.graph.runHandler(this.compile.bind(this), "findDevices"); |
2087 | 77 this.setEffectFromUrl(); |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
78 }); |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
79 } |
2248 | 80 |
2245
a1f6f3139995
WIP trying to clarify how /live page works
drewp@bigasterisk.com
parents:
2238
diff
changeset
|
81 onEffectChoice2(ev: CustomEvent) { |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
82 const uri = ev.detail.newValue as NamedNode; |
2290 | 83 this.setCurrentEffect(uri); |
84 } | |
85 setCurrentEffect(uri: NamedNode) { | |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
86 if (uri === null) { |
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
87 this.currentEffect = null; |
2290 | 88 // todo: wipe the UI settings |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
89 } else { |
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
90 this.currentEffect = new Effect(this.graph, uri); |
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
91 } |
2245
a1f6f3139995
WIP trying to clarify how /live page works
drewp@bigasterisk.com
parents:
2238
diff
changeset
|
92 } |
2248 | 93 |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
94 updated(changedProperties: PropertyValues<this>) { |
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
95 log("ctls udpated", changedProperties); |
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
96 if (changedProperties.has("currentEffect")) { |
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
97 log(`effectChoice to ${this.currentEffect?.uri?.value}`); |
2248 | 98 this.writeToUrl(this.currentEffect?.uri); |
2087 | 99 } |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
100 // this.graphToControls?.debugDump(); |
2087 | 101 } |
102 | |
2245
a1f6f3139995
WIP trying to clarify how /live page works
drewp@bigasterisk.com
parents:
2238
diff
changeset
|
103 // Note that this doesn't fetch setting values, so it only should get rerun |
2248 | 104 // upon (rarer) changes to the devices etc. todo: make that be true |
2259 | 105 private compile(patch?: Patch) { |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
106 const U = this.graph.U(); |
2245
a1f6f3139995
WIP trying to clarify how /live page works
drewp@bigasterisk.com
parents:
2238
diff
changeset
|
107 // if (patch && !patchContainsPreds(patch, [U("rdf:type")])) { |
a1f6f3139995
WIP trying to clarify how /live page works
drewp@bigasterisk.com
parents:
2238
diff
changeset
|
108 // return; |
a1f6f3139995
WIP trying to clarify how /live page works
drewp@bigasterisk.com
parents:
2238
diff
changeset
|
109 // } |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
110 |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
111 this.devices = []; |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
112 let classes = this.graph.subjects(U("rdf:type"), U(":DeviceClass")); |
2156 | 113 log(`found ${classes.length} device classes`); |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
114 uniq(sortBy(classes, "value"), true).forEach((dc) => { |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
115 sortBy(this.graph.subjects(U("rdf:type"), dc), "value").forEach((dev) => { |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
116 this.devices.push(dev as NamedNode); |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
117 }); |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
118 }); |
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
119 this.requestUpdate(); |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
120 } |
2087 | 121 |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
122 setEffectFromUrl() { |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
123 // not a continuous bidi link between url and effect; it only reads |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
124 // the url when the page loads. |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
125 const effect = new URL(window.location.href).searchParams.get("effect"); |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
126 if (effect != null) { |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
127 this.currentEffect = new Effect(this.graph, this.graph.Uri(effect)); |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
128 } |
2084
c4eab47d3c83
WIP half-ported live/ page to working TS
drewp@bigasterisk.com
parents:
2083
diff
changeset
|
129 this.okToWriteUrl = true; |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
130 } |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
131 |
2246
5c269c03863d
WIP device settings page can now load and save ok. Omitted GraphToControls for now
drewp@bigasterisk.com
parents:
2245
diff
changeset
|
132 writeToUrl(effect: NamedNode | undefined) { |
2087 | 133 const effectStr = effect ? this.graph.shorten(effect) : ""; |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
134 if (!this.okToWriteUrl) { |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
135 return; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
136 } |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
137 const u = new URL(window.location.href); |
2087 | 138 if ((u.searchParams.get("effect") || "") === effectStr) { |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
139 return; |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
140 } |
2087 | 141 u.searchParams.set("effect", effectStr); // this escapes : and / and i wish it didn't |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
142 window.history.replaceState({}, "", u.href); |
2158 | 143 log("wrote new url", u.href); |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
144 } |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
145 |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
146 newEffect() { |
2290 | 147 this.setCurrentEffect(newEffect(this.graph)); |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
148 } |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
149 |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
150 clearAll() { |
2290 | 151 this.currentEffect?.clearAllSettings() |
2083
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
152 } |
ad7ab7027907
clean up non-elements; get the lit elements at least to work with autoformat
drewp@bigasterisk.com
parents:
2081
diff
changeset
|
153 } |