Disconnecting the debugger (#534)

* Added 'close connection' button to close the connection to the specific websocket
* Decline any current Log when clicking the 'close connection' button

Co-authored-by: Andrea Jiang <jianga@ethz.ch>

frontend/index.css

@@ -82,6 +82,19 @@ button {
     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;
+}
+
 /* EditableText*/
 /* Style for spans with text content */
 .editable-text-span {

frontend/index.html

@@ -323,8 +323,25 @@
             }
         };
 
+        const closeConnection = () => {
+            console.log('Closing connection from button');
+            if (ws) {
+                declineIncomingLog();
+                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>