Skip to content

Commit 373ad96

Browse files
gondzogondzo
authored
Merge pull request #38 from maxceem/dev
Changes for the challenge #30056064 DRONE MANAGEMENT together with final fixes
2 parents 41be62f + 9be60ce commit 373ad96

File tree

76 files changed

+2099
-1148
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+2099
-1148
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"rc-slider": "^5.4.0",
6868
"rc-tooltip": "^3.4.2",
6969
"react": "^15.3.2",
70+
"react-addons-create-fragment": "^15.3.2",
7071
"react-breadcrumbs": "^1.5.1",
7172
"react-click-outside": "^2.2.0",
7273
"react-count-down": "^1.0.3",
@@ -80,6 +81,7 @@
8081
"react-icheck": "^0.3.6",
8182
"react-input-range": "^0.9.3",
8283
"react-modal": "^1.5.2",
84+
"react-paginate": "^4.1.0",
8385
"react-portal": "^3.0.0",
8486
"react-redux": "^4.0.0",
8587
"react-redux-toastr": "^4.2.2",

‎src/components/AdminHeader/AdminHeader.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import CSSModules from 'react-css-modules';
33
import {Link} from 'react-router';
44
import styles from './AdminHeader.scss';
55
import Dropdown from '../Dropdown';
6-
import Notification from '../Notification';
76

