Skip to content

Commit 123cc84

Browse files
javadoffuadjavadoffuad
committed
added page new Card
1 parent fb02c5d commit 123cc84

File tree

14 files changed

+296
-80
lines changed

14 files changed

+296
-80
lines changed

‎jsconfig.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES6"
4+
},
5+
"include": [
6+
"src/**/*"
7+
]
8+
}

‎package-lock.json

+62
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@
4646
"scripts": {
4747
"start": "node scripts/start.js",
4848
"build": "node scripts/build.js",
49-
"test": "node scripts/test.js --env=jsdom"
49+
"test": "node scripts/test.js --env=jsdom",
50+
"dev": "cross-env NODE_PATH=src npm run start"
5051
},
5152
"jest": {
5253
"collectCoverageFrom": [
@@ -89,5 +90,8 @@
8990
},
9091
"eslintConfig": {
9192
"extends": "react-app"
93+
},
94+
"devDependencies": {
95+
"gh-pages": "^1.1.0"
9296
}
9397
}

‎src/components/CardControls.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import React from 'react';
33
export default (props) => {
44
return <div className="pane-controls">
55
<div className="menu menu-horizontal">
6-
<button id="card-edit" className="menu-item inactive" title="Редактировать карту"><i className="icon icon-edit"></i></button>
7-
<button id="card-delete" className="menu-item inactive" title="Удалить карту"><i className="icon icon-delete"></i></button>
8-
<a href="../card/add" id="card-new" className="menu-item" title="Добавить карту"><i className="icon icon-new"></i></a>
6+
{props.children}
97
</div>
108
</div>
119
}

