y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

kalendarz pre-pre-pre-alfa

Browse Source
This commit is contained in:
wrzesinski-hubert 2020-06-05 14:31:48 +02:00
parent 7e47aea64e
commit 75c6d20657
7 changed files with 270 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
package-lock.json generated
View File

@ -1083,6 +1083,61 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
"@date-io/core": {
"version": "1.3.13",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
"integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
},
"@date-io/moment": {
"version": "1.3.13",
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
"integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
"requires": {
"@date-io/core": "^1.3.13"
}
},
"@devexpress/dx-core": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-2.6.3.tgz",
"integrity": "sha512-MMOPm+UQdxliq0IidfsgOryYCJsFVRHtILZeMyHMs9I8IFbV8DuDwkhzNNr2/RjRZ3GVm4ZuxnWjbeOSUdft8A=="
},
"@devexpress/dx-react-core": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-2.6.3.tgz",
"integrity": "sha512-lKmmhHCfOBfkEFaa/SOt7DjdMLvkHqgwIiWBXaZEqK6kJk4u0Y5+yWJLUo0O9RNszaKQzAoDMQUupi47fbCPWg==",
"requires": {
"@devexpress/dx-core": "2.6.3",
"prop-types": "^15.7.2"
}
},
"@devexpress/dx-react-scheduler": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-2.6.3.tgz",
"integrity": "sha512-trQMLbOlkTnmi0y0AYic369XzXu58IablHiUg5Ndp7XC8pz3eysERFFd9yziOUz0LnxcpPP204D9zUZQAPUfpA==",
"requires": {
"@devexpress/dx-scheduler-core": "2.6.3"
}
},
"@devexpress/dx-react-scheduler-material-ui": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler-material-ui/-/dx-react-scheduler-material-ui-2.6.3.tgz",
"integrity": "sha512-UuORS7BSErFgjmVDfWTfrwDlDSTifBRM8Y6KiwDwn2ew25wHP8MKyCiPSY9A36H2s10iXX/D7tJokF//lA31AA==",
"requires": {
"@date-io/moment": "^1.3.11",
"@material-ui/pickers": "^3.2.10",
"clsx": "^1.0.4",
"prop-types": "^15.7.2"
}
},
"@devexpress/dx-scheduler-core": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-scheduler-core/-/dx-scheduler-core-2.6.3.tgz",
"integrity": "sha512-yZp9vvzuLvkw+dUASp6WLxrqyvTqB9Nx+k56fnCYz8o18yMWBuYtGZvg34p3pdry930HEfLLRVrRXBWcQI8mzg==",
"requires": {
"moment": "^2.24.0",
"rrule": "^2.6.2"
}
},
"@emotion/hash": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@ -1340,6 +1395,19 @@
"@babel/runtime": "^7.4.4"
}
},
"@material-ui/pickers": {
"version": "3.2.10",
"resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.2.10.tgz",
"integrity": "sha512-B8G6Obn5S3RCl7hwahkQj9sKUapwXWFjiaz/Bsw1fhYFdNMnDUolRiWQSoKPb1/oKe37Dtfszoywi1Ynbo3y8w==",
"requires": {
"@babel/runtime": "^7.6.0",
"@date-io/core": "1.x",
"@types/styled-jsx": "^2.2.8",
"clsx": "^1.0.2",
"react-transition-group": "^4.0.0",
"rifm": "^0.7.0"
}
},
"@material-ui/styles": {
"version": "4.10.0",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
@ -1799,6 +1867,14 @@
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
"integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
},
"@types/styled-jsx": {
"version": "2.2.8",
"resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.8.tgz",
"integrity": "sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg==",
"requires": {
"@types/react": "*"
}
},
"@types/testing-library__dom": {
"version": "6.14.0",
"resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz",
@ -8282,6 +8358,12 @@
}
}
},
"luxon": {
"version": "1.24.1",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-1.24.1.tgz",
"integrity": "sha512-CgnIMKAWT0ghcuWFfCWBnWGOddM0zu6c4wZAWmD0NN7MZTnro0+833DF6tJep+xlxRPg4KtsYEHYLfTMBQKwYg==",
"optional": true
},
"make-dir": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@ -8772,6 +8854,11 @@
"minimist": "^1.2.5"
}
},
"moment": {
"version": "2.26.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
"integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@ -11831,6 +11918,14 @@
"resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
"integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
},
"rifm": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
"integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
"requires": {
"@babel/runtime": "^7.3.1"
}
},
"rimraf": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
@ -11848,6 +11943,15 @@
"inherits": "^2.0.1"
}
},
"rrule": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/rrule/-/rrule-2.6.4.tgz",
"integrity": "sha512-sLdnh4lmjUqq8liFiOUXD5kWp/FcnbDLPwq5YAc/RrN6120XOPb86Ae5zxF7ttBVq8O3LxjjORMEit1baluahA==",
"requires": {
"luxon": "^1.21.3",
"tslib": "^1.10.0"
}
},
"rsvp": {
"version": "4.8.5",
"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",

3
package.json
View File

@ -4,6 +4,9 @@
"private": true,
"dependencies": {
"-": "0.0.1",
"@devexpress/dx-react-core": "^2.6.3",
"@devexpress/dx-react-scheduler": "^2.6.3",
"@devexpress/dx-react-scheduler-material-ui": "^2.6.3",
"@material-ui/core": "^4.10.0",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",

2
src/App.tsx
View File

@ -2,6 +2,7 @@ import React, { useState } from "react";
import TopBar from "./components/TopBar/";
import Transfer from "./components/Transfer/";
import "./App.scss";
import Schedule from "./components/Calendar/";
function App() {
const [isOpen, setOpen] = useState(false);
@ -30,6 +31,7 @@ function App() {
setOpen(!isOpen);
}}
/>
<Schedule></Schedule>
<h1>{text}</h1>
</div>
);

23
src/components/Calendar/appointments.js Normal file
View File

@ -0,0 +1,23 @@
export const appointments = [
{
title: 'Snmutna buzia',
startDate: new Date(2020, 5, 3, 9, 45),
endDate: new Date(2020, 5, 3, 11, 30),
id: 0,
location: 'Room 1',
},
{
title: 'Twoja stara beszamel',
startDate: new Date(2020, 5, 1, 9, 45),
endDate: new Date(2020, 5, 1, 11, 30),
id: 0,
location: 'Room 1',
},
{
title: 'Twoja stara beszamel',
startDate: new Date(2020, 5, 1, 9, 45),
endDate: new Date(2020, 5, 1, 11, 30),
id: 0,
location: 'Room 1',
},
];

21
src/components/Calendar/index.scss Normal file
View File

@ -0,0 +1,21 @@
.schedule{
display: flex;
}
.calendar{
display: flex;
width: 85%;
}
.shop-cart{
padding-top: 10px;
display: flex;
text-align: center;
font-family: Lato;
flex-grow: 1;
}
.chuj{
padding-top: 20px !important;
padding-bottom: 20px !important;
}

90
src/components/Calendar/index.tsx Normal file
View File

@ -0,0 +1,90 @@
import * as React from "react";
import { ViewState } from "@devexpress/dx-react-scheduler";
import { AppointmentModel } from "@devexpress/dx-react-scheduler";
import {
Scheduler,
WeekView,
Appointments,
} from "@devexpress/dx-react-scheduler-material-ui";
import moment from "moment";
import "moment/locale/pl";
import { appointments } from "./appointments";
import "./index.scss";
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
interface CalendarProps {}
interface CalendarState {
data: Array<AppointmentModel>;
currentDate: Date;
}
const formatDayScaleDate = (
date: moment.MomentInput,
options: { weekday: any }
) => {
const momentDate = moment(date).locale("pl");
const { weekday } = options;
return momentDate.format(weekday ? "dddd" : " ").toUpperCase();
};
const styles = makeStyles((theme: Theme) =>
createStyles({
dayScaleCell:{
backgroundColor:"red"
}
}),
);
const DayScaleCell = (({ formatDate,classes, ...restProps }: any) => (
<WeekView.DayScaleCell
{...restProps}
formatDate={formatDayScaleDate}
today={false}
className={"chuj"}
/>
));
export default class Calendar extends React.PureComponent<
CalendarProps,
CalendarState
> {
constructor(props: CalendarProps) {
super(props);
this.state = {
data: appointments,
currentDate: new Date("2020-06-01"),
};
}
render() {
const { data, currentDate } = this.state;
return (
<div className="schedule">
<div className="calendar">
<Scheduler
data={data}
height={700}
locale={"PL-PL"}
firstDayOfWeek={1}
>
<ViewState defaultCurrentDate={currentDate} />
<WeekView
startDayHour={8}
endDayHour={20}
excludedDays={[0, 6]}
cellDuration={60}
dayScaleCellComponent={DayScaleCell}
/>
<Appointments />
</Scheduler>
</div>
<div className="shop-cart">
Hubert Wrzesiński Semestr zimowy 2020/2021
</div>
</div>
);
}
}

27
src/teest.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const styles = {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
};
function HigherOrderComponent(props: { classes: any; }) {
const { classes } = props;
return <Button className={classes.root}>Higher-order component</Button>;
}
HigherOrderComponent.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(HigherOrderComponent);