Merge pull request 'calendar' (#4) from calendar into master
Reviewed-by: filipizydorczyk <filip.izydorczyk@protonmail.com>
This commit is contained in:
filipizydorczyk
commit
69453aa2ce
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": ".",
|
||||
|
||||
16
src/App.tsx
16
src/App.tsx
@ -7,7 +7,7 @@ import { appointments } from "./components/Calendar/appointments";
|
||||
import RightBar from "./components/RightBar";
|
||||
|
||||
function App() {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [isOpenTransfer, setOpenTransfer] = useState(false);
|
||||
const [text, setText] = useState("");
|
||||
|
||||
return (
|
||||
@ -17,20 +17,16 @@ function App() {
|
||||
setText(e.target.value);
|
||||
}}
|
||||
handleTransfer={(e) => {
|
||||
setOpen(!isOpen);
|
||||
setOpenTransfer(!isOpenTransfer);
|
||||
}}
|
||||
handleLanguage={(e) => {
|
||||
alert("Language");
|
||||
onLangChange={(e) => {
|
||||
console.log(e);
|
||||
}}
|
||||
handleProfile={(e) => {
|
||||
alert("Profile");
|
||||
}}
|
||||
isOpen={isOpen}
|
||||
/>
|
||||
<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',
|
||||
},
|
||||
];
|
||||
|
||||
@ -12,13 +12,13 @@ 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,
|
||||
@ -107,22 +107,21 @@ export default class Calendar extends React.PureComponent<
|
||||
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} />
|
||||
<WeekView
|
||||
startDayHour={8}
|
||||
endDayHour={20}
|
||||
excludedDays={[0, 6]}
|
||||
cellDuration={60}
|
||||
dayScaleCellComponent={DayScaleCell}
|
||||
timeTableLayoutComponent={TimeTableLayout}
|
||||
timeTableCellComponent={TimeTableCell}
|
||||
/>
|
||||
<Appointments appointmentComponent={Appointment} />
|
||||
<AppointmentTooltip />
|
||||
</Scheduler>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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,47 +4,64 @@ 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;
|
||||
handleLanguage: (e: React.MouseEvent) => void;
|
||||
onLangChange: (lang:boolean) => void;
|
||||
textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
interface TopBarState {}
|
||||
interface TopBarState {
|
||||
isOpenProfile: boolean;
|
||||
anchorEl: null | HTMLElement;
|
||||
isPolish: boolean;
|
||||
}
|
||||
|
||||
export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
||||
constructor(props: TopBarProps) {
|
||||
super(props);
|
||||
this.handleProfile = this.handleProfile.bind(this);
|
||||
this.handleLanguage = this.handleLanguage.bind(this);
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.onLangChange = this.onLangChange.bind(this);
|
||||
this.handleTransfer = this.handleTransfer.bind(this);
|
||||
this.state = {
|
||||
isOpen: false,
|
||||
isOpenProfile: false,
|
||||
anchorEl:null,
|
||||
isPolish:true,
|
||||
};
|
||||
}
|
||||
|
||||
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);
|
||||
onLangChange(e: React.MouseEvent) {
|
||||
this.setState({
|
||||
isPolish:!this.state.isPolish,
|
||||
})
|
||||
this.props.onLangChange(this.state.isPolish);
|
||||
}
|
||||
|
||||
handleProfile(e: React.MouseEvent) {
|
||||
this.setState({
|
||||
isOpenProfile: !this.state.isOpenProfile,
|
||||
anchorEl:e.currentTarget as HTMLElement,
|
||||
});
|
||||
}
|
||||
|
||||
handleClose(e: React.MouseEvent) {
|
||||
this.setState({
|
||||
isOpenProfile: !this.state.isOpenProfile,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -59,11 +76,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 +85,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,8 +97,8 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
||||
<img
|
||||
className="top-bar__icon"
|
||||
alt="change_language"
|
||||
src={UK}
|
||||
onClick={this.handleLanguage}
|
||||
src={this.state.isPolish ? UK : PL}
|
||||
onClick={this.onLangChange}
|
||||
/>
|
||||
<img
|
||||
className="top-bar__icon"
|
||||
@ -97,6 +106,18 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
||||
src={User}
|
||||
onClick={this.handleProfile}
|
||||
/>
|
||||
<Menu
|
||||
className="top-bar__menu"
|
||||
id="simple-menu"
|
||||
anchorEl={this.state.anchorEl}
|
||||
keepMounted
|
||||
open={this.state.isOpenProfile}
|
||||
onClose={this.handleClose}
|
||||
>
|
||||
<MenuItem>Profile</MenuItem>
|
||||
<MenuItem>My account</MenuItem>
|
||||
<MenuItem>Logout</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,16 +1,38 @@
|
||||
.wrapper{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
height: 80vh;
|
||||
.wrapper {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.transfer{
|
||||
display: flex;
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
background-color: purple;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.transfer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
padding-top: 40px;
|
||||
background: rgba(255, 220, 97, 0.48);
|
||||
border: 1px solid #000000;
|
||||
justify-content: center;
|
||||
&__text {
|
||||
font-family: Lato;
|
||||
font-size: 50px;
|
||||
}
|
||||
&__input{
|
||||
width: 300px;
|
||||
height: 45px;
|
||||
background: #D7A700;
|
||||
}
|
||||
&__give{
|
||||
flex-grow: 1;
|
||||
}
|
||||
&__recieve{
|
||||
flex-grow: 1;
|
||||
}
|
||||
&__proposition{
|
||||
flex-grow: 4;
|
||||
}
|
||||
&__add{
|
||||
}
|
||||
}
|
||||
@ -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() {
|
||||
@ -40,9 +34,16 @@ export default class Transfer extends React.Component<
|
||||
aria-describedby="simple-modal-description"
|
||||
>
|
||||
<div className="transfer">
|
||||
<button type="button" onClick={this.handleClose}>
|
||||
Close Modal
|
||||
</button>
|
||||
<div className="transfer__give">
|
||||
<div className="transfer__text">Oddam</div>
|
||||
<input className="transfer__input"></input>
|
||||
</div>
|
||||
<div className="transfer__receive">
|
||||
<div className="transfer__text">Przyjmę</div>
|
||||
<input className="transfer__input"></input>
|
||||
</div>
|
||||
<div className="transfer__proposition"></div>
|
||||
<button className="transfer__add">chuj</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user