From 6f92099fa69d04a8da82905d5fe4487a585f19e4 Mon Sep 17 00:00:00 2001
From: Colin Seper <sepercolin@gmail.com>
Date: Sun, 10 Nov 2024 19:25:46 -0600
Subject: [PATCH] Add StepTimeTreadmill View

Added StepTimeTreadmill visualization and tests to ensure navbar swapping with it work correctly
---
 frontend/src/App.js                |  2 ++
 frontend/src/Navigation.js         |  1 +
 frontend/src/StepTimeTreadmil.js   | 37 ++++++++++++++++++++++++++++++
 frontend/src/StepTimeTreadmill.css | 18 +++++++++++++++
 frontend/src/__tests__/App.test.js |  6 +++++
 frontend/src/useStepTime.js        |  8 +++----
 6 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/StepTimeTreadmil.js
 create mode 100644 frontend/src/StepTimeTreadmill.css

diff --git a/frontend/src/App.js b/frontend/src/App.js
index facb7a8..ddd15e7 100644
--- a/frontend/src/App.js
+++ b/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);
diff --git a/frontend/src/Navigation.js b/frontend/src/Navigation.js
index 624c772..4b68ce2 100644
--- a/frontend/src/Navigation.js
+++ b/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>
     );
diff --git a/frontend/src/StepTimeTreadmil.js b/frontend/src/StepTimeTreadmil.js
new file mode 100644
index 0000000..994544f
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/StepTimeTreadmill.css b/frontend/src/StepTimeTreadmill.css
new file mode 100644
index 0000000..a87e520
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/src/__tests__/App.test.js b/frontend/src/__tests__/App.test.js
index 8c02770..9ca9c73 100644
--- a/frontend/src/__tests__/App.test.js
+++ b/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"));
diff --git a/frontend/src/useStepTime.js b/frontend/src/useStepTime.js
index 6ba3c95..3c58237 100644
--- a/frontend/src/useStepTime.js
+++ b/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 }
     } 
   });