y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Maciek Głowacki 2020-11-24 19:01:20 +01:00
parent 3ab2674cb3
commit 44a01cec69
6 changed files with 15035 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14980
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -7,7 +7,7 @@
"@material-ui/lab": "^4.0.0-alpha.56",
"axios": "^0.19.2",
"notistack": "^1.0.1",
"react": "^16.13.1",
"react": "^17.0.1",
"react-click-away-listener": "^1.4.3",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",

39
src/components/Admin.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, MouseEvent} 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';
@ -9,7 +9,7 @@ import { Rightbar } from './Rightbar';
const LeftSide = styled.div`
height: 100%;
display: flex;
flex:1;
flex: 1;
flex-direction: column;
background-color: white;
`;
@ -17,20 +17,19 @@ const LeftSide = styled.div`
const Wrap = styled.div`
display: flex;
height: calc(100vh - 120px);
background-color: #ECEEF4;
width:100%;
background-color: #eceef4;
width: 100%;
`;
const Wrapper = styled.div`
flex:12;
flex: 12;
display: flex;
height: calc(100vh - 120px);
background-color: #ECEEF4;
background-color: #eceef4;
`;
interface LeftPanelElement{
isCurrentTab:boolean;
interface LeftPanelElement {
isCurrentTab: boolean;
}
const LeftPanelElement = styled.div<LeftPanelElement>`
@ -42,9 +41,8 @@ const LeftPanelElement = styled.div<LeftPanelElement>`
//box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
padding: 20px;
cursor: pointer;
box-shadow: ${({isCurrentTab})=>(isCurrentTab === true ? `inset 0px 0px 26px 0px rgba(0,0,0,0.55)` : "")};
border-bottom:1px solid #979797;
box-shadow: ${({ isCurrentTab }) => (isCurrentTab === true ? `inset 0px 0px 26px 0px rgba(0,0,0,0.55)` : '')};
border-bottom: 1px solid #979797;
`;
const Icon = styled.img`
width: 40px;
@ -52,32 +50,31 @@ const Icon = styled.img`
`;
export const Admin = () => {
const [currentTab, setCurrentTab] = useState<null | number>(null);
const[currentTab, setCurrentTab] = useState<null|number>(null);
const handleClick = (e: MouseEvent<HTMLDivElement>)=>{
const handleClick = (e: MouseEvent<HTMLDivElement>) => {
setCurrentTab(Number(e.currentTarget.id));
}
};
return (
<Wrap>
<LeftSide>
<LeftPanelElement id={"1"} isCurrentTab={currentTab===1} onClick={handleClick}>
<LeftPanelElement id={'1'} isCurrentTab={currentTab === 1} onClick={handleClick}>
<Icon alt="profile" src={Plan} />
Pokaż plan
</LeftPanelElement>
<LeftPanelElement id={"2"} isCurrentTab={currentTab===2} onClick={handleClick}>
<LeftPanelElement id={'2'} isCurrentTab={currentTab === 2} onClick={handleClick}>
<Icon alt="history" src={History} />
Historia Zmian
</LeftPanelElement>
<LeftPanelElement id={"3"} isCurrentTab={currentTab===3} onClick={handleClick}>
<LeftPanelElement id={'3'} isCurrentTab={currentTab === 3} onClick={handleClick}>
<Icon alt="statistics" src={Statistics} />
Statystyki
</LeftPanelElement>
</LeftSide>
<Wrapper>
<Scheduler/>
<Rightbar/>
<Scheduler />
<Rightbar />
</Wrapper>
</Wrap>
);

8
src/components/App.tsx
View File

@ -8,16 +8,10 @@ import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
height: calc(100vh - 80px);
<<<<<<< HEAD
background-color: #eceef4;
padding-top: 20px;
padding-bottom: 20px;
=======
background-color: #ECEEF4;
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
>>>>>>> b687b3c014cabbedb9233d5f33e42d461a04a047
padding-right: 20px;
`;
export const App = () => {

22
src/components/SchedulerRow.tsx
View File

@ -45,6 +45,7 @@ interface SchedulerEventProps {
const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
@ -54,7 +55,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
height: ${({ cellHeight }) => cellHeight * 3}px;
width: ${({ cellWidth }) => (cellWidth * 3) / 4}px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
padding: 5px 5px 0 5px;
text-align: center;
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
@ -64,6 +65,18 @@ const StyledTypography = styled(Typography)`
background-color: white;
`;
const BoldParagraph = styled.p`
font-weight: 700;
`;
const TextWrapper = styled.div`
width: inherit;
margin-top: 30px;
padding: 0 10px 0 10px;
display: flex;
justify-content: space-between;
`;
interface SchedulerRowProps {
groups: Array<SchedulerEvent>;
indexRow: number;
@ -116,12 +129,13 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
onMouseEnter={(e) => handlePopoverOpen(e)}
onMouseLeave={handlePopoverClose}
>
<BoldParagraph>{groups[index].name}</BoldParagraph>
<TextWrapper>
<div>
<p style={{ fontWeight: 700 }}>{groups[index].name}</p>
<p>
{groups[index].time[0]} - {groups[index].time[1]}
</p>
</div>
<div>3/30</div>
</TextWrapper>
</StyledSchedulerEvent>
<Popover
id={`mouse-over-popover`}

1
src/contexts/CoursesProvider.tsx
View File

@ -127,6 +127,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
const fetchCourses = async () => {
try {
console.log('env is: ', process.env.REACT_APP_API_URL);
const { data: courses } = await axiosInstance.get<Array<Course>>(
`${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
);