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

Data as Json Array

Browse Source
This commit is contained in:
wrzesinski-hubert 2020-06-14 14:24:49 +02:00
parent 47491c7c37
commit 8f43a785b7
10 changed files with 92 additions and 88 deletions
Show Stats 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>

43
src/App.tsx
View File

@ -10,6 +10,47 @@ 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
@ -34,7 +75,7 @@ function App() {
<Schedule 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}/>
</div> </div>
</div> </div>

2
src/components/Calendar/index.tsx
View File

@ -114,7 +114,7 @@ export default class Calendar extends React.PureComponent<
startDayHour={8} startDayHour={8}
endDayHour={20} endDayHour={20}
excludedDays={[0, 6]} excludedDays={[0, 6]}
cellDuration={45} cellDuration={60}
dayScaleCellComponent={DayScaleCell} dayScaleCellComponent={DayScaleCell}
timeTableLayoutComponent={TimeTableLayout} timeTableLayoutComponent={TimeTableLayout}
timeTableCellComponent={TimeTableCell} timeTableCellComponent={TimeTableCell}

1
src/components/Class/index.scss
View File

@ -8,6 +8,5 @@
margin-top: 10px; margin-top: 10px;
padding:10px; padding:10px;
border-radius: 10px; border-radius: 10px;
width: 90%;
cursor: pointer; cursor: pointer;
} }

42
src/components/Class/index.tsx
View File

@ -10,13 +10,14 @@ type ClassType = {
room: string; room: string;
}; };
type group = { export type Group = {
classname: string; classname: string;
classgroups:Array<ClassType> classgroups: Array<ClassType>;
} };
interface ClassProps { interface ClassProps {
data: group; onClassHover: (group_id: String, class_id: String) => void;
data: Group;
} }
interface ClassState { interface ClassState {
@ -44,26 +45,21 @@ export default class Class extends React.Component<ClassProps, ClassState> {
<div className="class" onClick={this.Open}> <div className="class" onClick={this.Open}>
{this.props.data.classname} {this.props.data.classname}
<Collapse in={this.state.open} timeout="auto" unmountOnExit> <Collapse in={this.state.open} timeout="auto" unmountOnExit>
<p> <div className="class__group">
{this.props.data.classgroups[0].group_id} {this.props.data.classgroups[0].day} {this.props.data.classgroups.map((classgroup, index) => (
{this.props.data.classgroups[0].time} {this.props.data.classgroups[0].room} <p
<br></br> {this.props.data.classgroups[0].lecturer} onMouseOver={() =>
</p> this.props.onClassHover(
<p> this.props.data.classname,
{this.props.data.classgroups[1].group_id} {this.props.data.classgroups[1].day} this.props.data.classgroups[index].group_id
{this.props.data.classgroups[1].time} {this.props.data.classgroups[1].room} )
<br></br> {this.props.data.classgroups[1].lecturer} }
</p> >
<p> {classgroup.group_id} {classgroup.day} {classgroup.time}{" "}
{this.props.data.classgroups[0].group_id} {this.props.data.classgroups[0].day} {classgroup.room} <br></br> {classgroup.lecturer}
{this.props.data.classgroups[0].time} {this.props.data.classgroups[0].room}
<br></br> {this.props.data.classgroups[0].lecturer}
</p>
<p>
{this.props.data.classgroups[1].group_id} {this.props.data.classgroups[1].day}
{this.props.data.classgroups[1].time} {this.props.data.classgroups[1].room}
<br></br> {this.props.data.classgroups[1].lecturer}
</p> </p>
))}
</div>
</Collapse> </Collapse>
</div> </div>
); );

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

@ -2,13 +2,13 @@
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; align-items: center;
text-align: center; text-align: center;
font-family: Lato; font-family: Lato;
&__text { &__text {
border-bottom: 1px solid; border-bottom: 1px solid;
} }
height:85vh;
overflow-y: scroll;
} }

62
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 Class from "../Class"; import Class, { Group } from "../Class";
interface RightBarProps {} interface RightBarProps {
onClassHover: (group_id: String, class_id: String) => void;
// onClick(group_id:String,class_id:String):() => void;
lectures: Array<Group>;
}
interface RightBarState {} interface RightBarState {}
@ -11,59 +15,19 @@ export default class RightBar extends React.Component<
RightBarState RightBarState
> { > {
render() { render() {
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: "1CC",
day: "Wt",
time: "12:00",
lecturer: "dr inż. Michał Ren",
room: "A3-01",
},
],
},
{
classname: "Statystyka",
classgroups: [
{
group_id: "1CB",
day: "Pn",
time: "10:00",
lecturer: "dr inż. Michał Ren",
room: "A2-01",
},
{
group_id: "1CC",
day: "Wt",
time: "12:00",
lecturer: "dr inż. Michał Ren",
room: "A3-01",
},
],
},
];
return ( return (
<div className="right-bar"> <div className="right-bar">
<div className="right-bar__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>
<Class data={data[0]} /> {this.props.lectures.map((classgroup, index) => (
<Class data={data[1]} /> <Class
<Class data={data[0]} /> onClassHover={this.props.onClassHover}
<Class data={data[1]} /> data={classgroup}
<Class data={data[0]} /> key={index}
<Class data={data[1]} /> />
))}
</div> </div>
); );
} }

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

@ -45,9 +45,9 @@
} }
input:focus { input:focus {
-webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75); -webkit-box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
} }
} }

4
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,6 +34,7 @@ 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"> <div className="transfer__left">
{/* <button className="transfer__add">chuj</button> */} {/* <button className="transfer__add">chuj</button> */}
@ -49,7 +51,9 @@ export default class Transfer extends React.Component<
<div className="transfer__proposition"></div> <div className="transfer__proposition"></div>
</div> </div>
</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")
); );