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

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

Browse Source 
Reviewed-by: filipizydorczyk <filip.izydorczyk@protonmail.com>
This commit is contained in:
filipizydorczyk 2020-06-09 16:37:35 +02:00
commit 69453aa2ce
12 changed files with 158 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

6
public/index.html
View File

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

After

Width:  |  Height:  |  Size: 1.4 KiB

4
public/manifest.json
View File

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

16
src/App.tsx
View File

@ -7,7 +7,7 @@ import { appointments } from "./components/Calendar/appointments";
import RightBar from "./components/RightBar"; import RightBar from "./components/RightBar";
function App() { function App() {
const [isOpen, setOpen] = useState(false); const [isOpenTransfer, setOpenTransfer] = useState(false);
const [text, setText] = useState(""); const [text, setText] = useState("");
return ( return (
@ -17,20 +17,16 @@ function App() {
setText(e.target.value); setText(e.target.value);
}} }}
handleTransfer={(e) => { handleTransfer={(e) => {
setOpen(!isOpen); setOpenTransfer(!isOpenTransfer);
}} }}
handleLanguage={(e) => { onLangChange={(e) => {
alert("Language"); console.log(e);
}} }}
handleProfile={(e) => {
alert("Profile");
}}
isOpen={isOpen}
/> />
<Transfer <Transfer
isOpen={isOpen} isOpen={isOpenTransfer}
handleClose={(e) => { handleClose={(e) => {
setOpen(!isOpen); setOpenTransfer(!isOpenTransfer);
}} }}
/> />
<div className="wraper"> <div className="wraper">

7
src/components/Calendar/appointments.ts
View File

@ -20,4 +20,11 @@ export const appointments = [
id: 0, id: 0,
location: 'Room 1', 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',
},
]; ];

35
src/components/Calendar/index.tsx
View File

@ -12,13 +12,13 @@ import "moment/locale/pl";
import "./index.scss"; import "./index.scss";
import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
interface CalendarProps { interface CalendarProps {
data: Array<AppointmentModel>; data: Array<AppointmentModel>;
} }
interface CalendarState {currentDate: Date;} interface CalendarState {
currentDate: Date;
}
const formatDayScaleDate = ( const formatDayScaleDate = (
date: moment.MomentInput, date: moment.MomentInput,
@ -107,22 +107,21 @@ export default class Calendar extends React.PureComponent<
const { data } = this.props; const { data } = this.props;
const { currentDate } = this.state; const { currentDate } = this.state;
return ( return (
<Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}> <Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
<ViewState defaultCurrentDate={currentDate} /> <ViewState defaultCurrentDate={currentDate} />
<WeekView <WeekView
startDayHour={8} startDayHour={8}
endDayHour={20} endDayHour={20}
excludedDays={[0, 6]} excludedDays={[0, 6]}
cellDuration={60} cellDuration={60}
dayScaleCellComponent={DayScaleCell} dayScaleCellComponent={DayScaleCell}
timeTableLayoutComponent={TimeTableLayout} timeTableLayoutComponent={TimeTableLayout}
timeTableCellComponent={TimeTableCell} timeTableCellComponent={TimeTableCell}
/> />
<Appointments appointmentComponent={Appointment} /> <Appointments appointmentComponent={Appointment} />
<AppointmentTooltip /> <AppointmentTooltip />
</Scheduler> </Scheduler>
); );
} }
} }

BIN
src/components/TopBar/PL.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

3
src/components/TopBar/index.scss
View File

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

79
src/components/TopBar/index.tsx
View File

