|
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 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
|
|
|
10 export { Light9CollectorUi } from "./collector/Light9CollectorUi";
|
|
|
11 export { Light9FadeUi } from "./fade/Light9FadeUi";
|
|
2374
|
12 export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
|
|
2402
|
13 const log = debug("home");
|
|
2374
|
14
|
|
2382
|
15 const config: FlexLayout.IJsonModel = {
|
|
2402
|
16 global: {
|
|
|
17 tabEnableRename: false,
|
|
|
18 },
|
|
2374
|
19 borders: [],
|
|
|
20 layout: {
|
|
|
21 type: "row",
|
|
|
22 weight: 100,
|
|
|
23 children: [
|
|
|
24 {
|
|
|
25 type: "tabset",
|
|
|
26 weight: 50,
|
|
|
27 children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
|
|
|
28 },
|
|
|
29 {
|
|
|
30 type: "tabset",
|
|
|
31 weight: 50,
|
|
|
32 children: [{ type: "tab", name: "collector", component: "light9-collector-ui" }],
|
|
|
33 },
|
|
|
34 ],
|
|
|
35 },
|
|
|
36 };
|
|
|
37
|
|
|
38 // see https://github.com/lit/lit/tree/main/packages/labs/react
|
|
|
39
|
|
2403
|
40 // Store flexlayout panels in per-browser localstorage.
|
|
|
41 class PersistentLayout {
|
|
|
42 key = "light9.home.layout";
|
|
|
43 defaultLayout: FlexLayout.IJsonRowNode = {
|
|
|
44 type: "row",
|
|
|
45 children: [
|
|
|
46 {
|
|
|
47 type: "tabset",
|
|
|
48 weight: 50,
|
|
|
49 children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
|
|
|
50 },
|
|
|
51 {
|
|
|
52 type: "tabset",
|
|
|
53 weight: 50,
|
|
|
54 children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
|
|
|
55 },
|
|
|
56 ],
|
|
|
57 };
|
|
|
58 getOrDefault(): FlexLayout.IJsonRowNode {
|
|
|
59 let savedLayout = localStorage.getItem(this.key);
|
|
|
60 if (savedLayout === null) {
|
|
|
61 return this.defaultLayout;
|
|
|
62 }
|
|
|
63 return JSON.parse(savedLayout);
|
|
|
64 }
|
|
|
65
|
|
|
66 save(layout: FlexLayout.IJsonRowNode) {
|
|
|
67 localStorage.setItem(this.key, JSON.stringify(layout));
|
|
|
68 }
|
|
|
69 }
|
|
|
70
|
|
2374
|
71 class Main extends React.Component {
|
|
2403
|
72 state: { model: FlexLayout.Model; persistence: PersistentLayout };
|
|
2382
|
73 constructor(props: any) {
|
|
2374
|
74 super(props);
|
|
2403
|
75 const persistence = new PersistentLayout();
|
|
|
76 const config = {
|
|
|
77 global: {
|
|
|
78 tabEnableRename: false,
|
|
|
79 },
|
|
|
80 borders: [],
|
|
|
81 layout: persistence.getOrDefault(),
|
|
|
82 };
|
|
|
83
|
|
|
84 this.state = { model: FlexLayout.Model.fromJson(config), persistence: persistence };
|
|
2374
|
85 }
|
|
|
86
|
|
2382
|
87 factory = (node: any) => {
|
|
2374
|
88 var component = node.getComponent();
|
|
2402
|
89 return React.createElement(component, null, "");
|
|
2374
|
90 };
|
|
|
91
|
|
|
92 render() {
|
|
2402
|
93 return React.createElement(FlexLayout.Layout, {
|
|
|
94 model: this.state.model,
|
|
|
95 realtimeResize: true,
|
|
2403
|
96 onModelChange: this.onModelChange.bind(this),
|
|
2402
|
97 factory: this.factory,
|
|
|
98 });
|
|
|
99 }
|
|
2403
|
100
|
|
|
101 onModelChange() {
|
|
|
102 this.state.persistence.save(this.state.model.toJson().layout);
|
|
|
103 }
|
|
2402
|
104 }
|
|
|
105
|
|
|
106 @customElement("light9-home-status")
|
|
|
107 export class Light9HomeStatus extends LitElement {
|
|
|
108 graph!: SyncedGraph;
|
|
|
109 render() {
|
|
|
110 return html`<rdfdb-synced-graph></rdfdb-synced-graph>
|
|
|
111 <a href="metrics/">metrics</a> `;
|
|
|
112 }
|
|
|
113 constructor() {
|
|
|
114 super();
|
|
|
115 getTopGraph().then((g) => {
|
|
|
116 this.graph = g;
|
|
|
117 });
|
|
2374
|
118 }
|
|
|
119 }
|
|
|
120
|
|
|
121 const root = createRoot(document.getElementById("container")!);
|
|
|
122 root.render(React.createElement(Main));
|
