Mercurial > code > home > repos > light9

comparison web/TiledHome.ts @ 2403:d8950f9b46be

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
store panels layout in localStorage
author drewp@bigasterisk.com
date Fri, 17 May 2024 17:34:45 -0700
parents 1d3594ffd14b
children 9cbc93f80b05
comparison
equal deleted inserted replaced
2402:1d3594ffd14b 2403:d8950f9b46be
10 import { NamedNode } from "n3"; 10 import { NamedNode } from "n3";
11 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph"; 11 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
12 export { Light9CollectorUi } from "./collector/Light9CollectorUi"; 12 export { Light9CollectorUi } from "./collector/Light9CollectorUi";
13 export { Light9FadeUi } from "./fade/Light9FadeUi"; 13 export { Light9FadeUi } from "./fade/Light9FadeUi";
14 export { Light9DeviceSettings } from "./live/Light9DeviceSettings"; 14 export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
15 import { showRoot } from "./show_specific";
16 import { HandlerFunc } from "./AutoDependencies";
17 const log = debug("home"); 15 const log = debug("home");
18 16
19 const config: FlexLayout.IJsonModel = { 17 const config: FlexLayout.IJsonModel = {
20 global: { 18 global: {
21 tabEnableRename: false, 19 tabEnableRename: false,
39 }, 37 },
40 }; 38 };
41 39
42 // see https://github.com/lit/lit/tree/main/packages/labs/react 40 // see https://github.com/lit/lit/tree/main/packages/labs/react
43 41
42 // Store flexlayout panels in per-browser localstorage.
43 class PersistentLayout {
44 key = "light9.home.layout";
45 defaultLayout: FlexLayout.IJsonRowNode = {
46 type: "row",
47 children: [
48 {
49 type: "tabset",
50 weight: 50,
51 children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
52 },
53 {
54 type: "tabset",
55 weight: 50,
56 children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
57 },
58 ],
59 };
60 getOrDefault(): FlexLayout.IJsonRowNode {
61 let savedLayout = localStorage.getItem(this.key);
62 if (savedLayout === null) {
63 return this.defaultLayout;
64 }
65 return JSON.parse(savedLayout);
66 }
67
68 save(layout: FlexLayout.IJsonRowNode) {
69 localStorage.setItem(this.key, JSON.stringify(layout));
70 }
71 }
72
44 class Main extends React.Component { 73 class Main extends React.Component {
45 state: { model: FlexLayout.Model }; 74 state: { model: FlexLayout.Model; persistence: PersistentLayout };
46 constructor(props: any) { 75 constructor(props: any) {
47 super(props); 76 super(props);
48 this.state = { model: FlexLayout.Model.fromJson(config) }; 77 const persistence = new PersistentLayout();
78 const config = {
79 global: {
80 tabEnableRename: false,
81 },
82 borders: [],
83 layout: persistence.getOrDefault(),
84 };
85
86 this.state = { model: FlexLayout.Model.fromJson(config), persistence: persistence };
49 } 87 }
50 88
51 factory = (node: any) => { 89 factory = (node: any) => {
52 var component = node.getComponent(); 90 var component = node.getComponent();
53 return React.createElement(component, null, ""); 91 return React.createElement(component, null, "");
55 93
56 render() { 94 render() {
57 return React.createElement(FlexLayout.Layout, { 95 return React.createElement(FlexLayout.Layout, {
58 model: this.state.model, 96 model: this.state.model,
59 realtimeResize: true, 97 realtimeResize: true,
98 onModelChange: this.onModelChange.bind(this),
60 factory: this.factory, 99 factory: this.factory,
61 }); 100 });
101 }
102
103 onModelChange() {
104 this.state.persistence.save(this.state.model.toJson().layout);
62 } 105 }
63 } 106 }
64 107
65 @customElement("light9-home-status") 108 @customElement("light9-home-status")
66 export class Light9HomeStatus extends LitElement { 109 export class Light9HomeStatus extends LitElement {