|
2402
|
1 import debug from "debug";
|
|
|
2 import * as FlexLayout from "flexlayout-react";
|
|
2408
|
3 import { LitElement, TemplateResult, html } from "lit";
|
|
2402
|
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";
|
|
2408
|
9 import { panelDisplayName, panelElementNames, panelUrl } from "./panels";
|
|
2402
|
10 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
|
|
|
11 const log = debug("home");
|
|
2374
|
12
|
|
|
13 // see https://github.com/lit/lit/tree/main/packages/labs/react
|
|
|
14
|
|
2403
|
15 // Store flexlayout panels in per-browser localstorage.
|
|
|
16 class PersistentLayout {
|
|
|
17 key = "light9.home.layout";
|
|
|
18 defaultLayout: FlexLayout.IJsonRowNode = {
|
|
|
19 type: "row",
|
|
|
20 children: [
|
|
|
21 {
|
|
|
22 type: "tabset",
|
|
|
23 weight: 50,
|
|
2408
|
24 children: [{ type: "tab", name: "fade", component: "light9-fade-ui" }],
|
|
2403
|
25 },
|
|
|
26 {
|
|
|
27 type: "tabset",
|
|
|
28 weight: 50,
|
|
|
29 children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
|
|
|
30 },
|
|
|
31 ],
|
|
|
32 };
|
|
|
33 getOrDefault(): FlexLayout.IJsonRowNode {
|
|
|
34 let savedLayout = localStorage.getItem(this.key);
|
|
|
35 if (savedLayout === null) {
|
|
|
36 return this.defaultLayout;
|
|
|
37 }
|
|
|
38 return JSON.parse(savedLayout);
|
|
|
39 }
|
|
|
40
|
|
|
41 save(layout: FlexLayout.IJsonRowNode) {
|
|
|
42 localStorage.setItem(this.key, JSON.stringify(layout));
|
|
|
43 }
|
|
|
44 }
|
|
|
45
|
|
2408
|
46 // This lets lit call a method on a react element.
|
|
|
47 let addTab: (component: string) => void;
|
|
|
48
|
|
2374
|
49 class Main extends React.Component {
|
|
2403
|
50 state: { model: FlexLayout.Model; persistence: PersistentLayout };
|
|
2382
|
51 constructor(props: any) {
|
|
2374
|
52 super(props);
|
|
2403
|
53 const persistence = new PersistentLayout();
|
|
|
54 const config = {
|
|
|
55 global: {
|
|
|
56 tabEnableRename: false,
|
|
|
57 },
|
|
|
58 borders: [],
|
|
|
59 layout: persistence.getOrDefault(),
|
|
|
60 };
|
|
|
61
|
|
|
62 this.state = { model: FlexLayout.Model.fromJson(config), persistence: persistence };
|
|
2374
|
63 }
|
|
|
64
|
|
2382
|
65 factory = (node: any) => {
|
|
2374
|
66 var component = node.getComponent();
|
|
2402
|
67 return React.createElement(component, null, "");
|
|
2374
|
68 };
|
|
|
69
|
|
|
70 render() {
|
|
2408
|
71 addTab = (component) => {
|
|
|
72 const name = panelDisplayName(component);
|
|
|
73 if (name === undefined) throw new Error("no such panel: " + component);
|
|
|
74 const newTab = { type: "tab", name: name, component: component };
|
|
|
75 const firstTabSet = this.state.model.getRoot().getChildren()[0];
|
|
|
76 const action = FlexLayout.Actions.addNode(newTab, firstTabSet.getId(), FlexLayout.DockLocation.LEFT, 0);
|
|
|
77 this.state.model.doAction(action);
|
|
|
78 };
|
|
|
79
|
|
2402
|
80 return React.createElement(FlexLayout.Layout, {
|
|
|
81 model: this.state.model,
|
|
|
82 realtimeResize: true,
|
|
2403
|
83 onModelChange: this.onModelChange.bind(this),
|
|
2402
|
84 factory: this.factory,
|
|
|
85 });
|
|
|
86 }
|
|
2403
|
87
|
|
|
88 onModelChange() {
|
|
|
89 this.state.persistence.save(this.state.model.toJson().layout);
|
|
|
90 }
|
|
2402
|
91 }
|
|
|
92
|
|
|
93 @customElement("light9-home-status")
|
|
|
94 export class Light9HomeStatus extends LitElement {
|
|
|
95 graph!: SyncedGraph;
|
|
|
96 render() {
|
|
2408
|
97 return html`
|
|
|
98 <rdfdb-synced-graph></rdfdb-synced-graph>
|
|
|
99 <a href="metrics/">metrics</a>
|
|
|
100 Open tab or new window: ${panelElementNames().map((elem) => this.linkToPanelPage(elem))}
|
|
|
101 `;
|
|
2402
|
102 }
|
|
2408
|
103
|
|
|
104 linkToPanelPage(elem: string): TemplateResult {
|
|
|
105 return html`<a @click=${this.onClickPanelLink} data-panel-elem="${elem}" href=${panelUrl(elem)}> ${panelDisplayName(elem)} </a> `;
|
|
|
106 }
|
|
|
107
|
|
2402
|
108 constructor() {
|
|
|
109 super();
|
|
|
110 getTopGraph().then((g) => {
|
|
|
111 this.graph = g;
|
|
|
112 });
|
|
2374
|
113 }
|
|
2408
|
114
|
|
|
115 onClickPanelLink(ev: MouseEvent) {
|
|
|
116 ev.preventDefault();
|
|
|
117
|
|
|
118 const a = ev.target as HTMLAnchorElement;
|
|
|
119 const elem = a.dataset.panelElem!;
|
|
|
120 addTab(elem);
|
|
|
121 }
|
|
2374
|
122 }
|
|
|
123
|
|
|
124 const root = createRoot(document.getElementById("container")!);
|
|
|
125 root.render(React.createElement(Main));
|
