Fixed printing: Prints in A3

MatricalDefunkt · May 10, 2024 · 84924ad · 84924ad
1 parent d185403
commit 84924ad
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 49 deletions.
diff --git a/src/frontend/App.css b/src/frontend/App.css
@@ -28,3 +28,7 @@ tr {
 ::-webkit-scrollbar-corner {
     background-color: #0000;
 }
+
+@page {
+    size: A3 landscape;
+}
diff --git a/src/frontend/Components/Buttons/Print.tsx b/src/frontend/Components/Buttons/Print.tsx
@@ -40,11 +40,11 @@ const getName = (selectedValues: {
     };
 }) => {
     if (selectedValues.timetableType.value === TimetableType.DIVISION) {
-        return `${selectedValues.academicYear}-${selectedValues.batch}-${selectedValues.department}-${selectedValues.division}-timetable`;
+        return `${selectedValues.academicYear.value}-${selectedValues.batch.value}-${selectedValues.department.value}-${selectedValues.division.value}-timetable`;
     } else if (selectedValues.timetableType.value === TimetableType.TEACHER) {
-        return `${selectedValues.academicYear}-${selectedValues.teacher}-timetable`;
+        return `${selectedValues.academicYear.value}-${selectedValues.teacher.value}-timetable`;
     } else if (selectedValues.timetableType.value === TimetableType.CLASSROOM) {
-        return `${selectedValues.academicYear}-${selectedValues.classroom}-timetable`;
+        return `${selectedValues.academicYear.value}-${selectedValues.classroom.value}-timetable`;
     } else return "Insert Name Here";
 };
 

