Added Intro Evals Slideshow

Author: ethanf108

Diff for: package-lock.json

@@ -6,11 +6,11 @@
     "@axa-fr/react-oidc": "^6.14.4",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.14.9",
     "@mui/joy": "^5.0.0-beta.9",
     "@mui/material": "^5.14.12",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -26,8 +26,9 @@
     "react-router": "^6.8.1",
     "react-router-dom": "^6.16.0",
     "react-scripts": "^5.0.1",
-    "reactstrap": "^9.2.0",
     "react-toastify": "^9.1.3",
+    "reactstrap": "^9.2.0",
+    "reveal.js": "^4.6.1",
     "typescript": "^4"
   },
   "scripts": {
@@ -55,6 +56,7 @@
     ]
   },
   "devDependencies": {
+    "@types/reveal.js": "^4.4.3",
     "sass": "^1.58.1",
     "typescript-eslint-language-service": "^5.0.5"
   },

Diff for: package.json

@@ -10,3 +10,35 @@ export interface UserInfo {
     username: string,
     fullName: string,
 }
+
+export interface DirectorshipAttendanceRecord {
+    approved: boolean,
+    committe: DirectorshipType,
+    frosh: number[],
+    members: string[],
+    timestamp: Date
+}
+
+export interface SeminarAttendanceRecord {
+    approved: boolean,
+    name: string,
+    frosh: number[],
+    members: string[],
+    timestamp: Date,
+}
+
+export interface IntroEvalsSummary {
+    name: string,
+    uid: string | null,
+    seminars: number,
+    directorships: number,
+    missed_hms: number,
+    signatures: number,
+    max_signatures: number,
+}
+
+export interface IntroEvalsForm {
+    uid: string,
+    social_events: string | null,
+    comments: string | null,
+}

Diff for: src/API/Types.ts

@@ -1,19 +1,20 @@
 import React from 'react'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
 import Home from './pages/Home'
-import AttendanceHistory from './pages/AttendanceHistory'
+import AttendanceHistory from './pages/Attendance/AttendanceHistory'
 import SubmitDirectorship from './pages/SubmitDirectorship'
 import PageContainer from './containers/PageContainer'
 import 'csh-material-bootstrap/dist/csh-material-bootstrap.css'
 import NotFound from './pages/NotFound'
-import { request } from 'http'
 import SubmitSeminar from './pages/SubmitSeminar'
