|
2402
|
1 import debug from "debug";
|
|
|
2 import * as FlexLayout from "flexlayout-react";
|
|
|
3 import { LitElement, html } from "lit";
|
|
|
4 import { customElement } from "lit/decorators.js";
|
|
2374
|
5 import * as React from "react";
|
|
|
6 import { createRoot } from "react-dom/client";
|
|
2402
|
7 import { getTopGraph } from "./RdfdbSyncedGraph";
|
|
|
8 import { SyncedGraph } from "./SyncedGraph";
|
|
|
9 import { Patch } from "./patch";
|
|
|
10 import { NamedNode } from "n3";
|
|
|
11 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
|
|
|
12 export { Light9CollectorUi } from "./collector/Light9CollectorUi";
|
|
|
13 export { Light9FadeUi } from "./fade/Light9FadeUi";
|
|
2374
|
14 export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
|
|
2402
|
15 import { showRoot } from "./show_specific";
|
|
|
16 import { HandlerFunc } from "./AutoDependencies";
|
|
|
17 const log = debug("home");
|
|
2374
|
18
|
|
2382
|
19 const config: FlexLayout.IJsonModel = {
|
|
2402
|
20 global: {
|
|
|
21 tabEnableRename: false,
|
|
|
22 },
|
|
2374
|
23 borders: [],
|
|
|
24 layout: {
|
|
|
25 type: "row",
|
|
|
26 weight: 100,
|
|
|
27 children: [
|
|
|
28 {
|
|
|
29 type: "tabset",
|
|
|
30 weight: 50,
|
|
|
31 children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
|
|
|
32 },
|
|
|
33 {
|
|
|
34 type: "tabset",
|
|
|
35 weight: 50,
|
|
|
36 children: [{ type: "tab", name: "collector", component: "light9-collector-ui" }],
|
|
|
37 },
|
|
|
38 ],
|
|
|
39 },
|
|
|
40 };
|
|
|
41
|
|
|
42 // see https://github.com/lit/lit/tree/main/packages/labs/react
|
|
|
43
|
|
|
44 class Main extends React.Component {
|
|
2382
|
45 state: { model: FlexLayout.Model };
|
|
|
46 constructor(props: any) {
|
|
2374
|
47 super(props);
|
|
|
48 this.state = { model: FlexLayout.Model.fromJson(config) };
|
|
|
49 }
|
|
|
50
|
|
2382
|
51 factory = (node: any) => {
|
|
2374
|
52 var component = node.getComponent();
|
|
2402
|
53 return React.createElement(component, null, "");
|
|
2374
|
54 };
|
|
|
55
|
|
|
56 render() {
|
|
2402
|
57 return React.createElement(FlexLayout.Layout, {
|
|
|
58 model: this.state.model,
|
|
|
59 realtimeResize: true,
|
|
|
60 factory: this.factory,
|
|
|
61 });
|
|
|
62 }
|
|
|
63 }
|
|
|
64
|
|
|
65 @customElement("light9-home-status")
|
|
|
66 export class Light9HomeStatus extends LitElement {
|
|
|
67 graph!: SyncedGraph;
|
|
|
68 render() {
|
|
|
69 return html`<rdfdb-synced-graph></rdfdb-synced-graph>
|
|
|
70 <a href="metrics/">metrics</a> `;
|
|
|
71 }
|
|
|
72 constructor() {
|
|
|
73 super();
|
|
|
74 getTopGraph().then((g) => {
|
|
|
75 this.graph = g;
|
|
|
76 });
|
|
2374
|
77 }
|
|
|
78 }
|
|
|
79
|
|
|
80 const root = createRoot(document.getElementById("container")!);
|
|
|
81 root.render(React.createElement(Main));
|
