jako tako

This commit is contained in:
wrzesinski-hubert 2020-06-08 20:10:20 +02:00
parent 25422bff3a
commit c91a16963e
12 changed files with 121 additions and 63 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -2,18 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<title>PlanNaPlan</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

25
public/logo.svg Normal file
View File

@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="200" height="200" viewBox="0 0 200 200">
<defs>
<style>
.cls-1 {
fill: #6d6e71;
}
.cls-1, .cls-2, .cls-3 {
fill-rule: evenodd;
}
.cls-2 {
fill: #f9ca24;
}
.cls-3 {
fill: #1761a0;
}
</style>
</defs>
<path d="M22.000,156.000 L23.000,154.000 L24.000,153.000 L25.000,152.000 L26.000,151.000 L28.000,150.000 L33.000,150.000 L35.000,151.000 L36.000,152.000 L37.000,153.000 L38.000,154.000 L39.000,156.000 L39.000,161.000 L38.000,163.000 L37.000,164.000 L36.000,165.000 L35.000,166.000 L33.000,167.000 L28.000,167.000 L26.000,166.000 L25.000,165.000 L24.000,164.000 L23.000,163.000 L22.000,161.000 L22.000,156.000 ZM26.000,156.000 L27.000,155.000 L28.000,154.000 L33.000,154.000 L34.000,155.000 L35.000,156.000 L35.000,161.000 L34.000,162.000 L33.000,163.000 L28.000,163.000 L27.000,162.000 L26.000,161.000 L26.000,156.000 Z" class="cls-1"/>
<path d="M10.000,75.000 L100.000,131.000 L190.000,75.000 L100.000,20.000 L10.000,75.000 Z" class="cls-2"/>
<path d="M84.000,52.000 L86.000,54.000 L32.000,89.000 L32.000,153.000 L29.000,153.000 L29.000,88.000 L84.000,52.000 Z" class="cls-1"/>
<path d="M45.000,102.000 L45.000,143.000 L100.000,180.000 L155.000,143.000 L155.000,102.000 L100.000,136.000 L45.000,102.000 Z" class="cls-3"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -3,9 +3,7 @@
"name": "PlanNaPlan",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
"src": "logo.svg"
}
],
"start_url": ".",

View File

@ -7,8 +7,11 @@ import { appointments } from "./components/Calendar/appointments";
import RightBar from "./components/RightBar";
function App() {
const [isOpen, setOpen] = useState(false);
const [isOpenTransfer, setOpenTransfer] = useState(false);
const [isOpenProfile, setOpenProfile] = useState(false);
const [isPolish, setLanguage] = useState(true);
const [text, setText] = useState("");
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
return (
<div className="App">
@ -17,20 +20,27 @@ function App() {
setText(e.target.value);
}}
handleTransfer={(e) => {
setOpen(!isOpen);
setOpenTransfer(!isOpenTransfer);
}}
handleLanguage={(e) => {
alert("Language");
setLanguage(!isPolish);
}}
handleProfile={(e) => {
alert("Profile");
setOpenProfile(!isOpenProfile);
setAnchorEl(e.currentTarget as HTMLElement);
}}
isOpen={isOpen}
handleClose={(e) => {
setOpenProfile(!isOpenProfile);
}}
isOpenTransfer={isOpenTransfer}
isOpenProfile={isOpenProfile}
isPolish={isPolish}
anchorEl={anchorEl}
/>
<Transfer
isOpen={isOpen}
isOpen={isOpenTransfer}
handleClose={(e) => {
setOpen(!isOpen);
setOpenTransfer(!isOpenTransfer);
}}
/>
<div className="wraper">

View File

@ -20,4 +20,11 @@ export const appointments = [
id: 0,
location: 'Room 1',
},
{
title: 'Twoja stara beszamel',
startDate: new Date(2020, 5, 1, 18, 45),
endDate: new Date(2020, 5, 1, 20, 0),
id: 0,
location: 'Room 1',
},
];

View File

