Merge pull request #39 from cs130-w22/refine-assignment-view

Refine assignment view

frontend/src/AssignmentView/AssignmentView.tsx

@@ -1,12 +1,36 @@
 import React from "react";
-
+import Button from "react-bootstrap/Button";
+import { Form } from "react-bootstrap";
 import Container from "react-bootstrap/Container";
+import ProgressBar from "react-bootstrap/ProgressBar";
+import StudentAssignmentView from "./StudentAssignmentView";
+import ProfessorAssignmentView from "./ProfessorAssignmentView";
 
-// Student view of the assignment
+const Assignments = ["Assignment 1", "Assignment 2", "Assignment 3"];
 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>
+      {mode === "student" ? (
+        <Button variant="primary" type="submit">
+          Submit Assignment
+        </Button>
+      ) : (
+        <Button variant="primary" type="submit">
+          Submit Grading Script
+        </Button>
+      )}
+      <br />
+      <br />
+      {mode === "student" ? (
+        <StudentAssignmentView />
+      ) : (
+        <ProfessorAssignmentView />
+      )}
     </Container>
   );
 }

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;

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;