Data as Json Array
This commit is contained in:
parent
47491c7c37
commit
8f43a785b7
@ -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
43
src/App.tsx
@ -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>
|
||||||
|
|
||||||
|
@ -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}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
@ -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}
|
</p>
|
||||||
<br></br> {this.props.data.classgroups[0].lecturer}
|
))}
|
||||||
</p>
|
</div>
|
||||||
<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>
|
|
||||||
</Collapse>
|
</Collapse>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
}
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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