google forms integration for mentors and students

STEM-C · Sep 5, 2024 · 6eb0513 · 6eb0513
1 parent 431aba3
commit 6eb0513
Show file tree

Hide file tree

Showing 19 changed files with 268 additions and 4 deletions.
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -27,6 +27,7 @@ import MentorRegister from './views/Mentor/Dashboard/MentorRegister';
 import AddMentor from './views/Mentor/Dashboard/AddMentor';
 import CodeViz from './views/Researcher/viz';
 import CodeDayz from './views/Researcher/dayz';
+import Form from './views/Student/form';
 
 export function confirmRedirect () {
   const navigate = useNavigate();
@@ -111,6 +112,11 @@ const App = () => {
             </PrivateRoute>
           }
         />
+        <Route 
+          path='/form'
+          element={<PrivateRoute><Form/></PrivateRoute>}
+          />
+
         <Route
           path='/classroom/:id'
           element={

diff --git a/client/src/Utils/requests.js b/client/src/Utils/requests.js
@@ -766,4 +766,14 @@ export const getSchoolList = async() =>
     method: GET,
     path: `${server}/schools`,
     auth: true
-  })
+  })
+
+  export const updateClassroom = async(id, formcode) => 
+      makeRequest({
+        method: PUT,
+        path: `${server}/classrooms/${id}`,
+        auth: true,
+        data: {
+          form: formcode
+        }
+      })
diff --git a/client/src/views/Mentor/Classroom/Home/DisplayFormModal.jsx b/client/src/views/Mentor/Classroom/Home/DisplayFormModal.jsx
@@ -0,0 +1,51 @@
+import {Modal, Button} from 'antd';
+import React, {useState} from "react";
+import { Form } from 'react-router-dom';
+import './Home.less'
+import { updateClassroom } from '../../../../Utils/requests';
+
+export default function DisplayFormModal(props) {
+    const [visible, setVisible] = useState(false);
+    const {classroom} = props;
+    const [form, setForm] = useState('')
+
+    const showModal = () => {
+        setForm('')
+        setVisible(true)
+    };
+
+    const handleCancel = () => {
+        setVisible(false)
+    };
+
+    const handleTyping = (event) => {
+
+        setForm(event.target.value)
+    }
+
+    const handleOk = () => {
+        //console.log(form)
+        classroom.form = form
+        updateClassroom(classroom.id, classroom.form)
+        setVisible(false)
+    };
+
+    return (
+        <div id='display-form-modal'>
+            <button id='display-form-btn' onClick={showModal}>Click to change form code</button>
+            <Modal
+                title={'Edit Form Code'}
+                visible={visible}
+                onCancel={handleCancel}
+                width='50vw'
+                footer={[
+                    <Button key="ok" type="primary" onClick={handleOk}>
+                        OK
+                    </Button>,
+                ]}
+            >
+            <input type='text' id='textbox' placeholder='Enter Google Form Link' onChange={handleTyping} defaultValue={''}></input>
+            </Modal>
+        </div>
+    );
+}
diff --git a/client/src/views/Mentor/Classroom/Home/Home.jsx b/client/src/views/Mentor/Classroom/Home/Home.jsx
@@ -11,6 +11,7 @@ import MentorDayDetailModal from './MentorDayDetailModal';
 import LearningStandardModal from './LearningStandardSelect/LearningStandardModal';
 import { message, Tag } from 'antd';
 import { useNavigate } from 'react-router-dom';
+import DisplayFormModal from './DisplayFormModal';
 
 export default function Home({ classroomId, viewing }) {
   const [classroom, setClassroom] = useState({});
@@ -92,6 +93,7 @@ export default function Home({ classroomId, viewing }) {
       <button id='home-back-btn' onClick={handleBack}>
         <i className='fa fa-arrow-left' aria-hidden='true' />
       </button>
+      <DisplayFormModal classroom={classroom}/>
       <DisplayCodeModal code={classroom.code} />
       <MentorSubHeader title={classroom.name}></MentorSubHeader>
       <div id='home-content-container'>

diff --git a/client/src/views/Mentor/Classroom/Home/Home.less b/client/src/views/Mentor/Classroom/Home/Home.less
@@ -152,6 +152,43 @@
   }
 }
 
