Add StepTimeTreadmill View

Added StepTimeTreadmill visualization and tests to ensure navbar swapping with it work correctly

frontend/src/App.js

@@ -5,6 +5,7 @@ import StepTimeDigits from './StepTimeDigits';
 import StepTimeChart from './StepTimeChart';
 import StepTimeGraph from './StepTimeGraph';
 import useStepTime from './useStepTime';
+import StepTimeTredmill from './StepTimeTreadmil';
 
 function App() {
   const [currentView, setCurrentView] = useState('StepTimeDigits');
@@ -14,6 +15,7 @@ function App() {
     StepTimeDigits: <StepTimeDigits stepTime={stepTime} />,
     StepTimeChart: <StepTimeChart stepTime={stepTime} />,
     StepTimeGraph: <StepTimeGraph stepTime={stepTime} />,
+    StepTimeTredmill: <StepTimeTredmill stepTime={stepTime} />
   };
 
   let websocket = useRef(null);

frontend/src/Navigation.js

@@ -7,6 +7,7 @@ function Naviation({ setCurrentView }) {
                 <li data-testid='step-time-digits-nav' onClick={() => setCurrentView('StepTimeDigits')}>Step Time Digits</li>
                 <li data-testid='step-time-chart-nav' onClick={() => setCurrentView('StepTimeChart')}>Step Time Chart</li>
                 <li data-testid='step-time-graph-nav' onClick={() => setCurrentView('StepTimeGraph')}>Step Time Graph</li>
+                <li data-testid='step-time-treadmill-nav' onClick={() => setCurrentView('StepTimeTredmill')}>Step Time Treadmill</li>
             </ul>
         </nav>
     );

frontend/src/StepTimeTreadmil.js

@@ -0,0 +1,37 @@
+import "./StepTimeTreadmill.css"
+
+function StepTimeTreadmill({ stepTime }) {
+  const leftOffsetMin = (stepTime.left - stepTime.targetZones.left.min);
+  const leftOffsetMax = (stepTime.left - stepTime.targetZones.left.max) * -1;
+  const rightOffsetMin = (stepTime.right - stepTime.targetZones.right.min);
+  const rightOffsetMax = (stepTime.right - stepTime.targetZones.right.max) * -1;
+
+  return (
+    <div data-testid='step-time-treadmill-view' className="StepTimeTreadmill">
+      <svg data-testid="treadmill-svg" className="Treadmill" viewBox="0 0 100 100" preserveAspectRatio='none'>
+        <g data-testid='target-zones' className='TargetZones'>
+          <g data-testid='left-target-zones' className='LeftTargetZones'>ß
+            <line x1='24' x2='26' y1={50 - leftOffsetMin} y2={50 - leftOffsetMin} />
+            <line x1='24' x2='26' y1={50 + leftOffsetMax} y2={50 + leftOffsetMax} />
+          </g>
+          <g data-testid='right-target-zones' className='RightTargetZones'>
+            <line x1='74' x2='76' y1={50 - rightOffsetMin} y2={50 - rightOffsetMin} />
+            <line x1='74' x2='76' y1={50 + rightOffsetMax} y2={50 + rightOffsetMax} />
+          </g>
+        </g>
+        <g data-testid='step-time-values' className='StepTimeValues'>
+          <g data-testid='left-step' className='LeftStep'>
+            <line x1='24.5' x2='25.5' y1='49.5' y2='50.5' />
+            <line x1='24.5' x2='25.5' y1='50.5' y2='49.5' />
+          </g>
+          <g data-testid='right-step' className='RightStep'> 
+            <line x1='74.5' x2='75.5' y1='49.5' y2='50.5' />
+            <line x1='74.5' x2='75.5' y1='50.5' y2='49.5' />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+export default StepTimeTreadmill;

frontend/src/StepTimeTreadmill.css

@@ -0,0 +1,18 @@
+.Treadmill {
+    width: 70vw;
+    height: 85vh;
+    margin: 5vh 0;
+    background-color: grey;
+}
+
+.Treadmill line {
+    stroke-width: .02vw;
+}
+
+.TargetZones line {
+    stroke: orange;
+}
+
+.StepTimeValues line {
+    stroke: black;
+}

frontend/src/__tests__/App.test.js

@@ -49,6 +49,12 @@ describe("Navbar Component", () => {
       expect(screen.getByTestId("step-time-graph-view")).toBeInTheDocument();
     });
 
+    test("Navbar swap renders StepTimeTreadmill view", () => {
+      render(<App />);
+      fireEvent.click(screen.getByTestId("step-time-treadmill-nav"));
+      expect(screen.getByTestId("step-time-treadmill-view")).toBeInTheDocument();
+    });
+
     test("Navbar swap renders StepTimeDigits view", () => {
       render(<App />);
       fireEvent.click(screen.getByTestId("step-time-graph-nav"));

frontend/src/useStepTime.js

@@ -3,11 +3,11 @@ import { useState, useEffect } from 'react';
 function useStepTime() {
   // TODO: update default values, check w/ line 14 comment
   const [stepTime, setStepTime] = useState({
-    left: 0, 
-    right: 0,
+    left: 27, 
+    right: 30,
     targetZones: {
-      left: { min: 0, max: 0 },
-      right: { min: 0, max: 0 }
+      left: { min: 25, max: 35 },
+      right: { min: 25, max: 35 }
     } 
   });