122 lines
4.2 KiB
TypeScript
122 lines
4.2 KiB
TypeScript
import TimezoneWidget from "./TimezoneWidget";
|
|
import DisplayModeWidget from "./DisplayModeWidget";
|
|
import TimerWidget from "./TimerWidget";
|
|
import ClimateChartWidget from "./ClimateChartWidget";
|
|
import {GridSize} from "./GridWidget";
|
|
import MessageOverlay from "./MessageOverlay";
|
|
import UIComponent from "./UIComponent";
|
|
import SelectDisplayModeWidget from "./SelectDisplayModeWidget";
|
|
import LegendWidget from "./LegendWidget";
|
|
import HelpModal from "./HelpModal";
|
|
import * as JSX from "../JSXFactory";
|
|
import {AppStore} from "../StateStore";
|
|
import HelpButtonImg from "../../assets/help-button.svg";
|
|
|
|
class AppUI extends UIComponent {
|
|
private timezoneWidget: TimezoneWidget;
|
|
private selectModeWidget: SelectDisplayModeWidget;
|
|
private displayModeSettingsWidget: DisplayModeWidget;
|
|
private timerWidget: TimerWidget;
|
|
private legendWidget: LegendWidget;
|
|
private chartWidget: ClimateChartWidget;
|
|
private element: HTMLDivElement = document.createElement("div");
|
|
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"}
|
|
src={HelpButtonImg}
|
|
className={"help-button button"}
|
|
onclick={() => AppStore().showHelp()}/>,
|
|
<h1>Ledda's Room Climate</h1>,
|
|
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) {
|
|
this.setupWidgets();
|
|
this.grid.append(
|
|
this.chartWidget.current(),
|
|
this.legendWidget.current(),
|
|
this.displayModeSettingsWidget.current(),
|
|
this.selectModeWidget.current(),
|
|
this.timerWidget.current(),
|
|
this.timezoneWidget.current(),
|
|
);
|
|
this.grid.className = "main-content-grid";
|
|
this.grid.style.gridTemplateRows = `repeat(${size.height}, 1fr)`;
|
|
this.grid.style.gridTemplateColumns = `repeat(${size.width}, 1fr)`;
|
|
}
|
|
|
|
private setupWidgets() {
|
|
this.displayModeSettingsWidget = new DisplayModeWidget({
|
|
row: "auto", col: 5, width: 1, height: 3,
|
|
});
|
|
this.selectModeWidget = new SelectDisplayModeWidget({
|
|
row: "auto", col: 5, width: 1, height: 2,
|
|
});
|
|
this.timezoneWidget = new TimezoneWidget({
|
|
row: "auto", col: 5, width: 1, height: 1,
|
|
});
|
|
this.timerWidget = new TimerWidget({
|
|
row: "auto", col: 5, width: 1, height: 2,
|
|
});
|
|
this.legendWidget = new LegendWidget({
|
|
row: "auto", col: 5, width: 1, height: 2,
|
|
});
|
|
this.chartWidget = new ClimateChartWidget({
|
|
row: 1, col: 1, width: 4, height: 10,
|
|
});
|
|
}
|
|
|
|
bootstrap(rootNode: string) {
|
|
document.getElementById(rootNode).append(this.element);
|
|
}
|
|
|
|
current(): HTMLElement {
|
|
return this.element;
|
|
}
|
|
}
|
|
|
|
export default AppUI;
|