Add 'close connection' button to close the connection to the specific…

… websocket
consensus-shipyard · Feb 15, 2024 · 5f2d77b · 5f2d77b
1 parent 1d36644
commit 5f2d77b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/frontend/index.css b/frontend/index.css
@@ -80,4 +80,17 @@ button {
     border-radius: 5px;
     margin-top: 5px;
     overflow: auto;
+}
+
+/* Close connection button*/
+.close-button {
+    background-color: #c0392b; /* Red color */
+    color: #fff; /* White text color */
+    border: none;
+    padding: 8px 12px;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 4px;
+    float: right; /* Float the button to the right */
+    margin: 5px;
 }
diff --git a/frontend/index.html b/frontend/index.html
@@ -127,8 +127,24 @@
             ws.send(webSocketResponseJSON);
         };
 
+        const closeConnection = () => {
+            console.log('Closing connection from button');
+            if (ws) {
+                ws.close()
+
+                // Send the response on the WebSocket
+                let webSocketResponse = {
+                    "Type": "close",
+                    "Value": ""
+                };
+                const webSocketResponseJSON = JSON.stringify(webSocketResponse);
+                ws.send(webSocketResponseJSON);
+            }
+        }
+
         return (
             <div id="sub-screen" className="sub-screen">
+                <button onClick={closeConnection} className="close-button">Close Connection</button>
                 <p className="websocket-console-title">
                     WebSocket Console for Port {port}:
                 </p>