Updated with master
This commit is contained in:
commit
31f40c410f
63
src/App.tsx
63
src/App.tsx
@ -5,6 +5,8 @@ import "./App.scss";
|
|||||||
import Schedule from "./components/Calendar/";
|
import Schedule from "./components/Calendar/";
|
||||||
import { appointments } from "./components/Calendar/appointments";
|
import { appointments } from "./components/Calendar/appointments";
|
||||||
import RightBar from "./components/RightBar";
|
import RightBar from "./components/RightBar";
|
||||||
|
import { lectures } from "./lectures";
|
||||||
|
|
||||||
import BusinessLogicContext from "./businesslogic/BusinessLogicContext";
|
import BusinessLogicContext from "./businesslogic/BusinessLogicContext";
|
||||||
import { BuisnessProvided } from "./businesslogic/BusinessLogicProvider";
|
import { BuisnessProvided } from "./businesslogic/BusinessLogicProvider";
|
||||||
|
|
||||||
@ -12,47 +14,6 @@ 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">
|
||||||
<BusinessLogicContext.Consumer>
|
<BusinessLogicContext.Consumer>
|
||||||
@ -85,23 +46,11 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="wraper__rightbar">
|
<div className="wraper__rightbar">
|
||||||
<RightBar
|
<RightBar
|
||||||
onClassHover={(group_id, class_id) => {
|
lectures={lectures}
|
||||||
console.log(
|
onGroupMouseOver={(id, name) => {
|
||||||
"group id: ",
|
console.log("XD");
|
||||||
group_id,
|
|
||||||
"class id",
|
|
||||||
class_id
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
lectures={data}
|
|
||||||
onClassClick={(group_id, class_id) => {
|
|
||||||
console.log(
|
|
||||||
"group id: ",
|
|
||||||
group_id,
|
|
||||||
"class id",
|
|
||||||
class_id
|
|
||||||
);
|
|
||||||
}}
|
}}
|
||||||
|
onGroupClick={(id, name) => {}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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,44 +1,44 @@
|
|||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import Class, { Group } from "../Class";
|
import { Lecture } from "../../lectures";
|
||||||
|
import LectureCard from "./LectureCard";
|
||||||
import BusinessLogicContext from "../../businesslogic/BusinessLogicContext";
|
import BusinessLogicContext from "../../businesslogic/BusinessLogicContext";
|
||||||
import { BuisnessProvided } from "../../businesslogic/BusinessLogicProvider";
|
import { BuisnessProvided } from "../../businesslogic/BusinessLogicProvider";
|
||||||
|
|
||||||
interface RightBarProps {
|
interface RightBarProps {
|
||||||
onClassHover: (group_id: String, class_id: String) => void;
|
onGroupMouseOver: (id: string, name: string) => void;
|
||||||
onClassClick: (group_id: String, class_id: String) => void;
|
onGroupClick: (id: string, name: string) => void;
|
||||||
lectures: Array<Group>;
|
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<
|
const onCardClick = (e: React.MouseEvent) => {
|
||||||
RightBarProps,
|
const target = e.currentTarget as HTMLElement;
|
||||||
RightBarState
|
selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
|
||||||
> {
|
};
|
||||||
render() {
|
|
||||||
return (
|
return (
|
||||||
<div className="right-bar">
|
<div className="right-bar">
|
||||||
<BusinessLogicContext.Consumer>
|
<BusinessLogicContext.Consumer>
|
||||||
{(context) => (
|
{(context) => <p>{JSON.stringify((context as BuisnessProvided).states.user?.ticket)}</p>}
|
||||||
<p>
|
</BusinessLogicContext.Consumer>
|
||||||
{JSON.stringify(
|
<div className="right-bar__text">
|
||||||
(context as BuisnessProvided).states.user
|
Hubert Wrzesiński<br></br>
|
||||||
?.ticket
|
Semestr zimowy 2020/2021
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</BusinessLogicContext.Consumer>
|
|
||||||
<p>Semestr zimowy 2020/2021</p>
|
|
||||||
{this.props.lectures.map((classgroup, index) => (
|
|
||||||
<Class
|
|
||||||
onClassHover={this.props.onClassHover}
|
|
||||||
onClassClick={this.props.onClassClick}
|
|
||||||
data={classgroup}
|
|
||||||
key={index}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
{lectures.map((lecture, index) => (
|
||||||
}
|
<LectureCard
|
||||||
|
lecture={lecture}
|
||||||
|
key={index}
|
||||||
|
id={index.toString()}
|
||||||
|
onGroupMouseOver={onGroupMouseOver}
|
||||||
|
onGroupClick={onGroupClick}
|
||||||
|
onCardClick={onCardClick}
|
||||||
|
isSelected={selectedCardId === index.toString()}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -4,10 +4,10 @@ import App from "./App";
|
|||||||
import BuisnessLogicProvider from "./businesslogic/BusinessLogicProvider";
|
import BuisnessLogicProvider from "./businesslogic/BusinessLogicProvider";
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.Fragment>
|
<>
|
||||||
<BuisnessLogicProvider>
|
<BuisnessLogicProvider>
|
||||||
<App />
|
<App />
|
||||||
</BuisnessLogicProvider>
|
</BuisnessLogicProvider>
|
||||||
</React.Fragment>,
|
</>,
|
||||||
document.getElementById("root")
|
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": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"lib": [
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
"dom",
|
"allowJs": true,
|
||||||
"dom.iterable",
|
"skipLibCheck": true,
|
||||||
"esnext"
|
"esModuleInterop": true,
|
||||||
],
|
"allowSyntheticDefaultImports": true,
|
||||||
"allowJs": true,
|
"strict": true,
|
||||||
"skipLibCheck": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
"esModuleInterop": true,
|
"module": "esnext",
|
||||||
"allowSyntheticDefaultImports": true,
|
"moduleResolution": "node",
|
||||||
"strict": true,
|
"resolveJsonModule": true,
|
||||||
"forceConsistentCasingInFileNames": true,
|
"isolatedModules": true,
|
||||||
"module": "esnext",
|
"noEmit": true,
|
||||||
"moduleResolution": "node",
|
"jsx": "react"
|
||||||
"resolveJsonModule": true,
|
},
|
||||||
"isolatedModules": true,
|
"include": ["src"]
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react"
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"src"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user