diff --git a/src/frontend/Components/Timetable/MuiTimetable.tsx b/src/frontend/Components/Timetable/MuiTimetable.tsx
@@ -2,7 +2,6 @@ import React, { useContext } from "react";
 import { TimetableResponse } from "../../../backend/api/routes/responseTypes";
 import { checkIfSlotDataExists } from "../fetchAndSet";
 import {
-    Divider,
     Paper,
     Table,
     TableBody,
@@ -91,17 +90,11 @@ function Cell({
 function Slot({ slotDatas, viewAllData }: { slotDatas: SlotDatas; viewAllData: boolean }) {
     const slotDatasFiltered = slotDatas!.filter(checkIfSlotDataExists);
     return (
-        <React.Fragment>
-            {/* <Table> */}
-            {/* <TableBody> */}
+        <div>
             {slotDatasFiltered!.map((dataItem, slotDataIndex: number) => (
-                // <TableRow key={slotDataIndex}>
                 <Cell key={slotDataIndex} slotDataItem={dataItem} viewAllData={viewAllData} />
-                // </TableRow>
             ))}
-            {/* </TableBody> */}
-            {/* </Table> */}
-        </React.Fragment>
+        </div>
     );
 }
 
@@ -153,14 +146,14 @@ function Row({
 
 function Headers({ slotNumbers }: { slotNumbers: Set<Slots[0]["number"]> }) {
     const headers = (
-        <>
+        <React.Fragment>
             <TableCell key="days-slots-header">Days/Slots</TableCell>
             {Array.from(slotNumbers)
                 .sort()
                 .map((slotNumber) => (
                     <TableCell key={slotNumber}>{slotNumber}</TableCell>
                 ))}
-        </>
+        </React.Fragment>
     );
     return headers;
 }
@@ -188,9 +181,9 @@ export default function MuiTimetable({
     });
 
     return (
-        <div ref={pdfComponent} style={{ width: "100%" }}>
-            <TableContainer component={Paper}>
-                <Table>
+        <TableContainer component={Paper} className="printable">
+            <div ref={pdfComponent}>
+                <Table size="small">
                     <TableHead>
                         <TableRow>
                             <Headers slotNumbers={slotNumbers} />
@@ -212,7 +205,7 @@ export default function MuiTimetable({
                             ))}
                     </TableBody>
                 </Table>
-            </TableContainer>
-        </div>
+            </div>
+        </TableContainer>
     );
 }
diff --git a/src/frontend/Pages/TimetableCombined.tsx b/src/frontend/Pages/TimetableCombined.tsx
@@ -92,13 +92,13 @@ const Main = styled("main", { shouldForwardProp: (prop) => prop !== "drawerState
     flexGrow: 1,
     padding: theme.spacing(3),
     transition: theme.transitions.create("margin", {
-        easing: theme.transitions.easing.sharp,
+        easing: theme.transitions.easing.easeInOut,
         duration: theme.transitions.duration.leavingScreen,
     }),
     marginRight: -drawerwidth,
     ...(drawerState && {
         transition: theme.transitions.create("margin", {
-            easing: theme.transitions.easing.easeOut,
+            easing: theme.transitions.easing.easeInOut,
             duration: theme.transitions.duration.enteringScreen,
         }),
         marginRight: 0,
@@ -126,32 +126,30 @@ export default function TimetableCombined() {
     };
 
     return (
-        <>
-            <Box sx={{ display: "flex" }}>
-                <SelectedValuesProvider>
-                    <ViewAllDataProvider>
-                        <NavBar pdfComponent={pdfComponent} />
-                        <Main drawerState={drawerState} drawerwidth={drawerwidth}>
-                            <DrawerHeader />
-                            <MuiTimetable
-                                timetableData={timetable.available ? timetable.timetableData : null}
-                                handleDrawerOpen={handleDrawerOpen}
-                                setSelectedSlotIndex={setSelectedSlotIndex}
-                                pdfComponent={pdfComponent}
-                            />
-                        </Main>
-                    </ViewAllDataProvider>
-                    <DrawerRight
-                        setTimetable={setTimetable}
-                        drawerwidth={drawerwidth}
-                        handleDrawerClose={handleDrawerClose}
-                        setSelectedSlotIndex={setSelectedSlotIndex}
-                        drawerState={drawerState}
-                        selectedSlotIndex={selectedSlotIndex}
-                        timetableData={timetable.available ? timetable.timetableData : null}
-                    />
-                </SelectedValuesProvider>
-            </Box>
-        </>
+        <Box sx={{ display: "flex" }}>
+            <SelectedValuesProvider>
+                <ViewAllDataProvider>
+                    <NavBar pdfComponent={pdfComponent} />
+                    <Main drawerState={drawerState} drawerwidth={drawerwidth} className="main">
+                        <DrawerHeader />
+                        <MuiTimetable
+                            timetableData={timetable.available ? timetable.timetableData : null}
+                            handleDrawerOpen={handleDrawerOpen}
+                            setSelectedSlotIndex={setSelectedSlotIndex}
+                            pdfComponent={pdfComponent}
+                        />
+                    </Main>
+                </ViewAllDataProvider>
+                <DrawerRight
+                    setTimetable={setTimetable}
+                    drawerwidth={drawerwidth}
+                    handleDrawerClose={handleDrawerClose}
+                    setSelectedSlotIndex={setSelectedSlotIndex}
+                    drawerState={drawerState}
+                    selectedSlotIndex={selectedSlotIndex}
+                    timetableData={timetable.available ? timetable.timetableData : null}
+                />
+            </SelectedValuesProvider>
+        </Box>
     );
 }
diff --git a/src/frontend/context/TimetableDataContext.tsx b/src/frontend/context/TimetableDataContext.tsx
@@ -7,26 +7,36 @@ type TimetableDataContextType = {
         available: boolean;
         timetableData: TimetableResponse;
     };
+    legend: Record<string, string>;
+    setLegend: Dispatch<Record<string, string>>;
     setTimetable: Updater<TimetableResponse>;
     setAvailable: Dispatch<boolean>;
 };
 
 export const TimetableDataContext = React.createContext<TimetableDataContextType>({
     timetable: { available: false, timetableData: {} as TimetableResponse },
+    legend: {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setLegend: () => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setTimetable: () => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setAvailable: () => {},
 });
 
 export const TimetableDataContextProvider = ({ children }: { children: React.ReactNode }) => {
-    const [timetable, setTimetable] = useImmer<TimetableResponse>(undefined as unknown as TimetableResponse);
+    const [timetable, setTimetable] = useImmer<TimetableResponse>(
+        undefined as unknown as TimetableResponse,
+    );
     const [available, setAvailable] = useState<boolean>(false);
+    const [legend, setLegend] = useState<Record<string, string>>({});
 
     return (
         <TimetableDataContext.Provider
             value={{
                 timetable: { available, timetableData: timetable ?? ({} as TimetableResponse) },
+                legend,
+                setLegend,
                 setTimetable,
                 setAvailable,
             }}