@ -1,24 +1,25 @@
import * as React from "react";
import { ViewState } from "@devexpress/dx-react-scheduler";
import { ViewState, IntegratedEditing, EditingState } from "@devexpress/dx-react-scheduler";
import { AppointmentModel } from "@devexpress/dx-react-scheduler";
import {
Scheduler,
WeekView,
Appointments,
AppointmentTooltip,
AppointmentForm,
} 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;}
interface CalendarState {
currentDate: Date;
}
const formatDayScaleDate = (
date: moment.MomentInput,
@ -103,26 +104,34 @@ export default class Calendar extends React.PureComponent<
};
}
commitChanges() {
}
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>
<Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
<ViewState defaultCurrentDate={currentDate} />
<EditingState
onCommitChanges={this.commitChanges}
/>
<WeekView
startDayHour={8}
endDayHour={20}
excludedDays={[0, 6]}
cellDuration={60}
dayScaleCellComponent={DayScaleCell}
timeTableLayoutComponent={TimeTableLayout}
timeTableCellComponent={TimeTableCell}
/>
<IntegratedEditing/>
<Appointments appointmentComponent={Appointment} />
<AppointmentTooltip />
<AppointmentForm/>
</Scheduler>
);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -47,6 +47,9 @@
flex-grow: 1.5;
}
}
&__menu{
margin-top: 25px;
}
}
@media only screen and (max-width: 670px) {
.top-bar {

View File

@ -4,49 +4,58 @@ import Input from "@material-ui/core/Input";
import Transfer from "./transfer.png";
import Search from "./search.svg";
import UK from "./UK.png";
import PL from "./PL.png";
import User from "./user.png";
import CloseIcon from "./close.svg";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
interface TopBarProps {
handleTransfer: (e: React.MouseEvent) => void;
handleProfile: (e: React.MouseEvent) => void;
handleClose: (e: React.MouseEvent) => void;
handleLanguage: (e: React.MouseEvent) => void;
textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
isOpen: boolean;
isOpenTransfer: boolean;
isOpenProfile: boolean;
isPolish: boolean;
anchorEl: null | HTMLElement;
}
interface TopBarState {}
export default class TopBar extends React.Component<TopBarProps, TopBarState> {
export default class TopBar extends React.Component<
TopBarProps,
TopBarState
> {
constructor(props: TopBarProps) {
super(props);
this.handleProfile = this.handleProfile.bind(this);
this.handleClose = this.handleProfile.bind(this);
this.handleLanguage = this.handleLanguage.bind(this);
this.handleTransfer = this.handleTransfer.bind(this);
this.state = {
isOpen: false,
};
}
handleTransfer(e: React.MouseEvent) {
this.props.handleTransfer(e);
this.setState({
isOpen: true,
});
}
handleChange(e: React.ChangeEvent<HTMLInputElement>) {
this.props.textChangeHandler(e);
}
handleProfile(e: React.MouseEvent) {
this.props.handleProfile(e);
handleTransfer(e: React.MouseEvent) {
this.props.handleTransfer(e);
}
handleLanguage(e: React.MouseEvent) {
this.props.handleLanguage(e);
}
handleProfile(e: React.MouseEvent) {
this.props.handleProfile(e);
}
handleClose(e: React.MouseEvent) {
this.props.handleClose(e);
}
render() {
return (
<div className="top-bar">
@ -59,11 +68,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
<div className="top-bar__tekst"> plan na plan </div>
</div>
<div className="top-bar__input-div">
<img
className="top-bar__input-icon"
alt="search"
src={Search}
/>
<img className="top-bar__input-icon" alt="search" src={Search} />
<Input
placeholder="Wyszukaj..."
inputProps={{ "aria-label": "description" }}
@ -72,11 +77,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
this.handleChange(e as ChangeEvent<HTMLInputElement>)
}
/>
<img
className="top-bar__input-icon"
alt="close"
src={CloseIcon}
/>
<img className="top-bar__input-icon" alt="close" src={CloseIcon} />
</div>
<div className="top-bar__icon-box">
<img
@ -88,7 +89,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
<img
className="top-bar__icon"
alt="change_language"
src={UK}
src={this.props.isPolish ? UK : PL}
onClick={this.handleLanguage}
/>
<img
@ -97,6 +98,17 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
src={User}
onClick={this.handleProfile}
/>
<Menu className="top-bar__menu"
id="simple-menu"
anchorEl={this.props.anchorEl}
keepMounted
open={this.props.isOpenProfile}
onClose={this.handleClose}
>
<MenuItem>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem>Logout</MenuItem>
</Menu>
</div>
</div>
);

View File

@ -17,16 +17,10 @@ export default class Transfer extends React.Component<
super(props);
this.handleClose = this.handleClose.bind(this);
this.state = {
isOpen: true,
};
}
handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
this.props.handleClose(e);
this.setState({
isOpen: false,
});
}
render() {