‎src/components/LatestOperationItem.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ export default (props) => {
44
return <div className="item" data-id="859804" data-type="DIRECT" data-service="1" data-card="6A82AE9CEDCC443286F7BCA463803736" data-index="odd">
55
<div className="txt-center">
66
<div className="template-header">
7-
<div className="name" title="Azercell SimSim">Azercell SimSim</div>
7+
<div className="name" title="Azercell SimSim">{props.title}</div>
88
<div className="amount">
9-
<span className="span-amount">1.00</span>
10-
<span className="span-currency" data-currency="944">AZN</span>
9+
<span className="span-amount">{props.amount}</span>
10+
<span className="span-currency" data-currency="944">{props.currency}</span>
1111
</div>
1212
</div>
1313
<div className="template-body">
1414
<div className="template-desc">
1515
<div className="row card-number">
16-
<div className="payment__label label-value">51 6927496</div>
16+
<div className="payment__label label-value">{props.code}</div>
1717
</div>
1818
<div className="row card-number">
19-
<div className="payment__label label-name date">28 сентября 2017, 20:02:36</div>
19+
<div className="payment__label label-name date">{props.createdAt}</div>
2020
</div>
2121
</div>
2222
<div className="repay"><a>Оплатить<i>→</i></a></div>

‎src/components/Main.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import React from 'react';
22
import { Switch, Route } from 'react-router-dom';
33

4-
import Cards from '../containers/Cards';
5-
import History from '../containers/History';
6-
import Templates from '../containers/Templates';
4+
import Cards from 'containers/Cards';
5+
import History from 'containers/History';
6+
import Templates from 'containers/Templates';
7+
import NewCard from 'containers/NewCard';
78
//import Settings from '../containers/Settings';
89

910
export default () => {
1011
return (
1112
<Switch>
1213
<Route exact path='/' component={Cards} />
14+
<Route exact path='/cards' component={Cards} />
15+
<Route path='/cards/add' component={NewCard} />
1316
<Route path='/history' component={History}/>
14-
<Route path='/template' component={Templates}/>
17+
<Route path='/template' component={Templates} />
1518
{/*<Route path='/settings' component={Settings}/>*/}
1619
</Switch>
1720
)

‎src/components/RightPaneContainer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import Header from './Header';
3+
import Header from 'components/Header';
44

55
export default (props) => {
66
return(

‎src/containers/App/App.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react';
22

3-
import LeftNavigation from '../../components/LeftNavigation';
4-
import Main from '../../components/Main';
3+
import LeftNavigation from 'components/LeftNavigation';
4+
import Main from 'components/Main';
55

66
//import './App.css';
77

‎src/containers/Cards/index.js

+48-53
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,56 @@
1-
import React from 'react';
1+
import React, {Component} from 'react';
22

3-
import Header from '../../components/Header';
4-
import RightPaneContainer from '../../components/RightPaneContainer';
5-
import Card from '../../components/Card';
6-
import CardControls from '../../components/CardControls';
7-
import LatestOperationItem from '../../components/LatestOperationItem';
3+
import { Link } from 'react-router-dom';
84

9-
const cardData = [
10-
{
11-
id: 1,
12-
title: 'AccessBank debit card',
13-
color: 'rgb(232, 110, 106)',
14-
pan: '454588******5633',
15-
balance: 200,
16-
currency: 'AZN',
17-
currencyCode: '944',
18-
},
19-
{
20-
id: 2,
21-
title: 'Expressbank Gold',
22-
color: 'rgb(94, 116, 186)',
23-
pan: '886381******6729',
24-
balance: 100,
25-
currency: 'AZN',
26-
currencyCode: '944',
27-
}
28-
]
5+
import Header from 'components/Header';
6+
import RightPaneContainer from 'components/RightPaneContainer';
7+
import Card from 'components/Card';
8+
import CardControls from 'components/CardControls';
9+
import LatestOperationItem from 'components/LatestOperationItem';
10+
11+
import { cardData, latestPaymentData } from 'helpers';
2912

30-
export default () => {
31-
return (
32-
<div className="pane">
33-
<div className="pane pane-main">
34-
<Header title="Cards">
35-
<CardControls />
36-
</Header>
37-
<div className="pane pane-body">
38-
<div id="cards" className="pane pane-cards ui-sortable">
39-
{
40-
cardData.map((card, index) =>
41-
<Card key={index} {...card}/>
42-
)
43-
}
13+
export default class Cards extends Component {
14+
render() {
15+
return (
16+
<div className="pane">
17+
<div className="pane pane-main">
18+
<Header title="Cards">
19+
<CardControls>
20+
<button id="card-edit" className="menu-item inactive" title="Редактировать карту"><i className="icon icon-edit"></i></button>
21+
<button id="card-delete" className="menu-item inactive" title="Удалить карту"><i className="icon icon-delete"></i></button>
22+
<Link to="/cards/add" id="card-new" className="menu-item" title="Добавить карту">
23+
<i className="icon icon-new"></i>
24+
</Link>
25+
</CardControls>
26+
</Header>
27+
<div className="pane pane-body">
28+
<div id="cards" className="pane pane-cards ui-sortable">
29+
{
30+
cardData.map((card, index) =>
31+
<Card key={index} {...card}/>
32+
)
33+
}
34+
</div>
4435
</div>
4536
</div>
46-
</div>
47-
<RightPaneContainer title="Operations">
48-
<div className="pane pane-right-fixed">
49-
<div className="latest-payment-header">
50-
<h2 className="title">Last payments</h2>
37+
<RightPaneContainer title="Operations">
38+
<div className="pane pane-right-fixed">
39+
<div className="latest-payment-header">
40+
<h2 className="title">Last payments</h2>
41+
</div>
5142
</div>
52-
</div>
53-
<div id="latest-operation-container" className="pane pane-item-container">
54-
<div className="list list-right">
55-
<LatestOperationItem />
43+
<div id="latest-operation-container" className="pane pane-item-container">
44+
<div className="list list-right">
45+
{
46+
latestPaymentData.map((item, index) =>
47+
<LatestOperationItem key={index} {...item}/>
48+
)
49+
}
50+
</div>
5651
</div>
57-
</div>
58-
</RightPaneContainer>
59-
</div>
60-
)
52+
</RightPaneContainer>
53+
</div>
54+
)
55+
}
6156
}

‎src/containers/History/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22

3-
import Header from '../../components/Header';
4-
import RightPaneContainer from '../../components/RightPaneContainer';
5-
import RightFixedPane from '../../components/RightFixedPane';
6-
import SearchPane from '../../components/SearchPane';
3+
import Header from 'components/Header';
4+
import RightPaneContainer from 'components/RightPaneContainer';
5+
import RightFixedPane from 'components/RightFixedPane';
6+
import SearchPane from 'components/SearchPane';
77

88
export default () => {
99
return (

‎src/containers/NewCard.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react';
2+
3+
import Header from 'components/Header';
4+
5+
export default () => {
6+
return (
7+
<div className="pane" style={{flex: 1}}>
8+
<div className="pane pane-main">
9+
<Header title="New card" />
10+
<div className="pane pane-body">
11+
<div class="pane pane-newcard" id="primary_block">
12+
<div id="newcard-form">
13+
<div class="pane newcard-info-block">
14+
<div class="pane newcard-txt">
15+
<h2 class="pane title">Ввести карточную информацию</h2>
16+
<div class="pane desc-txt">
17+
<p>Количество карт неограниченно.</p>
18+
<p>Можно добавить желаемое число карт. <a href="https://cib.az#bl1-f">Подробная информация</a></p>
19+
</div>
20+
</div>
21+
<div class="pane newcard-sprite">
22+
<div class="pane newcard card-front" id="cardfront" style={{backgroundColor: "rgb(138, 190, 107)", margin: "0px 0px 0px 55px"}}>
23+
<div class="pane input-sprite multiple">
24+
<div class="input-block">
25+
<div class="tooltip" data-pos="top-left">Номер карты (только цифры)</div>
26+
<input type="tel" placeholder="0000" maxlength="4" id="pan1" data-next="pan2" tabindex="1" autocomplete="off" />
27+
</div>
28+
<div class="input-block">
29+
<div class="tooltip" data-pos="top-left">Номер карты (только цифры)</div>
30+
<input type="tel" placeholder="0000" maxlength="4" id="pan2" data-next="pan3" data-prev="pan1" tabindex="2" autocomplete="off" />
31+
</div>
32+
<div class="input-block">
33+
<div class="tooltip" data-pos="top-left">Номер карты (только цифры)</div>
34+
<input type="tel" placeholder="0000" maxlength="4" id="pan3" data-next="pan4" data-prev="pan2" tabindex="3" autocomplete="off" />
35+
</div>
36+
<div class="input-block">
37+
<div class="tooltip" data-pos="top-left">Номер карты (только цифры)</div>
38+
<input type="tel" placeholder="0000" maxlength="4" id="pan4" data-next="expiry" data-prev="pan3" tabindex="4" autocomplete="off" />
39+
</div>
40+
</div>
41+
<div class="pane input-sprite right">
42+
<div class="input-block expry-block">
43+
<div class="tooltip" data-pos="top-left">Срок действия (10/12)</div>
44+
<input type="tel" placeholder="00/00" maxlength="5" id="expiry" data-next="cvv" data-prev="pan4" tabindex="5" autocomplete="off" />
45+
</div>
46+
</div>
47+
<div class="pane input-sprite">
48+
<div class="input-block">
49+
<div class="tooltip" data-pos="top-left">Имя карты</div>
50+
<input class="name" type="text" placeholder="Имя карты" id="cardname" data-prev="cvv" tabindex="7" autocomplete="off" />
51+
</div>
52+
</div>
53+
</div>
54+
<div class="pane newcard card-back" id="cardback" style={{backgroundColor: "rgb(138, 190, 107)", left: "55px"}}>
55+
<div class="pane magnetic-strip"></div>
56+
<div class="pane input-sprite right">
57+
<div class="input-block cvv-block">
58+
<div class="tooltip" data-pos="top-left">Card cvv</div>
59+
<input type="tel" placeholder="CVV" maxlength="3" id="cvv" data-next="cardname" data-prev="expiry" tabindex="6" autocomplete="off" />
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
<div id="palette-block" class="pane newcard-info-block picker-width">
66+
<div class="pane newcard-txt">
67+
<h2 class="pane title">Цвет карты</h2>
68+
</div>
69+
70+
<div class="pane buttons">
71+
<div class="fields field-button">
72+
<div class="field">
73+
<button id="cardAdd" class="btn primary">Добавить карту</button>
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
)
84+
}

0 commit comments

Comments
 (0)