Merge pull request 'Cleaned up' (#8) from cleanup into master

Reviewed-by: filipizydorczyk <filip.izydorczyk@protonmail.com>
This commit is contained in:
filipizydorczyk 2020-06-18 21:12:57 +02:00
commit e34d5966a4
9 changed files with 183 additions and 207 deletions

View File

@ -5,52 +5,11 @@ import "./App.scss";
import Schedule from "./components/Calendar/";
import { appointments } from "./components/Calendar/appointments";
import RightBar from "./components/RightBar";
import { lectures } from "./lectures";
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 (
<div className="App">
<TopBar
@ -75,8 +34,13 @@ function App() {
<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)}}/>
<RightBar
lectures={lectures}
onGroupMouseOver={(id, name) => {
console.log("XD");
}}
onGroupClick={(id, name) => {}}
/>
</div>
</div>

View File

@ -1,78 +0,0 @@
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>
);
}
}

View File

Before

Width:  |  Height:  |  Size: 535 B

After

Width:  |  Height:  |  Size: 535 B

View File

@ -0,0 +1,39 @@
import React from "react";
import "./index.scss";
import Collapse from "@material-ui/core/Collapse";
import ExpandIcon from "./expand.png";
import { Lecture } from "../../../lectures";
interface LectureCardProps {
onGroupMouseOver: (id: string, name: string) => void;
onGroupClick: (id: string, name: string) => void;
onCardClick: (e: React.MouseEvent) => void;
lecture: Lecture;
id: string;
isSelected: boolean;
}
export default function LectureCard({ onGroupMouseOver, onGroupClick, onCardClick, lecture, id, isSelected }: LectureCardProps) {
return (
<div className="class" onClick={onCardClick} id={id}>
<div className="class__name">{lecture.name}</div>
<Collapse in={isSelected} timeout="auto" unmountOnExit>
{lecture.groups.map((group, index) => (
<div
className="class__group"
key={index}
onMouseOver={() => onGroupMouseOver(group.id, lecture.name)}
onClick={() => onGroupClick(group.id, lecture.name)}
>
<p>
{group.id} {group.day} {group.time} {group.room} <br></br> {group.lecturer}
</p>{" "}
</div>
))}
</Collapse>
<div onClick={onCardClick} id={id}>
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? "Rotate" : ""}`} />
</div>
</div>
);
}

View File

@ -1,35 +1,39 @@
import React from "react";
import React, { useState } from "react";
import "./index.scss";
import Class, { Group } from "../Class";
import { Lecture } from "../../lectures";
import LectureCard from "./LectureCard";
interface RightBarProps {
onClassHover: (group_id: String, class_id: String) => void;
onClassClick: (group_id: String, class_id: String) => void;
lectures: Array<Group>;
onGroupMouseOver: (id: string, name: string) => void;
onGroupClick: (id: string, name: string) => void;
lectures: Array<Lecture>;
}
interface RightBarState {}
export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: RightBarProps) {
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
const onCardClick = (e: React.MouseEvent) => {
const target = e.currentTarget as HTMLElement;
selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
};
export default class RightBar extends React.Component<
RightBarProps,
RightBarState
> {
render() {
return (
<div className="right-bar">
<div className="right-bar__text">
Hubert Wrzesiński<br></br>
Semestr zimowy 2020/2021
</div>
{this.props.lectures.map((classgroup, index) => (
<Class
onClassHover={this.props.onClassHover}
onClassClick={this.props.onClassClick}
data={classgroup}
{lectures.map((lecture, index) => (
<LectureCard
lecture={lecture}
key={index}
id={index.toString()}
onGroupMouseOver={onGroupMouseOver}
onGroupClick={onGroupClick}
onCardClick={onCardClick}
isSelected={selectedCardId === index.toString()}
/>
))}
</div>
);
}
}

View File

@ -3,8 +3,8 @@ import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.Fragment>
<>
<App />
</React.Fragment>,
</>,
document.getElementById("root")
);

53
src/lectures.ts Normal file
View File

@ -0,0 +1,53 @@
export interface Lecture {
name: string;
groups: Array<Group>;
}
interface Group {
id: string;
day: string;
time: string;
lecturer: string;
room: string;
}
export const lectures: Array<Lecture> = [
{
name: "E-gospodarka - narzędzia i bezpieczeństwo",
groups: [
{
id: "1CB",
day: "Pn",
time: "10:00",
lecturer: "dr inż. Michał Ren",
room: "A2-01",
},
{
id: "1XD",
day: "Wt",
time: "12:00",
lecturer: "dr inż. Michał Ren",
room: "A3-01",
},
],
},
{
name: "Statystyka",
groups: [
{
id: "2CB",
day: "Pn",
time: "10:00",
lecturer: "dr inż. Michał Ren",
room: "A2-01",
},
{
id: "2XD",
day: "Wt",
time: "12:00",
lecturer: "dr inż. Michał Ren",
room: "A3-01",
},
],
},
];

View File

@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@ -19,7 +15,5 @@
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
"include": ["src"]
}