light9 Changeset - fddd07e694ab

Changeset - fddd07e694ab

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

drewp@bigasterisk.com - 3 years ago 2022-05-24 06:53:07
drewp@bigasterisk.com

cleanup nested class mess

2 files changed with 62 insertions and 68 deletions:

light9/collector/web/Light9CollectorUi.ts

light9/web/RdfdbSyncedGraph.ts

0 comments (0 inline, 0 general)

light9/collector/web/Light9CollectorUi.ts

➞

Show inline comments

@@ @@ -9,44 +9,41 @@ import { getTopGraph, GraphChangedEvent @@
 import { NamedNode } from "n3";
 import { Patch } from "../../web/patch";
 import { linkHorizontal } from "d3";
 export { RdfdbSyncedGraph } from "../../web/RdfdbSyncedGraph";
 export { Light9CollectorDevice } from "../../web/collector/Light9CollectorDevice";
 debug.enable("*");
 const log = debug("collector");
 @customElement("light9-collector-ui")
 export class Light9CollectorUi extends GraphAwarePage {
   graph?: SyncedGraph;
   static styles = [];
   render() {
     return html`${super.render()}
       <h1>Collector <a href="metrics">[metrics]</a></h1>
       <h2>Devices</h2>
       <light9-collector-device-list></light9-collector-device-list> `;
+  }
+}
 @customElement("light9-collector-device-list")
 export class Light9CollectorDeviceList extends LitElement {
   graph!: SyncedGraph;
   @property() devices: NamedNode[] = [];
   render() {
     return html`
       <h2>Devices</h2>
       <light9-collector-device uri="http://light9.bigasterisk.com/theater/skyline/device/strip1"></light9-collector-device>
       <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device uri="${d.value}"></light9-collector-device>`)}</div>
     `;
+  }
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       this.graph.runHandler(this.findDevices.bind(this), "findDevices");
     });
+  }

light9/web/RdfdbSyncedGraph.ts

➞

Show inline comments

@@ @@ -9,83 +9,80 @@ const log = debug("syncedgraph-el"); @@
 // consider https://vitaly-t.github.io/sub-events/ for this stuff
 export interface GraphChangedDetail {
   graph: SyncedGraph;
   patch: Patch;
+}
 export class GraphChangedEvent extends CustomEvent<GraphChangedDetail> {
   constructor(type: string, opts: { detail: GraphChangedDetail; bubbles: boolean; composed: boolean }) {
     super(type, opts);
+  }
+}
 let RdfdbSyncedGraph
 (window as any).topSyncedGraph = new Promise((res, rej) => {
   // Contains a SyncedGraph,
   // displays a little status box,
   // and emits 'changed' events with the graph and latest patch when it changes
   RdfdbSyncedGraph=customElement("rdfdb-synced-graph")(class RdfdbSyncedGraph extends LitElement {
     /*@property()*/ graph: SyncedGraph;
     /*@property()*/ status: string;
     /*@property()*/ testGraph = false;
     static styles = [
       css`
         :host {
           display: inline-block;
           border: 1px solid gray;
           min-width: 22em;
           background: #05335a;
           color: #4fc1d4;
+        }
       `,
     ];
     render() {
       return html`graph: ${this.status}`;
+    }
     onClear() {
       console.log("reset");
+    }
     constructor() {
       super();
       this.status = "startup";
       this.graph = new SyncedGraph(
         this.testGraph ? null : "/rdfdb/api/syncedGraph",
+        {
           "": "http://light9.bigasterisk.com/",
           dev: "http://light9.bigasterisk.com/device/",
           rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
           rdfs: "http://www.w3.org/2000/01/rdf-schema#",
           xsd: "http://www.w3.org/2001/XMLSchema#",
         },
         (s: string) => {
           this.status = s;
         },
         this.onClear.bind(this),
         this.onGraphChanged.bind(this)
       );
       // (window as any).topSyncedGraph = this.graph;
       res(this.graph);
+    }
     private onGraphChanged(graph: SyncedGraph, patch: Patch) {
       this.dispatchEvent(
         new GraphChangedEvent("changed", {
           detail: { graph, patch },
           bubbles: true,
           composed: true,
         })
       );
+    }
   });
 let setTopGraph: (sg: SyncedGraph) => void;
 (window as any).topSyncedGraph = new Promise<SyncedGraph>((res, rej) => {
   setTopGraph = res;
 });
 // Contains a SyncedGraph,
 // displays a little status box,
 // and emits 'changed' events with the graph and latest patch when it changes
 @customElement("rdfdb-synced-graph")
 export class RdfdbSyncedGraph extends LitElement {
   @property() graph: SyncedGraph;
   @property() status: string;
   @property() testGraph = false;
   static styles = [
     css`
       :host {
         display: inline-block;
         border: 1px solid gray;
         min-width: 22em;
         background: #05335a;
         color: #4fc1d4;
+      }
     `,
   ];
   render() {
     return html`graph: ${this.status}`;
+  }
 async function getTopGraph(): Promise<SyncedGraph> {
   onClear() {
     console.log("reset");
+  }
   constructor() {
     super();
     this.status = "startup";
     this.graph = new SyncedGraph(
       this.testGraph ? null : "/rdfdb/api/syncedGraph",
+      {
         "": "http://light9.bigasterisk.com/",
         dev: "http://light9.bigasterisk.com/device/",
         rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
         rdfs: "http://www.w3.org/2000/01/rdf-schema#",
         xsd: "http://www.w3.org/2001/XMLSchema#",
       },
       (s: string) => {
         this.status = s;
       },
       this.onClear.bind(this),
       this.onGraphChanged.bind(this)
     );
     setTopGraph(this.graph);
+  }
   private onGraphChanged(graph: SyncedGraph, patch: Patch) {
     this.dispatchEvent(
       new GraphChangedEvent("changed", {
         detail: { graph, patch },
         bubbles: true,
         composed: true,
       })
     );
+  }
+}
 export async function getTopGraph(): Promise<SyncedGraph> {
   const s = (window as any).topSyncedGraph;
   return await s;
+}
 export { RdfdbSyncedGraph, getTopGraph };
@@ \ No newline at end of file @@

0 comments (0 inline, 0 general)