+#display-form-modal {
+  position: absolute;
+  margin-top: 10px;
+  right: 10vw;
+
+  #display-form-btn {
+    width: 18vw;
+    min-height: 3.5vw;
+    margin-right:400px;
+    font-size: 1em;
+    font-weight: 500;
+    border-radius: 30px;
+    border: none;
+    background: #colors[quaternary];
+    color: #colors[text-primary];
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.377);
+    transition: 0.25s;
+    cursor: pointer;
+
+    &:hover {
+      width: 20vw;
+      background-color: #colors[quinary];
+    }
+  }
+}
+#textbox {
+  height: 100px;
+  width:500px;
+  justify-content: center;
+  margin-left:125px;
+  display:flex;
+  align-items: center;
+  padding:10px;
+  margin-bottom: 5px;
+  font-size:20px;
+}
+
 #code-display-text {
   display: flex;
   justify-content: center;

diff --git a/client/src/views/Student/Student.jsx b/client/src/views/Student/Student.jsx
@@ -32,6 +32,10 @@ function Student() {
     navigate('/workspace');
   };
 
+  const goToForm = () => {
+    navigate('/form')
+  }
+
   return (
     <div className='container nav-padding'>
       <NavBar />
@@ -40,6 +44,7 @@ function Student() {
           <div>Select your Day</div>
         </div>
         <ul>
+          <div id='list-item-wrapper' onClick={() => goToForm()}> Click here to go to the student form!</div>
           {learningStandard.days ? (
             learningStandard.days
               .sort((day1, day2) => day1.number - day2.number)

diff --git a/client/src/views/Student/form.jsx b/client/src/views/Student/form.jsx
@@ -0,0 +1,47 @@
+import {React, useEffect, useState} from "react"
+import NavBar from "../../components/NavBar/NavBar"
+import "./form.less"
+import { getSupers } from "../../Utils/AuthRequests"
+import { sendEmailConfirmationEmail, getStudentClassroom } from "../../Utils/requests"
+
+
+export default function Form(props) {
+  const superEmails = []
+  const[formcode, setFormCode] = useState('')
+
+
+  useEffect ( () => { 
+
+    getStudentClassroom()
+      .then((response) => {
+        //console.log(response.data.classroom.form)
+        setFormCode(`${response.data.classroom.form}?embedded=true`)
+
+        //console.log(`${response.data.classroom.form}`)
+      })
+
+  }, [])
+
+
+
+  return (
+    <div className="container nav-padding">
+      <NavBar />
+      <div id="about-content-container">
+        <iframe
+            src={formcode}
+            width="100%"
+            height="100%"
+            height='500px'
+            frameBorder="0"
+            marginHeight="0"
+            marginWidth="0"
+            title="Google Form"
+        >
+            Loading…
+        </iframe>
+
+      </div>
+    </div>
+  )
+}
diff --git a/client/src/views/Student/form.less b/client/src/views/Student/form.less
@@ -0,0 +1,54 @@
+@import "../../assets/style.less";
+
+.container {
+  background-color: #colors[primary];
+  height: 100%;
+  min-height: 100vh;
+  width: 100%;
+  min-width: 100vw;
+  text-align: center;
+}
+
+#about-content-container {
+  margin: 8vh auto 5vh auto;
+  padding: 5vh 5vw;
+  width: 80vw;
+  background: #colors[tertiary];
+  border-radius: 20px;
+  border: 2px solid #colors[secondary];
+
+  #logos {
+    width: 50vw;
+    margin: auto;
+
+    img {
+      width: 20%;
+      height: auto;
+      margin: auto;
+    }
+  }
+
+  #title {
+    font-size: 3em;
+    color: #dc3545;
+    margin-bottom: 0;
+  }
+
+  #secondary-title {
+    font-size: 2em;
+    color: #colors[text-primary];
+  }
+
+  #divider {
+    width: 95%;
+    height: 0;
+    margin: 5vh 0;
+    border-bottom: 1px solid #colors[secondary];
+    opacity: 20%;
+  }
+
+  p {
+    font-size: 1.5em;
+    color: #colors[text-primary];
+  }
+}
diff --git a/client/src/views/TeacherLogin/ConfirmEmail.jsx b/client/src/views/TeacherLogin/ConfirmEmail.jsx
@@ -7,6 +7,7 @@ import "./Sorry.less";
 export default function ConfirmEmail() {
     const search = useLocation().search;
     const code = new URLSearchParams(search).get('confirmation');
+    //console.log(code)
     confirmEmail(code)
         .then((response) => {
             console.log(response);

diff --git a/server/api/cc-workspace/models/cc-workspace.settings.json b/server/api/cc-workspace/models/cc-workspace.settings.json
@@ -27,8 +27,8 @@
       "collection": "block"
     },
     "classroom": {
-      "private": true,
       "via": "cc_workspaces",
+      "private": true,
       "model": "classroom"
     }
   }

diff --git a/server/api/classroom/documentation/1.0.0/classroom.json b/server/api/classroom/documentation/1.0.0/classroom.json
@@ -1018,6 +1018,9 @@
                 }
               }
             }