87
export const AdminHeader = () => (
98
<nav styleName="admin-header">

‎src/components/Button/Button.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,7 @@
4141
.color-silver {
4242
background: #67879a;
4343
}
44+
45+
.color-red {
46+
background: #f00;
47+
}

‎src/components/FileField/FileField.jsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, {PropTypes} from 'react';
2+
import CSSModules from 'react-css-modules';
3+
import _ from 'lodash';
4+
import styles from './FileField.scss';
5+
6+
/**
7+
* Gets filename to display, no metter what was supplied: string, FileList object or an Object with numeral keys
8+
* @param {Mixed} value source to get filename
9+
* @return {String} filename to display
10+
*/
11+
const getFileName = (value) => {
12+
let newValue = value;
13+
14+
if (_.isUndefined(newValue)) {
15+
newValue = '';
16+
} else if (value[0] && _.isString(value[0].name)) {
17+
newValue = value[0].name;
18+
}
19+
20+
return newValue;
21+
};
22+
23+
export const FileField = (props) => (
24+
<div styleName={props.size === 'narrow' ? 'file-field_narrow' : 'file-field'}>
25+
<div styleName="text"><input type="text" readOnly placeholder={props.label} value={getFileName(props.value || props.initialValue)} /></div>
26+
<label styleName="button"><input
27+
type="file" onChange={(event) => {
28+
props.onChange(event);
29+
}} accept={props.accept}
30+
/>Browse</label>
31+
</div>
32+
);
33+
34+
FileField.propTypes = {
35+
size: PropTypes.oneOf(['normal', 'narrow']),
36+
label: PropTypes.string,
37+
accept: PropTypes.string,
38+
value: PropTypes.any,
39+
initialValue: PropTypes.any,
40+
onChange: PropTypes.func,
41+
};
42+
43+
FileField.defaultProps = {
44+
size: 'normal',
45+
};
46+
47+
export default CSSModules(FileField, styles);

‎src/components/FileField/FileField.scss

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.file-field {
2+
display: flex;
3+
width: 100%;
4+
5+
input[type="text"] {
6+
width: 100%;
7+
padding: 0 10px;
8+
background: white;
9+
color: black;
10+
border: none;
11+
height: 36px;
12+
line-height: 36px;
13+
}
14+
15+
.text {
16+
border: 1px solid #ebebeb;
17+
flex: 1;
18+
}
19+
20+
label.button {
21+
background: #315b95;
22+
color: #fff;
23+
display: block;
24+
border: none;
25+
height: 36px;
26+
flex: 0 0 115px;
27+
font-weight: bold;
28+
line-height: 36px;
29+
margin-left: 12px;
30+
overflow: hidden;
31+
position: relative;
32+
text-align: center;
33+
34+
input[type="file"] {
35+
opacity: 0;
36+
position: absolute;
37+
}
38+
}
39+
}
40+
41+
.file-field_narrow {
42+
@extend .file-field;
43+
44+
input[type="text"] {
45+
height: 34px;
46+
line-height: 32px;
47+
}
48+
}

‎src/components/FileField/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import FileField from './FileField';
2+
3+
export default FileField;

‎src/components/ModalConfirm/ModalConfirm.jsx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, {PropTypes} from 'react';
2+
import CSSModules from 'react-css-modules';
3+
import Button from 'components/Button';
4+
import styles from './ModalConfirm.scss';
5+
import Modal from 'react-modal';
6+
7+
8+
/*
9+
* customStyles
10+
*/
11+
12+
const customStyles = {
13+
overlay: {
14+
position: 'fixed',
15+
top: 0,
16+
left: 0,
17+
right: 0,
18+
bottom: 0,
19+
backgroundColor: 'rgba(9, 9, 9, 0.58)',
20+
},
21+
content: {
22+
top: '50%',
23+
left: '50%',
24+
right: 'auto',
25+
bottom: 'auto',
26+
marginRight: '-50%',
27+
transform: 'translate(-50%, -50%)',
28+
padding: '0px',
29+
width: '633px',
30+
},
31+
};
32+
33+
34+
/*
35+
* ModalConfirm
36+
*/
37+
38+
39+
const ModalConfirm = ({isOpen, onClose, onConfirm, title, message}) => (
40+
<Modal
41+
isOpen={isOpen}
42+
onRequestClose={onClose}
43+
style={customStyles}
44+
contentLabel="Example Modal"
45+
>
46+
<div styleName="modal-header">
47+
<div styleName="title">{title}</div>
48+
<div onClick={onClose} styleName="icon-close-modal" />
49+
</div>
50+
<p styleName="modal-msg">{message}</p>
51+
<div styleName="actions">
52+
<Button
53+
color="black" onClick={onClose}
54+
className={styles.btnCacnel}
55+
>Cancel</Button>
56+
<Button
57+
color="red" onClick={onConfirm}
58+
className={styles.btnConfirm}
59+
>Delete</Button>
60+
</div>
61+
</Modal>
62+
);
63+
64+
ModalConfirm.propTypes = {
65+
isOpen: PropTypes.bool.isRequired,
66+
onClose: PropTypes.func.isRequired,
67+
onConfirm: PropTypes.func.isRequired,
68+
title: PropTypes.string.isRequired,
69+
message: PropTypes.string.isRequired,
70+
};
71+
72+
export default CSSModules(ModalConfirm, styles);

‎src/components/ModalConfirm/ModalConfirm.scss

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.modal-header {
2+
display: flex;
3+
height: 23px;
4+
background: #f0f0f1;
5+
height: 63px;
6+
align-items: center;
7+
padding: 5px 20px;
8+
}
9+
10+
.title {
11+
font-size: 24px;
12+
color: #0d0d0d;
13+
align-self: center;
14+
font-weight: bold;
15+
}
16+
17+
.icon-close-modal {
18+
display: block;
19+
width: 24px;
20+
height: 24px;
21+
background: url('icon-close-modal.png') no-repeat;
22+
margin-left: auto;
23+
cursor: pointer;
24+
}
25+
26+
.modal-msg {
27+
font-size: 14px;
28+
color: #131313;
29+
text-align: center;
30+
padding: 28px;
31+
}
32+
33+
.actions {
34+
display: flex;
35+
justify-content: center;
36+
margin-bottom: 30px;
37+
38+
.btnCancel {
39+
padding: 14px 8px;
40+
margin-right: 6px;
41+
}
42+
43+
.btnConfirm {
44+
padding: 5px 8px;
45+
margin-left: 6px;
46+
}
47+
}

‎src/components/ModalConfirm/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import ModalConfirm from './ModalConfirm';
2+
3+
export default ModalConfirm;

‎src/components/Pagination/Pagination.jsx

Lines changed: 24 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,34 @@
11
import React, {PropTypes} from 'react';
22
import CSSModules from 'react-css-modules';
3-
import _ from 'lodash';
43
import styles from './Pagination.scss';
5-
import Select from '../Select';
4+
import ReactPaginate from 'react-paginate';
65

7-
const pageOptions = [
8-
{value: 10, label: '10'},
9-
{value: 30, label: '30'},
10-
{value: 50, label: '50'},
11-
];
6+
export const Pagination = ({forcePage, pageCount, onPageChange}) => {
7+
const props = {...{
8+
previousLabel: '',
9+
nextLabel: '',
10+
marginPagesDisplayed: 1,
11+
pageRangeDisplayed: 3,
12+
containerClassName: styles.pagination,
13+
pageClassName: styles.page,
14+
activeClassName: styles.page_active,
15+
breakClassName: styles.break,
16+
nextClassName: styles.next,
17+
previousClassName: styles.prev,
18+
disabledClassName: styles.disabled,
19+
},
20+
forcePage,
21+
pageCount,
22+
onPageChange,
23+
};
1224

13-
14-
export const Pagination = ({pages, activePageIndex}) => (
15-
<div styleName="pagination">
16-
<div styleName="show-per-page">
17-
<span>Show</span>
18-
<Select
19-
styleName="pagination-select"
20-
clearable={false}
21-
value={10}
22-
options={pageOptions}
23-
{..._.pick({}, 'value', 'onChange')}
24-
/>
25-
<span>per page</span>
26-
</div>
27-
<ul styleName="pageControl">
28-
<li styleName="previousPage">&lt;</li>
29-
{_.range(pages).map((i) => (
30-
<li styleName={(activePageIndex || 0) === i ? 'active' : ''} key={i}>{i + 1}</li>
31-
))}
32-
<li>...</li>
33-
<li styleName="nextPage">&gt;</li>
34-
</ul>
35-
</div>
36-
);
25+
return (<ReactPaginate {...props} />);
26+
};
3727

3828
Pagination.propTypes = {
39-
pages: PropTypes.number.isRequired,
40-
activePageIndex: PropTypes.number,
29+
forcePage: PropTypes.number.isRequired,
30+
pageCount: PropTypes.number.isRequired,
31+
onPageChange: PropTypes.func.isRequired,
4132
};
4233

4334
export default CSSModules(Pagination, styles);

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy