Merge pull request 'rightbar and transfer' (#5) from rightbar into master
Reviewed-by: filipizydorczyk <filip.izydorczyk@protonmail.com>
This commit is contained in:
commit
ebebdd9def
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="pl">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/logo.svg" />
|
<link rel="icon" href="%PUBLIC_URL%/logo.svg" />
|
||||||
@ -16,7 +16,7 @@
|
|||||||
<title>PlanNaPlan</title>
|
<title>PlanNaPlan</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>Potrzebujesz włączyć JavaScript, żeby otworzyć tę aplikację</br>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -2,11 +2,11 @@ body {
|
|||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.wraper{
|
.wraper{
|
||||||
display: flex;
|
display: flex;
|
||||||
&__rightbar{
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
&__calendar{
|
&__calendar{
|
||||||
width: 85%;
|
width: 85%;
|
||||||
}
|
}
|
||||||
|
58
src/App.tsx
58
src/App.tsx
@ -2,40 +2,84 @@ import React, { useState } from "react";
|
|||||||
import TopBar from "./components/TopBar/";
|
import TopBar from "./components/TopBar/";
|
||||||
import Transfer from "./components/Transfer/";
|
import Transfer from "./components/Transfer/";
|
||||||
import "./App.scss";
|
import "./App.scss";
|
||||||
import Calendar from "./components/Calendar";
|
import Schedule from "./components/Calendar/";
|
||||||
import { appointments } from "./components/Calendar/appointments";
|
import { appointments } from "./components/Calendar/appointments";
|
||||||
import RightBar from "./components/RightBar";
|
import RightBar from "./components/RightBar";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [isOpenTransfer, setOpenTransfer] = useState(false);
|
const [isOpenTransfer, setOpenTransfer] = useState(false);
|
||||||
const [text, setText] = useState("");
|
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 (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<TopBar
|
<TopBar
|
||||||
textChangeHandler={(e) => {
|
textChangeHandler={(e) => {
|
||||||
setText(e.target.value);
|
setText(e.target.value);
|
||||||
}}
|
}}
|
||||||
handleTransfer={() => {
|
handleTransfer={(e) => {
|
||||||
setOpenTransfer(!isOpenTransfer);
|
setOpenTransfer(!isOpenTransfer);
|
||||||
}}
|
}}
|
||||||
onLangChange={() => {
|
onLangChange={(e) => {
|
||||||
console.log("Language has been changed");
|
console.log(e);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Transfer
|
<Transfer
|
||||||
isOpen={isOpenTransfer}
|
isOpen={isOpenTransfer}
|
||||||
handleClose={() => {
|
handleClose={(e) => {
|
||||||
setOpenTransfer(!isOpenTransfer);
|
setOpenTransfer(!isOpenTransfer);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="wraper">
|
<div className="wraper">
|
||||||
<div className="wraper__calendar">
|
<div className="wraper__calendar">
|
||||||
<Calendar data={appointments} />
|
<Schedule data={appointments} />
|
||||||
</div>
|
</div>
|
||||||
<div className="wraper__rightbar">
|
<div className="wraper__rightbar">
|
||||||
<RightBar />
|
<RightBar onClassHover={(group_id,class_id)=>{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)}}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1>{text}</h1>
|
<h1>{text}</h1>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,27 +1,27 @@
|
|||||||
export const appointments = [
|
export const appointments = [
|
||||||
{
|
{
|
||||||
title: 'Snmutna buzia',
|
title: 'E-gospodarka - narzędzia i bezpieczeństwo',
|
||||||
startDate: new Date(2020, 5, 3, 9, 45),
|
startDate: new Date(2020, 5, 3, 9, 45),
|
||||||
endDate: new Date(2020, 5, 3, 11, 30),
|
endDate: new Date(2020, 5, 3, 11, 30),
|
||||||
id: 0,
|
id: 0,
|
||||||
location: 'Room 1',
|
location: 'Room 1',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Twoja stara beszamel',
|
title: 'Algorytmy grafowe',
|
||||||
startDate: new Date(2020, 5, 1, 9, 45),
|
startDate: new Date(2020, 5, 1, 9, 45),
|
||||||
endDate: new Date(2020, 5, 1, 11, 30),
|
endDate: new Date(2020, 5, 1, 11, 30),
|
||||||
id: 0,
|
id: 0,
|
||||||
location: 'Room 1',
|
location: 'Room 1',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Twoja stara beszamel',
|
title: 'Podstawy programowania deklaratywnego',
|
||||||
startDate: new Date(2020, 5, 1, 9, 45),
|
startDate: new Date(2020, 5, 1, 9, 45),
|
||||||
endDate: new Date(2020, 5, 1, 11, 30),
|
endDate: new Date(2020, 5, 1, 11, 30),
|
||||||
id: 0,
|
id: 0,
|
||||||
location: 'Room 1',
|
location: 'Room 1',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Twoja stara beszamel',
|
title: 'Statystyka',
|
||||||
startDate: new Date(2020, 5, 1, 18, 45),
|
startDate: new Date(2020, 5, 1, 18, 45),
|
||||||
endDate: new Date(2020, 5, 1, 20, 0),
|
endDate: new Date(2020, 5, 1, 20, 0),
|
||||||
id: 0,
|
id: 0,
|
||||||
|
BIN
src/components/Class/expand.png
Normal file
BIN
src/components/Class/expand.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 535 B |
38
src/components/Class/index.scss
Normal file
38
src/components/Class/index.scss
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
78
src/components/Class/index.tsx
Normal file
78
src/components/Class/index.tsx
Normal file
@ -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<ClassType>;
|
||||||
|
};
|
||||||
|
|
||||||
|
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<ClassProps, ClassState> {
|
||||||
|
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 (
|
||||||
|
<div className="class" >
|
||||||
|
<div className="class__name" onClick={this.Open}>{this.props.data.classname}</div>
|
||||||
|
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
|
||||||
|
{this.props.data.classgroups.map((classgroup, index) => (
|
||||||
|
<div key={index} className="class__group">
|
||||||
|
<p
|
||||||
|
onMouseOver={() =>
|
||||||
|
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} <br></br> {classgroup.lecturer}
|
||||||
|
</p>{" "}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</Collapse>
|
||||||
|
<div onClick={this.Open}>
|
||||||
|
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${this.state.open?"Rotate":""}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -1,23 +1,13 @@
|
|||||||
.shop-cart {
|
.right-bar {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: Lato;
|
font-family: Lato;
|
||||||
}
|
&__text {
|
||||||
.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;
|
border-bottom: 1px solid;
|
||||||
}
|
}
|
||||||
|
height:85vh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
}
|
@ -1,8 +1,12 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import "./index.scss";
|
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<Group>;
|
||||||
|
}
|
||||||
|
|
||||||
interface RightBarState {}
|
interface RightBarState {}
|
||||||
|
|
||||||
@ -10,24 +14,21 @@ export default class RightBar extends React.Component<
|
|||||||
RightBarProps,
|
RightBarProps,
|
||||||
RightBarState
|
RightBarState
|
||||||
> {
|
> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="shop-cart">
|
<div className="right-bar">
|
||||||
<div className="text">
|
<div className="right-bar__text">
|
||||||
Hubert Wrzesiński<br></br>
|
Hubert Wrzesiński<br></br>
|
||||||
Semestr zimowy 2020/2021
|
Semestr zimowy 2020/2021
|
||||||
</div>
|
</div>
|
||||||
<Paper className="paper">1</Paper>
|
{this.props.lectures.map((classgroup, index) => (
|
||||||
<Paper className="paper">2</Paper>
|
<Class
|
||||||
<Paper className="paper">3</Paper>
|
onClassHover={this.props.onClassHover}
|
||||||
<Paper className="paper">4</Paper>
|
onClassClick={this.props.onClassClick}
|
||||||
<Paper className="paper">5</Paper>
|
data={classgroup}
|
||||||
<Paper className="paper">6</Paper>
|
key={index}
|
||||||
<Paper className="paper">7</Paper>
|
/>
|
||||||
<Paper className="paper">8</Paper>
|
))}
|
||||||
<Paper className="paper">9</Paper>
|
|
||||||
<Paper className="paper">10</Paper>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,38 +1,53 @@
|
|||||||
.wrapper {
|
.wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.transfer {
|
.transfer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
outline:none;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: 70%;
|
height: 70%;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
background: rgba(255, 220, 97, 0.48);
|
background: rgba(255, 220, 97, 0.6);
|
||||||
border: 1px solid #000000;
|
|
||||||
justify-content: center;
|
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 {
|
&__text {
|
||||||
font-family: Lato;
|
font-family: Lato;
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
&__input {
|
&__input {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
background: #D7A700;
|
background: #ffc400;
|
||||||
|
outline:none;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 22px ;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 24px;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
|
||||||
}
|
}
|
||||||
&__give{
|
input:focus {
|
||||||
flex-grow: 1;
|
-webkit-box-shadow: 0px 0px 18px 8px #ffae00;
|
||||||
}
|
-moz-box-shadow: 0px 0px 18px 8px #ffae00;
|
||||||
&__recieve{
|
box-shadow: 0px 0px 18px 8px #ffae00;
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
&__proposition{
|
|
||||||
flex-grow: 4;
|
|
||||||
}
|
|
||||||
&__add{
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import Modal from "@material-ui/core/Modal";
|
import Modal from "@material-ui/core/Modal";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
|
import Fade from '@material-ui/core/Fade';
|
||||||
|
|
||||||
interface TransferProps {
|
interface TransferProps {
|
||||||
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||||
@ -33,7 +34,10 @@ export default class Transfer extends React.Component<
|
|||||||
aria-labelledby="simple-modal-title"
|
aria-labelledby="simple-modal-title"
|
||||||
aria-describedby="simple-modal-description"
|
aria-describedby="simple-modal-description"
|
||||||
>
|
>
|
||||||
|
<Fade in={this.props.isOpen}>
|
||||||
<div className="transfer">
|
<div className="transfer">
|
||||||
|
<div className="transfer__left">
|
||||||
|
{/* <button className="transfer__add">chuj</button> */}
|
||||||
<div className="transfer__give">
|
<div className="transfer__give">
|
||||||
<div className="transfer__text">Oddam</div>
|
<div className="transfer__text">Oddam</div>
|
||||||
<input className="transfer__input"></input>
|
<input className="transfer__input"></input>
|
||||||
@ -42,10 +46,14 @@ export default class Transfer extends React.Component<
|
|||||||
<div className="transfer__text">Przyjmę</div>
|
<div className="transfer__text">Przyjmę</div>
|
||||||
<input className="transfer__input"></input>
|
<input className="transfer__input"></input>
|
||||||
</div>
|
</div>
|
||||||
<div className="transfer__proposition"></div>
|
|
||||||
<button className="transfer__add">chuj</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="transfer__right">
|
||||||
|
<div className="transfer__proposition"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Fade>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -3,8 +3,8 @@ import ReactDOM from "react-dom";
|
|||||||
import App from "./App";
|
import App from "./App";
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
<React.Fragment>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>,
|
</React.Fragment>,
|
||||||
document.getElementById("root")
|
document.getElementById("root")
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user