From 148156fdca0ecc3b2a60d3d200c93ef40d116ac3 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Wed, 21 Oct 2020 20:42:18 +0200 Subject: [PATCH 01/19] Auth done --- src/components/CourseCard.tsx | 6 ++---- src/components/Dropdown.tsx | 21 ++++++++++----------- src/contexts/CoursesProvider.tsx | 6 ++++-- 3 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index ad7d482..46ce574 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -1,7 +1,7 @@ import React, { useState, useContext, MouseEvent } from 'react'; import Collapse from '@material-ui/core/Collapse'; import ExpandIcon from '../assets/expand.png'; -import { Course, Group, GroupType } from '../types/index'; +import { Course, Group } from '../types/index'; import { coursesContext } from '../contexts/CoursesProvider'; import styled from 'styled-components'; import { makeStyles } from '@material-ui/core/styles'; @@ -35,9 +35,7 @@ padding-left:35px; padding-right:35px; `; -interface ClassGroupProps { - groupType: GroupType; -} + const ClassGroupStyled = styled.div` position:relative; diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index b270f2d..0160e2b 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -1,20 +1,19 @@ import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react'; -import axios from 'axios'; import { Input } from '@material-ui/core'; import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import { coursesContext } from '../contexts/CoursesProvider'; -import { Course, Basket } from '../types'; +import { Course } from '../types'; import styled from 'styled-components'; import { makeStyles } from '@material-ui/core/styles'; -const DropdownStyled = styled.div` +const DropdownContainer = 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; + position: relative; + border-radius: 0px 0px 0px 15px; ::-webkit-scrollbar-track { border-radius: 10px; background-color: #f5f5f5; @@ -30,7 +29,7 @@ const DropdownStyled = styled.div` } `; -const CourseStyled = styled.div` +const CourseContainer = styled.div` position: relative; z-index: 10; padding: 5px; @@ -39,7 +38,7 @@ const CourseStyled = styled.div` font-size: 18px; font-family: Lato; scroll-snap-align: end; - border-bottom:1px solid; + border-bottom: 1px solid; :hover { background-color: #d4b851; cursor: pointer; @@ -113,13 +112,13 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { value={input} /> {open && ( - + {filteredCourses.map(({ name, id }, index) => ( - +

{name}

