collect and show mqtt state for nodes

src/mqtt.js

@@ -225,6 +225,36 @@ client.on("connect", () => {
 client.on("message", async (topic, message) => {
     try {
 
+        // handle node status
+        if(topic.includes("/stat/!")){
+            try {
+
+                // get node id and status
+                const nodeIdHex = topic.split("/").pop();
+                const mqttConnectionState = message.toString();
+
+                // convert node id hex to int value
+                const nodeId = BigInt('0x' + nodeIdHex.replaceAll("!", ""));
+
+                // update mqtt connection state for node
+                await prisma.node.updateMany({
+                    where: {
+                        node_id: nodeId,
+                    },
+                    data: {
+                        mqtt_connection_state: mqttConnectionState,
+                        mqtt_connection_state_updated_at: new Date(),
+                    },
+                });
+
+                // no need to continue with this mqtt message
+                return;
+
+            } catch(e) {
+                console.error(e);
+            }
+        }
+
         // decode service envelope
         const envelope = ServiceEnvelope.decode(message);
         if(!envelope.packet){

src/public/index.html

@@ -2175,9 +2175,19 @@
 
     function getTooltipContentForNode(node) {
 
+        // human friendly connection state
+        var mqttStatus = "???";
+        var mqttStatusLastUpdated = node.mqtt_connection_state_updated_at ? `(${moment(new Date(node.mqtt_connection_state_updated_at)).fromNow()})` : "";
+        if(node.mqtt_connection_state === "online"){
+            mqttStatus = `<span class="text-green-700">Online</span> ${mqttStatusLastUpdated}`;
+        } else if(node.mqtt_connection_state === "offline"){
+            mqttStatus = `<span class="text-red-700">Offline</span> ${mqttStatusLastUpdated}`;
+        }
+
         var tooltip = `<img class="mb-4 w-40 mx-auto" src="/images/devices/${node.hardware_model_name}.png" onerror="this.classList.add('hidden')"/>` +
             `<b>${node.long_name}</b>` +
             `<br/>Short Name: ${node.short_name}` +
+            `<br/>MQTT Status: ${mqttStatus}` +
             `<br/><br/>Role: ${node.role_name}` +
             `<br/>Hardware: ${node.hardware_model_name}`;