xP: indicate connection state

1 files changed, 23 insertions, 7 deletions

diff --git a/xP/public/xP.js b/xP/public/xP.js
index fd3a0ae..46b567a 100644
--- a/xP/public/xP.js
+++ b/xP/public/xP.js
@@ -24,8 +24,8 @@ class RelayRpc extends EventTarget {
 			}
 			// It's going to be code 1006 with no further info.
 			ws.onclose = event => {
-				reject()
 				this.ws = undefined
+				reject()
 			}
 		})
 	}
@@ -122,15 +122,25 @@ class RelayRpc extends EventTarget {
 
 // ---- Event processing -------------------------------------------------------
 
-// TODO: Probably reset state on disconnect, and indicate to user.
 let rpc = new RelayRpc(proxy)
-rpc.connect()
-	.then(result => {
-		rpc.send({command: 'Hello', version: 1})
-	})
 
 let buffers = new Map()
 let bufferCurrent = undefined
+let connecting = true
+rpc.connect().then(result => {
+	buffers.clear()
+	bufferCurrent = undefined
+	rpc.send({command: 'Hello', version: 1})
+	connecting = false
+	m.redraw()
+}).catch(error => {
+	connecting = false
+	m.redraw()
+})
+
+rpc.addEventListener('close', event => {
+	m.redraw()
+})
 
 rpc.addEventListener('BufferUpdate', event => {
 	let e = event.detail, b = buffers.get(e.bufferName)
@@ -374,8 +384,14 @@ let Input = {
 
 let Main = {
 	view: vnode => {
+		let state = "Connected"
+		if (connecting)
+			state = "Connecting..."
+		else if (rpc.ws === undefined)
+			state = "Disconnected"
+
 		return m('.xP', {}, [
-			m('.title', {}, "xP"),
+			m('.title', {}, `xP (${state})`),
 			m('.middle', {}, [m(BufferList), m(Buffer)]),
 			m('.status', {}, bufferCurrent),
 			m(Input),