Jason

frontend/src/TextAnswerInput.jsx

@@ -11,10 +11,22 @@ import './styles/TextAnswerInput.css';
 
 export default function TextAnswerInput(props) {
   const [audioSelected, setAudioSelected] = useState(false);
+  const [videoSelected, setVideoSelected] = useState(false);
 
   const clickMic = (e) => {
+    if (videoSelected) {
+      setVideoSelected(false);
+    }
+    props.clearRecordings(props.id);
     setAudioSelected(!audioSelected);
   };
+  const clickVideocam = (e) => {
+    if (audioSelected) {
+      setAudioSelected(false);
+    }
+    props.clearRecordings(props.id);
+    setVideoSelected(!videoSelected);
+  };
 
   function getBase64(file) {
     return new Promise((resolve) => {
@@ -52,6 +64,20 @@ export default function TextAnswerInput(props) {
       });
   };
 
+  const stopVideo = (blobUrl, blob) => {
+    console.log(blobUrl);
+    console.log(blob);
+    const videoFile = new File([blob], 'video.mp4', { type: 'video/mp4' });
+    console.log(videoFile);
+    getBase64(videoFile)
+      .then((result) => {
+        props.saveVideo(props.id, result);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   return (
     <div className="text-answer-input">
       <div className="user-question-field">
@@ -82,6 +108,9 @@ export default function TextAnswerInput(props) {
         <IconButton aria-label="audio" onClick={clickMic} value={props.id}>
           <MicIcon />
         </IconButton>
+        <IconButton aria-label="audio" onClick={clickVideocam} value={props.id}>
+          <VideocamIcon />
+        </IconButton>
       </div>
       )}
 
@@ -108,6 +137,30 @@ export default function TextAnswerInput(props) {
         />
       </div>
       )}
+
+      {videoSelected
+      && (
+      <div>
+        <ReactMediaRecorder
+          video
+          onStop={stopVideo}
+          render={({
+            status, startRecording, stopRecording, mediaBlobUrl,
+          }) => (
+            <div>
+              <p>{status}</p>
+              <video src={mediaBlobUrl} width={320} height={180} controls autoPlay>
+                <track kind="captions" />
+              </video>
+              <div>
+                <button onClick={startRecording}>Start Recording</button>
+                <button onClick={stopRecording}>Stop Recording</button>
+              </div>
+            </div>
+          )}
+        />
+      </div>
+      )}
     </div>
   );
 }

frontend/src/answerQuestionnaire.jsx

@@ -49,14 +49,53 @@ export default function AnswerQuestionnaire() {
     console.log(questionList);
   };
 
+  const saveVideo = (qid, videoFile) => {
+    const newQuestionList = [...questionList];
+    newQuestionList.forEach((question) => {
+      if (question.id === qid) {
+        const newDict = { ...question };
+        newDict.content_video = videoFile;
+        Object.assign(question, newDict);
+        console.log(question);
+      }
+    });
+    setQuestionList(newQuestionList);
+    console.log(questionList);
+  };
+
+  const clearRecordings = (qid) => {
+    const newQuestionList = [...questionList];
+    newQuestionList.forEach((question) => {
+      if (question.id === qid) {
+        const newDict = { ...question };
+        newDict.content_video = null;
+        newDict.content_audio = null;
+        Object.assign(question, newDict);
+        console.log(question);
+      }
+    });
+    setQuestionList(newQuestionList);
+    console.log(questionList);
+  };
+
   const navigate = useNavigate();
   const handleSubmit = async (e) => {
+    let empty = false;
+    questionList.forEach((question) => {
+      if (!question.answer && !question.content_audio && !question.content_video) {
+        empty = true;
+      }
+    });
+    if (empty) {
+      return;
+    }
     const feedback = {};
     questionList.forEach((question) => {
       const newDict = {};
       newDict.content_type = "TEXT";
       newDict.content = question.answer;
       newDict.content_audio = question.content_audio;
+      newDict.content_video = question.content_video;
       feedback[question.id] = newDict;
     });
     console.log(feedback);
@@ -78,6 +117,8 @@ export default function AnswerQuestionnaire() {
               onChange={handleChange}
               allowRecording={question.allow_recording}
               saveAudio={saveAudio}
+              saveVideo={saveVideo}
+              clearRecordings={clearRecordings}
             />
           ))}
         </div>

frontend/src/components/Selection.jsx

@@ -51,7 +51,7 @@ export default function Selection() {
   return (
     <div className="selection-bg">
       <div className="selection">
-        <FormControl sx={{ m: 1, width: '35%' }}>
+        <FormControl sx={{ m: 1, width: '45%' }}>
           <InputLabel id="selection-label">Program</InputLabel>
           <Select
             labelId="demo-simple-select-autowidth-label"

frontend/src/feedback.jsx

@@ -125,7 +125,7 @@ export default class Feedback extends React.Component {
 
   async componentDidMount() {
     const response = await getAllFeedback();
-    const myData = response.results;
+    const myData = response;
     this.setState({ data: myData });
     this.setState({ current: myData });
     const myKeys = [];

frontend/src/styles/Navbar.css

@@ -5,6 +5,10 @@
     color: #414143;
 }
 
+.navbar-name:hover {
+    color: #009131;
+}
+
 .navbar-logo {
     width: 160px;
 }

frontend/src/styles/createQuestionnaire.css

@@ -11,5 +11,5 @@
 }
 
 .save-and-return {
-    margin-top: 32px;
+    margin-top: 48px;
 }

storyTellingBackend/storyTellingBackend/settings.py

@@ -54,8 +54,6 @@
 
 
 REST_FRAMEWORK = {
-    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
-    'PAGE_SIZE': 5,
     'DEFAULT_PERMISSION_CLASSES':
     ['rest_framework.permissions.IsAuthenticated'],
     'DEFAULT_AUTHENTICATION_CLASSES': [
@@ -108,7 +106,7 @@
         'ENGINE': 'django.db.backends.mysql',
         'NAME': 'nstep_database',
         'USER': 'root',
-        'PASSWORD': 'mypassword',
+        'PASSWORD': 'password',
         'HOST': 'localhost',
         'PORT': '',
     }