replay toggle

client/src/views/Mentor/Classroom/Home/Home.less

@@ -30,40 +30,27 @@
 
     #view-day-card {
       width: 30vw;
-      min-height: 34vh;
+      height: auto;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.377);
       border-radius: 10px;
       margin: 20px;
+      overflow: auto;
 
       #view-day-heading {
         background-color: #colors[quaternary];
         display: flex;
         align-items: center;
-        height: 20%;
+        justify-content: center;
+        height: 8vh;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
 
         #view-day-title {
           display: inline;
-          font-size: 1.2em;
+          font-size: 1.6em;
           margin-left: 12px;
           font-weight: 600;
         }
-
-        // #view-day-button {
-        //   height: 6vh;
-        //   width: 40%;
-        //   font-size: 1.2em;
-        //   font-weight: 600;
-        //   background-color: transparent;
-        //   border: none;
-        //   border-top-left-radius: 10px;
-
-        //   &:hover {
-        //     cursor: pointer;
-        //     background-color: #colors[quinary];
-        //   }
-        // }
       }
 
       #view-day-info {
@@ -74,7 +61,7 @@
         font-size: 1.1em;
         line-height: 1em;
         word-wrap: break-word;
-        height: 50%;
+        min-height: 30vh;
 
         strong {
           font-weight: 500;
@@ -85,8 +72,10 @@
       #view-day-btn-container {
         display: flex;
         justify-content: center;
-        height: 20%;
+        height: 6vh;
         #day-template-btn {
+          position: relative;
+          bottom: 0;
           margin-right: 10px;
           width: 12vw;
           height: 4vh;

client/src/views/Replay/Replay.js

@@ -5,12 +5,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Slider } from 'antd';
+import { Slider, Switch } from 'antd';
 import './Replay.less';
 import { useParams, useNavigate } from 'react-router-dom';
 import NavBar from '../../components/NavBar/NavBar';
 import { Table } from 'antd';