+import IntroEvalsSlideshow from './pages/Slideshow/IntroEvalsSlideshow'
 
 type Props = {
     rerouteHomeOn404?: boolean
 }
 
 const App: React.FC<Props> = ({ rerouteHomeOn404 = null }) => {
+
     return (
         <Router>
             <PageContainer>
@@ -23,6 +24,7 @@ const App: React.FC<Props> = ({ rerouteHomeOn404 = null }) => {
                     <Route path='/attendance/history' element={<AttendanceHistory />} />
                     <Route path='/directorship/submit' element={<SubmitDirectorship />} />
                     <Route path='/seminar/submit' element={<SubmitSeminar />} />
+                    <Route path='/slideshow/intro' element={<IntroEvalsSlideshow />} />
                     <Route path='*' element={rerouteHomeOn404 ?? true ? <Home /> : <NotFound />} />
                 </Routes>
             </PageContainer>

Diff for: src/App.tsx

@@ -7,14 +7,15 @@ type Props = {
 }
 
 export const PageContainer: React.FC<Props> = ({ children }) => {
+
     return (
         <div style={{ marginTop: '90px' }}>
-            <Container className="main" fluid>
-                <NavBar />
+            <Container className="main" fluid={!window.location.href.includes("slideshow")}>
+                {!window.location.href.includes("slideshow") && <NavBar />}
                 <Container>{children}</Container>
             </Container>
         </div>
     )
 }
 
-export default PageContainer
+export default PageContainer

Diff for: src/containers/PageContainer.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { Button, Col, Container, Row } from "reactstrap"
+
+const BatchSlide = (props: {
+    name: string,
+    names: string[],
+    onPassFail: (passed: boolean) => void
+}) => {
+
+    const [passed, setPassed] = useState<string | null>(null);
+
+    return (
+        <section data-transition="slide" className="vw-100">
+            <Container className="d-flex flex-column vh-100 px-0 w-100">
+                <Row>
+                    <Col className="text-center">
+                        <h2>{props.name}</h2>
+                    </Col>
+                </Row>
+                <Row>
+                    {
+                        props.names.map((f, i) =>
+                            <Col key={i} className="py-0 m-0 col-2">
+                                <p className="batch-name py-1 m-0">{f}</p>
+                            </Col>
+                        )
+                    }
+                </Row>
+                {
+                    passed == null ?
+                        <Row className="text-center m-3 py-3 align-self-center">
+                            <Button
+                                className="mr-3 shadow-none border-success border rounded pf-button"
+                                onClick={_ => {
+                                    props.onPassFail(true);
+                                    setPassed("Passed");
+                                }}
+                            >
+                                <h1 className="text-success px-5">Pass</h1>
+                            </Button>
+                            <Button
+                                className="mr-3 shadow-none disband-gray border rounded pf-button"
+                                onClick={_ => setPassed("Disbanded")}
+                            >
+                                <h1 className="px-5 disband-gray">Disband</h1>
+                            </Button>
+                            <Button
+                                className="mr-3 shadow-none border-danger border rounded pf-button"
+                                onClick={_ => {
+                                    props.onPassFail(false);
+                                    setPassed("failed");
+                                }}
+                            >
+                                <h1 className="text-danger px-5">Fail</h1>
+                            </Button>
+                        </Row>
+                        :
+                        <h3 className={`py-3 my-3 ${passed === "Success" ? "text-success" : (passed == "Failed" ? "text-danger" : "")}`}>{passed}</h3>
+                }
+            </Container>
+        </section>
+    )
+}
+
+export default BatchSlide

Diff for: src/pages/Slideshow/BatchSlide.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useReducer, useState } from "react"
+import Reveal from "reveal.js";
+import Slide from "./Slide"
+import 'reveal.js/dist/reset.css'
+import 'reveal.js/dist/reveal.css'
+import 'reveal.js/dist/theme/white.css'
+import './index.css'
+import { IntroEvalsSummary } from "../../API/Types";
+import { getJSON, toastError } from "../../API/API";
+import { Container } from "reactstrap";
+import BatchSlide from "./BatchSlide";
+
+const IntroEvalsSlideshow = () => {
+
+    const initSlides = () => {
+        let slides = new Reveal({
+            backgroundTransition: 'slide',
+            transition: 'slide'
+        });
+        slides.initialize();
+    }
+
+    const [frosh, setFrosh] = useState<IntroEvalsSummary[]>([]);
+
+    useEffect(() => {
+        getJSON<IntroEvalsSummary[]>("/api/evals/intro")
+            .then(setFrosh).then(initSlides)
+            .catch(toastError("Unable to fetch Intro Evals data"));
+    }, [])
+
+    interface Batch {
+        name: string,
+        names: string[],
+    }
+
+    const batches: Batch[] = [];
+
+    return (
+        <div className="reveal vh-100 vw-100">
+            <div className="slides w-100" data-transition="slide">
+                <section data-transition="slide" className="vw-100">
+                    <Container className="d-flex flex-column vh-100 px-0 d-xl-flex w-100">
+                        <h2>Intro Evals Slideshow</h2>
+                        {/* placeholder, because slideshow doesn't work unless at least one slide is present from the beginning*/}
+                    </Container>
+                </section>
+                {
+                    batches.map((b, i) =>
+                        <BatchSlide key={i} name={b.name} names={b.names} onPassFail={(pass) => setFrosh(frosh.filter(f => !b.names.includes(f.name)))} />
+                    )
+                }
+
+                {
+                    frosh.sort((a, b) => a.name.localeCompare(b.name)).map((f, i) =>
+                        <Slide
+                            key={i}
+                            uid={f.uid}
+                            name={f.name}
+                            packet={Math.trunc(100 * f.signatures / f.max_signatures)}
+                            hm_absences={f.missed_hms}
+                            directorships={f.directorships}
+                            seminars={f.seminars} />)
+                }
+            </div>
+        </div>
+
+    )
+}
+
+export default IntroEvalsSlideshow

Diff for: src/pages/Slideshow/IntroEvalsSlideshow.tsx

@@ -0,0 +1,19 @@
+import { Card, CardText, Container, Row } from "reactstrap"
+
+const NumberBox = (props: { text: string, subtext: string, success: boolean }) => {
+
+    return (
+        <Card className={`bg-transparent shadow-none ${props.success ? "border-success" : "border-danger"} p-3 rounded number-box h-100`}>
+            <Container className="h-100 d-flex flex-column">
+                <Row className="d-block justify-content-center">
+                    <h1 className="number-box-text">{props.text}</h1>
+                </Row>
+                <Row className="d-inline number-box-subtext">
+                    <p>{props.subtext}</p>
+                </Row>
+            </Container>
+        </Card>
+    )
+}
+
+export default NumberBox