- + ))} - + )} diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 56d7de7..bfcecb2 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -26,18 +26,20 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { const token = CAS?.user?.token; const addToBasket = (course: Course) => { - const courseToBasket = { + const courseToBasket: Basket = { 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 saveBasket = async () => { try { + //to be deleted let data = [7, 43, 54]; let json = JSON.stringify(data); let post_data = { json_data: json }; From 770a5f09d3cb85d255985d1e6a71dc4265dec854 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Thu, 22 Oct 2020 23:04:00 +0200 Subject: [PATCH 02/19] normalize polish signs --- src/components/Dropdown.tsx | 17 ++++++++++++++--- src/components/Topbar.tsx | 2 +- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 0160e2b..84df6aa 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -60,19 +60,30 @@ interface DropdownProps { export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { const classes = useStyles(); - const [open, setOpen] = React.useState(false); - const [input, setInput] = useState(''); + const [open, setOpen] = useState(false); + const [input, setInput] = useState(''); //courses - choosenCourses const [filteredCourses, setFilteredCourses] = useState>([]); + const { courses, basket, addToBasket } = useContext(coursesContext)!; useEffect(() => { const filterCourses = (input: string) => { const choosenCoursesNames = basket.map(({ name }) => name.trim()); const filteredCourses = courses.filter( - ({ name }) => name.toLowerCase().includes(input.toLowerCase()) && !choosenCoursesNames.includes(name), + ({ name }) => + name + .toLowerCase() + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, '') + .includes( + input + .toLowerCase() + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, ''), + ) && !choosenCoursesNames.includes(name), ); setFilteredCourses(filteredCourses); }; diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index 1b2f0f5..42794bb 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -107,7 +107,7 @@ export default function ({ handleTransfer }: TopbarProps) { - + {/* */} From 9d1cf2011c7f8d7e3379ab6bb27cb6f2e94e2a60 Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Mon, 26 Oct 2020 19:40:03 +0100 Subject: [PATCH 03/19] changes to new package --- src/contexts/CoursesProvider.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 56d7de7..3cac1c4 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -73,14 +73,15 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { useEffect(() => { const fetchData = async () => { - const { data } = await axios.get }>>( + const { data } = await axios.get, classes:Array }>>( `${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), + console.log(data); + const courses = data.map(({ id, name, lectures, classes }) => ({ + id, + name, + lectures, + classes, })) as Array; courses.sort((a: Course, b: Course) => (a.name > b.name ? 1 : -1)); From 8ceef555d1f6dc864af9c43529f87f5c905b2d56 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Mon, 26 Oct 2020 23:14:23 +0100 Subject: [PATCH 04/19] updated classes fetching endpoint --- src/components/Dropdown.tsx | 1 - src/components/SchedulerRow.tsx | 16 ++++++++-------- src/contexts/CoursesProvider.tsx | 10 +--------- 3 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 84df6aa..985bb63 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -66,7 +66,6 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { //courses - choosenCourses const [filteredCourses, setFilteredCourses] = useState>([]); - const { courses, basket, addToBasket } = useContext(coursesContext)!; useEffect(() => { diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index cb45953..e7b80f3 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -1,4 +1,4 @@ -import React, { MouseEvent, useEffect, useState } from 'react'; +import React, { MouseEvent, useState } from 'react'; import { Group, GroupType } from '../types'; import styled from 'styled-components/macro'; import Popover from '@material-ui/core/Popover'; @@ -35,7 +35,7 @@ const SchedulerEvent = styled.div` z-index: 2; `; -interface ClassesProps{ +interface ClassesProps { cellWidth: number; cellHeight: number; groupType: GroupType; @@ -47,15 +47,15 @@ const Classes = styled.div` align-items: center; z-index: 2; border-radius: 10px; - - font-size:0.90vw; + + font-size: 0.9vw; /* 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" ? "#FFDC61" : "#A68820"}; - box-shadow: 9px 9px 8px -2px rgba(0,0,0,0.59); + background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#A68820')}; + box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59); `; interface SchedulerRowProps { @@ -98,7 +98,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight {groups.map( (group, index) => group.day === eventIndex && ( - <> +
{groups[index].room}

- +
), )} diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 444a461..e347eec 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -75,18 +75,10 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { useEffect(() => { const fetchData = async () => { - const { data } = await axios.get, classes:Array }>>( + const { data: courses } = await axios.get>( `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`, ); - console.log(data); - const courses = data.map(({ id, name, lectures, classes }) => ({ - id, - name, - lectures, - classes, - })) as Array; courses.sort((a: Course, b: Course) => (a.name > b.name ? 1 : -1)); - setCourses(courses); }; fetchData(); From 157dc2f35ede8d7d82ebb29167fb1d09850fc73b Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Tue, 27 Oct 2020 01:24:35 +0100 Subject: [PATCH 05/19] Save timetable button connected to backend --- package-lock.json | 9 ++++++ package.json | 1 + src/components/Rightbar.tsx | 33 +++------------------ src/contexts/CoursesProvider.tsx | 51 ++++++++++++++++++++------------ src/index.tsx | 21 +++++++++---- 5 files changed, 61 insertions(+), 54 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8205261..d62ce59 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8794,6 +8794,15 @@ "sort-keys": "^1.0.0" } }, + "notistack": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/notistack/-/notistack-1.0.1.tgz", + "integrity": "sha512-2T1WkokzRCM8N9EdueaXja160IMFIMHVhRu0fGkDje7qCzwBHlTMZY2NULQzB2GFOO6iGVzl5GCX2XrJIzI8bw==", + "requires": { + "clsx": "^1.1.0", + "hoist-non-react-statics": "^3.3.0" + } + }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", diff --git a/package.json b/package.json index f0c6554..3bc6b39 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "axios": "^0.19.2", + "notistack": "^1.0.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index ec93536..9796681 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -1,10 +1,8 @@ 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'; -import { debounce } from "lodash"; +import { debounce } from 'lodash'; const RightbarStyled = styled.div` padding-top: 10px; @@ -47,18 +45,12 @@ const SaveButton = styled.div` &:hover { color: white; } - box-shadow: 6px 6px 6px -2px rgba(0,0,0,0.59); + box-shadow: 6px 6px 6px -2px rgba(0, 0, 0, 0.59); `; -function Alert(props: AlertProps) { - return ; -} - export const Rightbar = () => { const { courses, basket, saveBasket } = useContext(coursesContext)!; - const [open, setOpen] = React.useState(false); - const getBasketGroups = () => { const names = basket.map(({ name }) => name); return courses.filter(({ name }) => names.includes(name)); @@ -66,19 +58,7 @@ export const Rightbar = () => { const filteredCourses = getBasketGroups(); - const save = debounce(() => { - saveBasket(); - setOpen(true); - console.log("zmiana") - },500); - - const handleClose = (event?: React.SyntheticEvent, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setOpen(false); - }; + const handleSave = debounce(() => saveBasket(), 500); //need to insert student name from db and course maybe based on current time or from db too return ( @@ -88,16 +68,11 @@ export const Rightbar = () => { Hubert Wrzesiński

Semestr zimowy 2020/2021

- ZAPISZ + ZAPISZ {filteredCourses.map((course, index) => ( ))} - - - Zapisano plan! - - ); }; diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index e347eec..c78b870 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -1,7 +1,8 @@ import React, { useState, createContext, useEffect, ReactNode, useContext } from 'react'; import { Course, Group, Basket, GroupType } from '../types'; import axios from 'axios'; -import { CASContext, CASProvider } from './CASProvider'; +import { CASContext } from './CASProvider'; +import { useSnackbar } from 'notistack'; interface CourseContext { courses: Array; @@ -22,9 +23,18 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { const [courses, setCourses] = useState>([]); const [basket, setBasket] = useState>([]); + const { enqueueSnackbar } = useSnackbar(); + const CAS = useContext(CASContext)!; const token = CAS?.user?.token; + const selectBasketIds = (basket: Array) => { + const classesIds = basket.map((course) => course.classes.id); + const lecturesIds = basket.map((course) => course?.lecture?.id); + + return lecturesIds[0] === undefined ? classesIds : [...classesIds, ...lecturesIds]; + }; + const addToBasket = (course: Course) => { const courseToBasket: Basket = { name: course.name, @@ -38,30 +48,33 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id)); const saveBasket = async () => { + const basketIds = selectBasketIds(basket); + + const config = { + method: 'post' as const, + url: `${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`, + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json', + }, + data: JSON.stringify(basketIds), + }; + try { - //to be deleted - let data = [7, 43, 54]; - let json = JSON.stringify(data); - let post_data = { json_data: json }; - const ech = await axios.post>( - `${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`, - [7, 43, 54], - { - headers: { - Authorization: `Bearer ${token}`, - }, - }, - ); - console.log('api response;', ech); + await axios.request(config); + enqueueSnackbar('Plan został zapisany', { + variant: 'success', + }); } catch (e) { - console.log(e); + enqueueSnackbar('Zapisywanie planu nie powiodło się', { + variant: 'error', + }); } - console.log('saving to basket'); }; const addGroup = (choosenGroup: Group, id: number) => { const basketCourse = basket.filter((course) => course.id === id)[0]; - const type = choosenGroup.type; + const { type } = choosenGroup; if (type === GroupType.CLASS) { setBasket( basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, classes: choosenGroup } : basket)), @@ -78,7 +91,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { const { data: courses } = await axios.get>( `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`, ); - courses.sort((a: Course, b: Course) => (a.name > b.name ? 1 : -1)); + courses.sort((a, b) => (a.name > b.name ? 1 : -1)); setCourses(courses); }; fetchData(); diff --git a/src/index.tsx b/src/index.tsx index d3ecd06..0e9ee27 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,15 +4,24 @@ import { App } from './components/App'; import { CASProvider } from './contexts/CASProvider'; import { CoursesProvider } from './contexts/CoursesProvider'; import { GlobalStyles } from './styles/GlobalStyles'; +import { SnackbarProvider } from 'notistack'; ReactDOM.render( <> - - - - - - + + + + + + + + , document.getElementById('root'), ); From c16561cfd11eb6f421455e2cabffb7571e3a5e32 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Tue, 27 Oct 2020 10:42:22 +0100 Subject: [PATCH 06/19] added mocked fetch newest timetable --- src/contexts/CoursesProvider.tsx | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index c78b870..035971a 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -86,15 +86,33 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { } }; - useEffect(() => { - const fetchData = async () => { + const getNewestTimetable = async () => { + //todo + try { + const { data: basket } = await axios.get( + `${process.env.REACT_APP_API_URL}/api/v1/assignments/getCurrentAssignments`, + ); + // setBasket(basket); + } catch (e) { + console.log(e); + } + }; + + const fetchClasses = async () => { + try { const { data: courses } = await axios.get>( `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`, ); courses.sort((a, b) => (a.name > b.name ? 1 : -1)); setCourses(courses); - }; - fetchData(); + } catch (e) { + console.log(e); + } + }; + + useEffect(() => { + fetchClasses(); + getNewestTimetable(); }, []); return ( From 0ea3ed69d1dbaeaff90b44a08983d3352d410aa5 Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Wed, 28 Oct 2020 00:07:23 +0100 Subject: [PATCH 07/19] 123 --- package-lock.json | 2 +- src/contexts/CoursesProvider.tsx | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index d62ce59..970889e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2062,7 +2062,7 @@ "dependencies": { "semver": { "version": "7.3.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", + "resolved": "https://npm.mlabs.pl:443/semver/-/semver-7.3.2.tgz", "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", "dev": true } diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 035971a..a04795d 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -24,6 +24,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { const [basket, setBasket] = useState>([]); const { enqueueSnackbar } = useSnackbar(); + const { closeSnackbar } = useSnackbar(); const CAS = useContext(CASContext)!; const token = CAS?.user?.token; @@ -60,14 +61,28 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { data: JSON.stringify(basketIds), }; + const action = (key: any) => ( + <> + + + ); + try { await axios.request(config); enqueueSnackbar('Plan został zapisany', { variant: 'success', + action, }); } catch (e) { enqueueSnackbar('Zapisywanie planu nie powiodło się', { variant: 'error', + action, }); } }; From 30ae3c73eb38b49ebf4c235b46d5e1ec579f8784 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Fri, 30 Oct 2020 00:42:40 +0100 Subject: [PATCH 08/19] initial topbar and dropdown redesign --- public/index.html | 35 ++++++----- src/assets/PL.png | Bin 10420 -> 0 bytes src/assets/UK.png | Bin 10852 -> 0 bytes src/assets/account.svg | 1 + src/assets/poland.svg | 42 +++++++++++++ src/assets/united-kingdom.svg | 115 ++++++++++++++++++++++++++++++++++ src/assets/user.png | Bin 18927 -> 0 bytes src/components/Dropdown.tsx | 57 ++++++++--------- src/components/Rightbar.tsx | 5 -- src/components/Topbar.tsx | 108 +++++++++++++++++-------------- src/components/Transfer.tsx | 1 - src/styles/GlobalStyles.ts | 2 +- 12 files changed, 268 insertions(+), 98 deletions(-) delete mode 100644 src/assets/PL.png delete mode 100644 src/assets/UK.png create mode 100644 src/assets/account.svg create mode 100644 src/assets/poland.svg create mode 100644 src/assets/united-kingdom.svg delete mode 100644 src/assets/user.png diff --git a/public/index.html b/public/index.html index 2a7a20a..30b6ea6 100644 --- a/public/index.html +++ b/public/index.html @@ -1,22 +1,23 @@ - - - - - - - - + + + + + + + + + + + PlanNaPlan + + + + +
+ - PlanNaPlan - - - -
- \ No newline at end of file diff --git a/src/assets/PL.png b/src/assets/PL.png deleted file mode 100644 index 656d382b29e4a4046047e2b3680ff0cc58ab1320..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10420 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 uf1FFX6k^4BLUFzlVku=l?z7=nPkjSGkl0K6 \ No newline at end of file diff --git a/src/assets/poland.svg b/src/assets/poland.svg new file mode 100644 index 0000000..d5a386e --- /dev/null +++ b/src/assets/poland.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/united-kingdom.svg b/src/assets/united-kingdom.svg new file mode 100644 index 0000000..60da99a --- /dev/null +++ b/src/assets/united-kingdom.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/user.png b/src/assets/user.png deleted file mode 100644 index 4b429a0588c4185a8553c90e763e0bcf9da3f391..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 18927 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 { - const classes = useStyles(); const [open, setOpen] = useState(false); const [input, setInput] = useState(''); @@ -111,12 +114,10 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { }; return ( - -
+ // + <> { ))} )} -
- + + // ); }; diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index 9796681..92f97b2 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -9,7 +9,6 @@ const RightbarStyled = styled.div` padding-left: 15px; padding-right: 15px; text-align: center; - font-family: Lato; height: 100%; width: 300px; overflow-y: scroll; @@ -64,10 +63,6 @@ export const Rightbar = () => { return ( -

- Hubert Wrzesiński

- Semestr zimowy 2020/2021 -

ZAPISZ {filteredCourses.map((course, index) => ( diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index 42794bb..eae6651 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -1,80 +1,94 @@ import React, { useState, MouseEvent } from 'react'; import Transfer from '../assets/transfer.png'; import Search from '../assets/search.svg'; -import UK from '../assets/UK.png'; -import PL from '../assets/PL.png'; -import User from '../assets/user.png'; import CloseIcon from '../assets/close.svg'; +import ProfileIcon from '../assets/account.svg'; import { Profile } from './Profile'; import { Dropdown } from './Dropdown'; -import styled from 'styled-components'; +import PolishIcon from '../assets/poland.svg'; +import EnglishIcon from '../assets/united-kingdom.svg'; +import styled from 'styled-components/macro'; + -const TopbarTextStyled = styled.div` - @media only screen and (max-width: 670px) { - display: none; - } -`; const Topbar = styled.div` - background-color: #ffdc61; + background-color:#ECEEF4; height: 80px; padding: 5px; - font-family: comic sans MS; font-size: 24px; font-weight: bold; display: flex; justify-content: space-between; `; -const TopbarLogoWrapperStyled = styled.div` +const LogoWrapper = styled.div` display: flex; align-items: center; flex-grow: 0.5; justify-content: flex-start; `; -const TopbarLogoStyled = styled.img` - width: 80px; - height: 80px; +const Logo = styled.img` + flex-grow: 1; + width: 70px; + height: 70px; @media only screen and (max-width: 670px) { width: 60px; height: 60px; } `; -const TopbarInputStyled = styled.div` - width: 70%; +const Text = styled.div` + flex-grow: 2; + @media only screen and (max-width: 670px) { + display: none; + } +`; + +const InputWrapper = styled.div` display: flex; - flex-grow: 3; + align-items: center; + justify-content: center; + margin: 10px; + flex-grow: 9; + background-color:#f2f4f7; + border-radius: 5px; `; -const TopbarInputFieldStyled = styled.div` - width: 96%; - margin-top: 10px; +const Input = styled.div` +width: 100%; `; -const TopbarInputIconStyled = styled.img` - width: 35px; +const InputIcon = styled.img` + width: 30px; @media only screen and (max-width: 670px) { width: 25px; } cursor: pointer; `; -const TopbarIcon = styled.img` - width: 50px; +const IconWrapper = styled.div` + display: flex; + align-items: center; + justify-content: space-around; + flex-grow: 0.5; +`; + +const Icon = styled.img` + width: 40px; cursor: pointer; @media only screen and (max-width: 670px) { width: 35px; } `; -const TopbarIconBox = styled.div` - display: flex; - align-items: center; - justify-content: space-around; - flex-grow: 1.5; -`; + + +const VerticalLine = styled.div` + border-left: 1px solid black; + height: 30px; +` + interface TopbarProps { handleTransfer: (e: MouseEvent) => void; @@ -95,23 +109,25 @@ export default function ({ handleTransfer }: TopbarProps) { return ( - - - plan na plan - - - - + + + plan na plan + + + - - - - - {/* */} - - + + + + + + + {/* */} + + - + nasz student + ); } diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx index 58442b4..4c542b4 100644 --- a/src/components/Transfer.tsx +++ b/src/components/Transfer.tsx @@ -53,7 +53,6 @@ const TransferReceiveStyled = styled.div` `; const TransferTextStyled = styled.div` - font-family: Lato; font-size: 30px; margin-bottom: 10px; `; diff --git a/src/styles/GlobalStyles.ts b/src/styles/GlobalStyles.ts index 4f68eaa..b0ec048 100644 --- a/src/styles/GlobalStyles.ts +++ b/src/styles/GlobalStyles.ts @@ -11,7 +11,7 @@ export const GlobalStyles = createGlobalStyle` margin: 0; padding: 0; line-height: 24px; - + font-family: 'B612', sans-serif; } body::-webkit-scrollbar { From 2b1aad7a08adee0b5726e71df67c88e343601501 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Sun, 1 Nov 2020 20:57:08 +0100 Subject: [PATCH 09/19] get newest plan is working correctly --- src/contexts/CoursesProvider.tsx | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index a04795d..29f2650 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -102,12 +102,19 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { }; const getNewestTimetable = async () => { - //todo + const config = { + method: 'get' as const, + url: `${process.env.REACT_APP_API_URL}/api/v1/assignments/getCurrentAssignments`, + headers: { + Authorization: `Bearer ${token}`, + }, + }; try { - const { data: basket } = await axios.get( - `${process.env.REACT_APP_API_URL}/api/v1/assignments/getCurrentAssignments`, - ); - // setBasket(basket); + let { data: basket } = await axios.request(config); + if (basket === '') { + basket = []; + } + setBasket(basket); } catch (e) { console.log(e); } @@ -127,8 +134,10 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { useEffect(() => { fetchClasses(); - getNewestTimetable(); - }, []); + if (token) { + getNewestTimetable(); + } + }, [token]); return ( From ab9f99df1f980dd6b3730c7be2ea137f09313706 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Sun, 1 Nov 2020 21:13:00 +0100 Subject: [PATCH 10/19] removed eslint, not working properly --- .eslintrc.js | 56 ++++++++++++++++++++-------------------- package-lock.json | 65 ----------------------------------------------- package.json | 1 - 3 files changed, 28 insertions(+), 94 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 45af087..072442c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,28 +1,28 @@ -module.exports = { - parser: '@typescript-eslint/parser', - extends: [ - 'plugin:react/recommended', - 'plugin:@typescript-eslint/recommended', - 'prettier/@typescript-eslint', - 'plugin:prettier/recommended', - 'plugin:react-hooks/recommended', - ], - parserOptions: { - ecmaVersion: 2020, - sourceType: 'module', - ecmaFeatures: { - jsx: true, - }, - }, - rules: { - '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_|^req|^next' }], - '@typescript-eslint/no-explicit-any': 0, - '@typescript-eslint/explicit-function-return-type': 0, - 'react/prop-types': 0, - }, - settings: { - react: { - version: 'detect', - }, - }, -}; +// module.exports = { +// parser: '@typescript-eslint/parser', +// extends: [ +// 'plugin:react/recommended', +// 'plugin:@typescript-eslint/recommended', +// 'prettier/@typescript-eslint', +// 'plugin:prettier/recommended', +// 'plugin:react-hooks/recommended', +// ], +// parserOptions: { +// ecmaVersion: 2020, +// sourceType: 'module', +// ecmaFeatures: { +// jsx: true, +// }, +// }, +// rules: { +// '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_|^req|^next' }], +// '@typescript-eslint/no-explicit-any': 0, +// '@typescript-eslint/explicit-function-return-type': 0, +// 'react/prop-types': 0, +// }, +// settings: { +// react: { +// version: 'detect', +// }, +// }, +// }; diff --git a/package-lock.json b/package-lock.json index 970889e..988f68a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2012,71 +2012,6 @@ "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz", "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==" }, - "@typescript-eslint/experimental-utils": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.9.1.tgz", - "integrity": "sha512-lkiZ8iBBaYoyEKhCkkw4SAeatXyBq9Ece5bZXdLe1LWBUwTszGbmbiqmQbwWA8cSYDnjWXp9eDbXpf9Sn0hLAg==", - "dev": true, - "requires": { - "@types/json-schema": "^7.0.3", - "@typescript-eslint/types": "3.9.1", - "@typescript-eslint/typescript-estree": "3.9.1", - "eslint-scope": "^5.0.0", - "eslint-utils": "^2.0.0" - } - }, - "@typescript-eslint/parser": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.9.1.tgz", - "integrity": "sha512-y5QvPFUn4Vl4qM40lI+pNWhTcOWtpZAJ8pOEQ21fTTW4xTJkRplMjMRje7LYTXqVKKX9GJhcyweMz2+W1J5bMg==", - "dev": true, - "requires": { - "@types/eslint-visitor-keys": "^1.0.0", - "@typescript-eslint/experimental-utils": "3.9.1", - "@typescript-eslint/types": "3.9.1", - "@typescript-eslint/typescript-estree": "3.9.1", - "eslint-visitor-keys": "^1.1.0" - } - }, - "@typescript-eslint/types": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-3.9.1.tgz", - "integrity": "sha512-15JcTlNQE1BsYy5NBhctnEhEoctjXOjOK+Q+rk8ugC+WXU9rAcS2BYhoh6X4rOaXJEpIYDl+p7ix+A5U0BqPTw==", - "dev": true - }, - "@typescript-eslint/typescript-estree": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.9.1.tgz", - "integrity": "sha512-IqM0gfGxOmIKPhiHW/iyAEXwSVqMmR2wJ9uXHNdFpqVvPaQ3dWg302vW127sBpAiqM9SfHhyS40NKLsoMpN2KA==", - "dev": true, - "requires": { - "@typescript-eslint/types": "3.9.1", - "@typescript-eslint/visitor-keys": "3.9.1", - "debug": "^4.1.1", - "glob": "^7.1.6", - "is-glob": "^4.0.1", - "lodash": "^4.17.15", - "semver": "^7.3.2", - "tsutils": "^3.17.1" - }, - "dependencies": { - "semver": { - "version": "7.3.2", - "resolved": "https://npm.mlabs.pl:443/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", - "dev": true - } - } - }, - "@typescript-eslint/visitor-keys": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-3.9.1.tgz", - "integrity": "sha512-zxdtUjeoSh+prCpogswMwVUJfEFmCOjdzK9rpNjNBfm6EyPt99x3RrJoBOGZO23FCt0WPKUCOL5mb/9D5LjdwQ==", - "dev": true, - "requires": { - "eslint-visitor-keys": "^1.1.0" - } - }, "@webassemblyjs/ast": { "version": "1.8.5", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz", diff --git a/package.json b/package.json index 3bc6b39..b02dc56 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "@types/react": "^16.9.46", "@types/react-dom": "^16.9.8", "@types/styled-components": "^5.1.2", - "@typescript-eslint/parser": "^3.9.1", "prettier": "^2.0.5", "typescript": "^3.9.7" }, From 4276d20319458f535905eab0e205ba7de4a34711 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Sun, 1 Nov 2020 21:41:16 +0100 Subject: [PATCH 11/19] updated card expand styles --- src/components/CourseCard.tsx | 63 ++++++++++++++++++----------------- src/components/Rightbar.tsx | 12 ++----- 2 files changed, 35 insertions(+), 40 deletions(-) diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 46ce574..b5511bd 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -7,10 +7,6 @@ import styled from 'styled-components'; import { makeStyles } from '@material-ui/core/styles'; import { ReactComponent as CloseIcon } from '../assets/close.svg'; -interface ClassExandIconProps { - isSelected: boolean; -} - const CourseStyled = styled.div` display: flex; min-height: 40px; @@ -20,51 +16,58 @@ const CourseStyled = styled.div` flex-direction: column; margin-top: 10px; padding-top: 10px; - padding-bottom: 10px; border-radius: 10px; cursor: pointer; align-items: stretch; position: relative; - box-shadow: 9px 9px 8px -2px rgba(0,0,0,0.59); + box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59); `; const CourseNameStyled = styled.div` -padding-top:20px; -padding-bottom:10px; -padding-left:35px; -padding-right:35px; + padding-top: 25px; + padding-bottom: 5px; + font-size: 16px; `; - - const ClassGroupStyled = styled.div` -position:relative; + position: relative; padding-top: 1px; padding-bottom: 1px; :hover { cursor: pointer; - background-color:#9ED3FF; + background-color: #9ed3ff; } `; -const ClassExandIconStyled = styled.img` - margin-top: 5px; +interface ExpandIconProps { + isSelected: boolean; +} + +const Flexbox = styled.div` + padding-bottom: 5px; + padding-top: 5px; + display: flex; + justify-content: center; + align-items: center; +`; + +const Expand = styled.img` width: 20px; transition: 0.2s; transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')}; `; const TypeClass = styled.div` - font-size:12px; - position:absolute; - border-radius:15px; - background-color:#00506B; - border:2px solid; - min-width:45px; - top:5px; - left:5px; - color:white; - font-weight:bold; + font-size: 12px; + position: absolute; + border-radius: 15px; + background-color: #00506b; + border: 2px solid; + min-width: 45px; + top: 5px; + left: 5px; + color: white; + font-weight: bold; `; const useStyles = makeStyles({ @@ -117,16 +120,16 @@ export const CourseCard = ({ course }: CourseCardProps) => { .sort((a, b) => b.type.localeCompare(a.type)) .map((group, index) => ( onGroupClick(group, course.id)}> - {group.type==="CLASS"? "Ćw." : "Wyk."} + {group.type === 'CLASS' ? 'Ćw.' : 'Wyk.'}

{group.time} {group.room}

{group.lecturer}

))} -
setSelected(!isSelected)}> - -
+ setSelected(!isSelected)}> + + ); }; diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index 92f97b2..9d79658 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -26,20 +26,14 @@ const RightbarStyled = styled.div` border: 1px solid; } `; -const RightbarTextStyled = styled.div` - display: flex; - flex-direction: column; -`; - const SaveButton = styled.div` display: flex; justify-content: center; align-items: center; - background-color: #417cab !important; + background-color: #417cab; border-radius: 10px; cursor: pointer; height: 40px; - background-color: red; margin-bottom: 10px; &:hover { color: white; @@ -62,9 +56,7 @@ export const Rightbar = () => { //need to insert student name from db and course maybe based on current time or from db too return ( - - ZAPISZ - + ZAPISZ {filteredCourses.map((course, index) => ( ))} From 3cbd961d3ae26e665354ec46323f5ae93c2bfb23 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Mon, 2 Nov 2020 00:15:30 +0100 Subject: [PATCH 12/19] topbar working correctly --- package-lock.json | 5 ++ package.json | 1 + src/components/Dropdown.tsx | 105 +++++++++++++++--------------------- src/components/Topbar.tsx | 74 +++++++++++++++++-------- 4 files changed, 100 insertions(+), 85 deletions(-) diff --git a/package-lock.json b/package-lock.json index 988f68a..7433740 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10580,6 +10580,11 @@ "whatwg-fetch": "^3.0.0" } }, + "react-click-away-listener": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/react-click-away-listener/-/react-click-away-listener-1.4.3.tgz", + "integrity": "sha512-c7d6mfZuHu/rIdnEHnovX/QsScQXlqtdAynSnZUyyH+6kPOAyB40k2c5br56c/qp4KBkHD0JQV4C7rVuAmroMw==" + }, "react-dev-utils": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz", diff --git a/package.json b/package.json index b02dc56..a5ee4b5 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "axios": "^0.19.2", "notistack": "^1.0.1", "react": "^16.13.1", + "react-click-away-listener": "^1.4.3", "react-dom": "^16.13.1", "react-scripts": "3.4.1", "styled-components": "^5.1.1" diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index e6a4df0..008ebaa 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -1,19 +1,19 @@ -import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react'; -import ClickAwayListener from '@material-ui/core/ClickAwayListener'; +import React, { useState, useContext, useEffect, MouseEvent, forwardRef } from 'react'; import { coursesContext } from '../contexts/CoursesProvider'; import { Course } from '../types'; import styled from 'styled-components'; +const WrapperIchuj = styled.div` + max-width: 1200px; +`; + const DropdownContainer = styled.div` - position: absolute; - left: 280px; - top: 65px; - z-index: 99; - min-width: 70%; - max-height: 420px; - border-radius:3px; - overflow-y: auto; - box-shadow: 0.05em 0.2em 0.6em rgba(0,0,0,.2); + position: relative; + z-index: 99999999; + max-height: 420px; + border-radius: 3px; + overflow-y: auto; + box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2); scroll-snap-type: y mandatory; scroll-behavior: smooth; ::-webkit-scrollbar-track { @@ -39,38 +39,35 @@ const CourseContainer = styled.div` font-weight: 500; scroll-snap-align: end; :hover { - background-color: #ECEEF4; + background-color: #eceef4; cursor: pointer; } `; -const Input = styled.input` - background-color: #F1F2F5; - font-size: 20px; - height: 100%; - width: 100%; - border: none; - &:focus { - outline: none; - } - -` - interface DropdownProps { - clearInput: boolean; - handleClearInput: () => void; + open: boolean; + input: string; + handleCloseDropdown: () => void; } -export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { - - const [open, setOpen] = useState(false); - const [input, setInput] = useState(''); - +export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: DropdownProps, ref: any) => { //courses - choosenCourses const [filteredCourses, setFilteredCourses] = useState>([]); const { courses, basket, addToBasket } = useContext(coursesContext)!; + useEffect(() => { + console.log('wut'); + }, [open, input, handleCloseDropdown]); + + useEffect(() => { + console.log('input is: ', input); + }, [input]); + + useEffect(() => { + console.log('is open: ', open); + }, [open]); + useEffect(() => { const filterCourses = (input: string) => { const choosenCoursesNames = basket.map(({ name }) => name.trim()); @@ -90,17 +87,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { setFilteredCourses(filteredCourses); }; filterCourses(input); - }, [input, open, basket]); - - useEffect(() => { - clearInput && (setInput(''), handleClearInput()); - }, [clearInput]); - - const handleChange = (event: ChangeEvent) => setInput(event.target.value); - - const handleClick = () => setOpen(true); - - const handleClickAway = () => setOpen(false); + }, [input, basket]); const onCourseClick = async (event: MouseEvent) => { const target = event.currentTarget; @@ -109,29 +96,21 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { console.log('added course is'); console.log(course); addToBasket(course); - setOpen(false); + handleCloseDropdown(); } }; return ( - // - <> - - {open && ( - - {filteredCourses.map(({ name, id }, index) => ( - -

{name}

- - ))} - - )} - - // + + {open && ( + + {filteredCourses.map(({ name, id }, index) => ( + +

