light9 Changeset - 7e7874fed2e3

Changeset - 7e7874fed2e3

Parent rev.

Child rev.

[Not reviewed]

default

0 1 1

drewp@bigasterisk.com - 8 months ago 2024-05-19 04:02:32
drewp@bigasterisk.com

buttons to add panels to the layout

2 files changed with 62 insertions and 30 deletions:

web/TiledHome.ts

web/panels.ts

0 comments (0 inline, 0 general)

web/TiledHome.ts

➞

Show inline comments

 import debug from "debug";
 import * as FlexLayout from "flexlayout-react";
 import { LitElement, html } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import { getTopGraph } from "./RdfdbSyncedGraph";
 import { SyncedGraph } from "./SyncedGraph";
 import { panelDisplayName, panelElementNames, panelUrl } from "./panels";
 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
 export { Light9CollectorUi } from "./collector/Light9CollectorUi";
 export { Light9FadeUi } from "./fade/Light9FadeUi";
 export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
 const log = debug("home");
 const config: FlexLayout.IJsonModel = {
   global: {
     tabEnableRename: false,
   },
   borders: [],
   layout: {
     type: "row",
     weight: 100,
     children: [
+      {
         type: "tabset",
         weight: 50,
         children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
       },
+      {
         type: "tabset",
         weight: 50,
         children: [{ type: "tab", name: "collector", component: "light9-collector-ui" }],
       },
     ],
   },
 };
 // 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" }],
+        children: [{ type: "tab", name: "fade", component: "light9-fade-ui" }],
       },
+      {
         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));
+  }
+}
 // This lets lit call a method on a react element.
 let addTab: (component: string) => void;
 class Main extends React.Component {
   state: { model: FlexLayout.Model; persistence: PersistentLayout };
   constructor(props: any) {
     super(props);
     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) => {
     var component = node.getComponent();
     return React.createElement(component, null, "");
   };
   render() {
     addTab = (component) => {
       const name = panelDisplayName(component);
       if (name === undefined) throw new Error("no such panel: " + component);
       const newTab = { type: "tab", name: name, component: component };
       const firstTabSet = this.state.model.getRoot().getChildren()[0];
       const action = FlexLayout.Actions.addNode(newTab, firstTabSet.getId(), FlexLayout.DockLocation.LEFT, 0);
       this.state.model.doAction(action);
     };
     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")
 export class Light9HomeStatus extends LitElement {
   graph!: SyncedGraph;
   render() {
     return html`<rdfdb-synced-graph></rdfdb-synced-graph>
       <a href="metrics/">metrics</a> `;
     return html`
       <rdfdb-synced-graph></rdfdb-synced-graph>
       <a href="metrics/">metrics</a>
       Open tab or new window: ${panelElementNames().map((elem) => this.linkToPanelPage(elem))}
     `;
+  }
   linkToPanelPage(elem: string): TemplateResult {
     return html`<a @click=${this.onClickPanelLink} data-panel-elem="${elem}" href=${panelUrl(elem)}> ${panelDisplayName(elem)} </a> `;
+  }
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
     });
+  }
   onClickPanelLink(ev: MouseEvent) {
     ev.preventDefault();
     const a = ev.target as HTMLAnchorElement;
     const elem = a.dataset.panelElem!;
     addTab(elem);
+  }
+}
 const root = createRoot(document.getElementById("container")!);
 root.render(React.createElement(Main));

web/panels.ts

➞

Show inline comments

@@ new file 100644 @@
 export { Light9AscoltamiUi } from "./ascoltami/Light9AscoltamiUi";
 export { Light9CollectorUi } from "./collector/Light9CollectorUi";
 export { Light9EffectListing } from "./effects/Light9EffectListing";
 export { Light9FadeUi } from "./fade/Light9FadeUi";
 export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
 const panels: Map<string, Array<string>> = new Map([
   ["light9-ascoltami-ui", ["ascoltami", "ascoltami"]],
   ["light9-collector-ui", ["collector", "collector"]],
   ["light9-device-settings", ["device-settings", "live"]],
   ["light9-effect-listing", ["effect-listing" , "effectListing"]],
   ["light9-fade-ui", ["fade", "fade"]],
 ]);
 export function panelElementNames(): string[] {
   return Array.from(panels.keys());
+}
 export function panelUrl(elem: string): string {
     const row = panels.get(elem);
     if (!row) throw new Error("No panel: " + elem);
     return "/" + row[1] + "/";
+  }
 export function panelDisplayName(elem: string): string {
     const row = panels.get(elem);
     if (!row) throw new Error("No panel: " + elem);
     return row[0];
+}
@@ \ No newline at end of file @@

0 comments (0 inline, 0 general)