light9 Changeset - 1d3594ffd14b

Changeset - 1d3594ffd14b

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

drewp@bigasterisk.com - 8 months ago 2024-05-17 23:56:32
drewp@bigasterisk.com

new home-status elt

2 files changed with 41 insertions and 12 deletions:

web/TiledHome.ts

web/index.html

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 { customElement } from "lit/decorators.js";
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import * as FlexLayout from "flexlayout-react";
 import { getTopGraph } from "./RdfdbSyncedGraph";
 import { SyncedGraph } from "./SyncedGraph";
 import { Patch } from "./patch";
 import { NamedNode } from "n3";
 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
 export { Light9CollectorUi } from "./collector/Light9CollectorUi";
 export { Light9FadeUi } from "./fade/Light9FadeUi";
 export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
 export { Light9CollectorUi } from "./collector/Light9CollectorUi";
 import { showRoot } from "./show_specific";
 import { HandlerFunc } from "./AutoDependencies";
 const log = debug("home");
 const config: FlexLayout.IJsonModel = {
   global: {},
   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" }],
       },
     ],
   },
 };
 const e = React.createElement;
 // see https://github.com/lit/lit/tree/main/packages/labs/react
 class Main extends React.Component {
   state: { model: FlexLayout.Model };
   constructor(props: any) {
     super(props);
     this.state = { model: FlexLayout.Model.fromJson(config) };
+  }
   factory = (node: any) => {
     var component = node.getComponent();
-    return e(component, null, "");
+    return React.createElement(component, null, "");
   };
   render() {
     return e(FlexLayout.Layout, { model: this.state.model, factory: this.factory });
     return React.createElement(FlexLayout.Layout, {
       model: this.state.model,
       realtimeResize: true,
       factory: this.factory,
     });
+  }
+}
 @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> `;
+  }
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
     });
+  }
+}
 const root = createRoot(document.getElementById("container")!);
 root.render(React.createElement(Main));

web/index.html

➞

Show inline comments

 <!DOCTYPE html>
 <html>
   <head>
     <title>light9 home</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="flexlayout-react/style/dark.css" />
-    <script type="module" src="TiledHome.ts"></script>
     <script type="module" src="TiledHome"></script>
   </head>
   <body>
     <style>
       #footer {
         position: fixed; /* todo: this shouldn't overlap the layout, but getting the layout smaller was Hard */
         left: 5px;
         bottom: 0px;
         right: 5px;
         height: 2em;
         background-color: rgb(211 211 255 / 96%);
         box-shadow: black 0px -7px 9px 0px;
+      }
     </style>
     <div id="container">hello</div>
     <div id="footer">
       <a href="metrics/">metrics</a>
     </div>
     <div id="container">loading layout...</div>
     <div id="footer"><light9-home-status></light9-home-status> </div>
   </body>
 </html>

0 comments (0 inline, 0 general)