Skip to content

Commit 373ad96

Browse files
gondzogondzo
authored
Merge pull request topcoderinc#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

+2
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

-1
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

+4
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

+47
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

+48
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

+3
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

+72
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

+47
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

+3
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

+24-33
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)