feat: workl in progress with UI

api/app.ts

@@ -628,10 +628,17 @@ function setupSocket(server: HttpServer) {
 		// Server: https://socket.io/docs/v4/server-application-structure/#all-event-handlers-are-registered-in-the-indexjs-file
 		// Client: https://socket.io/docs/v4/client-api/#socketemiteventname-args
 		socket.on(inboundEvents.init, (data, cb = noop) => {
+			let state = {} as any
+
 			if (gw.zwave) {
-				const state = gw.zwave.getState()
-				cb(state)
+				state = gw.zwave.getState()
+			}
+
+			if (zniffer) {
+				state.zniffer = zniffer.status()
 			}
+
+			cb(state)
 		})
 
 		socket.on(

api/lib/SocketEvents.ts

@@ -20,7 +20,7 @@ export enum socketEvents {
 	validateDSK = 'VALIDATE_DSK',
 	inclusionAborted = 'INCLUSION_ABORTED',
 	znifferFrame = 'ZNIFFER_FRAME',
-	znifferError = 'ZNIFFER_ERROR',
+	znifferState = 'ZNIFFER_STATE',
 }
 
 // events from client ---> server

api/lib/ZnifferManager.ts

@@ -66,12 +66,25 @@ export default class ZnifferManager extends TypedEventEmitter<ZnifferManagerEven
 
 	private error: string
 
+	private _started = false
+
+	get started() {
+		return this._started
+	}
+
+	set started(value: boolean) {
+		this._started = value
+		this.onStateChange()
+	}
+
 	constructor(config: ZnifferConfig, socket: SocketServer) {
 		super()
 
 		this.config = config
 		this.socket = socket
 
+		this.started = false
+
 		if (!config.enabled) {
 			logger.info('Zniffer is DISABLED')
 			return
@@ -105,7 +118,24 @@ export default class ZnifferManager extends TypedEventEmitter<ZnifferManagerEven
 	private onError(error: Error) {
 		logger.error('Zniffer error:', error)
 		this.error = error.message
-		this.socket.emit(socketEvents.znifferError, error)
+		this.onStateChange()
+	}
+
+	private onStateChange() {
+		this.socket.emit(socketEvents.znifferState, this.status())
+	}
+
+	private checkReady() {
+		if (!this.config.enabled || !this.zniffer) {
+			throw new Error('Zniffer is not initialized')
+		}
+	}
+
+	public status() {
+		return {
+			error: this.error,
+			started: this.started,
+		}
 	}
 
 	private ccToLogRecord(commandClass: CommandClass): Record<string, any> {
@@ -134,9 +164,18 @@ export default class ZnifferManager extends TypedEventEmitter<ZnifferManagerEven
 	}
 
 	public async start() {
+		this.checkReady()
+
+		if (this.started) {
+			logger.info('Zniffer already started')
+			return
+		}
+
 		logger.info('Starting...')
 		await this.zniffer.start()
 
+		this.started = true
+
 		logger.info('ZnifferManager started')
 
 		this.zniffer.on('frame', (frame) => {
@@ -173,13 +212,24 @@ export default class ZnifferManager extends TypedEventEmitter<ZnifferManagerEven
 	}
 
 	public async stop() {
+		this.checkReady()
+
+		if (!this.started) {
+			logger.info('Zniffer is already stopped')
+			return
+		}
+
 		logger.info('Stopping...')
 		await this.zniffer.stop()
 
+		this.started = false
+
 		logger.info('ZnifferManager stopped')
 	}
 
 	public async saveCaptureToFile() {
+		this.checkReady()
+
 		const filePath = ZNIFFER_CAPTURE_FILE.replace(
 			'%DATE%',
 			new Date().toISOString(),

src/App.vue

@@ -628,6 +628,7 @@ export default {
 			'init',
 			'initNodes',
 			'setAppInfo',
+			'setZnifferState',
 			'onUserLogged',
 			'updateValue',
 			'setValue',
@@ -994,6 +995,7 @@ export default {
 		},
 		onInit(data) {
 			this.setAppInfo(data.info)
+			this.setZnifferState(data.zniffer)
 			this.setControllerStatus({
 				error: data.error,
 				status: data.cntStatus,

src/components/custom/Multipane.vue

@@ -0,0 +1,186 @@
+<template>
+	<div
+		:class="classnames"
+		:style="{ cursor, userSelect }"
+		@mousedown="onMouseDown"
+		@touchstart="onMouseDown"
+	>
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+const LAYOUT_HORIZONTAL = 'horizontal'
+const LAYOUT_VERTICAL = 'vertical'
+
+export default {
+	name: 'multipane',
+
+	props: {
+		layout: {
+			type: String,
+			default: LAYOUT_VERTICAL,
+		},
+	},
+
+	data() {
+		return {
+			isResizing: false,
+		}
+	},
+
+	computed: {
+		classnames() {
+			return [
+				'multipane',
+				'layout-' + this.layout.slice(0, 1),
+				this.isResizing ? 'is-resizing' : '',
+			]
+		},
+		cursor() {
+			return this.isResizing
+				? this.layout == LAYOUT_VERTICAL
+					? 'col-resize'
+					: 'row-resize'
+				: ''
+		},
+		userSelect() {
+			return this.isResizing ? 'none' : ''
+		},
+	},
+
+	methods: {
+		getPageXY(e) {
+			return e.touches?.[0] || e
+		},
+		onMouseDown(e) {
+			const resizer = e.target
+			if (
+				resizer.className &&
+				resizer.className.match('multipane-resizer')
+			) {
+				let { $el: container, layout } = this
+				const { pageX: initialPageX, pageY: initialPageY } =
+					this.getPageXY(e)
+
+				let pane = resizer.previousElementSibling
+				let {
+					offsetWidth: initialPaneWidth,
+					offsetHeight: initialPaneHeight,
+				} = pane
+
+				let usePercentage = !!(pane.style.width + '').match('%')
+
+				const { addEventListener, removeEventListener } = window
+
+				const resize = (initialSize, offset = 0) => {
+					if (layout == LAYOUT_VERTICAL) {
+						let containerWidth = container.clientWidth
+						let paneWidth = initialSize + offset
+
+						return (pane.style.width = usePercentage
+							? (paneWidth / containerWidth) * 100 + '%'
+							: paneWidth + 'px')
+					}
+
+					if (layout == LAYOUT_HORIZONTAL) {
+						let containerHeight = container.clientHeight
+						let paneHeight = initialSize + offset
+
+						return (pane.style.height = usePercentage
+							? (paneHeight / containerHeight) * 100 + '%'
+							: paneHeight + 'px')
+					}
+				}
+
+				// This adds is-resizing class to container
+				this.isResizing = true
+
+				// Resize once to get current computed size
+				let size = resize()
+
+				// Trigger paneResizeStart event
+				this.$emit('paneResizeStart', pane, resizer, size)
+
+				const onMouseMove = (e) => {
+					const { pageX, pageY } = this.getPageXY(e)
+					size =
+						layout == LAYOUT_VERTICAL
+							? resize(initialPaneWidth, pageX - initialPageX)
+							: resize(initialPaneHeight, pageY - initialPageY)
+
+					this.$emit('paneResize', pane, resizer, size)
+				}
+
+				const onMouseUp = () => {
+					// Run resize one more time to set computed width/height.
+					size =
+						layout == LAYOUT_VERTICAL
+							? resize(pane.clientWidth)
+							: resize(pane.clientHeight)
+
+					// This removes is-resizing class to container
+					this.isResizing = false
+
+					removeEventListener('mousemove', onMouseMove)
+					removeEventListener('mouseup', onMouseUp)
+
+					removeEventListener('touchmove', onMouseMove)
+					removeEventListener('touchend', onMouseUp)
+
+					this.$emit('paneResizeStop', pane, resizer, size)
+				}
+
+				addEventListener('mousemove', onMouseMove)
+				addEventListener('mouseup', onMouseUp)
+
+				addEventListener('touchmove', onMouseMove)
+				addEventListener('touchend', onMouseUp)
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+.multipane {
+	display: flex;
+
+	&.layout-h {
+		flex-direction: column;
+	}
+
+	&.layout-v {
+		flex-direction: row;
+	}
+}
+
+.multipane > div {
+	position: relative;
+	z-index: 1;
+}
+
+.multipane-resizer {
+	display: block;
+	position: relative;
+	z-index: 2;
+	margin: 0;
+	background-color: #ccc;
+}
+
+.layout-h > .multipane-resizer {
+	width: 100%;
+	height: 10px;
+	margin-top: -10px;
+	top: 5px;
+	cursor: row-resize;
+}
+
+.layout-v > .multipane-resizer {
+	width: 10px;
+	height: 100%;
+	margin-left: -10px;
+	left: 5px;
+	cursor: col-resize;
+}
+</style>

src/components/custom/MultipaneResizer.vue

@@ -0,0 +1,3 @@
+<template>
+	<div class="multipane-resizer"><slot></slot></div>
+</template>

src/lib/SocketEvents.js

@@ -20,7 +20,7 @@ export const socketEvents = Object.freeze({
 	validateDSK: 'VALIDATE_DSK',
 	inclusionAborted: 'INCLUSION_ABORTED',
 	znifferFrame: 'ZNIFFER_FRAME',
-	znifferError: 'ZNIFFER_ERROR',
+	znifferState: 'ZNIFFER_STATE',
 })
 
 // events from client ---> server

src/stores/base.js

@@ -127,6 +127,10 @@ const useBaseStore = defineStore('base', {
 			controllerStatus: 'Unknown',
 			newConfigVersion: undefined,
 		},
+		znifferState: {
+			error: '',
+			started: false,
+		},
 		ui: {
 			darkMode: settings.load('dark', false),
 			navTabs: settings.load('navTabs', false),
@@ -189,6 +193,10 @@ const useBaseStore = defineStore('base', {
 			this.appInfo.serverVersion = data.serverVersion
 			this.appInfo.newConfigVersion = data.newConfigVersion
 		},
+		setZnifferState(data) {
+			this.znifferState.error = data?.error || ''
+			this.znifferState.started = data?.started || false
+		},
 		setValue(valueId) {
 			const toReplace = this.getValue(valueId)
 			const node = this.getNode(valueId.nodeId)