diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..f6b35a0 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:3000", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index f7602f0..c6001fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1350,6 +1350,30 @@ "react-transition-group": "^4.4.0" } }, + "@material-ui/lab": { + "version": "4.0.0-alpha.56", + "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz", + "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.10.2", + "clsx": "^1.0.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + }, + "dependencies": { + "@material-ui/utils": { + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz", + "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } + } + } + }, "@material-ui/styles": { "version": "4.10.0", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz", @@ -1415,7 +1439,7 @@ }, "@sheerun/mutationobserver-shim": { "version": "0.3.3", - "resolved": "https://npm.mlabs.pl:443/@sheerun%2fmutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz", + "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz", "integrity": "sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw==" }, "@svgr/babel-plugin-add-jsx-attribute": { @@ -1529,7 +1553,7 @@ }, "@testing-library/dom": { "version": "6.16.0", - "resolved": "https://npm.mlabs.pl:443/@testing-library%2fdom/-/dom-6.16.0.tgz", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.16.0.tgz", "integrity": "sha512-lBD88ssxqEfz0wFL6MeUyyWZfV/2cjEZZV3YRpb2IoJRej/4f1jB0TzqIOznTpfR1r34CNesrubxwIlAQ8zgPA==", "requires": { "@babel/runtime": "^7.8.4", @@ -1552,7 +1576,7 @@ }, "@jest/types": { "version": "25.5.0", - "resolved": "https://npm.mlabs.pl:443/@jest%2ftypes/-/types-25.5.0.tgz", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz", "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==", "requires": { "@types/istanbul-lib-coverage": "^2.0.0", @@ -1563,7 +1587,7 @@ }, "@types/yargs": { "version": "15.0.5", - "resolved": "https://npm.mlabs.pl:443/@types%2fyargs/-/yargs-15.0.5.tgz", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz", "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==", "requires": { "@types/yargs-parser": "*" @@ -1571,7 +1595,7 @@ }, "ansi-styles": { "version": "4.2.1", - "resolved": "https://npm.mlabs.pl:443/ansi-styles/-/ansi-styles-4.2.1.tgz", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", "requires": { "@types/color-name": "^1.1.1", @@ -1599,7 +1623,7 @@ }, "chalk": { "version": "3.0.0", - "resolved": "https://npm.mlabs.pl:443/chalk/-/chalk-3.0.0.tgz", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", "requires": { "ansi-styles": "^4.1.0", @@ -1608,7 +1632,7 @@ }, "color-convert": { "version": "2.0.1", - "resolved": "https://npm.mlabs.pl:443/color-convert/-/color-convert-2.0.1.tgz", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "requires": { "color-name": "~1.1.4" @@ -1616,17 +1640,17 @@ }, "color-name": { "version": "1.1.4", - "resolved": "https://npm.mlabs.pl:443/color-name/-/color-name-1.1.4.tgz", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "has-flag": { "version": "4.0.0", - "resolved": "https://npm.mlabs.pl:443/has-flag/-/has-flag-4.0.0.tgz", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" }, "pretty-format": { "version": "25.5.0", - "resolved": "https://npm.mlabs.pl:443/pretty-format/-/pretty-format-25.5.0.tgz", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz", "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==", "requires": { "@jest/types": "^25.5.0", @@ -1637,7 +1661,7 @@ }, "supports-color": { "version": "7.1.0", - "resolved": "https://npm.mlabs.pl:443/supports-color/-/supports-color-7.1.0.tgz", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", "requires": { "has-flag": "^4.0.0" @@ -1647,7 +1671,7 @@ }, "@testing-library/jest-dom": { "version": "4.2.4", - "resolved": "https://npm.mlabs.pl:443/@testing-library%2fjest-dom/-/jest-dom-4.2.4.tgz", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz", "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==", "requires": { "@babel/runtime": "^7.5.1", @@ -1663,7 +1687,7 @@ }, "@testing-library/react": { "version": "9.5.0", - "resolved": "https://npm.mlabs.pl:443/@testing-library%2freact/-/react-9.5.0.tgz", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz", "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==", "requires": { "@babel/runtime": "^7.8.4", @@ -1673,7 +1697,7 @@ }, "@testing-library/user-event": { "version": "7.2.1", - "resolved": "https://npm.mlabs.pl:443/@testing-library%2fuser-event/-/user-event-7.2.1.tgz", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz", "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==" }, "@types/babel__core": { @@ -1877,7 +1901,7 @@ }, "@types/testing-library__dom": { "version": "6.14.0", - "resolved": "https://npm.mlabs.pl:443/@types%2ftesting-library__dom/-/testing-library__dom-6.14.0.tgz", + "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz", "integrity": "sha512-sMl7OSv0AvMOqn1UJ6j1unPMIHRXen0Ita1ujnMX912rrOcawe4f7wu0Zt9GIQhBhJvH2BaibqFgQ3lP+Pj2hA==", "requires": { "pretty-format": "^24.3.0" @@ -1885,7 +1909,7 @@ }, "@types/testing-library__react": { "version": "9.1.3", - "resolved": "https://npm.mlabs.pl:443/@types%2ftesting-library__react/-/testing-library__react-9.1.3.tgz", + "resolved": "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.3.tgz", "integrity": "sha512-iCdNPKU3IsYwRK9JieSYAiX0+aYDXOGAmrC/3/M7AqqSDKnWWVv07X+Zk1uFSL7cMTUYzv4lQRfohucEocn5/w==", "requires": { "@types/react-dom": "*", @@ -1895,7 +1919,7 @@ "dependencies": { "@jest/types": { "version": "25.5.0", - "resolved": "https://npm.mlabs.pl:443/@jest%2ftypes/-/types-25.5.0.tgz", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz", "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==", "requires": { "@types/istanbul-lib-coverage": "^2.0.0", @@ -1906,7 +1930,7 @@ }, "@types/yargs": { "version": "15.0.5", - "resolved": "https://npm.mlabs.pl:443/@types%2fyargs/-/yargs-15.0.5.tgz", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz", "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==", "requires": { "@types/yargs-parser": "*" @@ -1914,7 +1938,7 @@ }, "ansi-styles": { "version": "4.2.1", - "resolved": "https://npm.mlabs.pl:443/ansi-styles/-/ansi-styles-4.2.1.tgz", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", "requires": { "@types/color-name": "^1.1.1", @@ -1923,7 +1947,7 @@ }, "chalk": { "version": "3.0.0", - "resolved": "https://npm.mlabs.pl:443/chalk/-/chalk-3.0.0.tgz", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", "requires": { "ansi-styles": "^4.1.0", @@ -1932,7 +1956,7 @@ }, "color-convert": { "version": "2.0.1", - "resolved": "https://npm.mlabs.pl:443/color-convert/-/color-convert-2.0.1.tgz", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "requires": { "color-name": "~1.1.4" @@ -1940,17 +1964,17 @@ }, "color-name": { "version": "1.1.4", - "resolved": "https://npm.mlabs.pl:443/color-name/-/color-name-1.1.4.tgz", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "has-flag": { "version": "4.0.0", - "resolved": "https://npm.mlabs.pl:443/has-flag/-/has-flag-4.0.0.tgz", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" }, "pretty-format": { "version": "25.5.0", - "resolved": "https://npm.mlabs.pl:443/pretty-format/-/pretty-format-25.5.0.tgz", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz", "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==", "requires": { "@jest/types": "^25.5.0", @@ -1961,7 +1985,7 @@ }, "supports-color": { "version": "7.1.0", - "resolved": "https://npm.mlabs.pl:443/supports-color/-/supports-color-7.1.0.tgz", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", "requires": { "has-flag": "^4.0.0" @@ -4276,7 +4300,7 @@ }, "css.escape": { "version": "1.5.1", - "resolved": "https://npm.mlabs.pl:443/css.escape/-/css.escape-1.5.1.tgz", + "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=" }, "cssdb": { @@ -4717,7 +4741,7 @@ }, "dom-accessibility-api": { "version": "0.3.0", - "resolved": "https://npm.mlabs.pl:443/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz", "integrity": "sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA==" }, "dom-converter": { @@ -10339,7 +10363,7 @@ }, "prettier": { "version": "2.0.5", - "resolved": "https://npm.mlabs.pl:443/prettier/-/prettier-2.0.5.tgz", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz", "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==", "dev": true }, @@ -11188,7 +11212,7 @@ }, "redent": { "version": "3.0.0", - "resolved": "https://npm.mlabs.pl:443/redent/-/redent-3.0.0.tgz", + "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", "requires": { "indent-string": "^4.0.0", @@ -12569,7 +12593,7 @@ }, "strip-indent": { "version": "3.0.0", - "resolved": "https://npm.mlabs.pl:443/strip-indent/-/strip-indent-3.0.0.tgz", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", "requires": { "min-indent": "^1.0.0" @@ -13351,7 +13375,7 @@ }, "wait-for-expect": { "version": "3.0.2", - "resolved": "https://npm.mlabs.pl:443/wait-for-expect/-/wait-for-expect-3.0.2.tgz", + "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.2.tgz", "integrity": "sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag==" }, "walker": { diff --git a/package.json b/package.json index 124c9f8..f8e9576 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@material-ui/core": "^4.10.0", + "@material-ui/lab": "^4.0.0-alpha.56", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 803f9e3..6c0bb0c 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -13,7 +13,7 @@ interface ClassExandIconProps { const CourseStyled = styled.div` display: flex; - min-height: 50px; + min-height: 40px; background-color: rgb(100, 181, 246) !important; align-items: center; justify-content: center; @@ -25,25 +25,28 @@ const CourseStyled = styled.div` cursor: pointer; align-items: stretch; position: relative; + box-shadow: 9px 9px 8px -2px rgba(0,0,0,0.59); `; const CourseNameStyled = styled.div` - padding-top: 10px; - padding-bottom: 10px; +padding-top:20px; +padding-bottom:10px; +padding-left:35px; +padding-right:35px; `; -interface ClassGroupProps{ - groupType:GroupType; +interface ClassGroupProps { + groupType: GroupType; } -const ClassGroupStyled = styled.div` +const ClassGroupStyled = styled.div` +position:relative; padding-top: 1px; padding-bottom: 1px; :hover { cursor: pointer; + background-color:#9ED3FF; } - outline-offset: -5px; - outline:${({groupType})=>groupType === "CLASS" ? "2px solid #5642AA" : "2px solid #866DF7"}; `; const ClassExandIconStyled = styled.img` @@ -53,19 +56,25 @@ const ClassExandIconStyled = styled.img` transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')}; `; +const TypeClass = styled.div` + position:absolute; + min-width:55px; + padding:1px; + top:5px; + border-radius:1px; +`; + const useStyles = makeStyles({ expanded: { maxHeight: '244px', overflowY: 'auto', - }, - '@global': { - '*::-webkit-scrollbar': { + '&::-webkit-scrollbar': { width: '0.4em', }, - '*::-webkit-scrollbar-track': { + '&::-webkit-scrollbar-track': { '-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)', }, - '*::-webkit-scrollbar-thumb': { + '&::-webkit-scrollbar-thumb': { borderRadius: '10px', backgroundColor: '#d4b851', outline: '1px solid slategrey', @@ -77,10 +86,10 @@ const DeleteFromBasketIcon = styled(CloseIcon)` width: 20px; cursor: pointer; position: absolute; - left: 235px; - top: -10px; + left: 230px; + top: -5px; &:hover { - fill: #d3d3d3; + fill: white; } `; @@ -89,10 +98,10 @@ interface CourseCardProps { } export const CourseCard = ({ course }: CourseCardProps) => { - const [isSelected, setSelected] = useState(false); const classes = useStyles(); - const { addGroup, deleteFromBasket } = useContext(coursesContext)!; + const [isSelected, setSelected] = useState(false); + const groups = course.lectures === undefined ? course.classes : [...course.lectures, ...course.classes]; const onGroupClick = (group: Group, id: number) => addGroup(group, id); @@ -101,13 +110,16 @@ export const CourseCard = ({ course }: CourseCardProps) => { deleteFromBasket(course.id)}> setSelected(!isSelected)}>{course.name} - {course.groups.sort((a,b)=> b.type.localeCompare(a.type)).map((group, index) => ( - onGroupClick(group, course.id)}> -

- {group.time} {group.room}

{group.lecturer} -

- - ))} + {groups + .sort((a, b) => b.type.localeCompare(a.type)) + .map((group, index) => ( + onGroupClick(group, course.id)}> + {group.type==="CLASS"? "(Ćw.)" : "(Wyk.)"} +

+ {group.time} {group.room}

{group.lecturer} +

+ + ))}
setSelected(!isSelected)}> diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 26186b5..b270f2d 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -7,6 +7,29 @@ import { Course, Basket } from '../types'; import styled from 'styled-components'; import { makeStyles } from '@material-ui/core/styles'; +const DropdownStyled = styled.div` + max-height: 420px; + overflow-y: auto; + scroll-snap-type: y mandatory; + scroll-behavior: smooth; + z-index: 100; + position: relative; + border-radius:0px 0px 0px 15px; + ::-webkit-scrollbar-track { + border-radius: 10px; + background-color: #f5f5f5; + } + ::-webkit-scrollbar { + width: 12px; + background-color: #f5f5f5; + } + ::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: #d4b851; + border: 1px solid; + } +`; + const CourseStyled = styled.div` position: relative; z-index: 10; @@ -15,20 +38,14 @@ const CourseStyled = styled.div` background-color: #e6c759; font-size: 18px; font-family: Lato; + scroll-snap-align: end; + border-bottom:1px solid; :hover { background-color: #d4b851; cursor: pointer; } `; -const DropdownStyled = styled.div` - max-height: 400px; - overflow-y: auto; - ::-webkit-scrollbar { - display: none; - } -`; - const useStyles = makeStyles({ topbarInput: { marginTop: '8px', @@ -76,12 +93,9 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { const onCourseClick = async (event: MouseEvent) => { const target = event.currentTarget; if (target.id && target.textContent) { - const id = target.id; - const name = target.textContent; - - //porozmawiać z Filipem, żeby odrobinę przerobił endpoint - const course: Basket = { name: name.trim(), id: parseInt(id) }; - + const course = filteredCourses.find(({ id }) => id.toString() === target.id)!; + console.log('added course is'); + console.log(course); addToBasket(course); setOpen(false); } diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index d300e33..83a8db2 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -1,6 +1,8 @@ -import React, { useState, useContext, MouseEvent } from 'react'; +import React, { useContext } from 'react'; +import Snackbar from '@material-ui/core/Snackbar'; import { CourseCard } from './CourseCard'; import { coursesContext } from '../contexts/CoursesProvider'; +import MuiAlert, { AlertProps } from '@material-ui/lab/Alert'; import styled from 'styled-components'; const RightbarStyled = styled.div` @@ -29,23 +31,32 @@ const RightbarStyled = styled.div` const RightbarTextStyled = styled.div` display: flex; flex-direction: column; - border-bottom: 1px solid; `; const SaveButton = styled.div` display: flex; justify-content: center; align-items: center; - background-color: rgb(100, 181, 246) !important; + background-color: #417cab !important; border-radius: 10px; cursor: pointer; height: 40px; background-color: red; margin-bottom: 10px; + &:hover { + color: white; + } + box-shadow: 6px 6px 6px -2px rgba(0,0,0,0.59); `; +function Alert(props: AlertProps) { + return ; +} + export const Rightbar = () => { - const { courses, basket } = useContext(coursesContext)!; + const { courses, basket, saveBasket } = useContext(coursesContext)!; + + const [open, setOpen] = React.useState(false); const getBasketGroups = () => { const names = basket.map(({ name }) => name); @@ -54,6 +65,19 @@ export const Rightbar = () => { const filteredCourses = getBasketGroups(); + const save = () => { + saveBasket(); + setOpen(true); + }; + + const handleClose = (event?: React.SyntheticEvent, reason?: string) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + //need to insert student name from db and course maybe based on current time or from db too return ( @@ -62,11 +86,16 @@ export const Rightbar = () => { Hubert Wrzesiński

