Ledda/climate-server
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

big update

Browse Source
This commit is contained in:
Daniel Ledda
2023-07-26 22:40:44 +02:00
parent d0af60f7f4
commit 70cc228bcb
23 changed files with 4068 additions and 8812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app-dist/static/index.html
View File

@@ -3,9 +3,11 @@
<head>
<meta charset="UTF-8">
<title>Ledda's Room Climate</title>
<link type="text/css" href="/styles.css" rel="stylesheet" />
<script type="application/javascript" src="/dashboard.js"></script>
<link rel="shortcut icon" type="image/jpg" href="/favicon64.png"/>
<script type="module" crossorigin src="/assets/index-58d7c2d1.js"></script>
<link rel="stylesheet" href="/assets/index-25859e9b.css">
</head>
<body>
<div id="root"></div>

23
app-dist/static/styles.css → dashboard/assets/styles.css
View File

@@ -47,12 +47,29 @@ html, body {
}
.hidden {
opacity: 0;
z-index: -1;
display: none;
}
.toggle {
margin-bottom: 20px;
}
.timeseries-val {
white-space: nowrap;
display: flex;
justify-content: end;
width: 100%;
}
.timeseries-val span {
margin-left: 20px;
font-weight: bold;
text-align: right;
}
h1 {
display: block;
text-align: center;
font-family: 'Roboto Slab', serif;
font-weight: normal;
color: var(--accent-dark);
@@ -272,4 +289,4 @@ h1 {
}
.button:active {
filter: brightness(0.9);
}
}

13
dashboard/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ledda's Room Climate</title>
<link type="text/css" href="./assets/styles.css" rel="stylesheet" />
<script type="module" src="./src/main.ts"></script>
<link rel="shortcut icon" type="image/jpg" href="/favicon64.png"/>
</head>
<body>
<div id="root"></div>
</body>
</html>

9571
dashboard/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
dashboard/package.json
View File

@@ -11,22 +11,7 @@
},
"author": "",
"license": "ISC",
"devDependencies": {
"@types/react": "^17.0.3",
"@webpack-cli/init": "^1.0.3",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"css-loader": "^5.0.1",
"style-loader": "^2.0.0",
"file-loader": "^6.0.0",
"terser-webpack-plugin": "^5.0.3",
"ts-loader": "^8.0.18",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"@types/chart.js": "^2.9.27",
"chart.js": "^2.9.4",
"webpack-dev-server": "^3.11.0"
"vite": "4.4.7"
}
}

6
dashboard/src/JSXFactory.ts
View File

@@ -60,12 +60,12 @@ function createChildren(children: any[]): Node[] {
if (Array.isArray(child)) {
childrenNodes.push(...createChildren(child));
}
else if (typeof child === "string") {
childrenNodes.push(document.createTextNode(String(child)));
}
else if (child instanceof Node) {
childrenNodes.push(child);
}
else {
childrenNodes.push(document.createTextNode(String(child)));
}
}
return childrenNodes;
}

13
dashboard/src/StateStore.ts
View File

@@ -68,7 +68,7 @@ function newDefaultState(): AppState {
};
}
class AppStateStore {
class AppStateStore {
private readonly subscriptions: IAppStateSubscriptions;
private readonly eventCallbacks: EventCallbackListing<keyof EventCallback>;
private readonly state: AppState;
@@ -87,7 +87,7 @@ class AppStateStore {
}
async init() {
await this.updateTimeseriesFromSettings();
await this.updateTimeseriesFromSettings(true);
await this.getNewTimeseriesData();
this.emit("ready");
}
@@ -121,7 +121,7 @@ class AppStateStore {
}
}
private async updateTimeseriesFromSettings() {
private async updateTimeseriesFromSettings(initial?: boolean) {
let start: number;
let stop: number;
if (this.state.displayMode === "window") {
@@ -131,6 +131,9 @@ class AppStateStore {
start = this.state.lastUpdateTime - this.state.minutesDisplayed * 60;
stop = this.state.lastUpdateTime;
}
if (initial) {
start -= stop - start;
}
const allTimeseries = this.state.leftTimeseries.concat(this.state.rightTimeseries);
const allHistoriesComplete = !allTimeseries.some(timeseries => !timeseries.historyIsComplete());
if (start < this.getExtrema().minIndex && allHistoriesComplete) {
@@ -424,4 +427,6 @@ export function getAppState() {
} else {
throw new AppStateError("Store not yet initialised!");
}
}
}
export type { AppStateStore };

6
dashboard/src/Timeseries.ts
View File

@@ -110,6 +110,10 @@ class Timeseries {
}
}
current() {
return this.cache[this.currentEndPointer - 2] ?? null;
}
async updateFromWindow(start: number, stop: number) {
if (!this.fetching) {
try {
@@ -245,4 +249,4 @@ class Timeseries {
}
}
export default Timeseries;
export default Timeseries;

2
dashboard/src/climateTimeseries.ts
View File

@@ -50,4 +50,4 @@ async function loadClimateTimeseriesData(dataType: "temp" | "humidity" | "co2",
const message = "timeseries data couldn't be loaded from the server";
throw new ClayPIDashboardError(`${message}: ${e}`, message);
}
}
}

2
dashboard/src/config.json
View File

@@ -2,5 +2,5 @@
"development": false,
"defaultMinuteSpan": 60,
"reloadIntervalSec": 30,
"dataEndpoint": "/climate/api"
"dataEndpoint": "http://home.djledda.de:4040/climate/api"
}

5
dashboard/src/main.ts
View File

@@ -1,5 +1,5 @@
import config from "./config.json";
import {AppStore, getAppState, initStore} from "./StateStore";
import {AppStore, type AppStateStore, getAppState, initStore} from "./StateStore";
import AppUI from "./ui-components/AppUI";
import {
newCo2Timeseries,
@@ -36,7 +36,6 @@ document.onreadystatechange = async () => {
await init();
AppStore().setDocumentReady(true);
AppStore().on("stateChange", () => debounce(() => updateUrlState())());
// @ts-ignore
window.store = AppStore();
(window as unknown as { store: AppStateStore }).store = AppStore();
document.onreadystatechange = null;
};

36
dashboard/src/ui-components/AppUI.tsx
View File

@@ -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;

2
dashboard/src/ui-components/ClimateChartWidget.ts
View File

@@ -129,4 +129,4 @@ class ClimateChartWidget extends UIComponent {
}
}
export default ClimateChartWidget;
export default ClimateChartWidget;

144
dashboard/src/ui-components/DisplayModeWidget.tsx
View File

@@ -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;

22
dashboard/src/ui-components/LegendWidget.tsx
View File

@@ -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;

4
dashboard/src/ui-components/MessageOverlay.ts
View File

@@ -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;

53
dashboard/src/ui-components/SelectDisplayModeWidget.tsx
View File

@@ -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>);
}

26
dashboard/src/ui-components/TimerWidget.tsx
View File

@@ -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;

36
dashboard/src/ui-components/TimezoneWidget.tsx
View File

@@ -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;

13
dashboard/src/ui-components/UIComponent.ts
View File

@@ -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;
}
}

7
dashboard/vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import {defineConfig} from "vite";
export default defineConfig({
build: {
outDir: '../app-dist/static',
},
});

2871
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -25,7 +25,7 @@
"concurrently": "^6.0.0",
"eslint": "^7.21.0",
"prettier": "^2.1.2",
"typescript": "^4.2.3"
"typescript": "^5.1.0"
},
"author": "Daniel Ledda",
"license": "ISC"