Added a selector for timetable type

MatricalDefunkt · May 6, 2024 · 1eecfa7 · 1eecfa7
1 parent e4440bb
commit 1eecfa7
Show file tree

Hide file tree

Showing 14 changed files with 282 additions and 36 deletions.
diff --git a/src/frontend/Components/Buttons/AcademicYear.tsx b/src/frontend/Components/Buttons/AcademicYear.tsx
@@ -6,7 +6,6 @@ import api from "../..";
 
 export default function AcademicYear() {
     const [data, setData] = React.useState<AcademicYearResponse["academicYears"]>([]);
-    const [selectedData, setSelectedData] = React.useState<string | null>(null);
 
     const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
 
@@ -18,7 +17,6 @@ export default function AcademicYear() {
     }, []);
 
     const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-        setSelectedData(event.target.value as string);
         setSelectedValues({
             ...selectedValues,
             academicYear: { selected: true, value: event.target.value },

diff --git a/src/frontend/Components/Buttons/Batch.tsx b/src/frontend/Components/Buttons/Batch.tsx
@@ -3,6 +3,7 @@ import React, { useContext, useEffect } from "react";
 import { BatchResponse } from "../../../backend/api/routes/responseTypes";
 import api from "../..";
 import { SelectedValuesContext } from "../../context/SelectedValuesContext";
+import { TimetableType } from "../../../utils/types";
 
 export default function Batch() {
     const [data, setData] = React.useState<BatchResponse["batches"]>([]);
@@ -30,7 +31,17 @@ export default function Batch() {
     };
 
     return (
-        <Box width={150} mr={"0.5rem"} ml={"0.5rem"}>
+        <Box
+            width={150}
+            mr={"0.5rem"}
+            ml={"0.5rem"}
+            sx={{
+                display:
+                    selectedValues.timetableType.value === TimetableType.DIVISION
+                        ? "block"
+                        : "none",
+            }}
+        >
             <FormControl fullWidth>
                 <TextField
                     onChange={handleChange}

diff --git a/src/frontend/Components/Buttons/Classroom.tsx b/src/frontend/Components/Buttons/Classroom.tsx
@@ -0,0 +1,63 @@
+import { Box, FormControl, MenuItem, TextField } from "@mui/material";
+import React, { useContext, useEffect } from "react";
+import { ClassroomResponse } from "../../../backend/api/routes/responseTypes";
+import api from "../..";
+import { SelectedValuesContext } from "../../context/SelectedValuesContext";
+import { TimetableType } from "../../../utils/types";
+
+export default function Classroom() {
+    const [data, setData] = React.useState<ClassroomResponse["classrooms"]>([]);
+    const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
+
+    useEffect(() => {
+        const id = selectedValues.academicYear.value;
+        if (!id) {
+            return;
+        }
+        api.academicYears({ id })
+            .classrooms.get()
+            .then(({ data, error }) => {
+                if (error) return console.log(error);
+                setData(data.classrooms);
+            });
+    }, [selectedValues.academicYear.value]);
+
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+        const selectedValue = event.target.value as string;
+        setSelectedValues({
+            ...selectedValues,
+            classroom: { selected: true, value: selectedValue },
+        });
+    };
+
+    return (
+        <Box
+            width={150}
+            mr={"0.5rem"}
+            ml={"0.5rem"}
+            sx={{
+                display:
+                    selectedValues.timetableType.value === TimetableType.CLASSROOM
+                        ? "block"
+                        : "none",
+            }}
+        >
+            <FormControl fullWidth>
+                <TextField
+                    onChange={handleChange}
+                    label="Classroom"
+                    select
+                    fullWidth
+                    disabled={!selectedValues.academicYear.selected}
+                    value={selectedValues.classroom.value || ""}
+                >
+                    {data.map((classroom, i) => (
+                        <MenuItem key={classroom.classroomName} value={classroom.id}>
+                            {i + 1}: {classroom.classroomName}
+                        </MenuItem>
+                    ))}
+                </TextField>
+            </FormControl>
+        </Box>
+    );
+}
diff --git a/src/frontend/Components/Buttons/Department.tsx b/src/frontend/Components/Buttons/Department.tsx
@@ -3,6 +3,7 @@ import React, { useContext, useEffect } from "react";
 import { DepartmentResponse } from "../../../backend/api/routes/responseTypes";
 import api from "../..";
 import { SelectedValuesContext } from "../../context/SelectedValuesContext";
+import { TimetableType } from "../../../utils/types";
 
 export default function Department() {
     const [data, setData] = React.useState<DepartmentResponse["departments"]>([]);
@@ -30,7 +31,17 @@ export default function Department() {
     };
 
     return (
-        <Box width={150} mr={"0.5rem"} ml={"0.5rem"}>
+        <Box
+            width={150}
+            mr={"0.5rem"}
+            ml={"0.5rem"}
+            sx={{
+                display:
+                    selectedValues.timetableType.value === TimetableType.DIVISION
+                        ? "block"
+                        : "none",
+            }}
+        >
             <FormControl fullWidth>
                 <TextField
                     onChange={handleChange}

diff --git a/src/frontend/Components/Buttons/Division.tsx b/src/frontend/Components/Buttons/Division.tsx
@@ -3,6 +3,7 @@ import React, { useContext, useEffect } from "react";
 import { DivisionResponse } from "../../../backend/api/routes/responseTypes";
 import api from "../..";
 import { SelectedValuesContext } from "../../context/SelectedValuesContext";
+import { TimetableType } from "../../../utils/types";
 
 export default function Division() {
     const [data, setData] = React.useState<DivisionResponse["divisions"]>([]);
@@ -30,7 +31,17 @@ export default function Division() {
     };
 
     return (
-        <Box width={150} mr={"0.5rem"} ml={"0.5rem"}>
+        <Box
+            width={150}
+            mr={"0.5rem"}
+            ml={"0.5rem"}
+            sx={{
+                display:
+                    selectedValues.timetableType.value === TimetableType.DIVISION
+                        ? "block"
+                        : "none",
+            }}
+        >
             <FormControl fullWidth>
                 <TextField
                     onChange={handleChange}

diff --git a/src/frontend/Components/Buttons/Generate.tsx b/src/frontend/Components/Buttons/Generate.tsx
@@ -16,13 +16,13 @@ export default function Generate() {
         edenFetch(api.generateTT.department({ id: departmentId }).get()).then((data) => {
             console.log(data);
             api.divisions({ id: divisionId })
-            .timetable.get()
-            .then(({ data, error }) => {
-                if (error) return console.log(error);
-                setTimetable(data ?? ({} as TimetableResponse));
-                setAvailable(true);
-            });
-        })
+                .timetable.get()
+                .then(({ data, error }) => {
+                    if (error) return console.log(error);
+                    setTimetable(data ?? ({} as TimetableResponse));
+                    setAvailable(true);
+                });
+        });
     };
     return (
         <Button variant="contained" sx={{ height: "3rem" }} onClick={handleClick}>

diff --git a/src/frontend/Components/Buttons/Teacher.tsx b/src/frontend/Components/Buttons/Teacher.tsx
@@ -0,0 +1,61 @@
+import { Box, FormControl, MenuItem, TextField } from "@mui/material";
+import React, { useContext, useEffect } from "react";
+import { TeacherResponse } from "../../../backend/api/routes/responseTypes";
+import api from "../..";
+import { SelectedValuesContext } from "../../context/SelectedValuesContext";
+import { TimetableType } from "../../../utils/types";
+
+export default function Teacher() {
+    const [data, setData] = React.useState<TeacherResponse["teachers"]>([]);
+    const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
+
+    useEffect(() => {
+        const id = selectedValues.academicYear.value;
+        if (!id) {
+            return;
+        }
+        api.academicYears({ id })
+            .teachers.get()
+            .then(({ data, error }) => {
+                if (error) return console.log(error);
+                setData(data.teachers);
+            });
+    }, [selectedValues.academicYear.value]);
+
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+        const selectedValue = event.target.value as string;
+        setSelectedValues({
+            ...selectedValues,
+            teacher: { selected: true, value: selectedValue },
+        });
+    };
+
+    return (
+        <Box
+            width={150}
+            mr={"0.5rem"}
+            ml={"0.5rem"}
+            sx={{
+                display:
+                    selectedValues.timetableType.value === TimetableType.TEACHER ? "block" : "none",
+            }}
+        >
+            <FormControl fullWidth>
+                <TextField
+                    onChange={handleChange}
+                    label="Teacher"
+                    select
+                    fullWidth
+                    disabled={!selectedValues.academicYear.selected}
+                    value={selectedValues.teacher.value || ""}
+                >
+                    {data.map((teacher, i) => (
+                        <MenuItem key={teacher.teacherName} value={teacher.id}>
+                            {i + 1}: {teacher.teacherName}
+                        </MenuItem>
+                    ))}
+                </TextField>
+            </FormControl>
+        </Box>
+    );
+}
diff --git a/src/frontend/Components/Buttons/TimetableType.tsx b/src/frontend/Components/Buttons/TimetableType.tsx
@@ -0,0 +1,40 @@
+import React, { useContext } from "react";
+import { Box, FormControl, MenuItem, TextField } from "@mui/material";
+import { SelectedValuesContext } from "../../context/SelectedValuesContext";
+import { TimetableType as ETimetableType } from "../../../utils/types";
+
+export default function TimetableType() {
+    const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
+
+    const data: { name: string; value: ETimetableType }[] = [
+        { name: "Division", value: 0 },
+        { name: "Teacher", value: 1 },
+        { name: "Classroom", value: 2 },
+    ];
+
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+        setSelectedValues({
+            ...selectedValues,
+            timetableType: { selected: true, value: Number(event.target.value) as ETimetableType },
+        });
+    };
+    return (
+        <Box width={150} mr={"0.5rem"} ml={"0.5rem"}>
+            <FormControl fullWidth>
+                <TextField
+                    onChange={handleChange}
+                    label="Timetable Type"
+                    select
+                    fullWidth
+                    defaultValue={""}
+                >
+                    {data.map((timetableType, i) => (
+                        <MenuItem key={timetableType.name} value={timetableType.value}>
+                            {i + 1}: {timetableType.name}
+                        </MenuItem>
+                    ))}
+                </TextField>
+            </FormControl>
+        </Box>
+    );
+}
diff --git a/src/frontend/Components/Buttons/View.tsx b/src/frontend/Components/Buttons/View.tsx
@@ -4,19 +4,40 @@ import React, { useContext } from "react";
 import api from "../..";
 import { TimetableDataContext } from "../../context/TimetableDataContext";
 import { TimetableResponse } from "../../../backend/api/routes/responseTypes";
+import { TimetableType } from "../../../utils/types";
 
 export default function View() {
     const { selectedValues } = useContext(SelectedValuesContext);
     const { setTimetable, setAvailable } = useContext(TimetableDataContext);
     const handleClick = () => {
-        const id = selectedValues.division.value;
-        api.divisions({ id })
-            .timetable.get()
-            .then(({ data, error }) => {
-                if (error) return console.log(error);
-                setTimetable(data ?? ({} as TimetableResponse));
-                setAvailable(true);
-            });
+        if (selectedValues.timetableType.value === TimetableType.DIVISION) {
+            const id = selectedValues.division.value;
+            api.divisions({ id })
+                .timetable.get()
+                .then(({ data, error }) => {
+                    if (error) return console.log(error);
+                    setTimetable(data ?? ({} as TimetableResponse));
+                    setAvailable(true);
+                });
+        } else if (selectedValues.timetableType.value === TimetableType.TEACHER) {
+            const id = selectedValues.teacher.value;
+            api.teachers({ id })
+                .timetable.get()
+                .then(({ data, error }) => {
+                    if (error) return console.log(error);
+                    setTimetable(data ?? ({} as TimetableResponse));
+                    setAvailable(true);
+                });
+        } else {
+            const id = selectedValues.classroom.value;
+            api.classrooms({ id })
+                .timetable.get()
+                .then(({ data, error }) => {
+                    if (error) return console.log(error);
+                    setTimetable(data ?? ({} as TimetableResponse));
+                    setAvailable(true);
+                });
+        }
     };
     return (
         <Button variant="contained" sx={{ height: "3rem" }} onClick={handleClick}>

diff --git a/src/frontend/Components/Buttons/index.ts b/src/frontend/Components/Buttons/index.ts
@@ -4,5 +4,18 @@ import Department from "./Department";
 import Division from "./Division";
 import View from "./View";
 import Generate from "./Generate";
+import TimetableType from "./TimetableType";
+import Teacher from "./Teacher";
+import Classroom from "./Classroom";
 
-export { AcademicYear, Batch, Department, Division, View, Generate};
+export {
+    AcademicYear,
+    Batch,
+    Department,
+    Division,
+    View,
+    TimetableType,
+    Generate,
+    Teacher,
+    Classroom,
+};
diff --git a/src/frontend/Components/NavBar/NavBar.tsx b/src/frontend/Components/NavBar/NavBar.tsx
@@ -6,24 +6,29 @@ import {
     Department as DepartmentButton,
     Division as DivisionButton,
     View as ViewButton,
+    TimetableType as TimetableTypeButton,
+    Teacher as TeacherButton,
+    Classroom as ClassroomButton,
 } from "../Buttons";
-import { SelectedValuesProvider } from "../../context/SelectedValuesContext";
 
 const NavBar = () => {
     // TODO: #7 @MatricalDefunkt Implement the ability to select an academic year, batch, division and thus a timetable
-
+    // TODO: #8 @MatricalDefunkt Add the feature to remove selected values if a previous value is changed
     return (
-            <AppBar position="fixed" sx={{ padding: "0.5rem" }}>
-                <Toolbar>
-                    <AcademicYearButton />
-                    <BatchButton />
-                    <DepartmentButton />
-                    <DivisionButton />
-                    {/* Spacer element to push the next elements to the right */}
-                    <div style={{ flexGrow: 1 }}></div>
-                    <ViewButton />
-                </Toolbar>
-            </AppBar>
+        <AppBar position="fixed" sx={{ padding: "0.5rem" }}>
+            <Toolbar>
+                <TimetableTypeButton />
+                <AcademicYearButton />
+                <TeacherButton />
+                <ClassroomButton />
+                <BatchButton />
+                <DepartmentButton />
+                <DivisionButton />
+                {/* Spacer element to push the next elements to the right */}
+                <div style={{ flexGrow: 1 }}></div>
+                <ViewButton />
+            </Toolbar>
+        </AppBar>
     );
 };