Initial Commit

frontend/src/views/Grades.tsx

@@ -0,0 +1,101 @@
+/**
+ * Grades interface
+ */
+import {Ascending, Assignment, Page, Section, SortSettings} from "../interfaces";
+import React, {useContext, useMemo, useState} from "react";
+import AssignmentsTable, {AssignmentsTableColumn} from "../components/tables/AssignmentsTable";
+import Button from "react-bootstrap/Button";
+import {ArrowLeft} from "react-bootstrap-icons";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Alert from "react-bootstrap/Alert";
+import FinalGradesTable from "../components/tables/FinalGradesTable";
+import {FormattedDate, TimeRange} from "../components/datetime";
+import {globalContext} from "../contexts";
+import {Accordion} from "react-bootstrap";
+import Table from "react-bootstrap/Table";
+import SortSelect from "../components/input/SortSelect";
+
+const columns = [AssignmentsTableColumn.DUEDATE, AssignmentsTableColumn.NAME, AssignmentsTableColumn.CATEGORY, AssignmentsTableColumn.WEIGHT, AssignmentsTableColumn.SCORE];
+
+// TODO: Sorting is fucked
+
+export default function GradesInterface({section}: { section: Section }) {
+    const {setCurrentPage} = useContext(globalContext);
+    // @ts-ignore
+    const assignments: Assignment[] = section.assignments;
+    const [sortSetings, setSortSettings] = useState<SortSettings<AssignmentsTableColumn>>({
+        by: AssignmentsTableColumn.DUEDATE,
+        order: Ascending
+    });
+
+    const currentTime = useMemo(() => new Date(), []);
+    const upcomingClasses = useMemo(() => section.startStopDates
+            .filter(s => currentTime.getTime() < s.stop.getTime())
+            .sort((a, b) => a.start.getTime() - b.start.getTime())
+        , [section.startStopDates, currentTime]);
+
+    return (
+        <>
+            <Alert variant="warning">The current grades table does not show assignment flags (missing, late, etc)</Alert>
+            <Button variant="outline-secondary" onClick={() => setCurrentPage(Page.sections)}>
+                <ArrowLeft/> Courses
+            </Button>
+            <Row>
+                <Col>
+                    <h1>{section.schoolCourseTitle}</h1>
+                    <p>Yeah this page is sorta ugly. This is temporary.</p>
+                </Col>
+                {/* Accordion with grades and upcoming classes. This is probably big enough to warrant a separate component */}
+                <Col className="my-2">
+                    <Accordion>
+                        <Accordion.Item eventKey="0">
+                            <Accordion.Header>Current Grades</Accordion.Header>
+                            <Accordion.Body>
+                                <FinalGradesTable section={section}/>
+                            </Accordion.Body>
+                        </Accordion.Item>
+                        <Accordion.Item eventKey="1">
+                            <Accordion.Header>Upcoming Classes</Accordion.Header>
+                            <Accordion.Body>
+                                <Table striped>
+                                    <thead>
+                                    <tr>
+                                        <th>Date</th>
+                                        <th>Time</th>
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                    {upcomingClasses.map(c =>
+                                        <tr key={c.sectionEnrollmentId}>
+                                            <td><FormattedDate date={c.start}/></td>
+                                            <td><TimeRange date1={c.start} date2={c.stop}/></td>
+                                        </tr>
+                                    )}
+                                    </tbody>
+                                </Table>
+                            </Accordion.Body>
+                        </Accordion.Item>
+                    </Accordion>
+                </Col>
+            </Row>
+            <Row className="justify-content-end">
+                <Col>
+                    <h2>Assignments</h2>
+                </Col>
+                {/* Grade sort thing. Only display if the table also displays */}
+                {assignments.length !== 0 &&
+                    <Col sm={4} md={4}>
+                        <SortSelect settings={sortSetings} setSettings={setSortSettings} sortByOptions={columns}/>
+                    </Col>
+                }
+            </Row>
+            {assignments.length === 0
+                ? <p>No assignments!</p>
+                : <AssignmentsTable assignments={assignments} columns={columns} sort={sortSetings}/>
+            }
+        </>
+        // TODO: Display flags (missing, collected, incomplete, etc)
+        // TODO: Deal with extra credit (2/0). That fucks everything up and I'm too tired to figure it out
+    )
+};