From 11cc878e4a9d18fe1fc1d7cfb18bb9beb8834a71 Mon Sep 17 00:00:00 2001
From: "edwardsabalburo@g.ucla.edu" <edwardsabalburo@g.ucla.edu>
Date: Sun, 6 Feb 2022 12:16:14 -0800
Subject: [PATCH 1/2] added scaffolding for the frontend assignment view

---
 .../src/AssignmentView/AssignmentView.tsx     | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/frontend/src/AssignmentView/AssignmentView.tsx b/frontend/src/AssignmentView/AssignmentView.tsx
index d440387..7ae429b 100644
--- a/frontend/src/AssignmentView/AssignmentView.tsx
+++ b/frontend/src/AssignmentView/AssignmentView.tsx
@@ -2,15 +2,73 @@ import React, { useState } from "react";
 
 import Container from "react-bootstrap/Container";
 import Stack from "react-bootstrap/Stack";
+import Button from "react-bootstrap/Button";
+import { Form } from "react-bootstrap";
+import Card from "react-bootstrap/Card";
+import CardGroup from "react-bootstrap/CardGroup";
+import ProgressBar from 'react-bootstrap/ProgressBar'
 
 const Assignments = ["Assignment 1", "Assignment 2", "Assignment 3"];
 
+const userGrade = 60; // check dynamically
+const classMedian = 60; 
+const classMean = 60; 
+
 //Student view of the assignment 
+// add:
+// button to submit
+// file thing to add submission
+// current grade 
 const AssignmentView = () => {
   return (
     <Container>
       <h1>Assignment 1</h1>
+      <Form.Group className="mb-3">
+        <Form.Control type="file" />
+      </Form.Group>
+      <Button variant="primary" type="submit">
+          Submit
+      </Button>
+      <br />
+      <br />
+      <h2>Current Grade: </h2>
+      <div>
+      <ProgressBar variant="success" now={userGrade} label={`Your Grade: ${userGrade}%`}/>
+      <ProgressBar variant="info" now={classMedian} label={`Class Median: ${classMedian}%`} />
+      <ProgressBar variant="warning" now={classMean} label={`Class Mean: ${classMean}%`}/>
+    </div>
+      <br />
+      <h2>Test Cases</h2>
+      <CardGroup>
+  <Card>
+    <Card.Body>
+      <Card.Title>Test Case 1</Card.Title>
+      <Card.Text>
+        You got this test case wrong, consider checking...
+      </Card.Text>
+    </Card.Body>
+  </Card>
+  <Card>
+    <Card.Body>
+      <Card.Title>Test Case 2</Card.Title>
+      <Card.Text>
+        Hint: are you checking...?
+      </Card.Text>
+    </Card.Body>
+  </Card>
+  <Card>
+    <Card.Body>
+      <Card.Title>Test Case 3</Card.Title>
+      <Card.Text>
+        No hints given for this test case!
+      </Card.Text>
+    </Card.Body>
+  </Card>
+</CardGroup>
     </Container>
+
+    
+
   );
 };
 

From 5763c1e525ff455a44869413954b6ececdb402ea Mon Sep 17 00:00:00 2001
From: "edwardsabalburo@g.ucla.edu" <edwardsabalburo@g.ucla.edu>
Date: Wed, 9 Feb 2022 14:34:18 -0800
Subject: [PATCH 2/2] Separated Student and Professor Views, added changes
 according to PR

---
 .../src/AssignmentView/AssignmentView.tsx     | 82 +++++--------------
 .../ProfessorAssignmentView.tsx               | 68 +++++++++++++++
 .../AssignmentView/StudentAssignmentView.tsx  | 69 ++++++++++++++++
 3 files changed, 157 insertions(+), 62 deletions(-)
 create mode 100644 frontend/src/AssignmentView/ProfessorAssignmentView.tsx
 create mode 100644 frontend/src/AssignmentView/StudentAssignmentView.tsx

