Changeset - d8950f9b46be
[Not reviewed]
default
0 1 0
drewp@bigasterisk.com - 8 months ago 2024-05-18 00:34:45
drewp@bigasterisk.com
store panels layout in localStorage
1 file changed with 47 insertions and 4 deletions:
0 comments (0 inline, 0 general)
web/TiledHome.ts
Show inline comments
 
@@ -12,8 +12,6 @@ export { RdfdbSyncedGraph } from "./Rdfd
 
export { Light9CollectorUi } from "./collector/Light9CollectorUi";
 
export { Light9FadeUi } from "./fade/Light9FadeUi";
 
export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
 
import { showRoot } from "./show_specific";
 
import { HandlerFunc } from "./AutoDependencies";
 
const log = debug("home");
 

	
 
const config: FlexLayout.IJsonModel = {
 
@@ -41,11 +39,51 @@ const config: FlexLayout.IJsonModel = {
 

	
 
// see https://github.com/lit/lit/tree/main/packages/labs/react
 

	
 
// Store flexlayout panels in per-browser localstorage.
 
class PersistentLayout {
 
  key = "light9.home.layout";
 
  defaultLayout: FlexLayout.IJsonRowNode = {
 
    type: "row",
 
    children: [
 
      {
 
        type: "tabset",
 
        weight: 50,
 
        children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
 
      },
 
      {
 
        type: "tabset",
 
        weight: 50,
 
        children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
 
      },
 
    ],
 
  };
 
  getOrDefault(): FlexLayout.IJsonRowNode {
 
    let savedLayout = localStorage.getItem(this.key);
 
    if (savedLayout === null) {
 
      return this.defaultLayout;
 
    }
 
    return JSON.parse(savedLayout);
 
  }
 

	
 
  save(layout: FlexLayout.IJsonRowNode) {
 
    localStorage.setItem(this.key, JSON.stringify(layout));
 
  }
 
}
 

	
 
class Main extends React.Component {
 
  state: { model: FlexLayout.Model };
 
  state: { model: FlexLayout.Model; persistence: PersistentLayout };
 
  constructor(props: any) {
 
    super(props);
 
    this.state = { model: FlexLayout.Model.fromJson(config) };
 
    const persistence = new PersistentLayout();
 
    const config = {
 
      global: {
 
        tabEnableRename: false,
 
      },
 
      borders: [],
 
      layout: persistence.getOrDefault(),
 
    };
 

	
 
    this.state = { model: FlexLayout.Model.fromJson(config), persistence: persistence };
 
  }
 

	
 
  factory = (node: any) => {
 
@@ -57,9 +95,14 @@ class Main extends React.Component {
 
    return React.createElement(FlexLayout.Layout, {
 
      model: this.state.model,
 
      realtimeResize: true,
 
      onModelChange: this.onModelChange.bind(this),
 
      factory: this.factory,
 
    });
 
  }
 

	
 
  onModelChange() {
 
    this.state.persistence.save(this.state.model.toJson().layout);
 
  }
 
}
 

	
 
@customElement("light9-home-status")
0 comments (0 inline, 0 general)