Merge pull request 'calendar' (#3) from calendar into master

Reviewed-by: filipizydorczyk <filip.izydorczyk@protonmail.com>

package-lock.json

@@ -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",

package.json

@@ -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",

src/App.scss

@@ -2,3 +2,13 @@ body {
     margin: 0px;
     padding: 0px;
   }
+  .wraper{
+    display: flex;
+    &__rightbar{
+      flex-grow: 1;
+    }
+    &__calendar{
+      width: 85%;
+    }
+  }
+

src/App.tsx

@@ -2,6 +2,9 @@ import React, { useState } from "react";
 import TopBar from "./components/TopBar/";
 import Transfer from "./components/Transfer/";
 import "./App.scss";
+import Schedule from "./components/Calendar/";
+import { appointments } from "./components/Calendar/appointments";
+import RightBar from "./components/RightBar";
 
 function App() {
   const [isOpen, setOpen] = useState(false);
@@ -30,6 +33,15 @@ function App() {
           setOpen(!isOpen);
         }}
       />
+      <div className="wraper">
+        <div className="wraper__calendar">
+          <Schedule data={appointments} />
+        </div>
+        <div className="wraper__rightbar">
+          <RightBar />
+        </div>
+      </div>
+
       <h1>{text}</h1>
     </div>
   );

src/components/Calendar/appointments.ts

@@ -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',
+  },
+];

src/components/Calendar/index.tsx

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { ViewState } from "@devexpress/dx-react-scheduler";
+import { AppointmentModel } from "@devexpress/dx-react-scheduler";
+import {
+  Scheduler,
+  WeekView,
+  Appointments,
+  AppointmentTooltip,
+} from "@devexpress/dx-react-scheduler-material-ui";
+import moment from "moment";
+import "moment/locale/pl";
+import "./index.scss";
+import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
+
+
+interface CalendarProps {
+  data: Array<AppointmentModel>;
+  
+}
+
+interface CalendarState {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 useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    dayScaleCell: {
+      paddingTop: 10,
+      paddingBottom: 10,
+    },
+    timeTableLayout: {
+      border: "1px solid rgba(224, 224, 224, 1);",
+      borderCollapse: "separate",
+    },
+    timeTableCell: {
+      //borderRadius: 15,
+    },
+    appointmentLayer: {
+      borderRadius: 15,
+      marginLeft: 5,
+      textAlign: "center",
+    },
+  })
+);
+
+//don't know how to set proper type of function arguments
+const DayScaleCell = ({ formatDate, ...restProps }: any) => {
+  const classes = useStyles();
+  return (
+    <WeekView.DayScaleCell
+      {...restProps}
+      formatDate={formatDayScaleDate}
+      today={false}
+      className={classes.dayScaleCell}
+    />
+  );
+};
+
+const TimeTableCell = ({ ...restProps }: any) => {
+  const classes = useStyles();
+  return (
+    <WeekView.TimeTableCell {...restProps} className={classes.timeTableCell} />
+  );
+};
+
+const TimeTableLayout = ({ ...restProps }: any) => {
+  const classes = useStyles();
+  return (
+    <WeekView.TimeTableLayout
+      {...restProps}
+      className={classes.timeTableLayout}
+    />
+  );
+};
+
+const Appointment = ({ ...restProps }: any) => {
+  const classes = useStyles();
+  return (
+    <Appointments.Appointment
+      {...restProps}
+      className={classes.appointmentLayer}
+    />
+  );
+};
+
+export default class Calendar extends React.PureComponent<
+  CalendarProps,
+  CalendarState
+> {
+
+  constructor(props: CalendarProps) {
+    super(props);
+
+    this.state = {
+      currentDate: new Date("2020-06-01"),
+    };
+  }
+
+  render() {
+    const { data } = this.props;
+    const { currentDate } = this.state;
+    
+
+    return (
+          <Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
+            <ViewState defaultCurrentDate={currentDate} />
+            <WeekView
+              startDayHour={8}
+              endDayHour={20}
+              excludedDays={[0, 6]}
+              cellDuration={60}
+              dayScaleCellComponent={DayScaleCell}
+              timeTableLayoutComponent={TimeTableLayout}
+              timeTableCellComponent={TimeTableCell}
+            />
+            <Appointments appointmentComponent={Appointment} />
+            <AppointmentTooltip />
+          </Scheduler>        
+    );
+  }
+}

src/components/RightBar/index.scss

@@ -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;
+  }
+  

src/components/RightBar/index.tsx

@@ -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>
+    );
+  }
+}

src/teest.tsx

@@ -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);