Merge branch 'main' of https://github.com/MatricalDefunkt/timetable-m…

…anager-backend
MatricalDefunkt · May 9, 2024 · 5b281ad · 5b281ad
2 parents f27d649 + 5724d32
commit 5b281ad
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 26 deletions.
diff --git a/src/backend/database/sequelize.ts b/src/backend/database/sequelize.ts
@@ -5,6 +5,9 @@ const sequelize = new Sequelize("timetable_manager", "root", Bun.env.DB_PASS, {
     dialect: "mysql",
     logging: Logger.sqlLog,
     port: 3306,
+    dialectOptions: {
+        socketPath: "/var/run/mysqld/mysqld.sock"
+    },
 });
 
 export default sequelize;
diff --git a/src/frontend/Components/Buttons/Generate.tsx b/src/frontend/Components/Buttons/Generate.tsx
@@ -1,4 +1,52 @@
-import { Button } from "@mui/material";
+// import { Button } from "@mui/material";
+// import { SelectedValuesContext } from "../../context/SelectedValuesContext";
+// import React, { useContext, useEffect, useRef } from "react";
+// import api from "../..";
+// import { TimetableDataContext } from "../../context/TimetableDataContext";
+// import { TimetableResponse } from "../../../backend/api/routes/responseTypes";
+// import { edenFetch } from "../fetchAndSet";
+
+// export default function Generate() {
+//     const isDisabled = useRef(true);
+//     const { selectedValues } = useContext(SelectedValuesContext);
+//     const { setTimetable, setAvailable } = useContext(TimetableDataContext);
+//     const handleClick = () => {
+//         const divisionId = selectedValues.division.value;
+//         const departmentId = selectedValues.department.value;
+//         if (!divisionId || !departmentId) return;
+//         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);
+//                 });
+//         });
+//     };
+
+//     useEffect(() => {
+//         if (!selectedValues.division.value || !selectedValues.department.value) {
+//             isDisabled.current = true;
+//         } else {
+//             isDisabled.current = false;
+//         }
+//     }, [selectedValues.division.value, selectedValues.department.value]);
+
+//     return (
+//         <Button
+//             variant="contained"
+//             sx={{ height: "3rem" }}
+//             onClick={handleClick}
+//             disabled={isDisabled.current}
+//         >
+//             Generate New
+//         </Button>
+//     );
+// }
+import { IconButton, Tooltip } from "@mui/material";
+import AutoModeIcon from '@mui/icons-material/AutoMode';
 import { SelectedValuesContext } from "../../context/SelectedValuesContext";
 import React, { useContext, useEffect, useRef } from "react";
 import api from "../..";