diff --git a/frontend/src/AssignmentView/AssignmentView.tsx b/frontend/src/AssignmentView/AssignmentView.tsx
index 8682f80..7cafd7d 100644
--- a/frontend/src/AssignmentView/AssignmentView.tsx
+++ b/frontend/src/AssignmentView/AssignmentView.tsx
@@ -1,80 +1,38 @@
 import React from "react";
-
-import Container from "react-bootstrap/Container";
-import Stack from "react-bootstrap/Stack";
 import Button from "react-bootstrap/Button";
 import { Form } from "react-bootstrap";
-import Card from "react-bootstrap/Card";
-import CardGroup from "react-bootstrap/CardGroup";
+import Container from "react-bootstrap/Container";
 import ProgressBar from "react-bootstrap/ProgressBar";
+import StudentAssignmentView from "./StudentAssignmentView";
+import ProfessorAssignmentView from "./ProfessorAssignmentView";
 
 const Assignments = ["Assignment 1", "Assignment 2", "Assignment 3"];
-
-const userGrade = 60; // check dynamically
-const classMedian = 60;
-const classMean = 60;
-
-//Student view of the assignment
-// add:
-// button to submit
-// file thing to add submission
-// current grade
-const AssignmentView = () => {
+function AssignmentView() {
+  const mode: "student" | "faculty" = "student"; //needs to be taken from backend or state
   return (
     <Container>
       <h1>Assignment 1</h1>
       <Form.Group className="mb-3">
         <Form.Control type="file" />
       </Form.Group>
-      <Button variant="primary" type="submit">
-        Submit
-      </Button>
-      <br />
+      {mode === "student" ? (
+        <Button variant="primary" type="submit">
+          Submit Assignment
+        </Button>
+      ) : (
+        <Button variant="primary" type="submit">
+          Submit Grading Script
+        </Button>
+      )}
       <br />
-      <h2>Current Grade: </h2>
-      <div>
-        <ProgressBar
-          variant="success"
-          now={userGrade}
-          label={`Your Grade: ${userGrade}%`}
-        />
-        <ProgressBar
-          variant="info"
-          now={classMedian}
-          label={`Class Median: ${classMedian}%`}
-        />
-        <ProgressBar
-          variant="warning"
-          now={classMean}
-          label={`Class Mean: ${classMean}%`}
-        />
-      </div>
       <br />
-      <h2>Test Cases</h2>
-      <CardGroup>
-        <Card>
-          <Card.Body>
-            <Card.Title>Test Case 1</Card.Title>
-            <Card.Text>
-              You got this test case wrong, consider checking...
-            </Card.Text>
-          </Card.Body>
-        </Card>
-        <Card>
-          <Card.Body>
-            <Card.Title>Test Case 2</Card.Title>
-            <Card.Text>Hint: are you checking...?</Card.Text>
-          </Card.Body>
-        </Card>
-        <Card>
-          <Card.Body>
-            <Card.Title>Test Case 3</Card.Title>
-            <Card.Text>No hints given for this test case!</Card.Text>
-          </Card.Body>
-        </Card>
-      </CardGroup>
+      {mode === "student" ? (
+        <StudentAssignmentView />
+      ) : (
+        <ProfessorAssignmentView />
+      )}
     </Container>
   );
-};
+}
 
 export default AssignmentView;
