WIP MVP mock up workflow , need to populate REPORT with stub

susom · Dec 25, 2024 · 30f8a21 · 30f8a21
1 parent 1fc78ad
commit 30f8a21
Show file tree

Hide file tree

Showing 19 changed files with 992 additions and 709 deletions.
diff --git a/ClinicalCoach.php b/ClinicalCoach.php
diff --git a/MVP/src/components/Footer.jsx b/MVP/src/components/Footer.jsx
@@ -6,7 +6,7 @@ import thmIcon from '../assets/images/thm_icon.png';
 
 function Footer({ stage = 1, setStage }) {
     const location = useLocation();
-    const currentPath = location.pathname;
+    const currentPath = location.pathname.toLowerCase();
 
     const isExpanded = stage > 1; // Keep expanded state driven by `stage`
 
@@ -19,9 +19,9 @@ function Footer({ stage = 1, setStage }) {
             )}
             <nav className="global-nav">
                 <Link
-                    to="/Home"
-                    className={`footer-item ${currentPath === '/Home' && stage === 1 ? 'active' : ''}`}
-                    onClick={() => setStage(1)} // Reset stage when navigating
+                    to="/home"
+                    className={`footer-item ${currentPath === '/home' ? 'active' : ''}`} // Remove stage check here
+                    onClick={() => setStage(2)} // Retain stage reset logic
                 >
                     <i className="fas fa-home footer-icon"></i>
                     <span>Home</span>

diff --git a/MVP/src/components/Footer_old.jsx b/MVP/src/components/Footer_old.jsx
diff --git a/MVP/src/components/RecordingFooter.jsx b/MVP/src/components/RecordingFooter.jsx
@@ -1,18 +1,18 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import ThinkingHabitsOverview from './ThinkingHabitsOverview';
 import { useStudents } from '../contexts/Students';
 import { useConfirmModal } from '../contexts/ConfirmModal';
 import VoiceRecorder from '../components/VoiceRecorder';
 import './RecordingFooter.css';
 
 function RecordingFooter({ stage, setStage }) {
+    const navigate = useNavigate();
     const { showConfirmModal } = useConfirmModal();
     const { students, selectedStudent, selectStudent } = useStudents();
 
     // for audio recording
-    const [isRecording, setIsRecording] = useState(false); // To manage recording state
     const mediaRecorderRef = useRef(null); // To store the MediaRecorder instance
-    const audioChunksRef = useRef([]); // To store recorded audio chunks
 
     useEffect(() => {
         // Cleanup the MediaRecorder and stop any active recording
@@ -52,15 +52,8 @@ function RecordingFooter({ stage, setStage }) {
         }
     };
 
-    const thmLabels = selectedStudent?.reflections
-        ? [
-            { label: 'Strategy', color: selectedStudent.reflections.strategy?.score === 'N/A' ? 'gray' : 'green' },
-            { label: 'Solution', color: selectedStudent.reflections.solution?.score === 'N/A' ? 'gray' : 'green' },
-            { label: 'Knowledge', color: selectedStudent.reflections.knowledge?.score === 'N/A' ? 'gray' : 'green' },
-            { label: 'Problem', color: selectedStudent.reflections.problem?.score === 'N/A' ? 'gray' : 'yellow' },
-            { label: 'Data', color: selectedStudent.reflections.data?.score === 'N/A' ? 'gray' : 'yellow' },
-            { label: 'Mind', color: selectedStudent.reflections.mind?.score === 'N/A' ? 'gray' : 'red' },
-        ]
+    const thmLabels = selectedStudent?.habitsData
+        ? selectedStudent.habitsData
         : [
             { label: 'Strategy', color: 'gray' },
             { label: 'Solution', color: 'gray' },
@@ -70,6 +63,7 @@ function RecordingFooter({ stage, setStage }) {
             { label: 'Mind', color: 'gray' },
         ];
 
+
     return (
         <div className={`recording-footer ${stage === 3 ? 'stage-3-layout' : 'stage-2-layout'}`}>
             {stage === 2 && (
@@ -135,7 +129,7 @@ function RecordingFooter({ stage, setStage }) {
                             })}</p>
                         </div>
                     </div>
-                    <VoiceRecorder />
+                    <VoiceRecorder navigate={navigate} />
                 </div>
             )}
         </div>

diff --git a/MVP/src/components/Report.jsx b/MVP/src/components/Report.jsx
diff --git a/MVP/src/components/StatusIndicator.jsx b/MVP/src/components/StatusIndicator.jsx
diff --git a/MVP/src/components/VoiceRecorder.css b/MVP/src/components/VoiceRecorder.css
@@ -1,5 +1,5 @@
 
-div.vr{
+div.veear{
     display: flex; /* Enables flexbox */
     flex-direction: column; /* Stack items vertically */
     align-items: center; /* Center items horizontally */
@@ -98,9 +98,9 @@ div.vr{
 }
 
 /* Waveform */
-.vr.stage_2,
-.vr.stage_3,
-.vr.stage_4{
+.veear.stage_2,
+.veear.stage_3,
+.veear.stage_4{
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -174,10 +174,10 @@ div.vr{
 
 
 /*Recording Stage 4*/
-.vr.stage_4 .vr_stop-button{
+.veear.stage_4 .vr_stop-button{
     visibility:hidden;
 }
-.vr.stage_4 .finalize .vr_restart-button{
+.veear.stage_4 .finalize .vr_restart-button{
     border-radius:10px;
 }
 
@@ -204,7 +204,6 @@ div.vr{
 }
 
 .vr_audio-container:first-child{
-    border:1px solid red;
 }
 
 .vr_previews audio{