jako tako
This commit is contained in:
parent
25422bff3a
commit
c91a16963e
Binary file not shown.
Before Width: | Height: | Size: 3.1 KiB |
@ -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
25
public/logo.svg
Normal 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 |
@ -3,9 +3,7 @@
|
||||
"name": "PlanNaPlan",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
"src": "logo.svg"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
|
24
src/App.tsx
24
src/App.tsx
@ -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">
|
||||
|
@ -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',
|
||||
},
|
||||
];
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
BIN
src/components/TopBar/3x.gif
Normal file
BIN
src/components/TopBar/3x.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
BIN
src/components/TopBar/PL.png
Normal file
BIN
src/components/TopBar/PL.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
@ -47,6 +47,9 @@
|
||||
flex-grow: 1.5;
|
||||
}
|
||||
}
|
||||
&__menu{
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 670px) {
|
||||
.top-bar {
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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() {
|
||||
|
Loading…
Reference in New Issue
Block a user