{name}

+ + ))} + + )} + ); -}; +}); diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index eae6651..f94f8bc 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -1,4 +1,4 @@ -import React, { useState, MouseEvent } from 'react'; +import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react'; import Transfer from '../assets/transfer.png'; import Search from '../assets/search.svg'; import CloseIcon from '../assets/close.svg'; @@ -8,11 +8,10 @@ import { Dropdown } from './Dropdown'; import PolishIcon from '../assets/poland.svg'; import EnglishIcon from '../assets/united-kingdom.svg'; import styled from 'styled-components/macro'; - - +import ClickAwayListener from 'react-click-away-listener'; const Topbar = styled.div` - background-color:#ECEEF4; + background-color: #eceef4; height: 80px; padding: 5px; font-size: 24px; @@ -45,18 +44,32 @@ const Text = styled.div` } `; +const FlexboxColumn = styled.div` + display: flex; + flex-direction: column; + flex-grow: 9; + max-width: 1200px; +`; + const InputWrapper = styled.div` display: flex; align-items: center; - justify-content: center; - margin: 10px; - flex-grow: 9; - background-color:#f2f4f7; - border-radius: 5px; + justify-content: center; + margin-top: 15px; + background-color: #f2f4f7; + border-radius: 6px; `; -const Input = styled.div` -width: 100%; +const Input = styled.input` + background-color: #f1f2f5; + font-size: 20px; + height: 40px; + width: 100%; + margin-left: 5px; + border: none; + &:focus { + outline: none; + } `; const InputIcon = styled.img` @@ -82,12 +95,11 @@ const Icon = styled.img` } `; - - const VerticalLine = styled.div` border-left: 1px solid black; height: 30px; -` +`; + interface TopbarProps { @@ -98,6 +110,8 @@ export default function ({ handleTransfer }: TopbarProps) { const [clearInput, setClearInput] = useState(false); const [isPolish, setIsPolish] = useState(false); const [anchorEl, setAnchorEl] = useState(null); + const [open, setOpen] = useState(false); + const [input, setInput] = useState(''); const onLangChange = () => setIsPolish(!isPolish); @@ -107,20 +121,36 @@ export default function ({ handleTransfer }: TopbarProps) { const handleClearInput = () => setClearInput(!clearInput); + const handleChange = (event: ChangeEvent) => setInput(event.target.value); + + const handleClick = () => setOpen(true); + + const handleCloseDropdown = () => setOpen(false); + + const handleClickAway = () => setOpen(false); + + useEffect(() => { + clearInput && (setInput(''), handleClearInput()); + }, [clearInput]); + return ( plan na plan - - - - - - - - + + + + + + + + + + + + {/* */} From 0f155e928bb69beed1dce158acdce6725928f2df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Tue, 3 Nov 2020 00:59:42 +0100 Subject: [PATCH 13/19] dropdown working correctly --- public/index.html | 3 ++- src/components/Dropdown.tsx | 5 +++-- src/components/SchedulerRow.tsx | 20 ++++++++------------ src/components/Topbar.tsx | 2 +- src/constants/index.ts | 3 +++ src/styles/GlobalStyles.ts | 2 +- 6 files changed, 18 insertions(+), 17 deletions(-) diff --git a/public/index.html b/public/index.html index 30b6ea6..cbfdddb 100644 --- a/public/index.html +++ b/public/index.html @@ -10,7 +10,8 @@ - + + PlanNaPlan diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 008ebaa..1f82b1c 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -4,7 +4,7 @@ import { Course } from '../types'; import styled from 'styled-components'; const WrapperIchuj = styled.div` - max-width: 1200px; + max-width: 1400px; `; const DropdownContainer = styled.div` @@ -86,8 +86,9 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo ); setFilteredCourses(filteredCourses); }; + console.log("filtering courses"); filterCourses(input); - }, [input, basket]); + }, [open, input, basket]); const onCourseClick = async (event: MouseEvent) => { const target = event.currentTarget; diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index e7b80f3..8c5a53b 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -47,13 +47,10 @@ const Classes = styled.div` align-items: center; z-index: 2; border-radius: 10px; - - font-size: 0.9vw; - /* 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; + padding-left: 10px; + text-align: left; background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#A68820')}; box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59); `; @@ -98,7 +95,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight {groups.map( (group, index) => group.day === eventIndex && ( -
+ <> handlePopoverOpen(e)} onMouseLeave={handlePopoverClose} > -

- {groups[index].name} -

- {groups[index].room} -

+
+

{groups[index].name}

+ {groups[index].room} +
{groups[index].room}

 -
+ ), )} diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index f94f8bc..28d8b1f 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -48,7 +48,7 @@ const FlexboxColumn = styled.div` display: flex; flex-direction: column; flex-grow: 9; - max-width: 1200px; + max-width: 1400px; `; const InputWrapper = styled.div` diff --git a/src/constants/index.ts b/src/constants/index.ts index cd6753a..12084db 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -20,3 +20,6 @@ export const hours = [ "18:00", "19:00", ]; + + +export const MONDAY_TO_FRIDAY = 5; \ No newline at end of file diff --git a/src/styles/GlobalStyles.ts b/src/styles/GlobalStyles.ts index b0ec048..91281b6 100644 --- a/src/styles/GlobalStyles.ts +++ b/src/styles/GlobalStyles.ts @@ -11,7 +11,7 @@ export const GlobalStyles = createGlobalStyle` margin: 0; padding: 0; line-height: 24px; - font-family: 'B612', sans-serif; + font-family: 'Roboto', sans-serif; } body::-webkit-scrollbar { From c8edf6496390b33c6392af824f53ce064ece7212 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Sun, 8 Nov 2020 13:40:11 +0100 Subject: [PATCH 14/19] topbar dropdown width aligned with input wrapper width --- src/components/Dropdown.tsx | 12 +++++------- src/components/SchedulerRow.tsx | 4 ++-- src/components/Topbar.tsx | 17 ++++++----------- 3 files changed, 13 insertions(+), 20 deletions(-) diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 1f82b1c..206ce34 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -3,9 +3,7 @@ import { coursesContext } from '../contexts/CoursesProvider'; import { Course } from '../types'; import styled from 'styled-components'; -const WrapperIchuj = styled.div` - max-width: 1400px; -`; + const DropdownContainer = styled.div` position: relative; @@ -102,16 +100,16 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo }; return ( - + {open && ( - + <> {filteredCourses.map(({ name, id }, index) => (

{name}

))} - + )} - + ); }); diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index 8c5a53b..9a04014 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -51,7 +51,7 @@ const Classes = styled.div` height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; padding-left: 10px; text-align: left; - background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#A68820')}; + background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')}; box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59); `; @@ -109,7 +109,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight >

