From 5b24b5fd59784eaa3a77e08cdd681faa46991f86 Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Wed, 1 Jul 2020 00:59:19 +0200 Subject: [PATCH] A lot of stuff to refactor, have fun --- src/App.scss | 5 +- src/App.tsx | 1 - src/businesslogic/LecturesProvider.tsx | 2 +- .../RightBar/LectureCard/index.scss | 91 ++++++++++++------- src/components/RightBar/LectureCard/index.tsx | 74 +++++++++------ src/components/RightBar/index.scss | 20 +++- src/components/RightBar/index.tsx | 6 +- src/components/TopBar/Results/index.scss | 3 + src/components/TopBar/Results/index.tsx | 25 ++--- src/components/Transfer/index.scss | 60 +++++++----- src/components/Transfer/index.tsx | 16 ++-- 11 files changed, 188 insertions(+), 115 deletions(-) diff --git a/src/App.scss b/src/App.scss index 5204e1a..aa31b26 100644 --- a/src/App.scss +++ b/src/App.scss @@ -7,8 +7,9 @@ body { } .wraper{ display: flex; - &__calendar{ - width: 85%; + &__rightbar{ + width: 80%; } + } diff --git a/src/App.tsx b/src/App.tsx index 0582597..ad8b52b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -45,7 +45,6 @@ function App() { { - console.log("XD"); }} onGroupClick={(id, name) => {}} /> diff --git a/src/businesslogic/LecturesProvider.tsx b/src/businesslogic/LecturesProvider.tsx index f599533..c5625de 100644 --- a/src/businesslogic/LecturesProvider.tsx +++ b/src/businesslogic/LecturesProvider.tsx @@ -11,7 +11,7 @@ export const LecturesProvider : React.FC = (props) => { const [lectures, setLectures] = useState>([]); - const updateLectures = (lecture : Lecture) => {setLectures([...lectures, lecture]); console.log(`Lectures xd are: ${JSON.stringify(lectures)}\n`)} + const updateLectures = (lecture : Lecture) => { setLectures([...lectures, lecture])} return ( diff --git a/src/components/RightBar/LectureCard/index.scss b/src/components/RightBar/LectureCard/index.scss index 93d091e..8a15cc8 100644 --- a/src/components/RightBar/LectureCard/index.scss +++ b/src/components/RightBar/LectureCard/index.scss @@ -1,38 +1,59 @@ .class { - display: flex; - min-height: 50px; - background-color: rgb(100, 181, 246) !important; - align-items: center; - justify-content: center; - flex-direction: column; - margin-top: 10px; - padding-top:10px; - padding-bottom:10px; - border-radius: 10px; - cursor: pointer; - align-items: stretch; - &__group{ - padding-top: 1px; - padding-bottom: 1px; - &:hover{ - cursor: pointer; - transition: 1s; - background-color: #8BC8FB; - } - } - &__name{ - padding-top: 10px; - padding-bottom: 10px; - } - &__expandIcon{ - margin-top: 5px; - width: 20px; - transition: 0.2s; - } - &__expandIconRotate{ - margin-top: 5px; - width: 20px; - transition: 0.5s; - transform: scaleY(-1); + display: flex; + min-height: 50px; + background-color: rgb(100, 181, 246) !important; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 10px; + padding-top: 10px; + padding-bottom: 10px; + border-radius: 10px; + cursor: pointer; + align-items: stretch; + &__group { + padding-top: 1px; + padding-bottom: 1px; + &:hover { + cursor: pointer; + transition: 1s; + background-color: #8bc8fb; } } + &__name { + padding-top: 10px; + padding-bottom: 10px; + } + &__expandIcon { + margin-top: 5px; + width: 20px; + transition: 0.2s; + } + &__expandIconRotate { + margin-top: 5px; + width: 20px; + transition: 0.5s; + transform: scaleY(-1); + } + .expanded { + max-height: 244px; + overflow-y: auto; + } + .expanded::-webkit-scrollbar-track { + border-radius: 10px; + border-radius: 10px; + background-color: #8bc8fb; + } + + .expanded::-webkit-scrollbar { + width: 12px; + border-radius: 10px; + background-color: #8bc8fb; + } + + .expanded::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: #d4b851; + border: 1px solid; + } +} diff --git a/src/components/RightBar/LectureCard/index.tsx b/src/components/RightBar/LectureCard/index.tsx index 382c3a1..59edc95 100644 --- a/src/components/RightBar/LectureCard/index.tsx +++ b/src/components/RightBar/LectureCard/index.tsx @@ -5,35 +5,51 @@ import ExpandIcon from "./expand.png"; import { Lecture } from "../../../lectures"; interface LectureCardProps { - onGroupMouseOver: (id: string, name: string) => void; - onGroupClick: (id: string, name: string) => void; - onCardClick: (e: React.MouseEvent) => void; - lecture: Lecture; - id: string; - isSelected: boolean; + onGroupMouseOver: (id: string, name: string) => void; + onGroupClick: (id: string, name: string) => void; + onCardClick: (e: React.MouseEvent) => void; + lecture: Lecture; + id: string; + isSelected: boolean; } -export default function LectureCard({ onGroupMouseOver, onGroupClick, onCardClick, lecture, id, isSelected }: LectureCardProps) { - return ( -
-
{lecture.name}
- - {lecture.groups.map((group, index) => ( -
onGroupMouseOver(group.id, lecture.name)} - onClick={() => onGroupClick(group.id, lecture.name)} - > -

- {group.id} {group.day} {group.time} {group.room}

{group.lecturer} -

{" "} -
- ))} - -
- expand -
-
- ); +export default function LectureCard({ + onGroupMouseOver, + onGroupClick, + onCardClick, + lecture, + id, + isSelected, +}: LectureCardProps) { + return ( +
+
{lecture.name}
+ + {lecture.groups.map((group, index) => ( +
onGroupMouseOver(group.id, lecture.name)} + onClick={() => onGroupClick(group.id, lecture.name)} + > +

+ {group.time} {group.room}

{group.lecturer} +

{" "} +
+ ))} + +
+ expand +
+
+ ); } diff --git a/src/components/RightBar/index.scss b/src/components/RightBar/index.scss index 75411bb..dc0c833 100644 --- a/src/components/RightBar/index.scss +++ b/src/components/RightBar/index.scss @@ -4,10 +4,28 @@ padding-right: 15px; text-align: center; font-family: Lato; + width: 300px; &__text { border-bottom: 1px solid; } height:85vh; overflow-y: scroll; + } + .right-bar::-webkit-scrollbar-track +{ + border-radius: 10px; + background-color: #F5F5F5; +} - } \ No newline at end of file +.right-bar::-webkit-scrollbar +{ + width: 12px; + background-color: #F5F5F5; +} + +.right-bar::-webkit-scrollbar-thumb +{ + border-radius: 10px; + background-color: #d4b851; + border: 1px solid; +} \ No newline at end of file diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx index a3485e8..aa7ee93 100644 --- a/src/components/RightBar/index.tsx +++ b/src/components/RightBar/index.tsx @@ -2,8 +2,6 @@ import React, { useState, useContext } from "react"; import "./index.scss"; import { Lecture } from "../../lectures"; import LectureCard from "./LectureCard"; -import BusinessLogicContext from "../../businesslogic/BusinessLogicContext"; -import { BuisnessProvided } from "../../businesslogic/BusinessLogicProvider"; import { LecturesContext } from "../../businesslogic/LecturesProvider"; interface RightBarProps { @@ -25,9 +23,9 @@ export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: R return (
- + {/* {(context) =>

{JSON.stringify((context as BuisnessProvided).states.user?.ticket)}

} - + */}
Hubert Wrzesiński

Semestr zimowy 2020/2021 diff --git a/src/components/TopBar/Results/index.scss b/src/components/TopBar/Results/index.scss index 4b250b9..9c93f91 100644 --- a/src/components/TopBar/Results/index.scss +++ b/src/components/TopBar/Results/index.scss @@ -2,8 +2,10 @@ position: relative; z-index: 10; padding: 5px; + padding-left: 20px; background-color: #e6c759; font-size: 18px; + font-family: Lato; } .lecture:hover{ background-color: #d4b851; @@ -19,3 +21,4 @@ .top-bar__input-field { width: 100%; } + diff --git a/src/components/TopBar/Results/index.tsx b/src/components/TopBar/Results/index.tsx index c480add..9440b32 100644 --- a/src/components/TopBar/Results/index.tsx +++ b/src/components/TopBar/Results/index.tsx @@ -5,8 +5,7 @@ import "./index.scss"; import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import { LecturesContext } from "../../../businesslogic/LecturesProvider"; import { Lecture, Group } from "../../../lectures"; -import { GroupingPanel } from "@devexpress/dx-react-scheduler"; -import { group } from "console"; +import { EDEADLK } from "constants"; interface data { id: number; @@ -30,20 +29,29 @@ export const Results: React.FC = () => { setInput(event.target.value); //query should be updated on backend to not accept empty string if (event.target.value !== "") { - console.log(event.target.value); + console.log("Jeste w okej") search(event.target.value); } else { + console.log("Jeste w dupuie") search("xxxxxxxxxxxxxxx"); + } }; const search = (text: string) => { axios .get(`http://localhost:1287/getCourses?name=${text}`) - .then((response) => setData(response.data)); + .then((response) => { + const names = lecturesContext.lectures.map(lecture => lecture.name); + console.log(`Names: ${names}`) + const filteredData = response.data.filter((el : any) => !names.includes(el.name)); + console.log("D") + setData(filteredData) + }); }; const handleClick = () => { setOpen(true); + console.log("OPWENEE") }; const handleClickAway = () => { @@ -56,13 +64,10 @@ export const Results: React.FC = () => { const lecture = {name: "", groups: []} as Lecture; - console.log(id); axios .get(`http://localhost:1287/getClassesByCourseId?id=${id}`) .then((response) => { for(let data of response.data){ - console.log("XDD"); - console.log(data); let group = {} as Group; lecture.name = data.course.name; group.id = data.id; @@ -71,13 +76,10 @@ export const Results: React.FC = () => { group.lecturer = `${data.lecturer.title} ${data.lecturer.name} ${data.lecturer.surname}`; group.room = data.room.trim(); lecture.groups.push(group); - console.log("XDDD"); - console.log(lecture.groups); lecturesContext.updateLectures(lecture); } - setOpen(false); - }); + }).then(()=>{search(input)}); } return ( @@ -89,6 +91,7 @@ export const Results: React.FC = () => { className="top-bar__input-field" onChange={handleChange} onClick={handleClick} + value={input} /> {open ? (
diff --git a/src/components/Transfer/index.scss b/src/components/Transfer/index.scss index 41e710c..cef0e2b 100644 --- a/src/components/Transfer/index.scss +++ b/src/components/Transfer/index.scss @@ -3,51 +3,67 @@ justify-content: center; text-align: center; align-items: center; - } .transfer { display: flex; - outline:none; - width: 80%; + + flex-direction: row; + + outline: none; + min-width: 35%; height: 70%; padding-top: 40px; - background: rgba(255, 220, 97, 0.6); + background: #006b96; + box-shadow: 0px 0px 0px 4px #006b96; + border: 4px solid #ffc400; + margin: 0 auto; + border-top-left-radius: 5px; + border-bottom-right-radius: 5px; - border: 3px solid #000000; - border-radius: 15px; text-transform: uppercase; letter-spacing: 0.3ch; - &__left { - display: flex; - justify-content: space-around; + &__give { flex-grow: 1; + display: flex; + flex-direction: column; + align-items: center; } - &__right { - flex-grow: 4; + &__receive { + flex-grow: 1; } &__text { font-family: Lato; - font-size: 50px; + font-size: 30px; margin-bottom: 10px; } &__input { - width: 300px; - height: 45px; + width: 250px; + height: 25px; background: #ffc400; - outline:none; + outline: none; border: 1px solid; - border-radius: 22px ; + border-radius: 10px; padding: 10px; font-size: 24px; transition-duration: 0.3s; - } - input:focus { - -webkit-box-shadow: 0px 0px 18px 8px #ffae00; - -moz-box-shadow: 0px 0px 18px 8px #ffae00; - box-shadow: 0px 0px 18px 8px #ffae00; - + &__input:focus { + -webkit-box-shadow: 0px 0px 34px 1px #ffae00; + -moz-box-shadow: 0px 0px 34px 1px #ffae00; + box-shadow: 0px 0px 34px 1px #ffae00; + } + &__input2 { + width: 250px; + height: 25px; + padding: 10px; + font-size: 24px; + transition-duration: 0.3s; + } + input::placeholder{ + color: black; + font-weight: bold; + text-align: center; } } diff --git a/src/components/Transfer/index.tsx b/src/components/Transfer/index.tsx index 6f1e7d1..7f4ba6f 100644 --- a/src/components/Transfer/index.tsx +++ b/src/components/Transfer/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import Modal from "@material-ui/core/Modal"; import "./index.scss"; import Fade from '@material-ui/core/Fade'; - +import Input from "@material-ui/core/Input"; interface TransferProps { handleClose: (e: React.MouseEvent) => void; isOpen: boolean; @@ -36,20 +36,18 @@ export default class Transfer extends React.Component< >
-
- {/* */}
Oddam
- -
+
+
Przyjmę
-
-
-
-