reset:
This commit is contained in:
Maciek Głowacki
parent
bce990e1f0
commit
193427a412
|
|
@ -1,23 +0,0 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
44
README.md
44
README.md
|
|
@ -1,44 +0,0 @@
|
|||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.<br />
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
|
||||
The page will reload if you make edits.<br />
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.<br />
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.<br />
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.<br />
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
File diff suppressed because it is too large
Load Diff
53
package.json
53
package.json
|
|
@ -1,53 +0,0 @@
|
|||
{
|
||||
"name": "plannaplan",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"-": "0.0.1",
|
||||
"@devexpress/dx-grid-core": "^2.6.3",
|
||||
"@devexpress/dx-react-core": "^2.6.3",
|
||||
"@devexpress/dx-react-grid": "^2.6.3",
|
||||
"@devexpress/dx-react-grid-material-ui": "^2.6.3",
|
||||
"@devexpress/dx-react-scheduler": "^2.6.3",
|
||||
"@devexpress/dx-react-scheduler-material-ui": "^2.6.3",
|
||||
"@material-ui/core": "^4.10.0",
|
||||
"@material-ui/icons": "^4.9.1",
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.5.0",
|
||||
"@testing-library/user-event": "^7.2.1",
|
||||
"@types/jest": "^24.9.1",
|
||||
"@types/node": "^12.12.42",
|
||||
"@types/react": "^16.9.35",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"install": "^0.13.0",
|
||||
"node-sass": "^4.14.1",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "3.4.1",
|
||||
"sass": "^1.26.5",
|
||||
"to": "^0.2.9",
|
||||
"typescript": "^3.9.3"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"optionalDependencies": {}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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%/logo.svg" />
|
||||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<title>PlanNaPlan</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>Potrzebujesz włączyć JavaScript, żeby otworzyć tę aplikację</br>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
{
|
||||
"short_name": "PlanNaPlan",
|
||||
"name": "PlanNaPlan",
|
||||
"icons": [
|
||||
{
|
||||
"src": "logo.svg"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
14
src/App.scss
14
src/App.scss
|
|
@ -1,14 +0,0 @@
|
|||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.wraper{
|
||||
display: flex;
|
||||
&__calendar{
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
60
src/App.tsx
60
src/App.tsx
|
|
@ -1,60 +0,0 @@
|
|||
import React, { useState, useContext } from "react";
|
||||
import TopBar from "./components/TopBar/";
|
||||
import Transfer from "./components/Transfer/";
|
||||
import "./App.scss";
|
||||
import Schedule from "./components/Calendar/";
|
||||
import { appointments } from "./components/Calendar/appointments";
|
||||
import RightBar from "./components/RightBar";
|
||||
import { lectures } from "./lectures";
|
||||
|
||||
import { BusinessLogicContext } from "./businesslogic/BusinessLogicProvider";
|
||||
|
||||
function App() {
|
||||
const [isOpenTransfer, setOpenTransfer] = useState(false);
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const { logout } = useContext(BusinessLogicContext).actions;
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<TopBar
|
||||
textChangeHandler={(e) => {
|
||||
setText(e.target.value);
|
||||
}}
|
||||
handleTransfer={(e) => {
|
||||
setOpenTransfer(!isOpenTransfer);
|
||||
}}
|
||||
onLangChange={(e) => {
|
||||
console.log(e);
|
||||
}}
|
||||
handleLogout={() => {
|
||||
logout();
|
||||
}}
|
||||
/>
|
||||
<Transfer
|
||||
isOpen={isOpenTransfer}
|
||||
handleClose={(e) => {
|
||||
setOpenTransfer(!isOpenTransfer);
|
||||
}}
|
||||
/>
|
||||
<div className="wraper">
|
||||
<div className="wraper__calendar">
|
||||
<Schedule data={appointments} />
|
||||
</div>
|
||||
<div className="wraper__rightbar">
|
||||
<RightBar
|
||||
lectures={lectures}
|
||||
onGroupMouseOver={(id, name) => {
|
||||
console.log("XD");
|
||||
}}
|
||||
onGroupClick={(id, name) => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>{text}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { User } from "./models/user";
|
||||
import { redirectToCASLoginService, redirectToCASLogoutService } from "./utilites";
|
||||
|
||||
export interface IBusinessLogicContext {
|
||||
user: User | null;
|
||||
actions: {
|
||||
logout: () => void;
|
||||
};
|
||||
}
|
||||
|
||||
export const BusinessLogicContext = React.createContext<IBusinessLogicContext>({
|
||||
user: null,
|
||||
actions: { logout: () => {} },
|
||||
});
|
||||
|
||||
interface Props {}
|
||||
|
||||
export const BusinessLogicProvider: React.FC<Props> = (props) => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
login();
|
||||
}, []);
|
||||
|
||||
const login = () => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const ticket = urlParams.get("ticket");
|
||||
|
||||
if (!ticket) {
|
||||
redirectToCASLoginService();
|
||||
}
|
||||
if (ticket) {
|
||||
setUser({ ticket });
|
||||
}
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
redirectToCASLogoutService();
|
||||
};
|
||||
|
||||
return (
|
||||
<BusinessLogicContext.Provider
|
||||
value={{
|
||||
user: user,
|
||||
actions: {
|
||||
logout: logout,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</BusinessLogicContext.Provider>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export type User = {
|
||||
name?: string;
|
||||
surname?: string;
|
||||
ticket: string | null;
|
||||
};
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export const redirectToCASLogoutService = () => {
|
||||
window.location.replace(`https://cas.amu.edu.pl/cas/logout?service=${window.origin}`);
|
||||
};
|
||||
|
||||
export const redirectToCASLoginService = () => {
|
||||
window.location.replace(`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`);
|
||||
};
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
export const appointments = [
|
||||
{
|
||||
title: 'E-gospodarka - narzędzia i bezpieczeństwo',
|
||||
startDate: new Date(2020, 5, 3, 9, 45),
|
||||
endDate: new Date(2020, 5, 3, 11, 30),
|
||||
id: 0,
|
||||
location: 'Room 1',
|
||||
},
|
||||
{
|
||||
title: 'Algorytmy grafowe',
|
||||
startDate: new Date(2020, 5, 1, 9, 45),
|
||||
endDate: new Date(2020, 5, 1, 11, 30),
|
||||
id: 0,
|
||||
location: 'Room 1',
|
||||
},
|
||||
{
|
||||
title: 'Podstawy programowania deklaratywnego',
|
||||
startDate: new Date(2020, 5, 1, 9, 45),
|
||||
endDate: new Date(2020, 5, 1, 11, 30),
|
||||
id: 0,
|
||||
location: 'Room 1',
|
||||
},
|
||||
{
|
||||
title: 'Statystyka',
|
||||
startDate: new Date(2020, 5, 1, 18, 45),
|
||||
endDate: new Date(2020, 5, 1, 20, 0),
|
||||
id: 0,
|
||||
location: 'Room 1',
|
||||
},
|
||||
];
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import * as React from "react";
|
||||
import { ViewState } from "@devexpress/dx-react-scheduler";
|
||||
import { AppointmentModel } from "@devexpress/dx-react-scheduler";
|
||||
import { Scheduler, WeekView, Appointments, AppointmentTooltip } from "@devexpress/dx-react-scheduler-material-ui";
|
||||
import moment from "moment";
|
||||
import "moment/locale/pl";
|
||||
import "./index.scss";
|
||||
import { makeStyles, createStyles } from "@material-ui/core/styles";
|
||||
|
||||
interface CalendarProps {
|
||||
data: Array<AppointmentModel>;
|
||||
}
|
||||
|
||||
interface CalendarState {
|
||||
currentDate: Date;
|
||||
}
|
||||
|
||||
const formatDayScaleDate = (date: moment.MomentInput, nextOptions: Intl.DateTimeFormatOptions): string => {
|
||||
const momentDate = moment(date).locale("pl");
|
||||
return momentDate.format(nextOptions.weekday ? "dddd" : " ").toUpperCase();
|
||||
};
|
||||
|
||||
const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
dayScaleCell: {
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
timeTableLayout: {
|
||||
border: "1px solid rgba(224, 224, 224, 1);",
|
||||
borderCollapse: "separate",
|
||||
},
|
||||
appointmentLayer: {
|
||||
borderRadius: 15,
|
||||
marginLeft: 5,
|
||||
textAlign: "center",
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const DayScaleCell = ({ formatDate, ...restProps }: WeekView.DayScaleCellProps) => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<WeekView.DayScaleCell {...restProps} formatDate={formatDayScaleDate} today={false} className={classes.dayScaleCell} />
|
||||
);
|
||||
};
|
||||
|
||||
const TimeTableLayout = ({ ...restProps }: WeekView.TimeTableLayoutProps) => {
|
||||
const classes = useStyles();
|
||||
return <WeekView.TimeTableLayout {...restProps} className={classes.timeTableLayout} />;
|
||||
};
|
||||
|
||||
const Appointment = ({ ...restProps }: Appointments.AppointmentProps) => {
|
||||
const classes = useStyles();
|
||||
return <Appointments.Appointment {...restProps} className={classes.appointmentLayer} />;
|
||||
};
|
||||
|
||||
export default class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
|
||||
constructor(props: CalendarProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
currentDate: new Date("2020-06-01"),
|
||||
};
|
||||
}
|
||||
|
||||
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}
|
||||
/>
|
||||
<Appointments appointmentComponent={Appointment} />
|
||||
<AppointmentTooltip />
|
||||
</Scheduler>
|
||||
);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 535 B |
|
|
@ -1,38 +0,0 @@
|
|||
.class {
|
||||
display: flex;
|
||||
min-height: 50px;
|
||||
background-color: rgb(100, 181, 246) !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
padding-top:10px;
|
||||
padding-bottom:10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
align-items: stretch;
|
||||
&__group{
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
transition: 1s;
|
||||
background-color: #8BC8FB;
|
||||
}
|
||||
}
|
||||
&__name{
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
&__expandIcon{
|
||||
margin-top: 5px;
|
||||
width: 20px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
&__expandIconRotate{
|
||||
margin-top: 5px;
|
||||
width: 20px;
|
||||
transition: 0.5s;
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import React from "react";
|
||||
import "./index.scss";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import ExpandIcon from "./expand.png";
|
||||
import { Lecture } from "../../../lectures";
|
||||
|
||||
interface LectureCardProps {
|
||||
onGroupMouseOver: (id: string, name: string) => void;
|
||||
onGroupClick: (id: string, name: string) => void;
|
||||
onCardClick: (e: React.MouseEvent) => void;
|
||||
lecture: Lecture;
|
||||
id: string;
|
||||
isSelected: boolean;
|
||||
}
|
||||
|
||||
export default function LectureCard({ onGroupMouseOver, onGroupClick, onCardClick, lecture, id, isSelected }: LectureCardProps) {
|
||||
return (
|
||||
<div className="class" onClick={onCardClick} id={id}>
|
||||
<div className="class__name">{lecture.name}</div>
|
||||
<Collapse in={isSelected} timeout="auto" unmountOnExit>
|
||||
{lecture.groups.map((group, index) => (
|
||||
<div
|
||||
className="class__group"
|
||||
key={index}
|
||||
onMouseOver={() => onGroupMouseOver(group.id, lecture.name)}
|
||||
onClick={() => onGroupClick(group.id, lecture.name)}
|
||||
>
|
||||
<p>
|
||||
{group.id} {group.day} {group.time} {group.room} <br></br> {group.lecturer}
|
||||
</p>{" "}
|
||||
</div>
|
||||
))}
|
||||
</Collapse>
|
||||
<div onClick={onCardClick} id={id}>
|
||||
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? "Rotate" : ""}`} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.right-bar {
|
||||
padding-top: 10px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
text-align: center;
|
||||
font-family: Lato;
|
||||
&__text {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
height:85vh;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import React, { useState, useContext } from "react";
|
||||
import "./index.scss";
|
||||
import { Lecture } from "../../lectures";
|
||||
import LectureCard from "./LectureCard";
|
||||
import { BusinessLogicContext } from "../../businesslogic/BusinessLogicProvider";
|
||||
|
||||
interface RightBarProps {
|
||||
onGroupMouseOver: (id: string, name: string) => void;
|
||||
onGroupClick: (id: string, name: string) => void;
|
||||
lectures: Array<Lecture>;
|
||||
}
|
||||
|
||||
export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: RightBarProps) {
|
||||
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
|
||||
|
||||
const ticket = useContext(BusinessLogicContext).user?.ticket;
|
||||
|
||||
const onCardClick = (e: React.MouseEvent) => {
|
||||
const target = e.currentTarget as HTMLElement;
|
||||
selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="right-bar">
|
||||
<p>{ticket}</p>
|
||||
<div className="right-bar__text">
|
||||
Hubert Wrzesiński<br></br>
|
||||
Semestr zimowy 2020/2021
|
||||
</div>
|
||||
{lectures.map((lecture, index) => (
|
||||
<LectureCard
|
||||
lecture={lecture}
|
||||
key={index}
|
||||
id={index.toString()}
|
||||
onGroupMouseOver={onGroupMouseOver}
|
||||
onGroupClick={onGroupClick}
|
||||
onCardClick={onCardClick}
|
||||
isSelected={selectedCardId === index.toString()}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
|
|
@ -1,36 +0,0 @@
|
|||
import { Menu, MenuItem } from "@material-ui/core";
|
||||
import React, { FC } from "react";
|
||||
|
||||
interface ProfileProps {
|
||||
anchorEl: HTMLElement | null;
|
||||
handleClose: () => void;
|
||||
handleLogout: () => void;
|
||||
}
|
||||
|
||||
export const Profile: FC<ProfileProps> = ({
|
||||
anchorEl,
|
||||
handleClose,
|
||||
handleLogout,
|
||||
...restProps
|
||||
}) => {
|
||||
return (
|
||||
<Menu
|
||||
className="top-bar__menu"
|
||||
id="simple-menu"
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<MenuItem>Profile</MenuItem>
|
||||
<MenuItem>My account</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleLogout();
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
|
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M38 12.83l-2.83-2.83-11.17 11.17-11.17-11.17-2.83 2.83 11.17 11.17-11.17 11.17 2.83 2.83 11.17-11.17 11.17 11.17 2.83-2.83-11.17-11.17z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>
|
||||
|
Before Width: | Height: | Size: 297 B |
|
|
@ -1,71 +0,0 @@
|
|||
.top-bar {
|
||||
background-color: #ffdc61;
|
||||
height: 80px;
|
||||
padding: 5px;
|
||||
font-family: comic sans MS;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 0.5;
|
||||
justify-content: flex-start;
|
||||
|
||||
&-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
&-div {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
&-field {
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
&-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-grow: 1.5;
|
||||
}
|
||||
}
|
||||
&__menu{
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 670px) {
|
||||
.top-bar {
|
||||
&__tekst {
|
||||
display: none;
|
||||
}
|
||||
&__icon {
|
||||
width: 35px;
|
||||
}
|
||||
&__logo-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
&__input-icon {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
import React, { ChangeEvent } from "react";
|
||||
import "./index.scss";
|
||||
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 { Profile } from "./Profile";
|
||||
|
||||
interface TopBarProps {
|
||||
handleTransfer: (e: React.MouseEvent) => void;
|
||||
onLangChange: (lang: boolean) => void;
|
||||
handleLogout: () => void;
|
||||
textChangeHandler: (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => void;
|
||||
}
|
||||
|
||||
interface TopBarState {
|
||||
isPolish: boolean;
|
||||
anchorEl: HTMLElement | null;
|
||||
}
|
||||
|
||||
export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
||||
constructor(props: TopBarProps) {
|
||||
super(props);
|
||||
this.handleProfile = this.handleProfile.bind(this);
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.onLangChange = this.onLangChange.bind(this);
|
||||
this.handleTransfer = this.handleTransfer.bind(this);
|
||||
this.state = {
|
||||
isPolish: true,
|
||||
anchorEl: null,
|
||||
};
|
||||
}
|
||||
|
||||
handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
|
||||
this.props.textChangeHandler(e);
|
||||
}
|
||||
|
||||
handleTransfer(e: React.MouseEvent) {
|
||||
this.props.handleTransfer(e);
|
||||
}
|
||||
|
||||
onLangChange(e: React.MouseEvent) {
|
||||
this.setState({
|
||||
isPolish: !this.state.isPolish,
|
||||
});
|
||||
this.props.onLangChange(this.state.isPolish);
|
||||
}
|
||||
|
||||
handleProfile(event: React.MouseEvent<HTMLImageElement>) {
|
||||
this.setState({
|
||||
anchorEl: event.currentTarget,
|
||||
});
|
||||
}
|
||||
|
||||
handleClose() {
|
||||
this.setState({
|
||||
anchorEl: null,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="top-bar">
|
||||
<div className="top-bar__logo">
|
||||
<img
|
||||
className="top-bar__logo-image"
|
||||
alt="logo"
|
||||
src="https://plannaplan.pl/img/logo.svg"
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
<Input
|
||||
placeholder="Wyszukaj..."
|
||||
inputProps={{ "aria-label": "description" }}
|
||||
className="top-bar__input-field"
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
<img
|
||||
className="top-bar__input-icon"
|
||||
alt="close"
|
||||
src={CloseIcon}
|
||||
/>
|
||||
</div>
|
||||
<div className="top-bar__icon-box">
|
||||
<img
|
||||
className="top-bar__icon"
|
||||
alt="transfer"
|
||||
src={Transfer}
|
||||
onClick={this.handleTransfer}
|
||||
/>
|
||||
<img
|
||||
className="top-bar__icon"
|
||||
alt="change_language"
|
||||
src={this.state.isPolish ? UK : PL}
|
||||
onClick={this.onLangChange}
|
||||
/>
|
||||
<img
|
||||
className="top-bar__icon"
|
||||
alt="profile"
|
||||
src={User}
|
||||
onClick={this.handleProfile}
|
||||
/>
|
||||
<Profile
|
||||
anchorEl={this.state.anchorEl}
|
||||
handleClose={this.handleClose}
|
||||
handleLogout={this.props.handleLogout}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M344.5,298c15-23.6,23.8-51.6,23.8-81.7c0-84.1-68.1-152.3-152.1-152.3C132.1,64,64,132.2,64,216.3 c0,84.1,68.1,152.3,152.1,152.3c30.5,0,58.9-9,82.7-24.4l6.9-4.8L414.3,448l33.7-34.3L339.5,305.1L344.5,298z M301.4,131.2 c22.7,22.7,35.2,52.9,35.2,85c0,32.1-12.5,62.3-35.2,85c-22.7,22.7-52.9,35.2-85,35.2c-32.1,0-62.3-12.5-85-35.2 c-22.7-22.7-35.2-52.9-35.2-85c0-32.1,12.5-62.3,35.2-85c22.7-22.7,52.9-35.2,85-35.2C248.5,96,278.7,108.5,301.4,131.2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 808 B |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
|
|
@ -1,53 +0,0 @@
|
|||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.transfer {
|
||||
display: flex;
|
||||
outline:none;
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
padding-top: 40px;
|
||||
background: rgba(255, 220, 97, 0.6);
|
||||
|
||||
border: 3px solid #000000;
|
||||
border-radius: 15px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3ch;
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-grow: 1;
|
||||
}
|
||||
&__right {
|
||||
flex-grow: 4;
|
||||
}
|
||||
&__text {
|
||||
font-family: Lato;
|
||||
font-size: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&__input {
|
||||
width: 300px;
|
||||
height: 45px;
|
||||
background: #ffc400;
|
||||
outline:none;
|
||||
border: 1px solid;
|
||||
border-radius: 22px ;
|
||||
padding: 10px;
|
||||
font-size: 24px;
|
||||
transition-duration: 0.3s;
|
||||
|
||||
}
|
||||
input:focus {
|
||||
-webkit-box-shadow: 0px 0px 18px 8px #ffae00;
|
||||
-moz-box-shadow: 0px 0px 18px 8px #ffae00;
|
||||
box-shadow: 0px 0px 18px 8px #ffae00;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import React from "react";
|
||||
import Modal from "@material-ui/core/Modal";
|
||||
import "./index.scss";
|
||||
import Fade from '@material-ui/core/Fade';
|
||||
|
||||
interface TransferProps {
|
||||
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
interface TransferState {}
|
||||
|
||||
export default class Transfer extends React.Component<
|
||||
TransferProps,
|
||||
TransferState
|
||||
> {
|
||||
constructor(props: TransferProps) {
|
||||
super(props);
|
||||
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
}
|
||||
|
||||
handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
|
||||
this.props.handleClose(e);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Modal
|
||||
className="wrapper"
|
||||
open={this.props.isOpen}
|
||||
onClose={this.handleClose}
|
||||
aria-labelledby="simple-modal-title"
|
||||
aria-describedby="simple-modal-description"
|
||||
>
|
||||
<Fade in={this.props.isOpen}>
|
||||
<div className="transfer">
|
||||
<div className="transfer__left">
|
||||
{/* <button className="transfer__add">chuj</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>
|
||||
<div className="transfer__right">
|
||||
<div className="transfer__proposition"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
import { BusinessLogicProvider } from "./businesslogic/BusinessLogicProvider";
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<BusinessLogicProvider>
|
||||
<App />
|
||||
</BusinessLogicProvider>
|
||||
</>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
export interface Lecture {
|
||||
name: string;
|
||||
groups: Array<Group>;
|
||||
}
|
||||
|
||||
interface Group {
|
||||
id: string;
|
||||
day: string;
|
||||
time: string;
|
||||
lecturer: string;
|
||||
room: string;
|
||||
}
|
||||
|
||||
export const lectures: Array<Lecture> = [
|
||||
{
|
||||
name: "E-gospodarka - narzędzia i bezpieczeństwo",
|
||||
groups: [
|
||||
{
|
||||
id: "1CB",
|
||||
day: "Pn",
|
||||
time: "10:00",
|
||||
lecturer: "dr inż. Michał Ren",
|
||||
room: "A2-01",
|
||||
},
|
||||
{
|
||||
id: "1XD",
|
||||
day: "Wt",
|
||||
time: "12:00",
|
||||
lecturer: "dr inż. Michał Ren",
|
||||
room: "A3-01",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Statystyka",
|
||||
groups: [
|
||||
{
|
||||
id: "2CB",
|
||||
day: "Pn",
|
||||
time: "10:00",
|
||||
lecturer: "dr inż. Michał Ren",
|
||||
room: "A2-01",
|
||||
},
|
||||
{
|
||||
id: "2XD",
|
||||
day: "Wt",
|
||||
time: "12:00",
|
||||
lecturer: "dr inż. Michał Ren",
|
||||
room: "A3-01",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="react-scripts" />
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Button from '@material-ui/core/Button';
|
||||
|
||||
const styles = {
|
||||
root: {
|
||||
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
|
||||
border: 0,
|
||||
borderRadius: 3,
|
||||
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
|
||||
color: 'white',
|
||||
height: 48,
|
||||
padding: '0 30px',
|
||||
},
|
||||
};
|
||||
|
||||
function HigherOrderComponent(props: { classes: any; }) {
|
||||
const { classes } = props;
|
||||
return <Button className={classes.root}>Higher-order component</Button>;
|
||||
}
|
||||
|
||||
HigherOrderComponent.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default withStyles(styles)(HigherOrderComponent);
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
Loading…
Reference in New Issue