Async debug mode (#535)

Add the possibility to automatically accept
the incoming logs from the MIR node.

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

frontend/index.css

@@ -105,4 +105,82 @@ button {
 .editable-text-span:empty {
     padding-left: 10px;
     padding-right: 10px;
-}
+}
+
+/* Sync/Async connection switch */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 90px;
+    height: 34px;
+}
+
+.switch input {display:none;}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ca2222;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #2ab934;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(55px);
+    -ms-transform: translateX(55px);
+    transform: translateX(55px);
+}
+
+.on
+{
+    display: none;
+}
+
+.on, .off
+{
+    color: white;
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 50%;
+    font-size: 14px;
+    font-family: Verdana, sans-serif;
+}
+
+input:checked+ .slider .on
+{display: block;}
+
+input:checked + .slider .off
+{display: none;}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;}

frontend/index.html

@@ -28,6 +28,7 @@
         const [editableText, setEditableText] = useState('');
         const [errors, setErrors] = useState([]);
         const [loggedMessages, setLoggedMessages] = useState([]);
+        const [syncConnection, setSyncConnection] = useState(true);
         let incomingMessageJSON= useRef({});
 
         // After the element rendering, connect to the given websocket port
@@ -60,6 +61,19 @@
             }
         }, [incomingMessage]);
 
+        // Need a different useEffect, due to the different dependency set
+        useEffect(() => {
+            if (ws) {
+                ws.addEventListener('message', handleMessageWebSocket);
+            }
+
+            return () => {
+                if (ws) {
+                    ws.removeEventListener('message', handleMessageWebSocket);
+                }
+            };
+        }, [syncConnection]);
+
         function handleOpenWebSocket(){
             const message = `WebSocket connection for Port ${port} established.`
             setLoggedMessages(prevMessages => [...prevMessages, message]);
@@ -71,8 +85,15 @@
 
         function handleMessageWebSocket(event){
             const message = decomposeJSON(event.data);
-            console.log("currently in sync and waiting", port);
-            setIncomingMessage(message); // This will launch the useEffect dependent on IncomingMessage
+            if( syncConnection === true ){
+                // Sync mode
+                console.log("currently in sync and waiting", port);
+                setIncomingMessage(message); // This will launch the useEffect dependent on IncomingMessage
+            }
+            else {
+                // Async mode
+                acceptAsyncIncomingLog(message);
+            }
         }
 
         function handleErrorWebSocket(event) {
@@ -128,6 +149,24 @@
             clearIncomingLogMessages();
         };
 
+        const acceptAsyncIncomingLog = (message) => {
+            console.log("new message async accepted on port: ", port);
+
+            // Accept ORIGINAL Log (without modifications and automatically)
+            setLoggedMessages(prevMessages => [...prevMessages, message]);
+
+            // Send the response on the WebSocket
+            let webSocketResponse = {
+                "Type": "accept",
+                "Value": ""
+            };
+            const webSocketResponseJSON = JSON.stringify(webSocketResponse);
+            ws.send(webSocketResponseJSON);
+
+            // Clear the input
+            clearIncomingLogMessages();
+        };
+
         const replaceIncomingLog = () => {
             if(incomingMessage === ""){
                 return;
@@ -339,8 +378,24 @@
             }
         }
 
+        const changeSyncronization = () => {
+            console.log("changing syncronization of port: ", port);
+            if (syncConnection) {
+                // Changing to Async mode
+                acceptIncomingLog(); // Accept also the existing incoming log
+            }
+            setSyncConnection(!syncConnection);
+        }
+
         return (
             <div id="sub-screen" className="sub-screen">
+                <label className="switch">
+                    <input type="checkbox" id="sync-switch-input" checked={syncConnection} onChange={changeSyncronization} />
+                    <div className="slider round">
+                        <span className="on">Sync</span>
+                        <span className="off">Async</span>
+                    </div>
+                </label>
                 <button onClick={closeConnection} className="close-button">Close Connection</button>
                 <p className="websocket-console-title">
                     WebSocket Console for Port {port}: