big update

dashboard/src/ui-components/AppUI.tsx

@@ -23,10 +23,12 @@ class AppUI extends UIComponent {
     private grid: HTMLDivElement = document.createElement("div");
     private messageOverlay: MessageOverlay = new MessageOverlay();
     private helpModal: HelpModal = new HelpModal();
+    private nowView: HTMLElement;
 
     constructor() {
         super();
         this.setupGrid({width: 5, height: 10});
+        this.nowView = <this.Now />;
         this.element.append(
             <img
                 alt={"Help"}
@@ -34,11 +36,41 @@ class AppUI extends UIComponent {
                 className={"help-button button"}
                 onclick={() => AppStore().showHelp()}/>,
             <h1>Ledda's Room Climate</h1>,
-            this.grid,
             this.messageOverlay.current(),
+            <this.Toggle />,
+            this.nowView,
+            this.grid,
             this.helpModal.current(),
         );
+        this.grid.classList.add("hidden");
         this.element.className = "center";
+        AppStore().on("timeseriesUpdated", () => {
+            const old = this.nowView;
+            this.nowView = <this.Now/>;
+            old.replaceWith(this.nowView);
+        });
+    }
+
+    private Now = () => {
+        const state = AppStore().getState();
+        return <div>
+            {state.leftTimeseries.concat(state.rightTimeseries).map(timeseries => {
+                const val = timeseries.current() ?? "-";
+                return <div className={"timeseries-val"}>{timeseries.getName()}: <span className={"timeseries-val"}>{val}</span></div>;
+            })}
+        </div>;
+    }
+
+    private Toggle = () => {
+        return <div className={"toggle"}>
+            <button onclick={() => {
+                this.grid.classList.toggle("hidden");
+                this.nowView.classList.toggle("hidden");
+                this.chartWidget.updateDimensions();
+            }}>
+                Toggle Dashboard
+            </button>
+        </div>;
     }
 
     private setupGrid(size: GridSize) {
@@ -86,4 +118,4 @@ class AppUI extends UIComponent {
     }
 }
 
-export default AppUI;
+export default AppUI;