Teacher Enablement of Lesson View

client/src/Utils/requests.js

@@ -474,6 +474,7 @@ export const updateActivityDetails = async (
   StandardS,
   images,
   link,
+  lessonView,
   scienceComponents,
   makingComponents,
   computationComponents
@@ -488,6 +489,7 @@ export const updateActivityDetails = async (
       StandardS,
       images,
       link,
+      lessonView,
       scienceComponents,
       makingComponents,
       computationComponents,

client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/ContentCreatorCanvas.jsx

@@ -300,6 +300,9 @@ export default function ContentCreatorCanvas({
       <Menu.Item>
         <CodeModal title={'Arduino Code'} workspaceRef={workspaceRef.current} />
       </Menu.Item>
+      <Menu.Item>
+        <h2>Code Replay Editor</h2>
+      </Menu.Item>
     </Menu>
   );
 

client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/MentorCanvas.jsx

@@ -271,6 +271,12 @@ export default function MentorCanvas({ activity, isSandbox, setActivity,  isMent
       <Menu.Item>
         <CodeModal title={'Arduino Code'} workspaceRef={workspaceRef.current} />
       </Menu.Item>
+      <Menu.Item>
+        <div style={{ display: 'flex' }}>
+          <img src="../../../../public/images/codeReplayRecord.png" style={{width: '30px', height: '25px', marginLeft: '-6px' }}alt="Image alt text" />
+          <p style={{ fontSize:'14px' }}>Code Replay Editor</p>
+        </div>
+      </Menu.Item>
     </Menu>
   );
 

client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/StudentCanvas.css

@@ -0,0 +1,79 @@
+.app-container {
+    min-height: 100vh;
+    padding: 1em 1em;
+    display: flex;
+    flex-direction: row;
+    height: 100vh;
+  }
+
+  .app-sidebar {
+    flex-grow: 0;
+    flex-shrink: 0;
+    min-width: 150px;
+    max-width: 300px;
+    display: flex;
+    border-right: #e9e9e9 1px solid;
+    flex-direction: row;
+    background: #ffffff;
+    box-shadow: -8px 2px 22px -7px rgba(0, 0, 0, 0.25);
+    border-radius: 10px 0px 0px 10px;
+    z-index: 2;
+  }
+
+  .app-frame {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    height: 100vh;
+    max-height: 100%;
+    background: #ffffff;
+    box-shadow: 8px 2px 32px -2px rgba(0, 0, 0, 0.25);
+    border-radius: 0px 10px 10px 0px;
+    z-index: 1;
+  }
+
+  .app-sidebar .app-sidebar-content {
+    flex: 1;
+  }
+
+  .app-sidebar .app-sidebar-resizer {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 6px;
+    justify-self: flex-end;
+    cursor: col-resize;
+    resize: horizontal;
+  }
+
+  .app-sidebar .app-sidebar-resizer:hover {
+    width: 3px;
+    background: #c1c3c5b4;
+  }
+
+  #horizontal-container {
+    display: flex;
+  }
+
+  #bottom-container {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  #lesson-container {
+    flex-basis: 30%;
+    overflow: hidden;
+    border-left: 1px solid #ddd;
+    padding-left: 20px;
+    height: 79%;
+    border-radius: 15px;
+  }
+
+  #blockly-canvas {
+    height: 100vh;
+  }
+
+  #icon-control-panel {
+    margin-bottom: 10px;
+  }
+

client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/StudentCanvas.jsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useState, useReducer } from 'react';
 import '../../ActivityLevels.less';
+import './StudentCanvas.css';
+import SplitPane from 'react-split-pane';
 import { compileArduinoCode, handleSave } from '../../Utils/helpers';
 import { message, Spin, Row, Col, Alert, Dropdown, Menu } from 'antd';
 import { getSaves } from '../../../../Utils/requests';
