Merge pull request #48 from hotungkhanh/kan-81/fine-tuning-mods

Kan 81/fine tuning mods

frontend/src/components/GanttChart.tsx

@@ -3,6 +3,7 @@ import { Id } from "vis-data/declarations/data-interface";
 import { DataGroupCollectionType, DataItemCollectionType, DataSet, Timeline } from "vis-timeline/standalone";
 import "vis-timeline/styles/vis-timeline-graph2d.min.css";
 import "../styles/ganttUnassignable.css";
+import { useAuthContext } from "../security/AuthContext";
 
 import {
   findCampusSolution,
@@ -13,13 +14,15 @@ import {
   rawDate,
   toRawDate,
 } from "../scripts/solutionParsing";
-import { TimetableSolution, Unit } from "../scripts/api";
+import { REMOTE_API_URL, TimetableSolution, Unit } from "../scripts/api";
 import { useParams } from "react-router-dom";
 import JSZip from "jszip";
 import { saveAs } from "file-saver";
+import { Button } from "@mui/material";
 
 export default memo(function GanttChart() {
   const params = useParams();
+  const { authHeader } = useAuthContext();
   const timelineRef = useRef<HTMLDivElement | null>(null);
   const items = useRef(new DataSet<GanttItem>());
   const groups = useRef(new DataSet<GanttGroup>());
@@ -58,7 +61,13 @@ export default memo(function GanttChart() {
         end: "2024-10-19",
         min: "2024-10-14",
         max: "2024-10-19",
-        editable: true,
+        editable: {
+          add: false, // add new items by double tapping
+          updateTime: true, // drag items horizontally
+          updateGroup: true, // drag items from one group to another
+          remove: false, // delete an item by tapping the delete button top right
+          overrideItems: false, // allow these options to override item.editable
+        },
       };
 
       // Initialize the timeline
@@ -199,7 +208,7 @@ export default memo(function GanttChart() {
             "-" +
             course.replace(/[^a-zA-Z0-9]/g, "_") +
             ".csv",
-          csvData
+          csvData.replace(/\u00A0/g, " ")
         );
       }
     })
@@ -214,17 +223,33 @@ export default memo(function GanttChart() {
 
   const saveData = async () => {
     try {
-      const response = await fetch("http://localhost:8080/timetabling/update", {
+      const response = await fetch(REMOTE_API_URL + "/timetabling/update", {
         method: "PUT",
         headers: {
           "Content-Type": "application/json",
+          "Authorization": authHeader,
         },
         body: JSON.stringify(moddedUnits),
       });
 
       if (!response.ok) {
         throw new Error("Failed to save data, error in GanttChart.tsx");
       }
+
+
+
+      fetch(REMOTE_API_URL + "/timetabling/view", { headers: { 'Authorization': authHeader } })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        const timetableSolutions: TimetableSolution[] =
+          data as TimetableSolution[];
+        sessionStorage.setItem("campusSolutions", JSON.stringify(timetableSolutions));
+      });
     } catch (error) {
       console.error("Error saving data:", error);
     }
@@ -233,8 +258,43 @@ export default memo(function GanttChart() {
   return (
     <div>
       <div ref={timelineRef} />
-      <button onClick={downloadCSV}> Download Timetable </button>
-      <button onClick={saveData}>Save Changes</button>
+      <Button
+        onClick={downloadCSV}
+        variant="outlined"
+        size="small"
+        sx={{
+          color: "black",
+          borderColor: "black",
+          "&:hover": {
+            color: "#f05a22",
+            borderColor: "#f05a22",
+            backgroundColor: "rgba(255, 255, 255, 0.1)",
+          },
+          borderRadius: "3px",
+          marginTop: "5px",
+        }}
+      >
+        Download Timetable
+      </Button>
+      <Button
+        onClick={saveData}
+        variant="outlined"
+        size="small"
+        sx={{
+          color: "black",
+          borderColor: "black",
+          "&:hover": {
+            color: "#f05a22",
+            borderColor: "#f05a22",
+            backgroundColor: "rgba(255, 255, 255, 0.1)",
+          },
+          borderRadius: "3px",
+          marginTop: "5px",
+          marginLeft: "7px"
+        }}
+      >
+        Save Changes
+      </Button>
     </div>
   );
 })

frontend/src/pages/Enrolment.tsx

@@ -48,17 +48,29 @@ export default function StarterPage() {
     <Box className="app-container">
       <Header />
       <Box className="content">
-        <Box className="description" sx={{ minWidth: 550+"px" }}>
+        <Box className="description" sx={{ minWidth: 550 + "px" }}>
           <span style={timeStyle}>Time</span>
           <span style={tablerStyle}>tabler</span>
-          <span style={{ margin: -3, fontSize: 15, marginLeft: 5, opacity: 0.4 }}>The smartest Timetabler ever</span>
-          <p style={{ color: "#f05a22", fontSize: 20 }}>A timetabling website for the Victorian Institute of Technology</p>
-          <p>   -Team JetEdge</p>
+          <span
+            style={{ margin: -3, fontSize: 15, marginLeft: 5, opacity: 0.4 }}
+          >
+            The smartest Timetabler ever
+          </span>
+          <p style={{ color: "#f05a22", fontSize: 20 }}>
+            A timetabling website for the Victorian Institute of Technology
+          </p>
+          <p> -Team JetEdge</p>
           <UploadPopUp></UploadPopUp>
-          <SkipButton/>
+          <SkipButton />
         </Box>
         <Box className="imageBox">
-          <img src={Photo} alt="logo.exe" width="900" height="auto"/>
+          <img
+            src={Photo}
+            alt="logo.exe"
+            width="auto"
+            height="100%"
+            object-fit = "cover"
+          />
         </Box>
       </Box>
       <Footer />

frontend/src/styles/ganttUnassignable.css

@@ -1,3 +1,7 @@
 .vis-item.vis-background.negative {
   background-color: rgba(255, 0, 0, 0.2);
+}
+
+.modified {
+  background-color: "red";
 }