Merge pull request #114 from oss-slu/websocket-switch-ui

Replace full-width WebSocket banner with toggle switch

Author: git-voo

frontend/src/App.js

@@ -7,6 +7,7 @@ import StanceTimeChart from './StanceTimeChart';
 import StanceTimeGraph from './StanceTimeGraph';
 import ResearcherToolbar from './components/ResearcherToolbar';
 import PatientView from './PatientView';
+import WebSocketSwitch from './components/WebSocketSwitch';
 
 function App() {
   const [currentView, setCurrentView] = useState('StanceTimeTreadmill');
@@ -20,8 +21,8 @@ function App() {
     } 
   });
 
-  const [isWebSocketConnected, setIsWebSocketConnected] = useState(false);
-  const [webSocketError, setWebSocketError] = useState(null);
+ const [isWebSocketConnected, setIsWebSocketConnected] = useState(false);
+ const [webSocketError, setWebSocketError] = useState(null);
 
   const [movingAverageFactor, setMovingAverageFactor] = useState(0);
   const [threshold, setThreshold] = useState(0);
@@ -143,12 +144,7 @@ function App() {
 
   return (
     <div className="App">
-      <div className={`WebSocketBanner ${isWebSocketConnected ? 'connected' : 'disconnected'}`}>
-        {isWebSocketConnected
-          ? "Connection established"
-          : webSocketError || "Waiting for WebSocket connection..."}
-        {!isWebSocketConnected && <button onClick={reconnectWebsocket}>Reconnect</button>}
-      </div>
+      <WebSocketSwitch isConnected={isWebSocketConnected} reconnect={reconnectWebsocket} />
       <Navigation setCurrentView={setCurrentView}/>
       {patientWindow && <PatientView borderColor={borderColor} patientWindow={patientWindow} view={views[currentPatientView]}/>}
       <div className="main-layout">

frontend/src/components/WebSocketSwitch.css

@@ -0,0 +1,42 @@
+.websocket-toggle {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: 1000;
+  }
+  
+  .websocket-toggle input[type="checkbox"] {
+    display: none;
+  }
+  
+  .switch-track {
+    width: 44px;
+    height: 24px;
+    border-radius: 9999px;
+    position: relative;
+    transition: background-color 0.3s;
+  }
+  
+  .switch-track.connected {
+    background-color: #22c55e; /* green */
+  }
+  
+  .switch-track.disconnected {
+    background-color: #ef4444; /* red */
+  }
+  
+  .switch-thumb {
+    width: 16px;
+    height: 16px;
+    background: white;
+    border-radius: 50%;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    transition: transform 0.3s;
+  }
+  
+  input[type="checkbox"]:checked + .switch-track .switch-thumb {
+    transform: translateX(20px);
+  }
+  

frontend/src/components/WebSocketSwitch.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import './WebSocketSwitch.css';
+
+const WebSocketSwitch = ({ isConnected, reconnect }) => {
+  const handleToggle = () => {
+    if (!isConnected) {
+      reconnect();
+    }
+  };
+
+  return (
+    <div className="websocket-toggle" title={isConnected ? 'Connected' : 'Disconnected'}>
+      <label>
+        <input type="checkbox" checked={isConnected} onChange={handleToggle} />
+        <div className={`switch-track ${isConnected ? 'connected' : 'disconnected'}`}>
+          <div className="switch-thumb"></div>
+        </div>
+      </label>
+    </div>
+  );
+};
+
+export default WebSocketSwitch;