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

jako tako

Browse Source
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
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": ".",

24
src/App.tsx
View File

@ -7,8 +7,11 @@ 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 [isOpenProfile, setOpenProfile] = useState(false);
const [isPolish, setLanguage] = useState(true);
const [text, setText] = useState(""); const [text, setText] = useState("");
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
return ( return (
<div className="App"> <div className="App">
@ -17,20 +20,27 @@ function App() {
setText(e.target.value); setText(e.target.value);
}} }}
handleTransfer={(e) => { handleTransfer={(e) => {
setOpen(!isOpen); setOpenTransfer(!isOpenTransfer);
}} }}
handleLanguage={(e) => { handleLanguage={(e) => {
alert("Language"); setLanguage(!isPolish);
}} }}
handleProfile={(e) => { 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 <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',
},
]; ];

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

@ -1,24 +1,25 @@
import * as React from "react"; 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 { AppointmentModel } from "@devexpress/dx-react-scheduler";
import { import {
Scheduler, Scheduler,
WeekView, WeekView,
Appointments, Appointments,
AppointmentTooltip, AppointmentTooltip,
AppointmentForm,
} from "@devexpress/dx-react-scheduler-material-ui"; } from "@devexpress/dx-react-scheduler-material-ui";
import moment from "moment"; import moment from "moment";
import "moment/locale/pl"; 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,
@ -103,14 +104,20 @@ export default class Calendar extends React.PureComponent<
}; };
} }
commitChanges() {
}
render() { render() {
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} />
<EditingState
onCommitChanges={this.commitChanges}
/>
<WeekView <WeekView
startDayHour={8} startDayHour={8}
endDayHour={20} endDayHour={20}
@ -120,8 +127,10 @@ export default class Calendar extends React.PureComponent<
timeTableLayoutComponent={TimeTableLayout} timeTableLayoutComponent={TimeTableLayout}
timeTableCellComponent={TimeTableCell} timeTableCellComponent={TimeTableCell}
/> />
<IntegratedEditing/>
<Appointments appointmentComponent={Appointment} /> <Appointments appointmentComponent={Appointment} />
<AppointmentTooltip /> <AppointmentTooltip />
<AppointmentForm/>
</Scheduler> </Scheduler>
); );
} }

BIN
src/components/TopBar/3x.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

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 {

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

@ -4,49 +4,58 @@ 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; handleProfile: (e: React.MouseEvent) => void;
handleClose: (e: React.MouseEvent) => void;
handleLanguage: (e: React.MouseEvent) => void; handleLanguage: (e: React.MouseEvent) => void;
textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void; textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
isOpen: boolean; isOpenTransfer: boolean;
isOpenProfile: boolean;
isPolish: boolean;
anchorEl: null | HTMLElement;
} }
interface TopBarState {} interface TopBarState {}
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.handleClose = this.handleProfile.bind(this);
this.handleLanguage = this.handleLanguage.bind(this); this.handleLanguage = this.handleLanguage.bind(this);
this.handleTransfer = this.handleTransfer.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>) { 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) { handleLanguage(e: React.MouseEvent) {
this.props.handleLanguage(e); this.props.handleLanguage(e);
} }
handleProfile(e: React.MouseEvent) {
this.props.handleProfile(e);
}
handleClose(e: React.MouseEvent) {
this.props.handleClose(e);
}
render() { render() {
return ( return (
<div className="top-bar"> <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 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 +77,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,7 +89,7 @@ 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.props.isPolish ? UK : PL}
onClick={this.handleLanguage} onClick={this.handleLanguage}
/> />
<img <img
@ -97,6 +98,17 @@ 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.props.anchorEl}
keepMounted
open={this.props.isOpenProfile}
onClose={this.handleClose}
>
<MenuItem>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem>Logout</MenuItem>
</Menu>
</div> </div>
</div> </div>
); );

6
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() {