Merge pull request #60 from oss-slu/bugfix/general-cleanup

Cleanup Step_Time_Biofeedback
oss-slu · Nov 28, 2024 · eade2c5 · eade2c5
2 parents 0071bdb + 57ac13d
commit eade2c5
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 28 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 95vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -24,6 +24,24 @@
   color: white;
 }
 
+.WebSocketBanner {
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.WebSocketBanner.connected {
+  background-color: green;
+}
+
+.WebSocketBanner.disconnected {
+  background-color: red;
+}
+
 .App-link {
   color: #61dafb;
 }

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -59,34 +59,16 @@ function App() {
 return (
     <div className="App">
       {/* WebSocket Status Banner */}
-      <div
-        style={{
-          width: '100%',
-          padding: '10px',
-          backgroundColor: isWebSocketConnected ? 'green' : 'red',
-          color: 'white',
-          textAlign: 'center',
-          position: 'fixed', // Ensure it stays at the top
-          top: 0,
-          left: 0,
-          zIndex: 1000,
-        }}
-      >
+      <div className={`WebSocketBanner ${isWebSocketConnected ? 'connected' : 'disconnected'}`}>
         {isWebSocketConnected
-          ? "WebSocket Connected"
+          ? "Connection established"
           : webSocketError || "Waiting for WebSocket connection..."}
       </div>
 
       {/* Page Content */}
-      <Navigation setCurrentView={setCurrentView} />
-      <header className="App-header" style={{ marginTop: '50px' }}>
+      <Navigation setCurrentView={setCurrentView}/>
+      <header className="App-header">
         {views[currentView]}
-        <div>
-          <h2>Target Zones</h2>
-          <p>Left Foot: {stepTime.targetZones.left.min} - {stepTime.targetZones.left.max}</p>
-          <p>Right Foot: {stepTime.targetZones.right.min} - {stepTime.targetZones.right.max}</p>
-          <p>Average Target Zone: {stepTime.targetZones.average}</p>
-        </div>
       </header>
     </div>
   );

diff --git a/frontend/src/StepTimeDigits.css b/frontend/src/StepTimeDigits.css
@@ -25,8 +25,9 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border: .2vw solid white;
+    border: .2vw solid #FFFDD0;
     border-radius: 1vw;
+    transition: border-color .3s linear;
     text-align: center;
     padding: 1vh 1vw;
     font-size: calc(30px + 2vmin);

diff --git a/frontend/src/StepTimeDigits.js b/frontend/src/StepTimeDigits.js
@@ -1,13 +1,17 @@
 import "./StepTimeDigits.css";
 
 function StepTimeDigits({ stepTime }) {
+  const minTargetZoneLeft = stepTime.targetZones.left.min
+  const minTargetZoneRight = stepTime.targetZones.right.min
+  const maxTargetZoneLeft = stepTime.targetZones.left.max
+  const maxTargetZoneRight = stepTime.targetZones.right.max
   return (
     <div data-testid='step-time-digits-view' className="StepTimeDigits">
       <div data-testid='target-zones-values' className="TargetZones">
         <p data-testid='target-zones-title'>Target Zones</p>
         <ul>
-          <li data-testid='target-zones-left'>{stepTime.targetZones.left.min}-{stepTime.targetZones.left.max}</li>
-          <li data-testid='target-zones-right'>{stepTime.targetZones.right.min}-{stepTime.targetZones.right.max}</li>
+          <li data-testid='target-zones-left'>{minTargetZoneLeft.toFixed(4)}-{maxTargetZoneLeft.toFixed(4)}</li>
+          <li data-testid='target-zones-right'>{minTargetZoneRight.toFixed(4)}-{maxTargetZoneRight.toFixed(4)}</li>
         </ul>
       </div>
       <div data-testid='current-step-time-values' className="CurrentStepTime">

diff --git a/frontend/src/__tests__/StepTimeDigits.test.js b/frontend/src/__tests__/StepTimeDigits.test.js
@@ -43,8 +43,8 @@ describe("Step Time Data", () => {
 
     test("Initial Target Zones correctly rendered", () => {
         render(<StepTimeDigits stepTime={testStepTime}/>);
-        expect(screen.getByTestId('target-zones-left').textContent).toBe('5-10');
-        expect(screen.getByTestId('target-zones-right').textContent).toBe('3-20');
+        expect(screen.getByTestId('target-zones-left').textContent).toBe('5.0000-10.0000');
+        expect(screen.getByTestId('target-zones-right').textContent).toBe('3.0000-20.0000');
     });
 
     test("Initial Current Step Time Values correctly rendered", () => {