-import { getSave } from '../../Utils/requests';
+import { getSave, getSession } from '../../Utils/requests';
 
 const Replay = () => {
   const { saveID } = useParams();
@@ -22,6 +22,11 @@ const Replay = () => {
   const [playSpeed, setPlaySpeed] = useState(500);
   const navigate = useNavigate();
   const [action, setAction] = useState('');
+  const [student, setStudent] = useState('');
+  const [className, setClassName] = useState('');
+  const [lesson, setLesson] = useState('');
+  const [session, setSession] = useState('');
+  const [isToggle, setIsToggle] = useState(true);
 
   const reducer = (state, action) => {
     switch (action.type) {
@@ -50,12 +55,36 @@ const Replay = () => {
   };
 
   useEffect(() => {
-    const getReplay = async () => {
-      const save = await getSave(saveID);
-      console.log(save.data.replay);
-      setReplay(save.data.replay);
+    // const getReplay = async () => {
+    //   const save = await getSave(saveID);
+    //   console.log(save.data.replay);
+    //   setReplay(save.data.replay);
+    // };
+    // getReplay();
+
+
+    const getData = async () => {
+      const session = await getSession(saveID);
+      setSession(session.data);
+      console.log(session.data);
+
+      const fetchedStudents = session.data.students[0].name;
+      setStudent(fetchedStudents);
+
+      const fetchedClassroomNames = session.data.classroom.name;
+      setClassName(fetchedClassroomNames);
+
+      const fetchedLesson = session.data.learning_standard.name;
+      setLesson(fetchedLesson);
+
+      if (session.data.saves?.length) {
+        const latestSave = session.data.saves[session.data.saves.length - 1];
+        const save = await getSave(latestSave.id);
+        // console.log(save.data.replay);
+        setReplay(save.data.replay);
+      }
     };
-    getReplay();
+    getData();
   }, []);
 
   // const dataSource = [
@@ -123,6 +152,11 @@ const Replay = () => {
     setIsPlaying(false);
   }, [playbackRef]);
 
+  function onChange(checked) {
+    console.log(`switch to ${checked}`);
+    setIsToggle(checked);
+  }
+
   //handle dynamic playback changes
   useEffect(() => {
     if (replay.length) {
@@ -148,6 +182,14 @@ const Replay = () => {
       <NavBar />
       <div id='horizontal-container' className='flex flex-column'>
         <div id='top-container' className='flex flex-column vertical-container'>
+          <div className='flex' id='toggle'>
+            <Switch defaultChecked checkedChildren='Show' unCheckedChildren='Hide' onChange={onChange} />
+          </div>
+          <div className='flex flex-column' id='replay-heading'>
+            <h1>{className}</h1>
+            <h2>{lesson}</h2>
+            <h2 className={isToggle ? 'show-name' : 'hide-name'}>{student}</h2>
+          </div>
           <div
             id='description-container'
             className='flex flex-row space-between card'
@@ -156,13 +198,12 @@ const Replay = () => {
               <button
                 onClick={handleGoBack}
                 id='link'
-                className='flex flex-column'
               >
                 <i id='icon-btn' className='fa fa-arrow-left' />
               </button>
             </div>
             <div className='flex flex-row'>
-              <div className='flex flex-row'>
+              <div className='flex flex-row' id='slider'>
                 &#128034;
                 <Slider
                   className='playspeed-slider'
@@ -217,15 +258,16 @@ const Replay = () => {
             </div>
           </div>
         </div>
-        <h2>{`Action: ${action}`}</h2>
 
         <div className='flex flex-row'>
           <div
             id='bottom-container'
             className='flex flex-column vertical-container overflow-visible'
           >
             <h1 id='section-header'>Code Replay</h1>
-            <div id='blockly-canvas' />
+            <div id='blockly-canvas'>
+              <h2 id='action'>{`Action: ${action}`}</h2>
+            </div>
             {/* <div id="timeline">
               { replay.map((item, index) => <div className={step === index ? 'current-time' : 'all-times'} key={item.timestamp}>{timeConverter(item.timestamp)}<Marker/></div>)}
             </div> */}

client/src/views/Replay/Replay.less

@@ -1,5 +1,21 @@
 @import '../../assets/style.less';
 
+#replay-heading {
+  margin-bottom: 10px;
+
+  h1, h2 {
+    margin: 0;
+    color: white;
+  }
+
+  .hide-name {
+    display: none;
+  }
+
+  .show-name {
+  }
+}
+
 #timeline-container {
   display: flex;
   justify-content: center;
@@ -39,6 +55,8 @@
 }
 
 #description-container {
+  display: flex;
+  align-items: center;
   border-radius: 10px;
   top: 10px;
 }
@@ -47,6 +65,28 @@
   font-size: 18px;
 }
 
+#toggle {
+  width: 100%; 
+  margin-bottom: 20px;
+  justify-content: flex-end;
+  .ant-switch {
+    border: solid 1px;
+    border-color: white;
+  }
+}
+
+
+#action {
+  position: absolute;
+  top: 14px;
+  right: 50px;
+  font-size: 1.2em;
+}
+
+#slider {
+  margin-right: 10px; 
+}
+
 .playspeed-slider {
   width: 100px;
   .ant-slider-rail,

client/src/views/Researcher/DayLevelReportView.js

@@ -54,7 +54,8 @@ const DayLevelReportView = () => {
     if (session.saves?.length) {
       const latestSave = session.saves[session.saves.length - 1];
       return (
-        <Link id='replay-btn' className='btn' to={`/replay/${latestSave.id}`}>
+        <Link id='replay-btn' className='btn' to={`/replay/${id}`}>
+           {/* <Link id='replay-btn' className='btn' to={`/replay/${id}/${latestSave.id}`}></Link> */}
           View Code Replay
         </Link>
       );