y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request 'rightbar and transfer' (#5) from rightbar into master

Browse Source 
Reviewed-by: filipizydorczyk <filip.izydorczyk@protonmail.com>
This commit is contained in:
filipizydorczyk
2020-06-14 18:06:42 +02:00
parent 52b6953f64 fd33a2687d
commit ebebdd9def
12 changed files with 279 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -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>

6
src/App.scss
View File

@@ -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%;
} }

112
src/App.tsx
View File

@@ -2,43 +2,87 @@ 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() {
const [isOpenTransfer, setOpenTransfer] = useState(false);
const [text, setText] = useState("");
return ( function App() {
<div className="App"> const [isOpenTransfer, setOpenTransfer] = useState(false);
<TopBar const [text, setText] = useState("");
textChangeHandler={(e) => {
setText(e.target.value); var data = [
}} {
handleTransfer={() => { classname: "E-gospodarka - narzędzia i bezpieczeństwo",
setOpenTransfer(!isOpenTransfer); classgroups: [
}} {
onLangChange={() => { group_id: "1CB",
console.log("Language has been changed"); day: "Pn",
}} time: "10:00",
/> lecturer: "dr inż. Michał Ren",
<Transfer room: "A2-01",
isOpen={isOpenTransfer} },
handleClose={() => { {
setOpenTransfer(!isOpenTransfer); group_id: "1XD",
}} day: "Wt",
/> time: "12:00",
<div className="wraper"> lecturer: "dr inż. Michał Ren",
<div className="wraper__calendar"> room: "A3-01",
<Calendar data={appointments} /> },
</div> ],
<div className="wraper__rightbar"> },
<RightBar /> {
</div> classname: "Statystyka",
</div> classgroups: [
<h1>{text}</h1> {
</div> 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 (
<div className="App">
<TopBar
textChangeHandler={(e) => {
setText(e.target.value);
}}
handleTransfer={(e) => {
setOpenTransfer(!isOpenTransfer);
}}
onLangChange={(e) => {
console.log(e);
}}
/>
<Transfer
isOpen={isOpenTransfer}
handleClose={(e) => {
setOpenTransfer(!isOpenTransfer);
}}
/>
<div className="wraper">
<div className="wraper__calendar">
<Schedule data={appointments} />
</div>
<div className="wraper__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>
<h1>{text}</h1>
</div>
);
} }
export default App; export default App;

8
src/components/Calendar/appointments.ts
View File

@@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 B

38
src/components/Class/index.scss Normal file
View 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
View 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>
);
}
}

24
src/components/RightBar/index.scss
View File

@@ -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 { border-bottom: 1px solid;
display: flex; }
margin-top: 10px; height:85vh;
height: 60px; overflow-y: scroll;
width: 90%;
background-color: #d4a8ff !important;
align-items: center;
justify-content: center;
}
.text {
border-bottom: 1px solid;
}
}

31
src/components/RightBar/index.tsx
View File

@@ -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>
); );
} }

49
src/components/Transfer/index.scss
View File

@@ -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;
box-shadow: 0px 0px 18px 8px #ffae00;
} }
&__recieve{
flex-grow: 1;
}
&__proposition{
flex-grow: 4;
}
&__add{
}
} }

24
src/components/Transfer/index.tsx
View File

@@ -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,19 +34,26 @@ 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__give"> <div className="transfer__left">
<div className="transfer__text">Oddam</div> {/* <button className="transfer__add">chuj</button> */}
<input className="transfer__input"></input> <div className="transfer__give">
<div className="transfer__text">Oddam</div>
<input className="transfer__input"></input>
</div>
<div className="transfer__receive">
<div className="transfer__text">Przyjmę</div>
<input className="transfer__input"></input>
</div>
</div> </div>
<div className="transfer__receive"> <div className="transfer__right">
<div className="transfer__text">Przyjmę</div> <div className="transfer__proposition"></div>
<input className="transfer__input"></input>
</div> </div>
<div className="transfer__proposition"></div>
<button className="transfer__add">chuj</button>
</div> </div>
</Fade>
</Modal> </Modal>
</div> </div>
); );
} }

4
src/index.tsx
View File

@@ -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")
); );