Feat/watch ip change on cards (#80)

Co-authored-by: Julian Waller <git@julusian.co.uk>
Co-authored-by: arc-alex <ac@omnivox.dk>

src/cards.ts

@@ -76,7 +76,6 @@ export class CardGenerator {
 	}
 }
 
-//#TODO: make llocal ip reactive
 function getIPAddress() {
 	for (const devName in networkInterfaces()) {
 		const iface = networkInterfaces()[devName]

src/devices.ts

@@ -81,23 +81,24 @@ export class DeviceManager {
 		})
 
 		this.statusString = 'Connecting'
+		this.showStatusCard(this.statusString, true)
 
 		this.scanDevices()
 
 		client.on('connected', () => {
 			console.log('connected')
 
-			this.showStatusCard('Connected')
+			this.showStatusCard('Connected', false)
 
 			this.registerAll()
 		})
 		client.on('disconnected', () => {
 			console.log('disconnected')
 
-			this.showStatusCard('Disconnected')
+			this.showStatusCard('Connecting', true)
 		})
 		client.on('ipChange', () => {
-			this.showStatusCard()
+			this.showStatusCard('Connecting', true)
 		})
 
 		client.on(
@@ -412,13 +413,31 @@ export class DeviceManager {
 		}
 	}
 
-	private showStatusCard(status?: string): void {
-		if (status !== undefined) {
-			this.statusString = status
+	private statusCardTimer: NodeJS.Timer | undefined
+	private showStatusCard(message: string, runLoop: boolean): void {
+		this.statusString = message
+
+		if (this.statusCardTimer) {
+			clearInterval(this.statusCardTimer)
+			delete this.statusCardTimer
+		}
+
+		if (runLoop) {
+			let dots = ''
+			this.statusCardTimer = setInterval(() => {
+				dots += ' .'
+				if (dots.length > 7) dots = ''
+
+				this.doDrawStatusCard(message + dots)
+			}, 1000)
 		}
 
+		this.doDrawStatusCard(message)
+	}
+
+	private doDrawStatusCard(message: string) {
 		for (const dev of this.devices.values()) {
-			dev.showStatus(this.client.host, this.statusString)
+			dev.showStatus(this.client.host, message)
 		}
 	}
 }

yarn.lock

@@ -4954,4 +4954,4 @@ zx@^7.2.3:
     ps-tree "^1.2.0"
     webpod "^0"
     which "^3.0.0"
-    yaml "^2.2.2"
+    yaml "^2.2.2"