diff --git a/frontend/src/AssignmentView/ProfessorAssignmentView.tsx b/frontend/src/AssignmentView/ProfessorAssignmentView.tsx
new file mode 100644
index 0000000..8fae332
--- /dev/null
+++ b/frontend/src/AssignmentView/ProfessorAssignmentView.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+
+import Container from "react-bootstrap/Container";
+import Stack from "react-bootstrap/Stack";
+import Button from "react-bootstrap/Button";
+import { Form } from "react-bootstrap";
+import Card from "react-bootstrap/Card";
+import CardGroup from "react-bootstrap/CardGroup";
+import ProgressBar from "react-bootstrap/ProgressBar";
+
+const numSubmissions = 60; // percentage of submitted assignments
+const classMedian = 60; // change dynamically
+const classMean = 60;
+
+class hint {
+  name: string;
+  text: string;
+  id: number;
+
+  constructor(name: string, text: string, id: number) {
+    this.name = name;
+    this.text = text;
+    this.id = id;
+  }
+}
+
+const hint1 = new hint("hint title", "hint body", 1);
+const hint2 = new hint("hint title 2", "hint body 2", 2);
+const hints = [hint1, hint2]; // get all hints from database
+
+const AssignmentView = () => {
+  return (
+    <Container>
+      <h2>Current Grades: </h2>
+      <div>
+        <ProgressBar
+          variant="success"
+          now={numSubmissions}
+          label={`Total Submissions: ${numSubmissions}%`}
+        />
+        <ProgressBar
+          variant="info"
+          now={classMedian}
+          label={`Class Median: ${classMedian}%`}
+        />
+        <ProgressBar
+          variant="warning"
+          now={classMean}
+          label={`Class Mean: ${classMean}%`}
+        />
+      </div>
+      <br />
+      <h2>Hints Given</h2>
+      <CardGroup>
+        {hints.map((hint) => (
+          <Card key={hint.id}>
+            <Card.Body>
+              <Card.Title>{hint.name}</Card.Title>
+              <Card.Text>{hint.text}</Card.Text>
+            </Card.Body>
+          </Card>
+        ))}
+      </CardGroup>
+    </Container>
+  );
+};
+
+export default AssignmentView;
diff --git a/frontend/src/AssignmentView/StudentAssignmentView.tsx b/frontend/src/AssignmentView/StudentAssignmentView.tsx
new file mode 100644
index 0000000..1289eee
--- /dev/null
+++ b/frontend/src/AssignmentView/StudentAssignmentView.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+
+import Container from "react-bootstrap/Container";
+import Stack from "react-bootstrap/Stack";
+import Button from "react-bootstrap/Button";
+import { Form } from "react-bootstrap";
+import Card from "react-bootstrap/Card";
+import CardGroup from "react-bootstrap/CardGroup";
+import ProgressBar from "react-bootstrap/ProgressBar";
+
+class hint {
+  name: string;
+  text: string;
+  id: number;
+
+  constructor(name: string, text: string, id: number) {
+    this.name = name;
+    this.text = text;
+    this.id = id;
+  }
+}
+
+const hint1 = new hint("hint title", "hint body", 1);
+const hint2 = new hint("hint title 2", "hint body 2", 2);
+const hints = [hint1, hint2]; // take from database
+
+const userGrade = 60; // check dynamically
+const classMedian = 60;
+const classMean = 60;
+
+//Student view of the assignment
+function StudentAssignmentCard() {
+  return (
+    <Container>
+      <h2>Current Grade: </h2>
+      <div>
+        <ProgressBar
+          variant="success"
+          now={userGrade}
+          label={`Your Grade: ${userGrade}%`}
+        />
+        <ProgressBar
+          variant="info"
+          now={classMedian}
+          label={`Class Median: ${classMedian}%`}
+        />
+        <ProgressBar
+          variant="warning"
+          now={classMean}
+          label={`Class Mean: ${classMean}%`}
+        />
+      </div>
+      <br />
+      <h2>Test Cases</h2>
+      <CardGroup>
+        {hints.map((hint) => (
+          <Card key={hint.id}>
+            <Card.Body>
+              <Card.Title>{hint.name}</Card.Title>
+              <Card.Text>{hint.text}</Card.Text>
+            </Card.Body>
+          </Card>
+        ))}
+      </CardGroup>
+    </Container>
+  );
+}
+
+export default StudentAssignmentCard;