Added basic control panel

2026-03-11 16:46:06 +01:00
parent 7df210aaf2
commit c4eedfff1e
105 changed files with 21923 additions and 958 deletions
--- a/frontend/views/control/ts/checklist.ts
+++ b/frontend/views/control/ts/checklist.ts
@@ -0,0 +1,146 @@
+import { Main } from './main';
+import { MorphFeature } from 'morphux';
+
+export class Checklist {
+	private _Main: Main;
+
+	Rows = {
+		CAMERAPC: document.querySelector(
+			`.ntsh-checklist-row[status="CAMERAPC"]`,
+		) as HTMLDivElement,
+		CAMERAPROCESS: document.querySelector(
+			`.ntsh-checklist-row[status="CAMERAPROCESS"]`,
+		) as HTMLDivElement,
+		CAMERAUNITYSTREAM: document.querySelector(
+			`.ntsh-checklist-row[status="CAMERAUNITYSTREAM"]`,
+		) as HTMLDivElement,
+		UNITYBUILD: document.querySelector(
+			`.ntsh-checklist-row[status="UNITYBUILD"]`,
+		) as HTMLDivElement,
+		REPLAYFUNCTION: document.querySelector(
+			`.ntsh-checklist-row[status="REPLAYFUNCTION"]`,
+		) as HTMLDivElement,
+	};
+	FullReboot: HTMLDivElement = document.querySelector(
+		'.ntsh-fullreboot-button',
+	);
+
+	constructor(Main: Main) {
+		this._Main = Main;
+
+		this.registerListeners();
+	}
+
+	update(status: Status) {
+		this.updateRow(this.Rows.CAMERAPC, status.CAMERAPC);
+		this.updateRow(this.Rows.CAMERAPROCESS, status.CAMERAPROCESS);
+		this.updateRow(this.Rows.CAMERAUNITYSTREAM, status.CAMERAUNITYSTREAM);
+		this.updateRow(this.Rows.UNITYBUILD, status.UNITYBUILD);
+		this.updateRow(this.Rows.REPLAYFUNCTION, status.REPLAYFUNCTION);
+		console.log('Updated checklist:', status);
+	}
+
+	updateRow(row: HTMLDivElement, state: StateEntry) {
+		const status: HTMLDivElement = row.querySelector(
+			'.ntsh-checklist-row-status',
+		);
+		const message: HTMLDivElement = row.querySelector('p');
+
+		const startButton: HTMLDivElement = row.querySelector(
+			'.ntsh-checklist-row-button.start',
+		);
+		const stopButton: HTMLDivElement = row.querySelector(
+			'.ntsh-checklist-row-button.stop',
+		);
+		const rebootButton: HTMLDivElement = row.querySelector(
+			'.ntsh-checklist-row-button.reboot',
+		);
+
+		status.classList.remove('RED', 'GREEN', 'YELLOW', 'GRAY');
+		status.classList.add(state.state);
+
+		message.innerText = state.message;
+
+		startButton.style.display = state.buttons?.start ? 'block' : 'none';
+		stopButton.style.display = state.buttons?.stop ? 'block' : 'none';
+		rebootButton.style.display = state.buttons?.reboot ? 'block' : 'none';
+	}
+
+	private registerListeners() {
+		this.FullReboot.onclick = () => {
+			MorphFeature.Confirm(
+				{
+					title: 'Full Reboot',
+					message: 'Are you sure you want to perform a full reboot?',
+				},
+				(state) => {
+					if (!state) return;
+					this._Main.socket.emit('status', 'fullreboot');
+				},
+			);
+		};
+
+		for (const key in this.Rows) {
+			const row = this.Rows[key];
+
+			const startButton: HTMLDivElement = row.querySelector(
+				'.ntsh-checklist-row-button.start',
+			);
+			startButton.onclick = () =>
+				MorphFeature.Confirm(
+					{
+						title: 'Start',
+						message: 'Are you sure you want to start?',
+					},
+					(state) => {
+						if (!state) return;
+						this._Main.socket.emit('status', 'start', key);
+					},
+				);
+
+			const stopButton: HTMLDivElement = row.querySelector(
+				'.ntsh-checklist-row-button.stop',
+			);
+			stopButton.onclick = () =>
+				MorphFeature.Confirm(
+					{
+						title: 'Stop',
+						message: 'Are you sure you want to stop?',
+					},
+					(state) => {
+						if (!state) return;
+						this._Main.socket.emit('status', 'stop', key);
+					},
+				);
+
+			const rebootButton: HTMLDivElement = row.querySelector(
+				'.ntsh-checklist-row-button.reboot',
+			);
+			rebootButton.onclick = () =>
+				MorphFeature.Confirm(
+					{
+						title: 'Reboot',
+						message: 'Are you sure you want to reboot?',
+					},
+					(state) => {
+						if (!state) return;
+						this._Main.socket.emit('status', 'reboot', key);
+					},
+				);
+		}
+	}
+}
+
+interface Status {
+	CAMERAPC: StateEntry;
+	CAMERAPROCESS: StateEntry;
+	CAMERAUNITYSTREAM: StateEntry;
+	UNITYBUILD: StateEntry;
+	REPLAYFUNCTION: StateEntry;
+}
+
+interface StateEntry {
+	state: 'GREEN' | 'RED' | 'YELLOW' | 'GRAY';
+	message: string;
+	buttons?: { reboot?: boolean; start?: boolean; stop?: boolean };
+}