auto refresh every 5 seconds

Author: Rafal Zarajczyk

README.md

@@ -2,9 +2,9 @@
 
 A MQTT client which provides a web-based tree-like visualization of MQTT topics.
 
-## Usage in docker-compose
+## Deployment using docker-compose
 
-**docker-compose.yaml:**
+#### docker-compose.yaml
 ```yaml
 version: '3.2'
 services:
@@ -16,11 +16,19 @@ services:
     network_mode: host
 ```
 
-**mqtt-tree.yaml**
+#### mqtt-tree.yaml
 ```yaml
+port: 8075
 mqtt:
   broker: <<mqtt address>
   port: <<mqtt port>>
   username: <<mqtt username>>
   password: <<mqtt password>>
 ```
+
+### Availability:
+
+The web interface is available at the specified port:
+```
+http://localhost:8075
+```

src/main/main.py

@@ -6,6 +6,8 @@
 
 config, logger, timezone = start_service()
 
+PORT = config.get('port', 8075)
+
 MQTT_HOST = config['mqtt']['broker']
 MQTT_PORT = config['mqtt']['port']
 MQTT_USER = config['mqtt']['username']
@@ -46,7 +48,7 @@ def show_tree(params):
     StaticResources('/', './src/web')
 ]
 
-server = http_server(8075, ACTIONS)
+server = http_server(PORT, ACTIONS)
 try:
     server.start(block_caller_thread=True)
 finally:

src/web/index.js

@@ -1,64 +1,68 @@
-window.addEventListener('DOMContentLoaded', (event) => {
-	document.querySelector('#copy-value-to-clipboard').addEventListener('click', event => {
-		navigator.clipboard.writeText(document.querySelector('#node-value').innerText)
-		M.toast({html: 'Content copied!', displayLength: 1000})
-	})
-	document.querySelector('#copy-name-to-clipboard').addEventListener('click', event => {
-		navigator.clipboard.writeText(document.querySelector('#node-name').innerText)
-		M.toast({html: 'Content copied!', displayLength: 1000})
-	})
-	document.querySelector('#copy-path-to-clipboard').addEventListener('click', event => {
-		navigator.clipboard.writeText(document.querySelector('#node-path').innerText)
-		M.toast({html: 'Content copied!', displayLength: 1000})
+function addCopyToClipboardListener(triggerSelector, textSourceSelector) {
+	document.querySelector(triggerSelector).addEventListener('click', event => {
+		const text = document.querySelector(textSourceSelector).innerText
+		navigator.clipboard.writeText(text)
+		M.toast({html: `Content copied: ${text}`, displayLength: 1000})
 	})
+}
 
-	const CACHE = new Map()
+const CACHE = new Map()
 
-	function shorten(response) {
-		return response.map(it => {
-			CACHE.set(it.id, it)
-			if (it.value != null) {
-				const MAX_LENGTH = 60
-				const truncatedValue = it.value.length > MAX_LENGTH + 3 ? `${it.value.substring(0, MAX_LENGTH)}...` : it.value
-				it.text = `${(it.name)} <b>${truncatedValue}</b>`
-			} else {
-				it.text = it.name
-			}
-			it.children = shorten(it.children)
-			return it
-		})
-	}
-
-	function renderValue(value) {
-		if (!value) {
-			return "<i>no value</i>"
-		}
-		try {
-			const parsedJson = JSON.parse(value)
-			return JSON.stringify(parsedJson, null, 2)
+function parse(response) {
+	return response.map(it => {
+		CACHE.set(it.id, it)
+		if (it.value != null) {
+			const MAX_LENGTH = 60
+			const truncatedValue = it.value.length > MAX_LENGTH + 3 ? `${it.value.substring(0, MAX_LENGTH)}...` : it.value
+			it.text = `${(it.name)} <b>${truncatedValue}</b>`
 		}
-		catch (e) {
-			return value
+		else {
+			it.text = it.name
 		}
+		it.children = parse(it.children)
+		return it
+	})
+}
+
+function renderValue(value) {
+	if (!value) {
+		return "<i>no value</i>"
+	}
+	try {
+		const parsedJson = JSON.parse(value)
+		return JSON.stringify(parsedJson, null, 2)
 	}
+	catch (e) {
+		return value
+	}
+}
 
+function refresh() {
 	fetch('/tree')
 			.then(response => response.json())
 			.then(response => {
 				CACHE.clear()
 				console.log(response)
-				response = shorten(response)
-				$('#tree').jstree({
-					'core': {
-						'data': response
-					}
-				}).on('changed.jstree', (e, data) => {
-					console.log(data)
-					const id = data.node.id
-					const node = CACHE.get(id)
-					document.querySelector('#node-value').innerHTML = renderValue(node.value)
-					document.querySelector('#node-name span').innerHTML = node.name
-					document.querySelector('#node-path span').innerHTML = node.path
-				})
+				const parsed = parse(response)
+				$('#tree').jstree(true).settings.core.data = parsed
+				$('#tree').jstree(true).refresh(true)
 			})
+}
+
+window.addEventListener('DOMContentLoaded', (event) => {
+	addCopyToClipboardListener('#copy-value-to-clipboard', '#node-value');
+	addCopyToClipboardListener('#copy-name-to-clipboard', '#node-name span');
+	addCopyToClipboardListener('#copy-path-to-clipboard', '#node-path span');
+	$('#tree').jstree({core: {data: []}}).on('changed.jstree', (e, data) => {
+		console.log(data)
+		if (data.action == 'select_node') {
+			const id = data.node.id
+			const node = CACHE.get(id)
+			document.querySelector('#node-value').innerHTML = renderValue(node.value)
+			document.querySelector('#node-name span').innerHTML = node.name
+			document.querySelector('#node-path span').innerHTML = node.path
+		}
+	})
+	refresh()
+	setInterval(refresh, 5000)
 })