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

admin panel began

This commit is contained in:
wrzesinski-hubert 2020-11-20 16:55:37 +01:00
parent aa519c5e00
commit 5d02e18358
7 changed files with 118 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/history.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 551.13 551.13" height="512" viewBox="0 0 551.13 551.13" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m275.531 172.228-.05 120.493c0 4.575 1.816 8.948 5.046 12.177l86.198 86.181 24.354-24.354-81.153-81.136.05-113.361z"/><path d="m310.011 34.445c-121.23 0-221.563 90.033-238.367 206.674h-71.644l86.114 86.114 86.114-86.114h-65.78c16.477-97.589 101.355-172.228 203.563-172.228 113.966 0 206.674 92.707 206.674 206.674s-92.707 206.674-206.674 206.674c-64.064 0-123.469-28.996-162.978-79.555l-27.146 21.192c46.084 58.968 115.379 92.808 190.124 92.808 132.955 0 241.119-108.181 241.119-241.119s-108.164-241.119-241.119-241.12z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 684 B

1
src/assets/plan.svg Normal file
View File

@ -0,0 +1 @@
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m6 0h-5c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1h5c.552 0 1-.448 1-1v-5c0-.552-.448-1-1-1z"/><path d="m15.5 6v-5c0-.552-.448-1-1-1h-5c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1h5c.552 0 1-.448 1-1z"/><path d="m15.5 9.5c0-.552-.448-1-1-1h-6-1.5-6c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1h13.5c.552 0 1-.448 1-1z"/><path d="m23 0h-5c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1h5c.552 0 1-.448 1-1v-5c0-.552-.448-1-1-1z"/><path d="m0 18v5c0 .552.448 1 1 1h13.5c.552 0 1-.448 1-1v-5c0-.552-.448-1-1-1h-13.5c-.552 0-1 .448-1 1z"/><path d="m18 15.5h5c.552 0 1-.448 1-1v-5c0-.552-.448-1-1-1h-5c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1z"/><path d="m18 24h5c.552 0 1-.448 1-1v-5c0-.552-.448-1-1-1h-5c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 846 B

53
src/assets/statistics.svg Normal file
View File

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 478 478" style="enable-background:new 0 0 478 478;" xml:space="preserve">
<g>
<g>
<path d="M119.5,187.75H17.1c-9.4,0-17,7.6-17.1,17.1v256c0,9.5,7.7,17.1,17.1,17.1h102.4c9.5,0,17.1-7.7,17.1-17.1v-256
C136.6,195.35,128.9,187.75,119.5,187.75z"/>
</g>
</g>
<g>
<g>
<path d="M290.2,0.05H187.8c-9.4,0-17.1,7.6-17.1,17v443.8c0,9.5,7.7,17.1,17.1,17.1h102.4c9.5,0,17.1-7.7,17.1-17.1V17.15
C307.3,7.65,299.6,0.05,290.2,0.05z"/>
</g>
</g>
<g>
<g>
<path d="M460.9,136.55H358.5c-9.5,0-17.1,7.6-17.1,17.1v307.2c0,9.5,7.7,17.1,17.1,17.1h102.4c9.5,0,17.1-7.7,17.1-17.1v-307.2
C478,144.15,470.3,136.55,460.9,136.55z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

58
src/components/Admin.tsx Normal file
View File

@ -0,0 +1,58 @@
import React, { useState} from 'react';
import styled from 'styled-components/macro';
import Plan from '../assets/plan.svg';
import History from '../assets/history.svg';
import Statistics from '../assets/statistics.svg';
const LeftSide = styled.div`
height: 100%;
display: flex;
flex-direction: column;
background-color: white;
`;
interface LeftPanelElement{
choose:boolean;
}
const LeftPanelElement = styled.div<LeftPanelElement>`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
padding: 20px;
cursor: pointer;
background-color: ${({choose})=>(choose == true ? `blue` : "")};
`;
const Icon = styled.img`
width: 40px;
margin: 5px;
`;
export const Admin = () => {
const[choose, setChoose] = useState(false);
const handleClick = ()=>{
setChoose(true);
}
return (
<LeftSide>
<LeftPanelElement choose={choose} onClick={handleClick}>
<Icon alt="profile" src={Plan} />
Pokaż plan
</LeftPanelElement>
<LeftPanelElement choose={choose} onClick={handleClick}>
<Icon alt="history" src={History} />
Historia Zmian
</LeftPanelElement>
<LeftPanelElement choose={choose} onClick={handleClick}>
<Icon alt="statistics" src={Statistics} />
Statystyki
</LeftPanelElement>
</LeftSide>
);
};

7
src/components/App.tsx
View File

@ -1,5 +1,6 @@
import React, { useState, useContext } from 'react';
import Topbar from './Topbar';
import {Admin} from './Admin';
import { Transfer } from './Transfer';
import { Scheduler } from './Scheduler';
import { Rightbar } from './Rightbar';
@ -9,7 +10,6 @@ const Wrapper = styled.div`
display: flex;
height: calc(100vh - 80px);
background-color: #ECEEF4;
padding: 20px;
`;
export const App = () => {
@ -24,8 +24,9 @@ export const App = () => {
<Topbar handleTransfer={handleTransfer} />
<Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
<Wrapper>
<Scheduler />
<Rightbar />
<Admin/>
{/* <Scheduler />
<Rightbar /> */}
</Wrapper>
</>
);

1
src/components/Scheduler.tsx
View File

@ -11,6 +11,7 @@ const SchedulerWrapper = styled.div`
padding: 10px 40px 25px 10px;
border-radius: 5px;
margin-right: 20px;
margin-left:20px;
flex-direction: column;
justify-content: center;
align-items: center;

6
src/components/Topbar.tsx
View File

@ -1,6 +1,4 @@
import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react';
import Transfer from '../assets/transfer.png';
import Search from '../assets/search.svg';
import { ReactComponent as Close } from '../assets/close.svg';
import ProfileIcon from '../assets/account.svg';
import { Profile } from './Profile';
@ -103,10 +101,6 @@ const Icon = styled.img`
}
`;
interface TopbarProps {
handleTransfer: (e: MouseEvent) => void;
}