small changes

src/components/Admin.tsx

@@ -1,18 +1,35 @@
-import React, { useState} from 'react';
+import React, { useState, MouseEvent} from 'react';
 import styled from 'styled-components/macro';
 import Plan from '../assets/plan.svg';
 import History from '../assets/history.svg';
 import Statistics from '../assets/statistics.svg';
+import { Scheduler } from './Scheduler';
+import { Rightbar } from './Rightbar';
 
 const LeftSide = styled.div`
   height: 100%;
   display: flex;
+  flex:1;
   flex-direction: column;
   background-color: white;
 `;
 
+const Wrap = styled.div`
+  display: flex;
+  height: calc(100vh - 80px);
+  background-color: #ECEEF4;
+`;
+
+
+const Wrapper = styled.div`
+flex:5;
+  display: flex;
+  height: calc(100vh - 80px);
+  background-color: #ECEEF4;
+`;
+
 interface LeftPanelElement{
-    choose:boolean;
+    isCurrentTab:boolean;
 }
 
 const LeftPanelElement = styled.div<LeftPanelElement>`
@@ -21,10 +38,11 @@ const LeftPanelElement = styled.div<LeftPanelElement>`
   justify-content: center;
   align-items: center;
   flex: 1;
-  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
+  //box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
   padding: 20px;
   cursor: pointer;
-  background-color: ${({choose})=>(choose == true ? `blue` : "")};
+  box-shadow: ${({isCurrentTab})=>(isCurrentTab === true ? `inset 0px 0px 26px 0px rgba(0,0,0,0.55)` : "")};
+  border-bottom:1px solid;
 `;
 const Icon = styled.img`
   width: 40px;
@@ -33,26 +51,32 @@ const Icon = styled.img`
 
 export const Admin = () => {
 
-    const[choose, setChoose] = useState(false);
+    const[currentTab, setCurrentTab] = useState<null|number>(null);
 
-    const handleClick = ()=>{
-        setChoose(true);
+    const handleClick = (e: MouseEvent<HTMLDivElement>)=>{
+      setCurrentTab(Number(e.currentTarget.id));
     }
 
   return (
+    <Wrap>
     <LeftSide>
-      <LeftPanelElement choose={choose} onClick={handleClick}>
+      <LeftPanelElement id={"1"} isCurrentTab={currentTab===1} onClick={handleClick}>
         <Icon alt="profile" src={Plan} />
         Pokaż plan
       </LeftPanelElement>
-      <LeftPanelElement choose={choose} onClick={handleClick}>
+      <LeftPanelElement id={"2"} isCurrentTab={currentTab===2} onClick={handleClick}>
         <Icon alt="history" src={History} />
         Historia Zmian
       </LeftPanelElement>
-      <LeftPanelElement choose={choose} onClick={handleClick}>
+      <LeftPanelElement id={"3"} isCurrentTab={currentTab===3} onClick={handleClick}>
         <Icon alt="statistics" src={Statistics} />
         Statystyki
       </LeftPanelElement>
     </LeftSide>
+    <Wrapper>
+    <Scheduler/>
+    <Rightbar/>
+    </Wrapper>
+    </Wrap>
   );
 };

src/components/App.tsx

@@ -10,6 +10,8 @@ const Wrapper = styled.div`
   display: flex;
   height: calc(100vh - 80px);
   background-color: #ECEEF4;
+  padding-top:20px;
+  padding-bottom:20px;
 `;
 
 export const App = () => {
@@ -24,9 +26,9 @@ export const App = () => {
       <Topbar handleTransfer={handleTransfer} />
       <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
       <Wrapper>
-        <Admin/>
-        {/* <Scheduler />
-        <Rightbar /> */}
+        {/* <Admin/> */}
+        <Scheduler />
+        <Rightbar />
       </Wrapper>
     </>
   );

src/components/SchedulerEvents.tsx

@@ -21,8 +21,18 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
     '13.45': 3,
     '15.30': 4,
     '17.15': 5,
+    '18.45': 6,
   };
 
+
+  const createClassTime = (startTime:string) => {
+    const startTimeMapped = groupTimeToEventRowMapping[startTime];
+    const endTime = Object.keys(groupTimeToEventRowMapping).find(key => groupTimeToEventRowMapping[key] === startTimeMapped + 1);
+
+    return [startTime, endTime]
+
+  }
+
   useEffect(() => {
     function mapGroupTimeToEventRow(basket: Array<Basket>) {
       const classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array<Group & { name: string }>;
@@ -36,6 +46,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
         lecturer,
         room,
         eventRow: groupTimeToEventRowMapping[time],
+        time: createClassTime(time),
         name,
         type,
       }));

src/components/SchedulerRow.tsx

@@ -29,7 +29,7 @@ const ClassesWrapper = styled.div<ClassesWrapperProps>`
   position: absolute;
   display: flex;
   top: ${({ cellTop }) => cellTop}px;
-  left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 5 + cellWidth * eventIndex}px;
+  left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 4 + cellWidth * eventIndex}px;
   width: ${({ cellWidth }) => cellWidth - 10}px;
   height: ${({ cellHeight }) => cellHeight * 3}px;
   z-index: 2;
@@ -53,13 +53,17 @@ const Classes = styled.div<ClassesProps>`
   height: ${({ cellHeight }) => cellHeight * 3}px;
   width: ${({ cellWidth }) => cellWidth *3/4}px;
   margin-right: 5px;
-  padding: 5px 2px 2px 5px;
+  padding: 5px 5px 5px 5px;
   text-align: center;
   background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
-  box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
+  box-shadow:  3px 3px 3px 0px rgba(0,0,0,0.75);
 
 `;
 
+const StyledTypography = styled(Typography)`
+background-color:white;
+`
+
 interface SchedulerRowProps {
   groups: Array<Group & { name: string }>;
   indexRow: number;
@@ -117,7 +121,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                   >
                     <div>
                       <p style={{ fontWeight: 700 }}>{groups[index].name}</p>
-                      <p>{groups[index].room}</p>
+                  <p>{groups[index].time[0]} - {groups[index].time[1]}</p>
                     </div>
                   </Classes>
                   <Popover
@@ -139,11 +143,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                     onClose={handlePopoverClose}
                     disableRestoreFocus
                   >
-                    <Typography>
+                    <StyledTypography>
                       <p>{groups[index].name}</p>
                       <p>{groups[index].lecturer}</p>
                       <p>{groups[index].room}</p>
-                    </Typography>
+                    </StyledTypography>
                   </Popover>
                 </>
               ),