fix(ui): better firmware update progress (#2755)

* fix(ui): better firmware update progress status * style: text bold
zwave-js · Oct 24, 2022 · d6c7867 · d6c7867
1 parent fe152d9
commit d6c7867
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 29 deletions.
diff --git a/lib/ZwaveClient.ts b/lib/ZwaveClient.ts
@@ -358,12 +358,6 @@ export class DriverNotReadyError extends Error {
 	}
 }
 
-export interface FwUpdateProgress {
-	sent: number
-	total: number
-	progress: number
-}
-
 export interface FwFile {
 	name: string
 	data: Buffer
@@ -422,7 +416,7 @@ export type ZUINode = {
 	healProgress?: string | undefined
 	minBatteryLevel?: number
 	batteryLevels?: { [key: string]: number }
-	firmwareUpdate?: FwUpdateProgress
+	firmwareUpdate?: FirmwareUpdateProgress
 	firmwareCapabilities?: FirmwareUpdateCapabilities
 	eventsQueue: NodeEvent[]
 }
@@ -3808,20 +3802,11 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 		) {
 			const node = this.nodes.get(zwaveNode.id)
 			if (node) {
-				const firmwareUpdate: FwUpdateProgress = {
-					sent: progress.sentFragments,
-					total: progress.totalFragments,
-					progress: Math.round(
-						(progress.sentFragments / progress.totalFragments) * 100
-					),
-				}
-
-				node.firmwareUpdate = firmwareUpdate
-
+				node.firmwareUpdate = progress
 				this.sendToSocket(socketEvents.nodeUpdated, {
 					id: node?.id,
-					firmwareUpdate,
-				})
+					firmwareUpdate: progress,
+				} as utils.DeepPartial<ZUINode>)
 			}
 
 			this.emit(
@@ -4658,6 +4643,48 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 
 		this.setPollInterval(valueId, interval)
 	}
+
+	/** Used for testing purposes */
+	private emulateFwUpdate(nodeId: number) {
+		setInterval(() => {
+			const fragmentsPerFile = 100
+			const totalFiles = 3
+			const totalFilesFragments = totalFiles * fragmentsPerFile
+			const progress = this.nodes.get(nodeId)?.firmwareUpdate || {
+				totalFiles,
+				currentFile: 1,
+				sentFragments: 0,
+				totalFragments: fragmentsPerFile,
+				progress: 0,
+			}
+
+			// random increment from 0 to 5
+			progress.sentFragments += Math.round(Math.random() * 5)
+			if (progress.sentFragments >= progress.totalFragments) {
+				progress.currentFile += 1
+				progress.sentFragments = 0
+			}
+
+			if (progress.currentFile > totalFiles) {
+				progress.currentFile = 1
+				progress.sentFragments = 0
+			}
+
+			progress.progress = Math.round(
+				(100 *
+					(fragmentsPerFile * (progress.currentFile - 1) +
+						progress.sentFragments)) /
+					totalFilesFragments
+			)
+
+			this._onNodeFirmwareUpdateProgress(
+				this.driver.controller.nodes.get(nodeId),
+				progress.sentFragments,
+				progress.totalFragments,
+				progress
+			)
+		}, 1000)
+	}
 }
 
 export default ZwaveClient
diff --git a/src/components/nodes-table/index.vue b/src/components/nodes-table/index.vue
@@ -230,16 +230,23 @@
 		</template>
 		<template v-slot:[`item.firmwareVersion`]="{ item }">
 			<div style="text-align: center">
-				<v-progress-circular
-					v-if="item.firmwareUpdate"
-					:value="item.firmwareUpdate.progress"
-					size="40"
-					color="primary"
-				>
-					<span class="caption">{{
-						item.firmwareUpdate.progress
-					}}</span>
-				</v-progress-circular>
+				<div v-if="item.firmwareUpdate">
+					<v-progress-circular
+						:value="item.firmwareUpdate.progress"
+						size="40"
+						class="mt-1"
+						color="primary"
+					>
+						<span class="caption">{{
+							item.firmwareUpdate.progress
+						}}</span>
+					</v-progress-circular>
+					<p class="caption font-weight-bold mb-0 mt-1">
+						{{ item.firmwareUpdate.currentFile }}/{{
+							item.firmwareUpdate.totalFiles
+						}}: {{ getProgress(item) }}%
+					</p>
+				</div>
 				<div
 					style="white-space: pre"
 					v-text="

diff --git a/src/components/nodes-table/nodes-table.js b/src/components/nodes-table/nodes-table.js
@@ -197,6 +197,15 @@ export default {
 		}
 	},
 	methods: {
+		getProgress(node) {
+			return node.firmwareUpdate
+				? Math.round(
+						(node.firmwareUpdate.sentFragments /
+							node.firmwareUpdate.totalFragments) *
+							100
+				  )
+				: null
+		},
 		toggleExpanded(item) {
 			this.expanded = this.expanded.includes(item)
 				? this.expanded.filter((i) => i !== item)