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

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

8
src/components/App.tsx
View File

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

26
src/components/SchedulerRow.tsx
View File

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

1
src/contexts/CoursesProvider.tsx
View File

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