{groups[index].name}

- {groups[index].room} +

{groups[index].room}

- {/* */} + From 7f019483cf9c35b5405572dfcba238a96ae5c16c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Sun, 8 Nov 2020 14:54:54 +0100 Subject: [PATCH 15/19] course card refactor --- src/assets/bin.svg | 1 + src/assets/expand.png | Bin 535 -> 0 bytes src/assets/expand.svg | 41 ++++++++++++++++++ src/components/CourseCard.tsx | 79 ++++++++++++++++++---------------- src/components/Rightbar.tsx | 3 +- src/components/Topbar.tsx | 3 +- 6 files changed, 88 insertions(+), 39 deletions(-) create mode 100644 src/assets/bin.svg delete mode 100644 src/assets/expand.png create mode 100644 src/assets/expand.svg diff --git a/src/assets/bin.svg b/src/assets/bin.svg new file mode 100644 index 0000000..cbfe7d7 --- /dev/null +++ b/src/assets/bin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/expand.png b/src/assets/expand.png deleted file mode 100644 index 239474f92cd6e1e7dc3dca1926ca72b4c97dbd11..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 535 zcmV+y0_gpTP)0*13?gmzo_pd;>9NrFRr-nMvWWdh9C$c2qK6ef`}K< zXYrog^{6M~%`6^f8k0E5bUD+R2=zfhE>-n^6PR=w6h%=KMNt%`#pwi|fh^FQaF$AX zfgE18PTQt#-~%Z8RRAVjq!Tg(eDRa(6X*$Rs+BQS1g0DXwPA#687rwSARo|FDK+OX zbUo($-Su+i@v{FS*PzK%30QI(znUd~XIQRmQ1iP*qmjxulrUtllPLplK?Bm3&8D`T zsd%#`S<-P0I&>hjEzEEbHgHoo@H9r59pUbM+rb;c!Es0(33u*E7pw~xoJEj17Vg^p z>!L;M-!x_597qXwoCxNZ@E&v|7LZ9@V<(jYE`%~`QDqGC$fRz7wh)<1p-k+*eNw4g zf~8Wxl~86iZW%+^xvI7vfR2j(cHmAZv*Jp|FpEs;5l^ZexEIPSyOuFXUldP%Nn{q9 zC1aRD_DxA->YmM9GfliwiOLw_l4|yUt%ghyO{#= + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index b5511bd..8fae122 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -1,32 +1,51 @@ import React, { useState, useContext, MouseEvent } from 'react'; import Collapse from '@material-ui/core/Collapse'; -import ExpandIcon from '../assets/expand.png'; +import { ReactComponent as Expand } from '../assets/expand.svg'; import { Course, Group } from '../types/index'; import { coursesContext } from '../contexts/CoursesProvider'; import styled from 'styled-components'; import { makeStyles } from '@material-ui/core/styles'; -import { ReactComponent as CloseIcon } from '../assets/close.svg'; +import { ReactComponent as Bin } from '../assets/bin.svg'; -const CourseStyled = styled.div` +const CourseCardWrapper = styled.div` + position: relative; display: flex; min-height: 40px; - background-color: rgb(100, 181, 246) !important; + background-color: rgb(100, 181, 246); align-items: center; justify-content: center; flex-direction: column; margin-top: 10px; - padding-top: 10px; - border-radius: 10px; + border-radius: 10px; 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: 25px; - padding-bottom: 5px; + +const TitleWrapper = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px; +` + +const BinIcon = styled(Bin)` + width: 20px; + height: 20px; + max-width: 20px; + min-width: 20px; + cursor: pointer; + &:hover { + fill: white; + } +`; + +const CourseName = styled.div` + padding-left: 3px; + padding-right: 3px; font-size: 16px; + user-select: none; `; const ClassGroupStyled = styled.div` @@ -43,18 +62,13 @@ interface ExpandIconProps { isSelected: boolean; } -const Flexbox = styled.div` - padding-bottom: 5px; - padding-top: 5px; - display: flex; - justify-content: center; - align-items: center; -`; - -const Expand = styled.img` +const ExpandIcon = styled(Expand) ` width: 20px; + height: 20px; + max-width: 20px; + min-width: 20px; transition: 0.2s; - transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')}; + transform: ${({ isSelected }) => (isSelected ? 'scaleY(-1);' : 'scaleY(1);')}; `; const TypeClass = styled.div` @@ -88,16 +102,7 @@ const useStyles = makeStyles({ }, }); -const DeleteFromBasketIcon = styled(CloseIcon)` - width: 20px; - cursor: pointer; - position: absolute; - left: 230px; - top: -5px; - &:hover { - fill: white; - } -`; + interface CourseCardProps { course: Course; @@ -112,9 +117,12 @@ export const CourseCard = ({ course }: CourseCardProps) => { const onGroupClick = (group: Group, id: number) => addGroup(group, id); return ( - - deleteFromBasket(course.id)}> - setSelected(!isSelected)}>{course.name} + + + deleteFromBasket(course.id)}> + setSelected(!isSelected)}>{course.name} + setSelected(!isSelected)} isSelected={isSelected} /> + {groups .sort((a, b) => b.type.localeCompare(a.type)) @@ -127,9 +135,6 @@ export const CourseCard = ({ course }: CourseCardProps) => { ))} - setSelected(!isSelected)}> - - - + ); }; diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index 9d79658..78cce70 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -22,7 +22,7 @@ const RightbarStyled = styled.div` } ::-webkit-scrollbar-thumb { border-radius: 10px; - background-color: #d4b851; + background-color: black; border: 1px solid; } `; @@ -30,6 +30,7 @@ const SaveButton = styled.div` display: flex; justify-content: center; align-items: center; + user-select: none; background-color: #417cab; border-radius: 10px; cursor: pointer; diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index 33a9308..02a0c7c 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -37,6 +37,7 @@ const Logo = styled.img` `; const Text = styled.div` + user-select: none; @media only screen and (max-width: 670px) { display: none; } @@ -151,7 +152,7 @@ export default function ({ handleTransfer }: TopbarProps) { - nasz student + nasz student ); From 26d6056a2bb254d0370ba397ce5e16d6bb871fba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Sun, 8 Nov 2020 15:49:10 +0100 Subject: [PATCH 16/19] working on table borders --- src/components/Scheduler.tsx | 44 ++++++++++++++++++++---------------- src/constants/index.ts | 12 ++++++++++ 2 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx index 1db75bd..febad0c 100644 --- a/src/components/Scheduler.tsx +++ b/src/components/Scheduler.tsx @@ -6,7 +6,7 @@ import styled from 'styled-components/macro'; const SchedulerWrapper = styled.div` border-collapse: collapse; - flex-grow: 1; + flex: 1; `; const TableBody = styled.div` @@ -26,22 +26,26 @@ const TableHead = styled.div` interface TableCellProps { height: number; + isHourColumn?: boolean; } const TableCell = styled.div` height: ${({ height }) => height}px; - border: 1px solid #ddd; + /* border: ${({ isHourColumn }) => !isHourColumn && '1px solid #ddd'}; */ + border-width: ${({ isHourColumn }) => !isHourColumn && '1px'}; + border-style: ${({ isHourColumn }) => !isHourColumn && 'solid dotted dotted dotted'}; + /* border-bottom: ${({ isHourColumn }) => !isHourColumn && '1px dotted #ddd'}; */ + margin-top: ${({ isHourColumn, height }) => isHourColumn ? -(height / 2) : 0}px; display: flex; align-items: center; - justify-content: center; - flex: 1; - font-size: 1.25vw; + justify-content: ${({ isHourColumn }) => isHourColumn ? 'flex-end' : 'center'}; + flex: ${({ isHourColumn }) => isHourColumn ? '1' : '5'}; + margin-right: ${({ isHourColumn }) => isHourColumn ? '10px' : '0px'}; + font-size: 0.75vw; + user-select: none; + border-collapse:collapse; `; -const T = styled.table` - width: 100%; - height: 100%; -`; export const Scheduler = () => { const cellRef = useRef(null); @@ -69,14 +73,14 @@ export const Scheduler = () => { {days.map((day, indexCell) => indexCell === 0 ? ( - + {day} ) : ( - - {day} - - ), + + {day} + + ), )} @@ -84,19 +88,19 @@ export const Scheduler = () => { {[hour, '', '', '', '', ''].map((value, indexCell) => indexCell === 0 ? ( - + {value} ) : ( - - {value} - - ), + + {value} + + ), )} ))} - + ); diff --git a/src/constants/index.ts b/src/constants/index.ts index 12084db..7b6cd9d 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -8,17 +8,29 @@ export const days = [ ]; export const hours = [ "8:00", + "8:30", "9:00", + "9:30", "10:00", + "10:30", "11:00", + "11:30", "12:00", + "12:30", "13:00", + "13:30", "14:00", + "14:30", "15:00", + "15:30", "16:00", + "16:30", "17:00", + "17:30", "18:00", + "18:30", "19:00", + "19:30", ]; From cdbbeecc70e5080c1489c0666c623f2b43a59851 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Sun, 8 Nov 2020 18:05:21 +0100 Subject: [PATCH 17/19] table ready --- src/components/App.tsx | 2 ++ src/components/Profile.tsx | 5 ++-- src/components/Rightbar.tsx | 3 +++ src/components/Scheduler.tsx | 46 ++++++++++++++++++++++++++---------- src/components/Topbar.tsx | 41 +++++++++++++++++++------------- src/constants/index.ts | 24 +++++++++---------- 6 files changed, 77 insertions(+), 44 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 5390571..ff473d8 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -8,6 +8,8 @@ import styled from 'styled-components'; const Wrapper = styled.div` display: flex; height: calc(100vh - 80px); + background-color: #ECEEF4; + padding: 20px; `; export const App = () => { diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx index cb97783..c50de4b 100644 --- a/src/components/Profile.tsx +++ b/src/components/Profile.tsx @@ -12,9 +12,8 @@ export const Profile = ({ anchorEl, handleClose }: ProfileProps) => { return ( - Profile - My account - Logout + Profil + Wyloguj ); }; diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index 78cce70..66554f3 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -25,6 +25,9 @@ const RightbarStyled = styled.div` background-color: black; border: 1px solid; } + background-color: white; + border-radius: 5px; + box-shadow: 3px 3px 3px -2px rgba(0, 0, 0, 0.59); `; const SaveButton = styled.div` display: flex; diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx index febad0c..6746765 100644 --- a/src/components/Scheduler.tsx +++ b/src/components/Scheduler.tsx @@ -5,8 +5,17 @@ import { days, hours } from '../constants/index'; import styled from 'styled-components/macro'; const SchedulerWrapper = styled.div` + display: flex; border-collapse: collapse; flex: 1; + background-color: white; + padding: 5px 15px 5px 5px; + border-radius: 5px; + margin-right: 20px; + flex-direction: column; + justify-content: center; + align-items: center; + box-shadow: 3px 3px 3px -2px rgba(0, 0, 0, 0.59); `; const TableBody = styled.div` @@ -31,10 +40,9 @@ interface TableCellProps { const TableCell = styled.div` height: ${({ height }) => height}px; - /* border: ${({ isHourColumn }) => !isHourColumn && '1px solid #ddd'}; */ - border-width: ${({ isHourColumn }) => !isHourColumn && '1px'}; - border-style: ${({ isHourColumn }) => !isHourColumn && 'solid dotted dotted dotted'}; - /* border-bottom: ${({ isHourColumn }) => !isHourColumn && '1px dotted #ddd'}; */ + border-width: ${({ isHourColumn }) => !isHourColumn && '2px'}; + border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'}; + border-color: rgb(242, 243, 245); margin-top: ${({ isHourColumn, height }) => isHourColumn ? -(height / 2) : 0}px; display: flex; align-items: center; @@ -43,8 +51,12 @@ const TableCell = styled.div` margin-right: ${({ isHourColumn }) => isHourColumn ? '10px' : '0px'}; font-size: 0.75vw; user-select: none; - border-collapse:collapse; -`; + border-collapse:collapse; + :nth-child(2) { + border-left: 2px solid rgb(242, 243, 245); + } + font-weight: bold; + `; export const Scheduler = () => { @@ -77,7 +89,7 @@ export const Scheduler = () => { {day} ) : ( - + {day} ), @@ -91,11 +103,21 @@ export const Scheduler = () => { {value} - ) : ( - - {value} - - ), + ) : indexRow === 23 ? ( + + {value} + + ) : indexCell === 5 ? ( + + {value} + + ) : indexRow % 2 !== 0 ? ( + + {value} + + ) : + {value} + )} ))} diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index 02a0c7c..a7789ff 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -1,7 +1,7 @@ import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react'; import Transfer from '../assets/transfer.png'; import Search from '../assets/search.svg'; -import CloseIcon from '../assets/close.svg'; +import { ReactComponent as Close } from '../assets/close.svg'; import ProfileIcon from '../assets/account.svg'; import { Profile } from './Profile'; import { Dropdown } from './Dropdown'; @@ -11,7 +11,7 @@ import styled from 'styled-components/macro'; import ClickAwayListener from 'react-click-away-listener'; const Topbar = styled.div` - background-color: #eceef4; + background-color: #E3E5ED; height: 80px; padding: 5px; font-size: 24px; @@ -22,9 +22,10 @@ const Topbar = styled.div` const LogoWrapper = styled.div` display: flex; - justify-content: center; + justify-content: flex-start; align-items: center; flex: 2; + margin-left: 10px; `; const Logo = styled.img` @@ -37,6 +38,8 @@ const Logo = styled.img` `; const Text = styled.div` + margin-left: 10px; + font-size: 1.4rem; user-select: none; @media only screen and (max-width: 670px) { display: none; @@ -46,7 +49,7 @@ const Text = styled.div` const FlexboxColumn = styled.div` display: flex; flex-direction: column; - flex: 9; + flex: 12; `; const InputWrapper = styled.div` @@ -54,6 +57,7 @@ const InputWrapper = styled.div` margin-top: 15px; background-color: #f2f4f7; border-radius: 6px; + align-items: center; `; const Input = styled.input` @@ -61,40 +65,45 @@ const Input = styled.input` font-size: 20px; height: 40px; width: 100%; - margin-left: 5px; border: none; + margin-left: 5px; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; &:focus { outline: none; } `; -const InputIcon = styled.img` +const CloseIcon = styled(Close)` width: 30px; + height: 30px; + margin-right: 5px; @media only screen and (max-width: 670px) { width: 25px; } cursor: pointer; + :hover { + fill: grey; + } `; const IconWrapper = styled.div` display: flex; - justify-content: center; + justify-content: flex-end; align-items: center; - flex: 2; + width: 335px; `; const Icon = styled.img` width: 40px; + margin: 5px; cursor: pointer; @media only screen and (max-width: 670px) { width: 35px; } `; -const VerticalLine = styled.div` - border-left: 1px solid black; - height: 30px; -`; + @@ -139,20 +148,18 @@ export default function ({ handleTransfer }: TopbarProps) { - - - + - + {/* Maciej Głowacki */} + {/* */} - nasz student ); diff --git a/src/constants/index.ts b/src/constants/index.ts index 7b6cd9d..7898ca9 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -8,29 +8,29 @@ export const days = [ ]; export const hours = [ "8:00", - "8:30", + "", "9:00", - "9:30", + "", "10:00", - "10:30", + "", "11:00", - "11:30", + "", "12:00", - "12:30", + "", "13:00", - "13:30", + "", "14:00", - "14:30", + "", "15:00", - "15:30", + "", "16:00", - "16:30", + "", "17:00", - "17:30", + "", "18:00", - "18:30", + "", "19:00", - "19:30", + "", ]; From 49341b025b2ac5c57ded674706421a3bf9aa3127 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Fri, 13 Nov 2020 23:05:10 +0100 Subject: [PATCH 18/19] change change change --- src/components/Scheduler.tsx | 60 +++++++++++++++++++----------- src/components/SchedulerEvents.tsx | 26 ++++++------- src/components/SchedulerRow.tsx | 8 ++-- 3 files changed, 56 insertions(+), 38 deletions(-) diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx index 6746765..c5d4795 100644 --- a/src/components/Scheduler.tsx +++ b/src/components/Scheduler.tsx @@ -1,11 +1,10 @@ -import React, { useEffect, MouseEvent, useRef } from 'react'; +import React, { useEffect, MouseEvent, useRef, useCallback, useLayoutEffect } from 'react'; import { useState } from 'react'; import { SchedulerEvents } from './SchedulerEvents'; import { days, hours } from '../constants/index'; import styled from 'styled-components/macro'; const SchedulerWrapper = styled.div` - display: flex; border-collapse: collapse; flex: 1; background-color: white; @@ -66,30 +65,46 @@ export const Scheduler = () => { const wrapperRef = useRef(null); const [wrapperHeight, setWrapperHeight] = useState(0); + const [, updateState] = useState(); + const forceUpdate = useCallback(() => updateState({}), []); + useEffect(() => { const handleResize = () => { - if (cellRef.current && wrapperRef.current) { + if (cellRef.current) { setCellWidth(cellRef.current.getBoundingClientRect().width); setCellTop(cellRef.current.getBoundingClientRect().top); - setWrapperHeight(wrapperRef.current.getBoundingClientRect().height); + cellRef.current.style.backgroundColor = "blue"; + console.log("XDDD") } + }; handleResize(); - window.addEventListener('resize', handleResize); }, []); + useEffect(() => { + const handleWrapperResize = () => { + if (wrapperRef.current) { + setWrapperHeight(wrapperRef.current.getBoundingClientRect().height); + } + } + window.addEventListener('resize', handleWrapperResize); + return () => window.removeEventListener('resize', handleWrapperResize); + + }, []) + + return ( <> {days.map((day, indexCell) => indexCell === 0 ? ( - + {day} ) : ( - + {day} ), @@ -102,22 +117,25 @@ export const Scheduler = () => { indexCell === 0 ? ( {value} - - ) : indexRow === 23 ? ( - + ) + : (indexRow === 0 && indexCell === 1) ? ( {value} - ) : indexCell === 5 ? ( - - {value} - - ) : indexRow % 2 !== 0 ? ( - - {value} - - ) : - {value} - + ) : indexRow === 23 ? ( + + {value} + + ) : indexCell === 5 ? ( + + {value} + + ) : indexRow % 2 !== 0 ? ( + + {value} + + ) : + {value} + )} ))} diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx index da8c9db..8131d5e 100644 --- a/src/components/SchedulerEvents.tsx +++ b/src/components/SchedulerEvents.tsx @@ -11,7 +11,7 @@ interface SchedulerEventsProps { export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => { const { basket } = useContext(coursesContext)!; - + console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`); const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState([]); interface GroupTimeToEventRowMapping { @@ -33,7 +33,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve const merged = [...classes, ...lectures]; //deleted if statement, maybe it is needed - const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({ + const groupsMapped = merged.map(({ id, day, lecturer, room, time, name, type }) => ({ id, day, lecturer, @@ -56,18 +56,18 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve indexRow={index} cellTop={ index === 0 - ? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4) + ? cellTop + cellHeight/2 : index === 1 - ? cellTop + (cellHeight + cellHeight * 2 * index) - : index === 2 - ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4) - : index === 3 - ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4) - : index === 4 - ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2) - : index === 5 - ? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 4) - : 0 + ? cellTop + (cellHeight + cellHeight * 2 * index) + : index === 2 + ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2) + : index === 3 + ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2) + : index === 4 + ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight) + : index === 5 + ? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 2) + : 0 } cellWidth={cellWidth} cellHeight={cellHeight} diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index 9a04014..fbb14ab 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -31,7 +31,7 @@ const SchedulerEvent = styled.div` top: ${({ cellTop }) => cellTop}px; left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px; width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; - height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; + height: ${({ cellHeight }) => cellHeight * 3}px; z-index: 2; `; @@ -48,7 +48,7 @@ const Classes = styled.div` z-index: 2; border-radius: 10px; width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; - height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; + height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 2}px; padding-left: 10px; text-align: left; background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')}; @@ -82,7 +82,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight const open = Boolean(anchorEl); return ( - <> +
{[...Array(5)].map((_, eventIndex) => ( ))} - +
); }; From 96ed785c291a0207bba989a517775e1df3b9a565 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Thu, 19 Nov 2020 21:57:34 +0100 Subject: [PATCH 19/19] table and events finally working :') --- src/components/Scheduler.tsx | 103 +++++++++++++---------------- src/components/SchedulerEvents.tsx | 27 ++++---- src/components/SchedulerRow.tsx | 26 ++++---- 3 files changed, 71 insertions(+), 85 deletions(-) diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx index c5d4795..b37e12d 100644 --- a/src/components/Scheduler.tsx +++ b/src/components/Scheduler.tsx @@ -8,7 +8,7 @@ const SchedulerWrapper = styled.div` border-collapse: collapse; flex: 1; background-color: white; - padding: 5px 15px 5px 5px; + padding: 10px 40px 25px 10px; border-radius: 5px; margin-right: 20px; flex-direction: column; @@ -18,96 +18,84 @@ const SchedulerWrapper = styled.div` `; const TableBody = styled.div` + position: relative; width: 100%; display: flex; flex-direction: column; + height: calc(100% * 25 / 26); `; const TableRow = styled.div` display: flex; + height: 100%; `; const TableHead = styled.div` display: flex; width: 100%; + height: calc(100% / 26); `; interface TableCellProps { - height: number; + cellHeight?: number; isHourColumn?: boolean; } const TableCell = styled.div` - height: ${({ height }) => height}px; border-width: ${({ isHourColumn }) => !isHourColumn && '2px'}; border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'}; - border-color: rgb(242, 243, 245); - margin-top: ${({ isHourColumn, height }) => isHourColumn ? -(height / 2) : 0}px; + border-color: rgb(242, 243, 245); display: flex; align-items: center; - justify-content: ${({ isHourColumn }) => isHourColumn ? 'flex-end' : 'center'}; - flex: ${({ isHourColumn }) => isHourColumn ? '1' : '5'}; - margin-right: ${({ isHourColumn }) => isHourColumn ? '10px' : '0px'}; - font-size: 0.75vw; + justify-content: ${({ isHourColumn }) => (isHourColumn ? 'flex-end' : 'center')}; + flex: ${({ isHourColumn }) => (isHourColumn ? '1' : '5')}; + margin-right: ${({ isHourColumn }) => (isHourColumn ? '10px' : '0px')}; + margin-top: ${({ isHourColumn, cellHeight }) => (isHourColumn ? `-${cellHeight}px` : '0px')}; + font-size: 0.75vw; user-select: none; - border-collapse:collapse; + border-collapse: collapse; :nth-child(2) { border-left: 2px solid rgb(242, 243, 245); } font-weight: bold; - `; - +`; export const Scheduler = () => { const cellRef = useRef(null); const [cellWidth, setCellWidth] = useState(0); const [cellTop, setCellTop] = useState(0); + const [cellHeight, setCellHeight] = useState(0); - const wrapperRef = useRef(null); - const [wrapperHeight, setWrapperHeight] = useState(0); - const [, updateState] = useState(); - const forceUpdate = useCallback(() => updateState({}), []); - + console.log('cell height: ', cellHeight); useEffect(() => { const handleResize = () => { if (cellRef.current) { setCellWidth(cellRef.current.getBoundingClientRect().width); setCellTop(cellRef.current.getBoundingClientRect().top); - cellRef.current.style.backgroundColor = "blue"; - console.log("XDDD") + setCellHeight(cellRef.current.getBoundingClientRect().height); + cellRef.current.style.backgroundColor = 'blue'; } - }; handleResize(); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); }, []); - useEffect(() => { - const handleWrapperResize = () => { - if (wrapperRef.current) { - setWrapperHeight(wrapperRef.current.getBoundingClientRect().height); - } - } - window.addEventListener('resize', handleWrapperResize); - return () => window.removeEventListener('resize', handleWrapperResize); - - }, []) - - return ( <> - + {days.map((day, indexCell) => indexCell === 0 ? ( - + {day} ) : ( - - {day} - - ), + + {day} + + ), )} @@ -115,32 +103,31 @@ export const Scheduler = () => { {[hour, '', '', '', '', ''].map((value, indexCell) => indexCell === 0 ? ( - - {value} - ) - : (indexRow === 0 && indexCell === 1) ? ( + {value} - ) : indexRow === 23 ? ( - - {value} - - ) : indexCell === 5 ? ( - - {value} - - ) : indexRow % 2 !== 0 ? ( - - {value} - - ) : - {value} - + ) : indexRow === 0 && indexCell === 1 ? ( + + {value} + + ) : indexRow === 23 ? ( + + {value} + + ) : indexCell === 5 ? ( + {value} + ) : indexRow % 2 !== 0 ? ( + + {value} + + ) : ( + {value} + ), )} ))} + - ); diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx index 8131d5e..75a7048 100644 --- a/src/components/SchedulerEvents.tsx +++ b/src/components/SchedulerEvents.tsx @@ -14,10 +14,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`); const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState([]); - interface GroupTimeToEventRowMapping { - [time: string]: number; - } - const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = { + const groupTimeToEventRowMapping: { [time: string]: number } = { '8.15': 0, '10.00': 1, '11.45': 2, @@ -56,18 +53,18 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve indexRow={index} cellTop={ index === 0 - ? cellTop + cellHeight/2 + ? cellHeight / 2 : index === 1 - ? cellTop + (cellHeight + cellHeight * 2 * index) - : index === 2 - ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2) - : index === 3 - ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2) - : index === 4 - ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight) - : index === 5 - ? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 2) - : 0 + ? cellHeight * 4 + : index === 2 + ? cellHeight * 7.5 + : index === 3 + ? cellHeight * 11.5 + : index === 4 + ? cellHeight * 15 + : index === 5 + ? cellHeight * 18.5 + : 0 } cellWidth={cellWidth} cellHeight={cellHeight} diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index fbb14ab..5c0aced 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -18,38 +18,38 @@ const useStyles = makeStyles((theme: Theme) => }), ); -interface SchedulerEventProps { +interface ClassesWrapperProps { eventIndex: number; cellTop: number; cellWidth: number; cellHeight: number; } -const SchedulerEvent = styled.div` +const ClassesWrapper = styled.div` position: absolute; display: flex; top: ${({ cellTop }) => cellTop}px; - left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px; - width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; + left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 15 + cellWidth * eventIndex}px; + width: ${({ cellWidth }) => cellWidth - 10}px; height: ${({ cellHeight }) => cellHeight * 3}px; z-index: 2; + padding-left: 10px; `; interface ClassesProps { - cellWidth: number; cellHeight: number; groupType: GroupType; } const Classes = styled.div` display: flex; + flex: 1; justify-content: center; align-items: center; z-index: 2; border-radius: 10px; - width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; - height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 2}px; - padding-left: 10px; + height: ${({ cellHeight }) => cellHeight * 3}px; + margin-right: 5px; text-align: left; background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')}; box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59); @@ -84,7 +84,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight return (
{[...Array(5)].map((_, eventIndex) => ( - { + console.log('group: ', group); + }} groupType={group.type} - cellWidth={cellWidth} cellHeight={cellHeight} id={`eventRow${indexRow}eventCol${eventIndex}${index}`} key={index} @@ -109,7 +111,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight >

{groups[index].name}

-

{groups[index].room}

+

{groups[index].room}

 ), )} - + ))}
);