@@ -10,7 +58,8 @@ export default function Generate() {
     const isDisabled = useRef(true);
     const { selectedValues } = useContext(SelectedValuesContext);
     const { setTimetable, setAvailable } = useContext(TimetableDataContext);
-    const handleClick = () => {
+
+    const handleAutoModeClick = () => {
         const divisionId = selectedValues.division.value;
         const departmentId = selectedValues.department.value;
         if (!divisionId || !departmentId) return;
@@ -35,13 +84,17 @@ export default function Generate() {
     }, [selectedValues.division.value, selectedValues.department.value]);
 
     return (
-        <Button
-            variant="contained"
-            sx={{ height: "3rem" }}
-            onClick={handleClick}
-            disabled={isDisabled.current}
-        >
-            Generate New
-        </Button>
+        <Tooltip title="Generate New">
+            <span>
+                <IconButton
+                    aria-label="auto-mode"
+                    onClick={handleAutoModeClick}
+                    disabled={isDisabled.current}
+                >
+                    <AutoModeIcon />
+                </IconButton>
+            </span>
+        </Tooltip>
     );
 }
+
diff --git a/src/frontend/Components/NavBar/NavBar.tsx b/src/frontend/Components/NavBar/NavBar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { AppBar, Toolbar } from "@mui/material";
+import { AppBar, Toolbar, Grid } from "@mui/material";
 import {
     AcademicYear as AcademicYearButton,
     Batch as BatchButton,
@@ -11,6 +11,7 @@ import {
     Classroom as ClassroomButton,
     Generate as GenerateButton
 } from "../Buttons";
+import Generate from "../Buttons/Generate"; // Import the Generate component from the correct file path
 
 const NavBar = () => {
     // TODO: #7 @MatricalDefunkt Implement the ability to select an academic year, batch, division and thus a timetable
@@ -28,7 +29,9 @@ const NavBar = () => {
                 <ViewButton />
                 {/* Spacer element to push the next elements to the right */}
                 <div style={{ flexGrow: 1 }}></div>
-                <GenerateButton />
+                {/* <GenerateButton />
+                Render the Generate component */}
+                <Generate />
             </Toolbar>
         </AppBar>
     );

diff --git a/src/frontend/Components/Timetable/OldTimetable.tsx b/src/frontend/Components/Timetable/OldTimetable.tsx
@@ -2,7 +2,8 @@ import React, { useRef } from "react";
 import { TimetableResponse } from "../../../backend/api/routes/responseTypes";
 import { checkIfSlotDataExists } from "../fetchAndSet";
 import { useReactToPrint } from "react-to-print";
-import Button from "@mui/material/Button";
+import { IconButton, Tooltip } from "@mui/material";
+import PrintIcon from '@mui/icons-material/Print';
 
 type Timetable = TimetableResponse["timetable"];
 type Slots = Timetable["slots"];
@@ -156,12 +157,12 @@ export default function OldTimetable({
             </table>
 
             <div className="d-grid d-md-flex justify-content-md-end mb-3">
-                <Button variant="contained" color="primary" size="large" onClick={generatePdf} sx={{ borderRadius: "10px", fontWeight: "bold", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", top: "50px" }}>
-                    Generate PDF
-                </Button>
+                <Tooltip title="Generate PDF">
+                    <IconButton onClick={generatePdf} sx={{ borderRadius: "10px", fontWeight: "bold", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", top: "50px" }}>
+                        <PrintIcon />
+                    </IconButton>
+                </Tooltip>
             </div>
-
-
         </div>
     );
 }
diff --git a/src/frontend/Pages/TimetableCombined.tsx b/src/frontend/Pages/TimetableCombined.tsx
@@ -1,16 +1,92 @@
-import React, { useContext, useState } from "react";
-import OldTimetable from "../Components/Timetable/OldTimetable";
-import { styled } from "@mui/material/styles";
-import { Box } from "@mui/material";
+//import React, { useContext, useState } from "react";
+//import OldTimetable from "../Components/Timetable/OldTimetable";
+//import { styled } from "@mui/material/styles";
+//import { Box } from "@mui/material";
 
-import { DrawerHeader, DrawerRight } from "../Components/Sidebar/Drawer";
-import { NavBar } from "../Components";
+//import { DrawerHeader, DrawerRight } from "../Components/Sidebar/Drawer";
+//import { NavBar } from "../Components";
 import { TimetableDataContext } from "../context/TimetableDataContext";
 import { SelectedValuesProvider } from "../context/SelectedValuesContext";
 import MuiTimetable from "../Components/Timetable/MuiTimetable";
 
 const drawerwidth = 300;
 
+// const Main = styled("main", { shouldForwardProp: (prop) => prop !== "drawerState" })<{
+//     drawerState?: boolean;
+//     drawerwidth: number;
+// }>(({ theme, drawerState, drawerwidth }) => ({
+//     flexGrow: 1,
+//     padding: theme.spacing(3),
+//     transition: theme.transitions.create("margin", {
+//         easing: theme.transitions.easing.sharp,
+//         duration: theme.transitions.duration.leavingScreen,
+//     }),
+//     marginRight: -drawerwidth,
+//     ...(drawerState && {
+//         transition: theme.transitions.create("margin", {
+//             easing: theme.transitions.easing.easeOut,
+//             duration: theme.transitions.duration.enteringScreen,
+//         }),
+//         marginRight: 0,
+//     }),
+//     /**
+//      * This is necessary to enable the selection of content. In the DOM, the stacking order is determined
+//      * by the order of appearance. Following this rule, elements appearing later in the markup will overlay
+//      * those that appear earlier. Since the Drawer comes after the Main content, this adjustment ensures
+//      * proper interaction with the underlying content.
+//      */
+//     position: "relative",
+// }));
+
+// export default function TimetableCombined() {
+//     const [drawerState, setDrawerState] = useState(false);
+//     const [selectedSlotIndex, setSelectedSlotIndex] = useState<number | null>(null);
+//     const { timetable, setTimetable } = useContext(TimetableDataContext);
+//     const handleDrawerOpen = () => {
+//         setDrawerState(true);
+//     };
+
+//     const handleDrawerClose = () => {
+//         setDrawerState(false);
+//     };
+
+//     return (
+//         <>
+//             <Box sx={{ display: "flex" }}>
+//                 <SelectedValuesProvider>
+//                     <NavBar />
+
+//                     <Main drawerState={drawerState} drawerwidth={drawerwidth}>
+//                         <DrawerHeader />
+//                         <OldTimetable
+//                             timetableData={timetable.available ? timetable.timetableData : null}
+//                             handleDrawerOpen={handleDrawerOpen}
+//                             setSelectedSlotIndex={setSelectedSlotIndex}
+//                         />
+//                     </Main>
+//                     <DrawerRight
+//                         setTimetable={setTimetable}
+//                         drawerwidth={drawerwidth}
+//                         handleDrawerClose={handleDrawerClose}
+//                         setSelectedSlotIndex={setSelectedSlotIndex}
+//                         drawerState={drawerState}
+//                         selectedSlotIndex={selectedSlotIndex}
+//                         timetableData={timetable.available ? timetable.timetableData : null}
+//                     />
+//                 </SelectedValuesProvider>
+//             </Box>
+//         </>
+//     );
+// }
+import React, { useContext, useState } from "react";
+import OldTimetable from "../Components/Timetable/OldTimetable";
+import { styled } from "@mui/material/styles";
+import { Box } from "@mui/material";
+import { DrawerHeader, DrawerRight } from "../Components/Sidebar/Drawer";
+import { NavBar } from "../Components"; // Import the updated NavBar component
+
+// Rest of the code...
+
 const Main = styled("main", { shouldForwardProp: (prop) => prop !== "drawerState" })<{
     drawerState?: boolean;
     drawerwidth: number;
@@ -54,8 +130,7 @@ export default function TimetableCombined() {
         <>
             <Box sx={{ display: "flex" }}>
                 <SelectedValuesProvider>
-                    <NavBar />
-
+                    <NavBar /> {/* Render the updated NavBar component */}
                     <Main drawerState={drawerState} drawerwidth={drawerwidth}>
                         <DrawerHeader />
                         <MuiTimetable