Change action button color to green on connect

static/js/BLE.js

@@ -2,6 +2,8 @@ let socket = null;
 let characteristic = null;
 let prevRes = null;
 
+let btn = document.querySelector("#ble-connect");
+
 function delay(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -24,6 +26,11 @@ async function connect(props) {
   console.log("> Characteristic value changed event listener added");
   socket = io();
 
+  socket.addEventListener("open", () => {
+    btn.classList.remove("bg-red-600");
+    btn.classList.add("bg-green-600");
+  });
+
   socket.on("disconnect", (reason) => {
     if (reason === "io server disconnect") {
       // the disconnection was initiated by the server, you need to reconnect manually
@@ -100,7 +107,7 @@ function revsToRPM(prevRes, res) {
   return rpm;
 }
 
-document.querySelector("#ble-connect").addEventListener("click", () =>
+btn.addEventListener("click", () =>
   connect({
     onChange: parseCSC,
   }).catch(console.error)