Initial commit

frontend/views/dashboard/ts/tabController.ts

@@ -0,0 +1,88 @@
+import { MorphFeature } from 'morphux';
+import { Main } from './main';
+
+export type Tabs = 'dashboard' | 'calibration' | 'cameralogs' | 'unitylogs';
+export class TabController {
+	private _Main: Main;
+
+	container: HTMLDivElement = document.querySelector('.ntsh_tabs');
+
+	currentTabId: Tabs;
+
+	constructor(main: Main) {
+		this._Main = main;
+
+		this.registerNavigationListener();
+	}
+
+	private tabListeners: Map<Tabs, (visible: boolean) => void> = new Map();
+	registerListener(tabId: Tabs, callback: (visible: boolean) => void) {
+		if (this.tabListeners.has(tabId))
+			throw new Error(
+				`Listener for tab id ${tabId} has already been registered!`
+			);
+
+		this.tabListeners.set(tabId, callback);
+		callback(this.currentTabId == tabId);
+	}
+
+	async showTab(tabId: Tabs) {
+		if (this.currentTabId == tabId) return;
+
+		if (
+			tabId !== 'dashboard' &&
+			!document.body.classList.contains('ntsh_service')
+		) {
+			const confirmed = await MorphFeature.Confirm({
+				title: 'Service Mode Required',
+				message: `You need to be in service mode to access tab ${tabId}, switch to Service Mode now?`,
+			});
+			if (!confirmed) return this.showTab('dashboard');
+
+			const succeed = await this._Main.MenuBar.toggleServiceMode(true);
+			if (!succeed) return this.showTab('dashboard');
+		}
+
+		this._Main.MenuBar.menubar.setSelected(tabId);
+
+		if (this.tabListeners.has(this.currentTabId))
+			this.tabListeners.get(this.currentTabId)(false);
+		if (this.tabListeners.has(tabId)) this.tabListeners.get(tabId)(true);
+		this.currentTabId = tabId;
+
+		this.container
+			.querySelectorAll('.ntsh_tab')
+			.forEach((tab) => tab.classList.remove('ntsh_tab-visible'));
+
+		this.container
+			.querySelector(`.ntsh_tab[tabid="${tabId}"]`)
+			.classList.add('ntsh_tab-visible');
+
+		window.history.pushState(
+			{ tab: tabId },
+			'',
+			`/${tabId}${window.location.search}`
+		);
+
+		var tabName = {
+			dashboard: 'Dashboard',
+			calibration: 'Calibration',
+			cameralogs: 'Camera Logs',
+			unitylogs: 'Unity Logs',
+		}[tabId];
+		document.title = `NTSH Control - ${tabName}`;
+	}
+
+	private registerNavigationListener() {
+		window.addEventListener('popstate', (event) => {
+			const state = event.state;
+			if (state && state.tab) this.showTab(state.tab);
+		});
+
+		var startTab = window.location.pathname
+			.replace('/', '')
+			.split('/')
+			.shift() as Tabs;
+		this.showTab(startTab.length > 0 ? startTab : 'dashboard');
+	}
+}