@ -4,47 +4,64 @@ import Input from "@material-ui/core/Input";
import Transfer from "./transfer.png"; import Transfer from "./transfer.png";
import Search from "./search.svg"; import Search from "./search.svg";
import UK from "./UK.png"; import UK from "./UK.png";
import PL from "./PL.png";
import User from "./user.png"; import User from "./user.png";
import CloseIcon from "./close.svg"; import CloseIcon from "./close.svg";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
interface TopBarProps { interface TopBarProps {
handleTransfer: (e: React.MouseEvent) => void; handleTransfer: (e: React.MouseEvent) => void;
handleProfile: (e: React.MouseEvent) => void; onLangChange: (lang:boolean) => void;
handleLanguage: (e: React.MouseEvent) => void;
textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => 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> { export default class TopBar extends React.Component<TopBarProps, TopBarState> {
constructor(props: TopBarProps) { constructor(props: TopBarProps) {
super(props); super(props);
this.handleProfile = this.handleProfile.bind(this); 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.handleTransfer = this.handleTransfer.bind(this);
this.state = { 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>) { handleChange(e: React.ChangeEvent<HTMLInputElement>) {
this.props.textChangeHandler(e); this.props.textChangeHandler(e);
} }
handleProfile(e: React.MouseEvent) { handleTransfer(e: React.MouseEvent) {
this.props.handleProfile(e); this.props.handleTransfer(e);
} }
handleLanguage(e: React.MouseEvent) { onLangChange(e: React.MouseEvent) {
this.props.handleLanguage(e); 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() { render() {
@ -59,11 +76,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
<div className="top-bar__tekst"> plan na plan </div> <div className="top-bar__tekst"> plan na plan </div>
</div> </div>
<div className="top-bar__input-div"> <div className="top-bar__input-div">
<img <img className="top-bar__input-icon" alt="search" src={Search} />
className="top-bar__input-icon"
alt="search"
src={Search}
/>
<Input <Input
placeholder="Wyszukaj..." placeholder="Wyszukaj..."
inputProps={{ "aria-label": "description" }} inputProps={{ "aria-label": "description" }}
@ -72,11 +85,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
this.handleChange(e as ChangeEvent<HTMLInputElement>) this.handleChange(e as ChangeEvent<HTMLInputElement>)
} }
/> />
<img <img className="top-bar__input-icon" alt="close" src={CloseIcon} />
className="top-bar__input-icon"
alt="close"
src={CloseIcon}
/>
</div> </div>
<div className="top-bar__icon-box"> <div className="top-bar__icon-box">
<img <img
@ -88,8 +97,8 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
<img <img
className="top-bar__icon" className="top-bar__icon"
alt="change_language" alt="change_language"
src={UK} src={this.state.isPolish ? UK : PL}
onClick={this.handleLanguage} onClick={this.onLangChange}
/> />
<img <img
className="top-bar__icon" className="top-bar__icon"
@ -97,6 +106,18 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
src={User} src={User}
onClick={this.handleProfile} 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>
</div> </div>
); );

48
src/components/Transfer/index.scss
View File

@ -1,16 +1,38 @@
.wrapper{ .wrapper {
display: flex; display: flex;
justify-content: center;
text-align: center; justify-content: center;
align-items: center; text-align: center;
height: 80vh; align-items: center;
} }
.transfer{ .transfer {
display: flex; display: flex;
width: 80%; flex-wrap: wrap;
height: 70%; width: 80%;
background-color: purple; height: 70%;
align-items: center; padding-top: 40px;
justify-content: center; 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{
}
} }

19
src/components/Transfer/index.tsx
View File

@ -17,16 +17,10 @@ export default class Transfer extends React.Component<
super(props); super(props);
this.handleClose = this.handleClose.bind(this); this.handleClose = this.handleClose.bind(this);
this.state = {
isOpen: true,
};
} }
handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) { handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
this.props.handleClose(e); this.props.handleClose(e);
this.setState({
isOpen: false,
});
} }
render() { render() {
@ -40,9 +34,16 @@ export default class Transfer extends React.Component<
aria-describedby="simple-modal-description" aria-describedby="simple-modal-description"
> >
<div className="transfer"> <div className="transfer">
<button type="button" onClick={this.handleClose}> <div className="transfer__give">
Close Modal <div className="transfer__text">Oddam</div>
</button> <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> </div>
</Modal> </Modal>
</div> </div>