From e90ffbe04d7cb22e5f378525598dbd0dc77ca79e Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Fri, 11 Sep 2020 18:56:14 +0200
Subject: [PATCH] tylko wybrane gruppy

---
 src/components/Scheduler.tsx    |  2 +-
 src/components/SchedulerRow.tsx | 26 +++++++++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx
index 43cdf32..ca4adc7 100644
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -85,7 +85,7 @@ export const Scheduler = () => {
     // const column = cellId.slice(0, 9);
     // const row = cellId.slice(1);
     //const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
-    console.log(cellId)
+    console.log(currentEventsIds)
     setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, cellId]);
   };
 
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index b3cf429..a2545e4 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -13,10 +13,16 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
   position: absolute;
   top: ${({ cellTop }) => cellTop}px;
   left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
+  z-index: 2;
+`;
+
+const ClassDiv = styled.div<SchedulerEventProps>`
   width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
-  background-color: lightblue;
   z-index: 2;
+  border-radius: 10px;
+  padding-left:5px;
+  background-color: rgb(100, 181, 246);
 `;
 
 interface SchedulerRowProps {
@@ -25,7 +31,7 @@ interface SchedulerRowProps {
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
-  onClick: (e: React.MouseEvent) => void
+  onClick: (e: React.MouseEvent) => void;
 }
 
 export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
@@ -41,7 +47,21 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight,
           key={eventIndex}
           id={`eventRow${indexRow}eventCol${eventIndex}`}
         >
-          {groups.map((group, index) => group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>)}
+          {groups.map(
+            (group, index) =>
+              group.day === eventIndex && (
+                <ClassDiv
+                  eventIndex={eventIndex}
+                  cellTop={cellTop}
+                  cellWidth={cellWidth}
+                  cellHeight={cellHeight}
+                  id={`eventRow${indexRow}eventCol${eventIndex}`}
+                  key={index}
+                >
+                  {groups[index]?.lecturer}
+                </ClassDiv>
+              ),
+          )}
         </SchedulerEvent>
       ))}
     </>