+          },
+          "form": {
+            "type": "string"
           }
         }
       },
@@ -1068,6 +1071,9 @@
               "type": "string"
             }
           },
+          "form": {
+            "type": "string"
+          },
           "created_by": {
             "type": "string"
           },

diff --git a/server/api/classroom/models/classroom.settings.json b/server/api/classroom/models/classroom.settings.json
@@ -43,9 +43,12 @@
       "collection": "selection"
     },
     "cc_workspaces": {
-      "via": "classroom",
       "private": true,
+      "via": "classroom",
       "collection": "cc-workspace"
+    },
+    "form": {
+      "type": "string"
     }
   }
 }
diff --git a/server/api/grade/documentation/1.0.0/grade.json b/server/api/grade/documentation/1.0.0/grade.json
@@ -579,6 +579,9 @@
                     "type": "string"
                   }
                 },
+                "form": {
+                  "type": "string"
+                },
                 "created_by": {
                   "type": "string"
                 },

diff --git a/server/api/mentor/documentation/1.0.0/mentor.json b/server/api/mentor/documentation/1.0.0/mentor.json
@@ -618,6 +618,9 @@
                     "type": "string"
                   }
                 },
+                "form": {
+                  "type": "string"
+                },
                 "created_by": {
                   "type": "string"
                 },

diff --git a/server/api/school/documentation/1.0.0/school.json b/server/api/school/documentation/1.0.0/school.json
@@ -584,6 +584,9 @@
                     "type": "string"
                   }
                 },
+                "form": {
+                  "type": "string"
+                },
                 "created_by": {
                   "type": "string"
                 },

diff --git a/server/api/selection/documentation/1.0.0/selection.json b/server/api/selection/documentation/1.0.0/selection.json
@@ -574,6 +574,9 @@
                   "type": "string"
                 }
               },
+              "form": {
+                "type": "string"
+              },
               "created_by": {
                 "type": "string"
               },

diff --git a/server/api/session/documentation/1.0.0/session.json b/server/api/session/documentation/1.0.0/session.json
@@ -656,6 +656,9 @@
                   "type": "string"
                 }
               },
+              "form": {
+                "type": "string"
+              },
               "created_by": {
                 "type": "string"
               },

diff --git a/server/api/student/documentation/1.0.0/student.json b/server/api/student/documentation/1.0.0/student.json
@@ -720,6 +720,9 @@
                   "type": "string"
                 }
               },
+              "form": {
+                "type": "string"
+              },
               "created_by": {
                 "type": "string"
               },