diff --git a/public/index.html b/public/index.html index b63401e..d69d8b4 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + @@ -16,7 +16,7 @@ PlanNaPlan - +
diff --git a/src/App.scss b/src/App.scss index 63f4c9a..5204e1a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,11 +2,11 @@ body { margin: 0px; padding: 0px; } + body::-webkit-scrollbar { + display: none; + } .wraper{ display: flex; - &__rightbar{ - flex-grow: 1; - } &__calendar{ width: 85%; } diff --git a/src/App.tsx b/src/App.tsx index 50c568f..9e8ec54 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,43 +2,87 @@ import React, { useState } from "react"; import TopBar from "./components/TopBar/"; import Transfer from "./components/Transfer/"; import "./App.scss"; -import Calendar from "./components/Calendar"; +import Schedule from "./components/Calendar/"; import { appointments } from "./components/Calendar/appointments"; import RightBar from "./components/RightBar"; -function App() { - const [isOpenTransfer, setOpenTransfer] = useState(false); - const [text, setText] = useState(""); - return ( -
- { - setText(e.target.value); - }} - handleTransfer={() => { - setOpenTransfer(!isOpenTransfer); - }} - onLangChange={() => { - console.log("Language has been changed"); - }} - /> - { - setOpenTransfer(!isOpenTransfer); - }} - /> -
-
- -
-
- -
-
-

{text}

-
- ); +function App() { + const [isOpenTransfer, setOpenTransfer] = useState(false); + const [text, setText] = useState(""); + + var data = [ + { + classname: "E-gospodarka - narzędzia i bezpieczeństwo", + classgroups: [ + { + group_id: "1CB", + day: "Pn", + time: "10:00", + lecturer: "dr inż. Michał Ren", + room: "A2-01", + }, + { + group_id: "1XD", + day: "Wt", + time: "12:00", + lecturer: "dr inż. Michał Ren", + room: "A3-01", + }, + ], + }, + { + classname: "Statystyka", + classgroups: [ + { + group_id: "2CB", + day: "Pn", + time: "10:00", + lecturer: "dr inż. Michał Ren", + room: "A2-01", + }, + { + group_id: "2XD", + day: "Wt", + time: "12:00", + lecturer: "dr inż. Michał Ren", + room: "A3-01", + }, + ], + }, + ]; + + return ( +
+ { + setText(e.target.value); + }} + handleTransfer={(e) => { + setOpenTransfer(!isOpenTransfer); + }} + onLangChange={(e) => { + console.log(e); + }} + /> + { + setOpenTransfer(!isOpenTransfer); + }} + /> +
+
+ +
+
+ {console.log("group id: ",group_id,"class id",class_id)}} lectures={data} + onClassClick={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}}/> +
+
+ +

{text}