Semestr zimowy 2020/2021

- SAVE + ZAPISZ {filteredCourses.map((course, index) => ( ))} + + + Zapisano plan! + + ); }; diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx index b2d7598..1db75bd 100644 --- a/src/components/Scheduler.tsx +++ b/src/components/Scheduler.tsx @@ -35,7 +35,7 @@ const TableCell = styled.div` align-items: center; justify-content: center; flex: 1; - font-size: 24px; + font-size: 1.25vw; `; const T = styled.table` @@ -67,20 +67,28 @@ export const Scheduler = () => { <> - {days.map((day, index) => ( - - {day} - - ))} + {days.map((day, indexCell) => + indexCell === 0 ? ( + + {day} + + ) : ( + + {day} + + ), + )} {hours.map((hour, indexRow) => ( {[hour, '', '', '', '', ''].map((value, indexCell) => - indexRow === 0 && indexCell === 1 ? ( - + indexCell === 0 ? ( + + {value} + ) : ( - + {value} ), diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx index c0b447b..da8c9db 100644 --- a/src/components/SchedulerEvents.tsx +++ b/src/components/SchedulerEvents.tsx @@ -35,7 +35,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve //deleted if statement, maybe it is needed const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({ id, - day: day === 5 ? 4 : day, + day, lecturer, room, eventRow: groupTimeToEventRowMapping[time], diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index 9d62060..cb45953 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -47,12 +47,15 @@ const Classes = styled.div` align-items: center; z-index: 2; border-radius: 10px; + + font-size:0.90vw; /* background-color: rgb(100, 181, 246); */ width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; margin-right: 5px; text-align: center; - background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"} + background-color:${({groupType})=>groupType === "CLASS" ? "#FFDC61" : "#A68820"}; + box-shadow: 9px 9px 8px -2px rgba(0,0,0,0.59); `; interface SchedulerRowProps { @@ -68,8 +71,6 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight const [anchorEl, setAnchorEl] = React.useState(null); const [popoverId, setPopoverId] = useState(null); - console.log("123s"+JSON.stringify(groups)); - //looks weird const handlePopoverOpen = (event: MouseEvent) => { setAnchorEl(event.currentTarget); diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 70c7167..9206767 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -5,9 +5,10 @@ import axios from 'axios'; interface CourseContext { courses: Array; basket: Array; - addToBasket: (courses: Basket) => void; + addToBasket: (courses: Course) => void; addGroup: (group: Group, id: number) => void; deleteFromBasket: (id: number) => void; + saveBasket: () => void; } export const coursesContext = createContext(null); @@ -20,17 +21,26 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { const [courses, setCourses] = useState>([]); const [basket, setBasket] = useState>([]); - const addToBasket = (course: Basket) => setBasket([...basket, course]); + const addToBasket = (course: Course) => { + const courseToBasket = { + name: course.name, + id: course.id, + classes: course.classes[0], + lecture: course.lectures !== undefined ? course.lectures[0] : undefined, + } as Basket; + setBasket([...basket, courseToBasket]); + }; - const deleteFromBasket = (id: number) => setBasket(basket.filter(course => course.id !== id)); + const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id)); - - useEffect(() => { - console.log('BASKET'); - console.log(basket); - }, [basket]); - - //immutability + const saveBasket = () => { + // try { + // axios.post(`${process.env.REACT_APP_API_URL}/api/v1/commisions/add`); + // } catch (e) { + // console.log(e); + // } + console.log('saving to basket'); + }; const addGroup = (choosenGroup: Group, id: number) => { const basketCourse = basket.filter((course) => course.id === id)[0]; @@ -48,14 +58,27 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { useEffect(() => { const fetchData = async () => { - const { data: courses } = await axios.get(`${process.env.REACT_APP_API_URL}/getCoursesWithGroups`); + const { data } = await axios.get }>>( + `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`, + ); + const courses = data.map(({ id, name, groups }) => ({ + id: parseInt(id), + name, + lectures: groups.filter(({ type }) => type === GroupType.LECTURE), + classes: groups.filter(({ type }) => type === GroupType.CLASS), + })) as Array; + console.log('courses mapped'); + console.log(courses); courses.sort((a: Course, b: Course) => (a.name > b.name ? 1 : -1)); + setCourses(courses); }; fetchData(); }, []); return ( - {children} + + {children} + ); }; diff --git a/src/types/index.ts b/src/types/index.ts index 09c6f40..ee23cf1 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -7,7 +7,7 @@ export interface Basket { id: number; name: string; lecture?: Group; - classes?: Group; + classes: Group; } export interface Group { @@ -23,7 +23,8 @@ export interface Group { export interface Course { id: number; name: string; - groups: Array; + lectures?: Array; + classes: Array; } export interface User {