From 8f43a785b7324ae9b5f0029ef0845aec59b984d7 Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Sun, 14 Jun 2020 14:24:49 +0200 Subject: [PATCH] Data as Json Array --- public/index.html | 4 +- src/App.tsx | 43 ++++++++++++++++++++- src/components/Calendar/index.tsx | 2 +- src/components/Class/index.scss | 1 - src/components/Class/index.tsx | 46 ++++++++++------------ src/components/RightBar/index.scss | 8 ++-- src/components/RightBar/index.tsx | 62 +++++++----------------------- src/components/Transfer/index.scss | 6 +-- src/components/Transfer/index.tsx | 4 ++ src/index.tsx | 4 +- 10 files changed, 92 insertions(+), 88 deletions(-) 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.tsx b/src/App.tsx index bf12808..5e976e8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,47 @@ 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 (
- + {console.log("group id: ",group_id,"class id",class_id)}} lectures={data}/>
diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx index 2026eb5..33d3ba3 100644 --- a/src/components/Calendar/index.tsx +++ b/src/components/Calendar/index.tsx @@ -114,7 +114,7 @@ export default class Calendar extends React.PureComponent< startDayHour={8} endDayHour={20} excludedDays={[0, 6]} - cellDuration={45} + cellDuration={60} dayScaleCellComponent={DayScaleCell} timeTableLayoutComponent={TimeTableLayout} timeTableCellComponent={TimeTableCell} diff --git a/src/components/Class/index.scss b/src/components/Class/index.scss index d38e5a4..cdc6976 100644 --- a/src/components/Class/index.scss +++ b/src/components/Class/index.scss @@ -8,6 +8,5 @@ margin-top: 10px; padding:10px; border-radius: 10px; - width: 90%; cursor: pointer; } \ No newline at end of file diff --git a/src/components/Class/index.tsx b/src/components/Class/index.tsx index 0173da5..d0ed795 100644 --- a/src/components/Class/index.tsx +++ b/src/components/Class/index.tsx @@ -10,13 +10,14 @@ type ClassType = { room: string; }; -type group = { - classname:string; - classgroups:Array -} +export type Group = { + classname: string; + classgroups: Array; +}; interface ClassProps { - data: group; + onClassHover: (group_id: String, class_id: String) => void; + data: Group; } interface ClassState { @@ -44,26 +45,21 @@ export default class Class extends React.Component {
{this.props.data.classname} -

- {this.props.data.classgroups[0].group_id} {this.props.data.classgroups[0].day} - {this.props.data.classgroups[0].time} {this.props.data.classgroups[0].room} -

{this.props.data.classgroups[0].lecturer} -

-

- {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} -

{this.props.data.classgroups[1].lecturer} -

-

- {this.props.data.classgroups[0].group_id} {this.props.data.classgroups[0].day} - {this.props.data.classgroups[0].time} {this.props.data.classgroups[0].room} -

{this.props.data.classgroups[0].lecturer} -

-

- {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} -

{this.props.data.classgroups[1].lecturer} -

+
+ {this.props.data.classgroups.map((classgroup, index) => ( +

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

{classgroup.lecturer} +

+ ))} +
); diff --git a/src/components/RightBar/index.scss b/src/components/RightBar/index.scss index a22894b..9840449 100644 --- a/src/components/RightBar/index.scss +++ b/src/components/RightBar/index.scss @@ -2,13 +2,13 @@ padding-top: 10px; padding-left: 15px; padding-right: 15px; - display: flex; - flex-direction: column; align-items: center; text-align: center; font-family: Lato; &__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 c8eb531..9e442ce 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 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; +} interface RightBarState {} @@ -11,59 +15,19 @@ export default class RightBar extends React.Component< RightBarState > { 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 (
Hubert Wrzesiński

Semestr zimowy 2020/2021
- - - - - - + {this.props.lectures.map((classgroup, index) => ( + + ))}
); } diff --git a/src/components/Transfer/index.scss b/src/components/Transfer/index.scss index 88d8e00..12d45fe 100644 --- a/src/components/Transfer/index.scss +++ b/src/components/Transfer/index.scss @@ -45,9 +45,9 @@ } input:focus { - -webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75); - 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: 0px 0px 18px 8px rgba(0,0,0,0.75); + box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75); } } diff --git a/src/components/Transfer/index.tsx b/src/components/Transfer/index.tsx index 3a5ad77..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,6 +34,7 @@ export default class Transfer extends React.Component< aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" > +
{/* */} @@ -49,7 +51,9 @@ export default class Transfer extends React.Component<
+ + ); } 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") );