Cleaned up
This commit is contained in:
maciekglowacki
parent
ebebdd9def
commit
aabafac2bb
114
src/App.tsx
114
src/App.tsx
@ -5,84 +5,48 @@ 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("");
|
||||
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
|
||||
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
|
||||
lectures={lectures}
|
||||
onGroupMouseOver={(id, name) => {
|
||||
console.log("XD");
|
||||
}}
|
||||
onGroupClick={(id, name) => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
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>
|
||||
);
|
||||
<h1>{text}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 535 B After Width: | Height: | Size: 535 B |
39
src/components/RightBar/LectureCard/index.tsx
Normal file
39
src/components/RightBar/LectureCard/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -1,35 +1,40 @@
|
||||
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);
|
||||
|
||||
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}
|
||||
key={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const onCardClick = (e: React.MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
console.log(`Target id is: ${target.id}`);
|
||||
selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="right-bar">
|
||||
<div className="right-bar__text">
|
||||
Hubert Wrzesiński<br></br>
|
||||
Semestr zimowy 2020/2021
|
||||
</div>
|
||||
{lectures.map((lecture, index) => (
|
||||
<LectureCard
|
||||
lecture={lecture}
|
||||
key={index}
|
||||
id={index.toString()}
|
||||
onGroupMouseOver={onGroupMouseOver}
|
||||
onGroupClick={onGroupClick}
|
||||
onCardClick={onCardClick}
|
||||
isSelected={selectedCardId === index.toString()}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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
53
src/lectures.ts
Normal 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",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -1,25 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user