changes
This commit is contained in:
parent
6a1c375913
commit
404361b97a
BIN
public/3x.gif
BIN
public/3x.gif
Binary file not shown.
Before Width: | Height: | Size: 55 KiB |
10
src/App.scss
10
src/App.scss
@ -2,3 +2,13 @@ body {
|
|||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
.wraper{
|
||||||
|
display: flex;
|
||||||
|
&__rightbar{
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
&__calendar{
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
21
src/App.tsx
21
src/App.tsx
@ -3,6 +3,8 @@ import TopBar from "./components/TopBar/";
|
|||||||
import Transfer from "./components/Transfer/";
|
import Transfer from "./components/Transfer/";
|
||||||
import "./App.scss";
|
import "./App.scss";
|
||||||
import Schedule from "./components/Calendar/";
|
import Schedule from "./components/Calendar/";
|
||||||
|
import { appointments } from "./components/Calendar/appointments";
|
||||||
|
import RightBar from "./components/RightBar";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [isOpen, setOpen] = useState(false);
|
const [isOpen, setOpen] = useState(false);
|
||||||
@ -17,10 +19,10 @@ function App() {
|
|||||||
handleTransfer={(e) => {
|
handleTransfer={(e) => {
|
||||||
setOpen(!isOpen);
|
setOpen(!isOpen);
|
||||||
}}
|
}}
|
||||||
handleLanguage={(e)=>{
|
handleLanguage={(e) => {
|
||||||
alert("Language");
|
alert("Language");
|
||||||
}}
|
}}
|
||||||
handleProfile={(e)=>{
|
handleProfile={(e) => {
|
||||||
alert("Profile");
|
alert("Profile");
|
||||||
}}
|
}}
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
@ -31,8 +33,19 @@ function App() {
|
|||||||
setOpen(!isOpen);
|
setOpen(!isOpen);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Schedule></Schedule>
|
<div className="wraper">
|
||||||
<h1>{text}</h1>
|
<div className="wraper__calendar">
|
||||||
|
<Schedule
|
||||||
|
data={appointments}
|
||||||
|
currentDate={new Date("2020-06-01")}
|
||||||
|
></Schedule>
|
||||||
|
</div>
|
||||||
|
<div className="wraper__rightbar">
|
||||||
|
<RightBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>{text}</h1>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,30 +0,0 @@
|
|||||||
.schedule {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.calendar {
|
|
||||||
display: flex;
|
|
||||||
width: 85%;
|
|
||||||
}
|
|
||||||
.shop-cart {
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
font-family: Lato;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
.paper {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 10px;
|
|
||||||
height: 60px;
|
|
||||||
width: 90%;
|
|
||||||
background-color: #d4a8ff !important;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
border-bottom: 1px solid;
|
|
||||||
}
|
|
@ -5,21 +5,21 @@ import {
|
|||||||
Scheduler,
|
Scheduler,
|
||||||
WeekView,
|
WeekView,
|
||||||
Appointments,
|
Appointments,
|
||||||
|
AppointmentTooltip,
|
||||||
} from "@devexpress/dx-react-scheduler-material-ui";
|
} from "@devexpress/dx-react-scheduler-material-ui";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import "moment/locale/pl";
|
import "moment/locale/pl";
|
||||||
import { appointments } from "./appointments";
|
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
|
import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
|
||||||
import Paper from "@material-ui/core/Paper";
|
|
||||||
|
|
||||||
interface CalendarProps {}
|
|
||||||
|
|
||||||
interface CalendarState {
|
interface CalendarProps {
|
||||||
data: Array<AppointmentModel>;
|
data: Array<AppointmentModel>;
|
||||||
currentDate: Date;
|
currentDate: Date;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface CalendarState {}
|
||||||
|
|
||||||
const formatDayScaleDate = (
|
const formatDayScaleDate = (
|
||||||
date: moment.MomentInput,
|
date: moment.MomentInput,
|
||||||
options: { weekday: any }
|
options: { weekday: any }
|
||||||
@ -37,9 +37,15 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
},
|
},
|
||||||
timeTableLayout: {
|
timeTableLayout: {
|
||||||
border: "1px solid rgba(224, 224, 224, 1);",
|
border: "1px solid rgba(224, 224, 224, 1);",
|
||||||
|
borderCollapse: "separate",
|
||||||
},
|
},
|
||||||
timeTableCell: {
|
timeTableCell: {
|
||||||
//borderRadius:2,
|
borderRadius: 15,
|
||||||
|
},
|
||||||
|
appointmentLayer: {
|
||||||
|
borderRadius: 15,
|
||||||
|
marginLeft: 5,
|
||||||
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
@ -74,61 +80,39 @@ const TimeTableLayout = ({ ...restProps }: any) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const Appointment = ({ ...restProps }: any) => {
|
||||||
|
const classes = useStyles();
|
||||||
|
return (
|
||||||
|
<Appointments.Appointment
|
||||||
|
{...restProps}
|
||||||
|
className={classes.appointmentLayer}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default class Calendar extends React.PureComponent<
|
export default class Calendar extends React.PureComponent<
|
||||||
CalendarProps,
|
CalendarProps,
|
||||||
CalendarState
|
CalendarState
|
||||||
> {
|
> {
|
||||||
constructor(props: CalendarProps) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
data: appointments,
|
|
||||||
currentDate: new Date("2020-06-01"),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { data, currentDate } = this.state;
|
const { data, currentDate } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="schedule">
|
<Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
|
||||||
<div className="calendar">
|
|
||||||
<Scheduler
|
|
||||||
data={data}
|
|
||||||
height={850}
|
|
||||||
locale={"PL-PL"}
|
|
||||||
firstDayOfWeek={1}
|
|
||||||
>
|
|
||||||
<ViewState defaultCurrentDate={currentDate} />
|
<ViewState defaultCurrentDate={currentDate} />
|
||||||
<WeekView
|
<WeekView
|
||||||
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}
|
||||||
/>
|
/>
|
||||||
<Appointments />
|
<Appointments appointmentComponent={Appointment} />
|
||||||
|
<AppointmentTooltip />
|
||||||
</Scheduler>
|
</Scheduler>
|
||||||
</div>
|
|
||||||
<div className="shop-cart">
|
|
||||||
<div className="text">
|
|
||||||
Hubert Wrzesiński<br></br>
|
|
||||||
Semestr zimowy 2020/2021
|
|
||||||
</div>
|
|
||||||
<Paper className="paper">1</Paper>
|
|
||||||
<Paper className="paper">2</Paper>
|
|
||||||
<Paper className="paper">3</Paper>
|
|
||||||
<Paper className="paper">4</Paper>
|
|
||||||
<Paper className="paper">5</Paper>
|
|
||||||
<Paper className="paper">6</Paper>
|
|
||||||
<Paper className="paper">7</Paper>
|
|
||||||
<Paper className="paper">8</Paper>
|
|
||||||
<Paper className="paper">9</Paper>
|
|
||||||
<Paper className="paper">10</Paper>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
23
src/components/RightBar/index.scss
Normal file
23
src/components/RightBar/index.scss
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.shop-cart {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Lato;
|
||||||
|
}
|
||||||
|
.paper {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
height: 60px;
|
||||||
|
width: 90%;
|
||||||
|
background-color: #d4a8ff !important;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
}
|
||||||
|
|
33
src/components/RightBar/index.tsx
Normal file
33
src/components/RightBar/index.tsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import React from "react";
|
||||||
|
import "./index.scss";
|
||||||
|
import Paper from "@material-ui/core/Paper";
|
||||||
|
interface RightBarProps {}
|
||||||
|
|
||||||
|
interface RightBarState {}
|
||||||
|
|
||||||
|
export default class RightBar extends React.Component<
|
||||||
|
RightBarProps,
|
||||||
|
RightBarState
|
||||||
|
> {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="shop-cart">
|
||||||
|
<div className="text">
|
||||||
|
Hubert Wrzesiński<br></br>
|
||||||
|
Semestr zimowy 2020/2021
|
||||||
|
</div>
|
||||||
|
<Paper className="paper">1</Paper>
|
||||||
|
<Paper className="paper">2</Paper>
|
||||||
|
<Paper className="paper">3</Paper>
|
||||||
|
<Paper className="paper">4</Paper>
|
||||||
|
<Paper className="paper">5</Paper>
|
||||||
|
<Paper className="paper">6</Paper>
|
||||||
|
<Paper className="paper">7</Paper>
|
||||||
|
<Paper className="paper">8</Paper>
|
||||||
|
<Paper className="paper">9</Paper>
|
||||||
|
<Paper className="paper">10</Paper>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user