big update

2023-07-26 22:40:44 +02:00
parent d0af60f7f4
commit 70cc228bcb
23 changed files with 4068 additions and 8812 deletions
--- a/dashboard/src/ui-components/AppUI.tsx
+++ b/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;
--- a/dashboard/src/ui-components/ClimateChartWidget.ts
+++ b/dashboard/src/ui-components/ClimateChartWidget.ts
@@ -129,4 +129,4 @@ class ClimateChartWidget extends UIComponent {
    }
 }

-export default ClimateChartWidget;
+export default ClimateChartWidget;
--- a/dashboard/src/ui-components/DisplayModeWidget.tsx
+++ b/dashboard/src/ui-components/DisplayModeWidget.tsx
@@ -5,19 +5,19 @@ import UIComponent from "./UIComponent";

 class DisplayModeWidget extends UIComponent {
    private skeleton: GridWidget;
-    private minsCounterRef: number;
-    private windowStartTimeRef: number;
-    private windowStartTimeInputRef: number;
-    private windowStopTimeRef: number;
-    private windowStopTimeInputRef: number;
-    private windowedDisplayRef: number;
-    private minsDisplayRef: number;
+    private minsCounterRef: HTMLElement;
+    private windowStartTimeRef: HTMLElement;
+    private windowStartTimeInputRef: HTMLInputElement;
+    private windowStopTimeRef: HTMLElement;
+    private windowStopTimeInputRef: HTMLInputElement;
+    private windowedDisplayRef: HTMLElement;
+    private minsDisplayRef: HTMLElement;
    private mainDisplay: HTMLElement;
-    private minsInputRef: number;
+    private minsInputRef: HTMLInputElement;

    constructor(gridProps: GridProps) {
        super();
-        this.mainDisplay = this.MainDisplay({ctx: this});
+        this.mainDisplay = <this.MainDisplay />;
        this.skeleton = new GridWidget({
            ...gridProps,
            title: "Displaying:",
@@ -30,45 +30,45 @@ class DisplayModeWidget extends UIComponent {
        this.updateDisplay();
    }

-    private WindowStartTime({ ctx }: {ctx: DisplayModeWidget}) {
-        ctx.windowStartTimeInputRef = ctx.makeRef(<input
+    private WindowStartTime = () => {
+        this.windowStartTimeInputRef = <input
            type={"datetime-local"}
-            onblur={() => ctx.onWindowStartInputBlur()}
-        />);
-        ctx.windowStartTimeRef = ctx.makeRef(<div
+            onblur={() => this.onWindowStartInputBlur()}
+        /> as HTMLInputElement;
+        this.windowStartTimeRef = <div
            className={"display-mode-widget-date"}
-            onwheel={(e: WheelEvent) => ctx.onStartTimeInputScroll(e)}
-            onclick={() => ctx.onWindowStartDisplayClick()}>
+            onwheel={(e: WheelEvent) => this.onStartTimeInputScroll(e)}
+            onclick={() => this.onWindowStartDisplayClick()}>
            {new Date(getAppState().displayWindow.start + getAppState().utcOffset * 60 * 60 * 1000).toLocaleString()}
-        </div>);
-        return ctx.fromRef(ctx.windowStartTimeRef);
+        </div>;
+        return this.windowStartTimeRef;
    }

-    private WindowStopTime({ctx}: {ctx: DisplayModeWidget}) {
-        ctx.windowStopTimeInputRef = ctx.makeRef(<input
+    private WindowStopTime = () => {
+        this.windowStopTimeInputRef = <input
            value={new Date()}
            type={"datetime-local"}
-            onblur={() => ctx.onWindowStopInputBlur()}
-        />);
-        ctx.windowStopTimeRef = ctx.makeRef(<div
+            onblur={() => this.onWindowStopInputBlur()}
+        /> as HTMLInputElement;
+        this.windowStopTimeRef = <div
            className={"display-mode-widget-date"}
-            onwheel={(e: WheelEvent) => ctx.onStopTimeInputScroll(e)}
-            onclick={() => ctx.onWindowStopDisplayClick()}>
+            onwheel={(e: WheelEvent) => this.onStopTimeInputScroll(e)}
+            onclick={() => this.onWindowStopDisplayClick()}>
            {new Date(getAppState().displayWindow.stop + getAppState().utcOffset * 60 * 60 * 1000).toLocaleString()}
-        </div>);
-        return ctx.fromRef(ctx.windowStopTimeRef);
+        </div>;
+        return this.windowStopTimeRef;
    }

-    private MinutesCounter({ctx, onclick}: {ctx: DisplayModeWidget, onclick: () => any}) {
-        ctx.minsInputRef = ctx.makeRef(
+    private MinutesCounter = ({ onclick }: {onclick: () => any }) => {
+        this.minsInputRef = 
            <input
                value={getAppState().minutesDisplayed.toString()}
-                onblur={(e: FocusEvent) => ctx.onMinutesCounterInputBlur(e)}/>);
-        ctx.minsCounterRef = ctx.makeRef(
-            <div className={"min-count"} onclick={onclick} onwheel={(e: WheelEvent) => ctx.onMinutesCounterInputScroll(e)}>
+                onblur={(e: FocusEvent) => this.onMinutesCounterInputBlur(e)}/> as HTMLInputElement;
+        this.minsCounterRef = 
+            <div className={"min-count"} onclick={onclick} onwheel={(e: WheelEvent) => this.onMinutesCounterInputScroll(e)}>
                {getAppState().minutesDisplayed.toString()}
-            </div>);
-        return ctx.fromRef(ctx.minsCounterRef);
+            </div>;
+        return this.minsCounterRef;
    }

    private onMinutesCounterInputScroll(e: WheelEvent) {
@@ -94,18 +94,18 @@ class DisplayModeWidget extends UIComponent {
        } else {
            (e.target as HTMLInputElement).value = getAppState().minutesDisplayed.toString();
        }
-        this.fromRef(this.minsInputRef).replaceWith(this.fromRef(this.minsCounterRef));
+        this.minsInputRef.replaceWith(this.minsCounterRef);
    }

-    private MinutesDisplay({ctx}: {ctx: DisplayModeWidget}) {
+    private MinutesDisplay = () => {
        return (<div className={"display-mode-widget-mins"}>
            <div>Last</div>
-            <ctx.MinusButton onclick={() => {
+            <this.MinusButton onclick={() => {
                const mins = AppStore().getState().minutesDisplayed;
                AppStore().setMinutesDisplayed(mins - 1);
            }}/>
-            <ctx.MinutesCounter ctx={ctx} onclick={() => ctx.onMinutesCounterClick()}/>
-            <ctx.PlusButton onclick={() => {
+            <this.MinutesCounter onclick={() => this.onMinutesCounterClick()}/>
+            <this.PlusButton onclick={() => {
                const mins = AppStore().getState().minutesDisplayed;
                AppStore().setMinutesDisplayed(mins + 1);
            }}/>
@@ -114,17 +114,17 @@ class DisplayModeWidget extends UIComponent {
    }

    private onMinutesCounterClick() {
-        const input = this.fromRef(this.minsInputRef) as HTMLInputElement;
-        this.fromRef(this.minsCounterRef).replaceWith(input);
+        const input = this.minsInputRef;
+        this.minsCounterRef.replaceWith(input);
        input.focus();
        input.selectionStart = 0;
        input.selectionEnd = input.value.length;
    }

    private onWindowStopDisplayClick() {
-        const stopTimeDisplay = this.fromRef(this.windowStopTimeRef);
-        (stopTimeDisplay as HTMLInputElement).valueAsDate = new Date(getAppState().displayWindow.stop);
-        const stopTimeInputDisplay = this.fromRef(this.windowStopTimeInputRef) as HTMLInputElement;
+        const stopTimeDisplay = this.windowStopTimeRef;
+        const stopTimeInputDisplay = this.windowStopTimeInputRef;
+        stopTimeInputDisplay.valueAsDate = new Date(getAppState().displayWindow.stop);
        stopTimeDisplay.replaceWith(stopTimeInputDisplay);
        const date = new Date(getAppState().displayWindow.stop * 1000 + getAppState().utcOffset * 60 * 60 * 1000);
        stopTimeInputDisplay.value = `${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`;
@@ -132,7 +132,7 @@ class DisplayModeWidget extends UIComponent {
    }

    private onWindowStopInputBlur() {
-        const stopTimeInput = this.fromRef(this.windowStopTimeInputRef);
+        const stopTimeInput = this.windowStopTimeInputRef;
        const val = new Date((stopTimeInput as HTMLInputElement).value).getTime() / 1000;
        if (!isNaN(val)) {
            AppStore().setDisplayWindow({
@@ -140,13 +140,13 @@ class DisplayModeWidget extends UIComponent {
                stop: val
            });
        }
-        stopTimeInput.replaceWith(this.fromRef(this.windowStopTimeRef));
+        stopTimeInput.replaceWith(this.windowStopTimeRef);
    }

    private onWindowStartDisplayClick() {
-        const startTimeDisplay = this.fromRef(this.windowStartTimeRef);
-        (startTimeDisplay as HTMLInputElement).valueAsDate = new Date(getAppState().displayWindow.start);
-        const startTimeInputDisplay = this.fromRef(this.windowStartTimeInputRef) as HTMLInputElement;
+        const startTimeDisplay = this.windowStartTimeRef;
+        const startTimeInputDisplay = this.windowStartTimeInputRef;
+        startTimeInputDisplay.valueAsDate = new Date(getAppState().displayWindow.start);
        startTimeDisplay.replaceWith(startTimeInputDisplay);
        const date = new Date(getAppState().displayWindow.start * 1000 + getAppState().utcOffset * 60 * 60 * 1000);
        startTimeInputDisplay.value = `${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`;
@@ -155,7 +155,7 @@ class DisplayModeWidget extends UIComponent {
    }

    private onWindowStartInputBlur() {
-        const startTimeInput = this.fromRef(this.windowStartTimeInputRef);
+        const startTimeInput = this.windowStartTimeInputRef;
        const val = new Date((startTimeInput as HTMLInputElement).value).getTime() / 1000;
        if (!isNaN(val)) {
            AppStore().setDisplayWindow({
@@ -163,56 +163,56 @@ class DisplayModeWidget extends UIComponent {
                stop: getAppState().displayWindow.stop,
            });
        }
-        startTimeInput.replaceWith(this.fromRef(this.windowStartTimeRef));
+        startTimeInput.replaceWith(this.windowStartTimeRef);
    }

-    private MinusButton(props: {onclick: () => any}) {
+    private MinusButton(props: {onclick: () => void}) {
        return <div
            className={"minus-button"}
            onclick={props.onclick}
        />;
    }

-    private PlusButton(props: {onclick: () => any}) {
+    private PlusButton(props: {onclick: () => void}) {
        return <div
            className={"plus-button"}
            onclick={props.onclick}
        />;
    }

-    private WindowedDisplay({ctx}: {ctx: DisplayModeWidget}) {
+    private WindowedDisplay = () => {
        return (<div>
            <div>From</div>
-            <ctx.MinusButton onclick={() => {
+            <this.MinusButton onclick={() => {
                const displayWindow = AppStore().getState().displayWindow;
                AppStore().setDisplayWindow({start: displayWindow.start - 60, stop: displayWindow.stop});
            }}/>
-            <ctx.WindowStartTime ctx={ctx}/>
-            <ctx.PlusButton onclick={() => {
+            <this.WindowStartTime this={this}/>
+            <this.PlusButton onclick={() => {
                const displayWindow = AppStore().getState().displayWindow;
                AppStore().setDisplayWindow({start: displayWindow.start + 60, stop: displayWindow.stop});
            }}/>
            <div>to</div>
-            <ctx.MinusButton onclick={() => {
+            <this.MinusButton onclick={() => {
                const displayWindow = AppStore().getState().displayWindow;
                AppStore().setDisplayWindow({start: displayWindow.start, stop: displayWindow.stop - 60});
            }}/>
-            <ctx.WindowStopTime ctx={ctx}/>
-            <ctx.PlusButton onclick={() => {
+            <this.WindowStopTime this={this}/>
+            <this.PlusButton onclick={() => {
                const displayWindow = AppStore().getState().displayWindow;
                AppStore().setDisplayWindow({start: displayWindow.start, stop: displayWindow.stop + 60});
            }}/>
        </div>);
    }

-    private MainDisplay({ ctx }: { ctx: DisplayModeWidget }) {
+    private MainDisplay = () => {
        const windowMode = getAppState().displayMode === "window";
-        ctx.windowedDisplayRef = ctx.makeRef(<ctx.WindowedDisplay ctx={ctx}/>);
-        ctx.minsDisplayRef = ctx.makeRef(<ctx.MinutesDisplay ctx={ctx}/>);
+        this.windowedDisplayRef = <this.WindowedDisplay />;
+        this.minsDisplayRef = <this.MinutesDisplay />;
        return <div className={"display-mode-widget"}>
            {windowMode
-                ? ctx.fromRef(ctx.windowedDisplayRef)
-                : ctx.fromRef(ctx.minsDisplayRef)}
+                ? this.windowedDisplayRef
+                : this.minsDisplayRef}
        </div> as HTMLElement;
    }

@@ -222,16 +222,16 @@ class DisplayModeWidget extends UIComponent {

    private updateDisplay() {
        if (getAppState().displayMode === "window") {
-            this.mainDisplay.children.item(0).replaceWith(this.fromRef(this.windowedDisplayRef));
+            this.mainDisplay.children.item(0).replaceWith(this.windowedDisplayRef);
            const offset = getAppState().utcOffset * 60 * 60;
            const startDate = new Date((getAppState().displayWindow.start + offset) * 1000);
            const stopDate = new Date((getAppState().displayWindow.stop + offset) * 1000);
-            this.fromRef(this.windowStartTimeRef).innerText = startDate.toLocaleString();
-            this.fromRef(this.windowStopTimeRef).innerText = stopDate.toLocaleString();
+            this.windowStartTimeRef.innerText = startDate.toLocaleString();
+            this.windowStopTimeRef.innerText = stopDate.toLocaleString();
        } else {
-            this.mainDisplay.children.item(0).replaceWith(this.fromRef(this.minsDisplayRef));
-            this.fromRef(this.minsCounterRef).innerText = getAppState().minutesDisplayed.toString();
-            (this.fromRef(this.minsInputRef) as HTMLInputElement).value = getAppState().minutesDisplayed.toString();
+            this.mainDisplay.children.item(0).replaceWith(this.minsDisplayRef);
+            this.minsCounterRef.innerText = getAppState().minutesDisplayed.toString();
+            this.minsInputRef.value = getAppState().minutesDisplayed.toString();
        }
    }

@@ -240,4 +240,4 @@ class DisplayModeWidget extends UIComponent {
    }
 }

-export default DisplayModeWidget;
+export default DisplayModeWidget;
--- a/dashboard/src/ui-components/LegendWidget.tsx
+++ b/dashboard/src/ui-components/LegendWidget.tsx
@@ -7,11 +7,11 @@ import Timeseries from "../Timeseries";
 class LegendWidget extends UIComponent {
    private skeleton: GridWidget;
    private display: HTMLSpanElement = document.createElement("span");
-    private bodyRef: number;
+    private bodyRef: HTMLElement;

    constructor(gridProps: GridProps) {
        super();
-        this.display = <this.MainBody ctx={this}/>;
+        this.display = <this.MainBody />;
        this.skeleton = new GridWidget({
            ...gridProps,
            title: "Legend:",
@@ -23,29 +23,29 @@ class LegendWidget extends UIComponent {
    }

    private updateDisplay() {
-        this.fromRef(this.bodyRef).replaceWith(<this.MainBody ctx={this}/>);
+        this.bodyRef.replaceWith(<this.MainBody />);
    }

-    private MainBody({ctx}: {ctx: LegendWidget}) {
-        ctx.bodyRef = ctx.makeRef(<div><ctx.TimeseriesList ctx={ctx}/></div>);
-        return ctx.fromRef(ctx.bodyRef);
+    private MainBody = () => {
+        this.bodyRef = <div><this.TimeseriesList /></div>;
+        return this.bodyRef;
    }

-    private TimeseriesList({ctx}: { ctx: LegendWidget }) {
+    private TimeseriesList = () => {
        const highlightedTimeseries = getAppState().highlightedTimeseries;
        return <ul>
            { ...getAppState().rightTimeseries.map(timeseries =>
-                <ctx.TimeseriesLegendEntry
+                <this.TimeseriesLegendEntry
                    timeseries={timeseries}
                    highlighted={timeseries.getName() === highlightedTimeseries}/>) }
            { ...getAppState().leftTimeseries.map(timeseries =>
-                <ctx.TimeseriesLegendEntry
+                <this.TimeseriesLegendEntry
                    timeseries={timeseries}
                    highlighted={timeseries.getName() === highlightedTimeseries}/>) }
        </ul>;
    }

-    private TimeseriesLegendEntry({timeseries, highlighted}: {timeseries: Timeseries, highlighted: boolean}) {
+    private TimeseriesLegendEntry = ({timeseries, highlighted}: {timeseries: Timeseries, highlighted: boolean}) => {
        const option = new Option();
        option.style.color = timeseries.getColour();
        return <li
@@ -62,4 +62,4 @@ class LegendWidget extends UIComponent {
    }
 }

-export default LegendWidget;
+export default LegendWidget;
--- a/dashboard/src/ui-components/MessageOverlay.ts
+++ b/dashboard/src/ui-components/MessageOverlay.ts
@@ -17,7 +17,7 @@ class MessageOverlay extends UIComponent {

    private build() {
        this.element = document.createElement("div");
-        this.element.classList.add("overlay", "center");
+        this.element.classList.add("overlay");
        this.textElement = document.createElement("span");
        this.textElement.innerText = "";
        this.element.appendChild(this.textElement);
@@ -60,4 +60,4 @@ class MessageOverlay extends UIComponent {
    }
 }

-export default MessageOverlay;
+export default MessageOverlay;
--- a/dashboard/src/ui-components/SelectDisplayModeWidget.tsx
+++ b/dashboard/src/ui-components/SelectDisplayModeWidget.tsx
@@ -6,13 +6,14 @@ import {AppStore, DisplayMode, getAppState} from "../StateStore";
 export default class SelectDisplayModeWidget extends UIComponent {
    private mainBody: HTMLElement;
    private gridWidgetSkeleton: GridWidget;
-    private windowInputRef: number;
-    private minSpanInputRef: number;
-    private windowInputContainerRef: number;
-    private minSpanInputContainerRef: number;
+    private windowInputRef: HTMLInputElement;
+    private minSpanInputRef: HTMLInputElement;
+    private windowInputContainerRef: HTMLElement;
+    private minSpanInputContainerRef: HTMLElement;
+
    constructor(gridProps: GridProps) {
        super();
-        this.mainBody = this.MainBody({ctx: this});
+        this.mainBody = <this.MainBody />;
        this.gridWidgetSkeleton = new GridWidget({
            ...gridProps,
            title: "Display Mode:",
@@ -27,44 +28,44 @@ export default class SelectDisplayModeWidget extends UIComponent {

    private update() {
        const windowedMode = getAppState().displayMode === "window";
-        (this.fromRef(this.windowInputRef) as HTMLInputElement).checked = windowedMode;
-        (this.fromRef(this.minSpanInputRef) as HTMLInputElement).checked = !windowedMode;
+        this.windowInputRef.checked = windowedMode;
+        this.minSpanInputRef.checked = !windowedMode;
        if (!windowedMode) {
-            this.fromRef(this.minSpanInputContainerRef).classList.add("selected");
-            this.fromRef(this.windowInputContainerRef).classList.remove("selected");
+            this.minSpanInputContainerRef.classList.add("selected");
+            this.windowInputContainerRef.classList.remove("selected");
        } else {
-            this.fromRef(this.minSpanInputContainerRef).classList.remove("selected");
-            this.fromRef(this.windowInputContainerRef).classList.add("selected");
+            this.minSpanInputContainerRef.classList.remove("selected");
+            this.windowInputContainerRef.classList.add("selected");
        }
    }

-    private MainBody({ ctx }: { ctx: SelectDisplayModeWidget }) {
+    private MainBody = () => {
        const isInWindowMode = getAppState().displayMode === "window";
-        ctx.windowInputRef = this.makeRef(<input
+        this.windowInputRef = <input
            type={"radio"}
            id={"window"}
            name={"display-mode"}
-            checked={isInWindowMode}/>);
-        ctx.minSpanInputRef = this.makeRef(<input
+            checked={isInWindowMode}/> as HTMLInputElement;
+        this.minSpanInputRef = <input
            type={"radio"}
            id={"min-span"}
            name={"display-mode"}
-            checked={!isInWindowMode}/>);
-        ctx.windowInputContainerRef = this.makeRef(<div
+            checked={!isInWindowMode}/> as HTMLInputElement;
+        this.windowInputContainerRef = <div
            className={`display-mode-option${isInWindowMode ? " selected" : ""}`}
-            onclick={() => ctx.selectMode("window")}>
-            {this.fromRef(ctx.windowInputRef)}
+            onclick={() => this.selectMode("window")}>
+            {this.windowInputRef}
            <label htmlFor={"window"}>Time Window</label>
-        </div>);
-        ctx.minSpanInputContainerRef = this.makeRef(<div
+        </div>;
+        this.minSpanInputContainerRef = <div
            className={`display-mode-option${!isInWindowMode ? " selected" : ""}`}
-            onclick={() => ctx.selectMode("pastMins")}>
-            {this.fromRef(ctx.minSpanInputRef)}
+            onclick={() => this.selectMode("pastMins")}>
+            {this.minSpanInputRef}
            <label htmlFor={"minSpan"}>Rolling Minute Span</label>
-        </div>);
+        </div>;
        return (<div>
-            {this.fromRef(ctx.windowInputContainerRef)}
-            {this.fromRef(ctx.minSpanInputContainerRef)}
+            {this.windowInputContainerRef}
+            {this.minSpanInputContainerRef}
        </div>);
    }

--- a/dashboard/src/ui-components/TimerWidget.tsx
+++ b/dashboard/src/ui-components/TimerWidget.tsx
@@ -7,12 +7,12 @@ class TimerWidget extends UIComponent {
    private readonly display: HTMLElement;
    private skeleton: GridWidget;
    private nextUpdateTime: number;
-    private timerRef: number;
-    private lastUpdateRef: number;
+    private timerRef: HTMLElement;
+    private lastUpdateRef: HTMLElement;

    constructor(gridProps: GridProps) {
        super();
-        this.display = <this.MainDisplay ctx={this}/>;
+        this.display = <this.MainDisplay />;
        this.skeleton = new GridWidget({
            ...gridProps,
            className: "timer-widget",
@@ -32,20 +32,20 @@ class TimerWidget extends UIComponent {
    }

    private updateUpdateText() {
-        this.fromRef(this.lastUpdateRef).innerText = new Date(getAppState().lastUpdateTime * 1000 + getAppState().utcOffset * 60 * 60 * 1000).toLocaleString();
+        this.lastUpdateRef.innerText = new Date(getAppState().lastUpdateTime * 1000 + getAppState().utcOffset * 60 * 60 * 1000).toLocaleString();
    }

-    private MainDisplay({ ctx }: { ctx: TimerWidget }) {
-        ctx.timerRef = ctx.makeRef(<div className={"countdown"}/>);
-        ctx.lastUpdateRef = ctx.makeRef(
+    private MainDisplay = () => {
+        this.timerRef = <div className={"countdown"}/>;
+        this.lastUpdateRef = 
            <span className={"last-update"}>
                {new Date(getAppState().lastUpdateTime).toLocaleString()}
-            </span>);
+            </span>;
        return (<div>
-            {ctx.fromRef(ctx.timerRef)}
+            {this.timerRef}
            <div>
                <div className={"last-update"}>Last update was at:</div>
-                <div>{ctx.fromRef(ctx.lastUpdateRef)}</div>
+                <div>{this.lastUpdateRef}</div>
            </div>
        </div>);
    }
@@ -53,9 +53,9 @@ class TimerWidget extends UIComponent {
    private refreshTimer() {
        const now = new Date().getTime() / 1000;
        if (now <= this.nextUpdateTime) {
-            this.fromRef(this.timerRef).innerText = `${(this.nextUpdateTime - now).toFixed(2)}s`;
+            this.timerRef.innerText = `${(this.nextUpdateTime - now).toFixed(2)}s`;
        } else {
-            this.fromRef(this.timerRef).innerText = "0.00s";
+            this.timerRef.innerText = "0.00s";
        }
    }

@@ -64,4 +64,4 @@ class TimerWidget extends UIComponent {
    }
 }

-export default TimerWidget;
+export default TimerWidget;
--- a/dashboard/src/ui-components/TimezoneWidget.tsx
+++ b/dashboard/src/ui-components/TimezoneWidget.tsx
@@ -6,12 +6,12 @@ import * as JSX from "../JSXFactory";
 class TimezoneWidget extends UIComponent {
    private skeleton: GridWidget;
    private display: HTMLSpanElement = document.createElement("span");
-    private timezoneInputRef: number;
-    private timezoneDisplayRef: number;
+    private timezoneInputRef: HTMLInputElement;
+    private timezoneDisplayRef: HTMLElement;

    constructor(gridProps: GridProps) {
        super();
-        this.display = <this.MainBody ctx={this}/>;
+        this.display = <this.MainBody />;
        this.skeleton = new GridWidget({
            ...gridProps,
            title: "Displayed Timezone:",
@@ -23,39 +23,39 @@ class TimezoneWidget extends UIComponent {

    private updateDisplay() {
        const offset = AppStore().getState().utcOffset;
-        this.fromRef(this.timezoneDisplayRef).innerText = `${offset > 0 ? "+" : "−"} ${Math.abs(offset)}`;
-        (this.fromRef(this.timezoneInputRef) as HTMLInputElement).value = `${offset > 0 ? "" : "-"}${Math.abs(offset)}`;
+        this.timezoneDisplayRef.innerText = `${offset > 0 ? "+" : "−"} ${Math.abs(offset)}`;
+        (this.timezoneInputRef as HTMLInputElement).value = `${offset > 0 ? "" : "-"}${Math.abs(offset)}`;
    }

-    private MainBody({ctx}: {ctx: TimezoneWidget}) {
+    private MainBody = () => {
        return <div
            className={"timezone-widget"}
-            onclick={() => ctx.onTimezoneClick()}>
+            onclick={() => this.onTimezoneClick()}>
            <span>UTC </span>
-            <ctx.TimezoneDisplay ctx={ctx} />
+            <this.TimezoneDisplay />
            <span>:00</span>
        </div>;
    }

-    private TimezoneDisplay({ctx}: {ctx: TimezoneWidget}) {
-        ctx.timezoneDisplayRef = ctx.makeRef(<span/>);
-        ctx.timezoneInputRef = ctx.makeRef(<input
+    private TimezoneDisplay = () => {
+        this.timezoneDisplayRef = <span/>;
+        this.timezoneInputRef = <input
            type={"text"}
-            onblur={() => ctx.onTimezoneInputBlur()}/>);
-        return ctx.fromRef(ctx.timezoneDisplayRef);
+            onblur={() => this.onTimezoneInputBlur()}/> as HTMLInputElement;
+        return this.timezoneDisplayRef;
    }

    private onTimezoneInputBlur() {
-        const input = this.fromRef(this.timezoneInputRef) as HTMLInputElement;
-        const display = this.fromRef(this.timezoneDisplayRef);
+        const input = this.timezoneInputRef;
+        const display = this.timezoneDisplayRef;
        AppStore().setUtcOffset(Number(input.value));
        input.replaceWith(display);
        this.updateDisplay();
    }

    private onTimezoneClick() {
-        const input = this.fromRef(this.timezoneInputRef) as HTMLInputElement;
-        this.fromRef(this.timezoneDisplayRef).replaceWith(input);
+        const input = this.timezoneInputRef as HTMLInputElement;
+        this.timezoneDisplayRef.replaceWith(input);
        input.focus();
        input.selectionStart = 0;
        input.selectionEnd = input.value.length;
@@ -66,4 +66,4 @@ class TimezoneWidget extends UIComponent {
    }
 }

-export default TimezoneWidget;
+export default TimezoneWidget;
--- a/dashboard/src/ui-components/UIComponent.ts
+++ b/dashboard/src/ui-components/UIComponent.ts
@@ -1,22 +1,11 @@
 export default abstract class UIComponent {
    public readonly id: number;
    private static componentCount = 0;
-    private static reffedComponentCount = 0;
-    private static readonly reffedComponents: HTMLElement[] = [];

    protected constructor() {
        this.id = UIComponent.componentCount;
        UIComponent.componentCount++;
    }

-    protected makeRef(el: HTMLElement | DocumentFragment): number {
-        UIComponent.reffedComponents.push(el as HTMLElement);
-        return UIComponent.reffedComponentCount++;
-    }
-
-    protected fromRef(ref: number): HTMLElement | null {
-        return UIComponent.reffedComponents[ref] ?? null;
-    }
-
    abstract current(): HTMLElement;
-}
+}