+
+ ); } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/Calendar/appointments.ts b/src/components/Calendar/appointments.ts index 44a2562..969cbf8 100644 --- a/src/components/Calendar/appointments.ts +++ b/src/components/Calendar/appointments.ts @@ -1,27 +1,27 @@ export const appointments = [ { - title: 'Snmutna buzia', + title: 'E-gospodarka - narzędzia i bezpieczeństwo', startDate: new Date(2020, 5, 3, 9, 45), endDate: new Date(2020, 5, 3, 11, 30), id: 0, location: 'Room 1', }, { - title: 'Twoja stara beszamel', + title: 'Algorytmy grafowe', startDate: new Date(2020, 5, 1, 9, 45), endDate: new Date(2020, 5, 1, 11, 30), id: 0, location: 'Room 1', }, { - title: 'Twoja stara beszamel', + title: 'Podstawy programowania deklaratywnego', startDate: new Date(2020, 5, 1, 9, 45), endDate: new Date(2020, 5, 1, 11, 30), id: 0, location: 'Room 1', }, { - title: 'Twoja stara beszamel', + title: 'Statystyka', startDate: new Date(2020, 5, 1, 18, 45), endDate: new Date(2020, 5, 1, 20, 0), id: 0, diff --git a/src/components/Class/expand.png b/src/components/Class/expand.png new file mode 100644 index 0000000..239474f Binary files /dev/null and b/src/components/Class/expand.png differ diff --git a/src/components/Class/index.scss b/src/components/Class/index.scss new file mode 100644 index 0000000..93d091e --- /dev/null +++ b/src/components/Class/index.scss @@ -0,0 +1,38 @@ +.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); + } + } diff --git a/src/components/Class/index.tsx b/src/components/Class/index.tsx new file mode 100644 index 0000000..4cd8bd6 --- /dev/null +++ b/src/components/Class/index.tsx @@ -0,0 +1,78 @@ +import React from "react"; +import "./index.scss"; +import Collapse from "@material-ui/core/Collapse"; +import ExpandIcon from "./expand.png"; + +type ClassType = { + group_id: string; + day: string; + time: string; + lecturer: string; + room: string; +}; + +export type Group = { + classname: string; + classgroups: Array; +}; + +interface ClassProps { + onClassHover: (group_id: String, class_id: String) => void; + onClassClick: (group_id: String, class_id: String) => void; + data: Group; +} + +interface ClassState { + open: boolean; +} + +export default class Class extends React.Component { + constructor(props: ClassProps) { + super(props); + + this.Open = this.Open.bind(this); + this.state = { + open: false, + }; + } + + Open(e: React.MouseEvent) { + this.setState({ + open: !this.state.open, + }); + } + + render() { + return ( +
+
{this.props.data.classname}
+ + {this.props.data.classgroups.map((classgroup, index) => ( +
+

+ this.props.onClassHover( + this.props.data.classname, + this.props.data.classgroups[index].group_id + ) + } + onClick={() => + this.props.onClassClick( + this.props.data.classname, + this.props.data.classgroups[index].group_id + ) + } + > + {classgroup.group_id} {classgroup.day} {classgroup.time}{" "} + {classgroup.room}

{classgroup.lecturer} +

{" "} +
+ ))} + +
+ expand +
+
+ ); + } +} diff --git a/src/components/RightBar/index.scss b/src/components/RightBar/index.scss index 98fa97e..75411bb 100644 --- a/src/components/RightBar/index.scss +++ b/src/components/RightBar/index.scss @@ -1,23 +1,13 @@ -.shop-cart { +.right-bar { padding-top: 10px; padding-left: 15px; padding-right: 15px; - display: flex; - flex-direction: column; - align-items: center; text-align: center; font-family: Lato; - } - .paper { - display: flex; - margin-top: 10px; - height: 60px; - width: 90%; - background-color: #d4a8ff !important; - align-items: center; - justify-content: center; - } - .text { - border-bottom: 1px solid; - } - \ No newline at end of file + &__text { + border-bottom: 1px solid; + } + height:85vh; + overflow-y: scroll; + + } \ No newline at end of file diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx index fbad157..3d1377a 100644 --- a/src/components/RightBar/index.tsx +++ b/src/components/RightBar/index.tsx @@ -1,8 +1,12 @@ import React from "react"; import "./index.scss"; -import Paper from "@material-ui/core/Paper"; +import Class, { Group } from "../Class"; -interface RightBarProps {} +interface RightBarProps { + onClassHover: (group_id: String, class_id: String) => void; + onClassClick: (group_id: String, class_id: String) => void; + lectures: Array; +} interface RightBarState {} @@ -10,24 +14,21 @@ export default class RightBar extends React.Component< RightBarProps, RightBarState > { - render() { return ( -
-
+
+
Hubert Wrzesiński

Semestr zimowy 2020/2021
- 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 + {this.props.lectures.map((classgroup, index) => ( + + ))}
); } diff --git a/src/components/Transfer/index.scss b/src/components/Transfer/index.scss index 8a45482..41e710c 100644 --- a/src/components/Transfer/index.scss +++ b/src/components/Transfer/index.scss @@ -1,38 +1,53 @@ .wrapper { display: flex; - justify-content: center; text-align: center; align-items: center; + } .transfer { display: flex; - flex-wrap: wrap; + outline:none; width: 80%; height: 70%; padding-top: 40px; - background: rgba(255, 220, 97, 0.48); - border: 1px solid #000000; - justify-content: center; + background: rgba(255, 220, 97, 0.6); + + border: 3px solid #000000; + border-radius: 15px; + text-transform: uppercase; + letter-spacing: 0.3ch; + + &__left { + display: flex; + justify-content: space-around; + flex-grow: 1; + } + &__right { + flex-grow: 4; + } &__text { font-family: Lato; font-size: 50px; + margin-bottom: 10px; } - &__input{ + &__input { width: 300px; - height: 45px; - background: #D7A700; + height: 45px; + background: #ffc400; + outline:none; + border: 1px solid; + border-radius: 22px ; + padding: 10px; + font-size: 24px; + transition-duration: 0.3s; + } - &__give{ - flex-grow: 1; + 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; + } - &__recieve{ - flex-grow: 1; -} -&__proposition{ - flex-grow: 4; -} -&__add{ -} } diff --git a/src/components/Transfer/index.tsx b/src/components/Transfer/index.tsx index 6ebdf5c..6f1e7d1 100644 --- a/src/components/Transfer/index.tsx +++ b/src/components/Transfer/index.tsx @@ -1,6 +1,7 @@ import React from "react"; import Modal from "@material-ui/core/Modal"; import "./index.scss"; +import Fade from '@material-ui/core/Fade'; interface TransferProps { handleClose: (e: React.MouseEvent) => void; @@ -33,19 +34,26 @@ export default class Transfer extends React.Component< aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" > +
-
-
Oddam
- +
+ {/* */} +
+
Oddam
+ +
+
+
Przyjmę
+ +
-
-
Przyjmę
- +
+
-
-
+ +
); } diff --git a/src/index.tsx b/src/index.tsx index f0aca96..5200822 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,8 +3,8 @@ import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render( - + - , + , document.getElementById("root") );