diff --git a/web/TiledHome.ts b/web/TiledHome.ts --- a/web/TiledHome.ts +++ b/web/TiledHome.ts @@ -17,22 +17,7 @@ const config: FlexLayout.IJsonModel = { 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" }], - }, - ], - }, + layout: fullLayout(persistedLayout) as FlexLayout.IJsonRowNode, }; // see https://github.com/lit/lit/tree/main/packages/labs/react diff --git a/web/tiledLayoutPersistence.ts b/web/tiledLayoutPersistence.ts new file mode 100644 --- /dev/null +++ b/web/tiledLayoutPersistence.ts @@ -0,0 +1,79 @@ +// for persistence +interface SimpleLayoutTab { + type: "tab"; + light9Element: string; +} +export interface SimpleLayout { + type: string; + weight?: number; + children: (SimpleLayout | SimpleLayoutTab)[]; +} +// for FlexLayout +interface FullLayoutTab { + type: "tab"; + name: string; + component: string; +} +interface FullLayout { + type: string; + weight?: number; + children: (FullLayout | FullLayoutTab)[]; +} +function tabConfigFromSimpleTabName(name: string): FullLayoutTab { + return { type: "tab", name: name.replace(/^light9-/, ""), component: name }; +} +export function simpleLayout(full: FullLayout | FullLayoutTab): SimpleLayout | SimpleLayoutTab { + if (full.type == "tab") { + return { type: "tab", light9Element: (full as FullLayoutTab).component }; + } else { + return { ...(full as FullLayout), children: (full as FullLayout).children.map(simpleLayout) }; + } +} +export function fullLayout(simple: SimpleLayout | SimpleLayoutTab): FullLayout | FullLayoutTab { + if (simple.type == "tab") { + return tabConfigFromSimpleTabName((simple as SimpleLayoutTab).light9Element); + } else { + return { ...(simple as SimpleLayout), children: (simple as SimpleLayout).children.map(fullLayout) }; + } +} +export const persistedLayout: SimpleLayout = { + type: "row", + children: [ + // { + // type: "tabset", + // weight: 50, + // children: [ + // { + // type: "tab", + // light9Element: "light9-device-settings", + // }, + // ], + // }, + // { + // type: "row", + // weight: 50, + // children: [ + // { + // type: "tabset", + // weight: 50, + // children: [ + // { + // type: "tab", + // light9Element: "light9-fade-ui", + // }, + // ], + // }, + // { + // type: "tabset", + // weight: 50, + // children: [ + // { + // type: "tab", + // light9Element: "light9-collector-ui", + // }, + // ], + // }, + // ], + // }, + ], +};