Scheduler c.d

src/businesslogic/LecturesProvider.tsx

@@ -1,34 +1,31 @@
-import React, { useState, useEffect } from "react";
-import { lectures } from "./mockData/lectures";
+import React, { useState } from "react";
 import { Lecture } from "./types/lecture";
 import { Group } from "./types/group";
 interface ILectureContext {
   lectures: Array<Lecture>;
-  updateLectures: (lectures: Lecture) => void;
+  addLecture: (lectures: Lecture) => void;
 }
 export const LecturesContext = React.createContext({
   lectures: Array<Lecture>(),
   choosenGroups: Array<Group>(),
-  updateLectures: (lecture: Lecture) => {},
-  updateGroups: (group : Group) => {}
+  addLecture: (lecture: Lecture) => {},
+  addGroup: (group : Group) => {}
 });
 
 export const LecturesProvider: React.FC = (props) => {
   const [lectures, setLectures] = useState<Array<Lecture>>([]);
   const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
-  const updateLectures = (lecture: Lecture) => {
+  const addLecture = (lecture: Lecture) => {
     setLectures([...lectures, lecture]);
   };
-  const updateGroups = (group : Group) => {
+  const addGroup = (group : Group) => {
     setChoosenGroups([...choosenGroups, group]);
   };
 
 
-  useEffect(()=>{console.log(`Groups have changed: ${JSON.stringify(choosenGroups)}`)},[choosenGroups]);
-
   return (
     <LecturesContext.Provider
-      value={{ lectures, choosenGroups, updateLectures, updateGroups }}
+      value={{ lectures, choosenGroups, addLecture, addGroup }}
     >
       {props.children}
     </LecturesContext.Provider>

src/components/RightBar/LectureCard/index.tsx

@@ -22,12 +22,11 @@ export default function LectureCard({
   isSelected,
 }: LectureCardProps) {
 
-  const {updateGroups} = useContext(LecturesContext);
+  const {addGroup} = useContext(LecturesContext);
 
 
   function onGroupClick(group : Group){
-      console.log(`group is: ${JSON.stringify(group)}`)
-      updateGroups(group);
+      addGroup(group);
   }
 
 

src/components/Scheduler/SchedulerEvent/index.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-
-interface SchedulerEventProps {
-  events: Array<number>;
-  colIndex: number;
-}
-
-export const SchedulerEvent = ({ events, colIndex }: SchedulerEventProps) => {
-  const handleEventClick = (e: React.MouseEvent) => {
-    const eventDiv = e.target as HTMLDivElement;
-    eventDiv.style.backgroundColor = "#1547C5";
-  };
-
-  return (
-    <>
-      {events.map((_, index) => (
-        <div
-          id={`eventCol${colIndex}eventRow${index}`}
-          style={{
-            position: "absolute",
-            top: 80 * index + 10,
-            left: 5,
-            backgroundColor: "#839FE6",
-            color: "white",
-            borderRadius: 5,
-            width: "80%",
-            height: 60,
-            display: "none",
-          }}
-          onClick={handleEventClick}
-        >
-          :)
-        </div>
-      ))}
-    </>
-  );
-};

src/components/Scheduler/SchedulerEvents/index.tsx

@@ -0,0 +1,68 @@
+import React, { useContext } from "react";
+import { SchedulerRow } from "../SchedulerRow";
+import { LecturesContext } from "../../../businesslogic/LecturesProvider";
+
+interface SchedulerEventsProps {
+  cellTop: number;
+  cellWidth: number;
+}
+
+export const SchedulerEvents = ({
+  cellTop,
+  cellWidth,
+}: SchedulerEventsProps) => {
+//   const handleEventClick = (e: React.MouseEvent) => {
+//     const eventDiv = e.target as HTMLDivElement;
+//     eventDiv.style.backgroundColor = "#1547C5";
+//   };
+    const mapGroupToEvent = () => {
+        
+    }
+
+const { choosenGroups } = useContext(LecturesContext);
+
+  const group = {0: {id: 5, day: 4, time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3"}}
+
+
+  console.log(choosenGroups)
+  return (
+    <div>
+      <SchedulerRow
+        groups={choosenGroups}
+        indexRow={0}
+        cellTop={cellTop + 10}
+        cellWidth={cellWidth}
+      />
+      <SchedulerRow
+        groups={[]}
+        indexRow={1}
+        cellTop={cellTop + 80}
+        cellWidth={cellWidth}
+      />
+      <SchedulerRow
+        groups={[]}
+        indexRow={2}
+        cellTop={cellTop + 150}
+        cellWidth={cellWidth}
+      />
+      <SchedulerRow
+        groups={[]}
+        indexRow={3}
+        cellTop={cellTop + 230}
+        cellWidth={cellWidth}
+      />
+      <SchedulerRow
+        groups={[]}
+        indexRow={4}
+        cellTop={cellTop + 300}
+        cellWidth={cellWidth}
+      />
+      <SchedulerRow
+        groups={[]}
+        indexRow={5}
+        cellTop={cellTop + 370}
+        cellWidth={cellWidth}
+      />
+    </div>
+  );
+};

src/components/Scheduler/SchedulerRow/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Group } from "../../../businesslogic/types/group";
+
+interface SchedulerRowProps {
+  groups: Array<Group>;
+  indexRow: number;
+  cellTop: number;
+  cellWidth: number;
+}
+
+export const SchedulerRow = ({
+  groups,
+  indexRow,
+  cellTop,
+  cellWidth,
+}: SchedulerRowProps) => {
+  // const handleEventClick = (e: React.MouseEvent) => {
+  //   const eventDiv = e.target as HTMLDivElement;
+  //   eventDiv.style.backgroundColor = "#1547C5";
+  // };
+
+  const group = {0: {id: 5, day: 4, time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3"}}
+
+  return (
+    <div>
+      {[...Array(5)].map((value, index) => (
+        <div
+          key = {`eventRow${indexRow}eventCol${index}`} 
+          id={`eventRow${indexRow}eventCol${index}`}
+          style={{
+            position: "absolute",
+            top: cellTop,
+            left: cellWidth + 5 + cellWidth * index,
+            width: (cellWidth * 2) / 3,
+            height: 60,
+            backgroundColor: "lightblue",
+            zIndex: 2,
+          }}
+        >
+          
+          {groups.map((value, index) => (
+            <div key={index}>{groups[index]?.lecturer}</div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};

src/components/Scheduler/index.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useContext, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useState } from "react";
 import "./index.scss";
-import { LecturesContext } from "../../businesslogic/LecturesProvider";
+import { SchedulerEvents } from "./SchedulerEvents";
 const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
 
 const hours = [
@@ -27,64 +27,54 @@ for (let i = 0; i < hours.length / 2; i++) {
 let center: "center" = "center";
 let row: "row" = "row";
 let column: "column" = "column";
-const collapse: "collapse" = "collapse";
+// const collapse: "collapse" = "collapse";
 const tbodyStyles = {
   width: "100%",
   height: "100%",
   display: "flex",
   flexDirection: column,
-}
+};
 
 const rowStyles = {
   display: "flex",
   flexDirection: row,
-}
+};
 
 const cellStyles = {
   border: "1px solid #ddd",
   padding: "10px",
   textAlign: center,
   flex: 1,
-}
+};
 
 const theadStyles = {
   display: "flex",
-  width: "100%"
-}
-
-const scheduler = {
-  marginTop: "20px",
-  borderCollapse: collapse
-
-}
+  width: "100%",
+};
 
+// const scheduler = {
+//   marginTop: "20px",
+//   borderCollapse: collapse,
+// };
 
 export const Scheduler = () => {
   const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
   const cellRef = useRef<HTMLDivElement>(null);
   const [cellWidth, setCellWidth] = useState(0);
   const [cellTop, setCellTop] = useState(0);
-  const { choosenGroups } = useContext(LecturesContext);
 
 
   useEffect(() => {
     const handleResize = () => {
-      console.log(`cellref is:`);
-      console.log(cellRef);
       if (cellRef.current) {
         setCellWidth(cellRef.current.getBoundingClientRect().width);
         setCellTop(cellRef.current.getBoundingClientRect().top);
-        console.log(`cellwidth: ${cellWidth}`);
-        console.log("cell ref:");
-        console.log(cellRef.current.getBoundingClientRect());
       }
-    }
+    };
     handleResize();
-    window.addEventListener('resize', handleResize);
-
+    window.addEventListener("resize", handleResize);
   }, []);
 
-
   useEffect(() => {
     const displayEvents = () => {
       currentEventsIds.map((eventId: string) => {
@@ -97,18 +87,18 @@ export const Scheduler = () => {
     displayEvents();
   }, [currentEventsIds]);
 
-  const handleClick = (e: React.MouseEvent) => {
-    const cellId = e.currentTarget.id;
-    const column = cellId.slice(0, 1);
-    const row = cellId.slice(1);
-    const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
+  // const handleClick = (e: React.MouseEvent) => {
+  //   const cellId = e.currentTarget.id;
+  //   const column = cellId.slice(0, 1);
+  //   const row = cellId.slice(1);
+  //   const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
 
-    setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]);
-  };
+  //   setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]);
+  // };
 
   return (
     <>
-      <div className="scheduler" >
+      <div className="scheduler">
         <div style={theadStyles}>
           {days.map((day, index) => (
             <div className="th" key={index}>
@@ -118,52 +108,18 @@ export const Scheduler = () => {
         </div>
         <div style={tbodyStyles}>
           {hours.map((hour, indexRow) => (
-            <div style={rowStyles}>{
-              [hour, "", "", "", "", ""].map((value, indexCell) =>
-                indexRow === 0 && indexCell === 1 ? (<div ref={cellRef} style={cellStyles}></div>) : (<div style={cellStyles}>{value}</div>)
-
-              )}</div>
-          ))}
-        </div>
-        <div>
-          {[...Array(5)].map((value, index) => (
-            <div style={{ position: "absolute", top: cellTop + 10, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
-
+            <div key={indexRow} style={rowStyles}>
+              {[hour, "", "", "", "", ""].map((value, indexCell) =>
+                indexRow === 0 && indexCell === 1 ? (
+                  <div key={`${indexRow}${indexCell}`}  ref={cellRef} style={cellStyles}></div>
+                ) : (
+                  <div key={`${indexRow}${indexCell}`} style={cellStyles}>{value}</div>
+                )
+              )}
             </div>
           ))}
         </div>
-        <div>
-          {[...Array(5)].map((value, index) => (
-            <div style={{ position: "absolute", top: cellTop + 80, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
-
-            </div>
-          ))}
-        </div>          <div>
-          {[...Array(5)].map((value, index) => (
-            <div style={{ position: "absolute", top: cellTop + 150, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
-
-            </div>
-          ))}
-        </div>          <div>
-          {[...Array(5)].map((value, index) => (
-            <div style={{ position: "absolute", top: cellTop + 230, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
-
-            </div>
-          ))}
-        </div>          <div>
-          {[...Array(5)].map((value, index) => (
-            <div style={{ position: "absolute", top: cellTop + 300, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
-
-            </div>
-          ))}
-        </div>          <div>
-          {[...Array(5)].map((value, index) => (
-            <div style={{ position: "absolute", top: cellTop + 370, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
-
-            </div>
-          ))}
-        </div>
-
+        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
       </div>
     </>
   );

src/components/TopBar/Results/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from "react";
 import axios from "axios";
-import { Input, Grow } from "@material-ui/core";
+import { Input } from "@material-ui/core";
 import "./index.scss";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import { LecturesContext } from "../../../businesslogic/LecturesProvider";
@@ -35,7 +35,7 @@ export const Results: React.FC = () => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const results = await axios.get(`http://localhost:1285/getCourses?name=`);
+      const results = await axios.get(`http://localhost:1287/getCourses?name=`);
       const lecturesData = results.data.map(
         (result: { id: number; name: string }) => ({
           id: result.id,
@@ -61,7 +61,7 @@ export const Results: React.FC = () => {
 
   const getLecturesById = async (id: string) => {
     const { data } = await axios.get(
-      `http://localhost:1285/getClassesByCourseId?id=${id}`
+      `http://localhost:1287/getClassesByCourseId?id=${id}`
     );
     return data;
   };
@@ -98,13 +98,13 @@ export const Results: React.FC = () => {
         result[i].lecturer.name +
         " " +
         result[i].lecturer.surname;
-      group.room = result[i].room;
+      group.room = result[i].room.trim();
       lecture.groups.push(group);
     }
     console.log(result);
     console.log(result[0].course.name);
 
-    lecturesContext.updateLectures(lecture);
+    lecturesContext.addLecture(lecture);
     setOpen(false);
   };