@@ -16,6 +18,7 @@ import {
 import ArduinoLogo from '../Icons/ArduinoLogo';
 import PlotterLogo from '../Icons/PlotterLogo';
 import { useNavigate } from 'react-router-dom';
+import Replay from '../../../../views/Replay/Replay';
 
 let plotId = 1;
 
@@ -43,6 +46,17 @@ export default function StudentCanvas({ activity }) {
 
   const replayRef = useRef([]);
   const clicks = useRef(0);
+  const [lessonVisible, setLessonVisible] = useState(false);
+
+  const lessonViewOnOff = () => {
+    console.log("Current state before toggle:", lessonVisible);
+    setLessonVisible(!lessonVisible);
+    console.log("State after toggle:", !lessonVisible);
+  };
+
+  const handleResize = (e, { size }) => {
+    setLeftPanelWidth(size.width);
+  };
 
   const setWorkspace = () => {
     workspaceRef.current = window.Blockly.inject('blockly-canvas', {
@@ -352,6 +366,15 @@ export default function StudentCanvas({ activity }) {
   return (
     <div id='horizontal-container' className='flex flex-column'>
       <div className='flex flex-row'>
+      <SplitPane
+            split='vertical'
+            minSize={300}
+            defaultSize={ lessonVisible ? 1000 : 1500 }
+            maxSize={ lessonVisible ? 1000 : 1500 }
+            resizerStyle={{ display: lessonVisible ? 'block' : 'none', width: '10px', cursor: 'col-resize', marginRight: '23px', height: '600px', backgroundColor: '#5dc0de' , borderRadius: '30px' }}
+          >
+
+
         <div
           id='bottom-container'
           className='flex flex-column vertical-container overflow-visible'
@@ -366,6 +389,9 @@ export default function StudentCanvas({ activity }) {
               <Col flex='none' id='section-header'>
                 {activity.lesson_module_name}
               </Col>
+              <button className='Hide' onClick={lessonViewOnOff}>
+  {lessonVisible ? "Hide Lesson" : "Show Lesson"}
+</button>
               <Col flex='auto'>
                 <Row align='middle' justify='end' id='description-container'>
                   <Col flex={'30px'}>
@@ -499,6 +525,18 @@ export default function StudentCanvas({ activity }) {
           </Spin>
         </div>
 
+      {/* THE RIGHT HAND SIDE OF THE WEBPAGE (WHERE LESSON SUPPOSE TO BE) */}
+
+      {lessonVisible && (
+  <div id='lesson-container' style={{ backgroundColor: 'lightgray' }}>
+    <>
+      <h2>Test Lesson</h2>
+      <p>This is a sample lesson content.</p>
+    </>
+  </div>
+)}
+
+
         <ConsoleModal
           show={showConsole}
           connectionOpen={connectionOpen}
@@ -511,7 +549,9 @@ export default function StudentCanvas({ activity }) {
           plotData={plotData}
           setPlotData={setPlotData}
           plotId={plotId}
-        />          
+        /> 
+
+        </SplitPane>  
       </div>
 
       {/* This xml is for the blocks' menu we will provide. Here are examples on how to include categories and subcategories */}
@@ -550,4 +590,4 @@ export default function StudentCanvas({ activity }) {
       )}
     </div>
   );
-}
+}

client/src/components/ActivityPanels/BlocklyCanvasPanel/modals/LessonModal.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Modal, Button } from 'antd';
+
+
+const LessonModal = ({ isVisible, closeModal, lessonContent }) => {
+    return (
+
+      // Functional components to display a lesson 
+      <Modal
+        title="Lesson: "
+        visible={isVisible}
+        onClose={closeModal}
+        className="lesson-modal"
+        footer={[
+          <Button key="close" onClick={closeModal}>
+            Close
+          </Button>
+        ]}
+      >
+        {lessonContent}
+      </Modal>
+    );
+  };
+
+  export default LessonModal;

client/src/views/BlocklyPage/BlocklyPage.jsx

@@ -74,10 +74,10 @@ export default function BlocklyPage({ isSandbox }) {
 
   return (
     <div className="container nav-padding">
-      <NavBar />
-      <div className="flex flex-row">
-        <BlocklyCanvasPanel activity={activity} setActivity={setActivity} isSandbox={isSandbox} />
-      </div>
+    <NavBar />
+    <div className="blocklyTreeLabel">
+      <BlocklyCanvasPanel activity={activity} setActivity={setActivity} isSandbox={isSandbox} />
     </div>
+  </div>
   )
 }

client/src/views/ContentCreator/ActivityEditor/components/ActivityDetailModal.jsx

@@ -27,6 +27,7 @@ const ActivityDetailModal = ({
   const [StandardS, setStandardS] = useState("")
   const [images, setImages] = useState("")
   const [link, setLink] = useState("")
+  const [sideBySide, setSideBySide] = useState(false)
 
   const [scienceComponents, setScienceComponents] = useState([])
   const [makingComponents, setMakingComponents] = useState([])

client/src/views/Mentor/Classroom/Home/MentorActivityDetailModal.jsx

@@ -1,4 +1,4 @@
-import { Button, Form, Input, message, Modal } from "antd"
+import { Button, Form, Input, message, Modal, Switch } from "antd"
 import React, { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import {
@@ -32,6 +32,7 @@ const MentorActivityDetailModal = ({
   const [makingComponents, setMakingComponents] = useState([])
   const [computationComponents, setComputationComponents] = useState([])
   const [activityDetailsVisible, setActivityDetailsVisible] = useState(false)
+  const [lessonView, setLessonView] = useState(false)
   const [linkError, setLinkError] = useState(false)
   const [submitButton, setSubmitButton] = useState(0)
   const navigate = useNavigate()
@@ -48,6 +49,7 @@ const MentorActivityDetailModal = ({
       setActivityTemplate(response.data.activity_template)
       setStandardS(response.data.StandardS)
       setImages(response.data.images)
+      setLessonView(response.data.lessonView)
       setLink(response.data.link)
       setLinkError(false)
       const science = response.data.learning_components
@@ -113,17 +115,22 @@ const MentorActivityDetailModal = ({
       }
     }
     setLinkError(false)
+    console.log("Lesson View before update:", lessonView); // Add this line
+
     const res = await updateActivityDetails(
       selectActivity.id,
       description,
       //template,
       StandardS,
       images,
       link,
+      lessonView,
       scienceComponents,
       makingComponents,
       computationComponents
     )
+    console.log("Lesson View after update:", lessonView); // Add this line
+
     if (res.err) {
       message.error(res.err)
     } else {
@@ -148,6 +155,7 @@ const MentorActivityDetailModal = ({
     setVisible(true)
     //setOpen(true)
 };
+
   return (
     <div id="mentoredit">
     <Button id="view-activity-button"
@@ -245,6 +253,14 @@ const MentorActivityDetailModal = ({
             colorOffset={7}
           />
         </Form.Item>
+        <Form.Item id="form-label" label="Enable Lesson View">
+          <Switch
+            onChange={(e) => {
+              setLessonView(e)
+            }}
+            defaultChecked={lessonView}
+          />
+        </Form.Item>
         <h3 id="subtitle">Additional Information</h3>
         <Form.Item
           id="form-label"

client/src/views/Workspace/Workspace.jsx

@@ -42,6 +42,7 @@ export default function Workspace({ handleLogout }) {
       <BlocklyCanvasPanel
         activity={activity}
         lessonName={`${activity.lesson_module_name}, Activity ${activity.number}`}
+
         handleGoBack={handleGoBack}
         handleLogout={handleLogout}
         isStudent={true}