challenge 30056079 -- SERVICE REQUEST

Author: chqy24

config/default.js

@@ -7,5 +7,5 @@ module.exports = {
   PORT: process.env.PORT || 3000,
 
   // below env variables are visible in frontend
-  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI',
+  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyC9tPymo7xUlvPlK_yNulgXTZalxJM2Wv8',
 };

config/development.js

@@ -7,5 +7,5 @@ module.exports = {
   PORT: process.env.PORT || 3000,
 
   // below env variables are visible in frontend
-  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI',
+  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyC9tPymo7xUlvPlK_yNulgXTZalxJM2Wv8',
 };

config/production.js

@@ -7,5 +7,5 @@ module.exports = {
   PORT: process.env.PORT || 3000,
 
   // below env variables are visible in frontend
-  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI',
+  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyC9tPymo7xUlvPlK_yNulgXTZalxJM2Wv8',
 };

config/staging.js

@@ -7,5 +7,5 @@ module.exports = {
   PORT: process.env.PORT || 3000,
 
   // below env variables are visible in frontend
-  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI',
+  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyC9tPymo7xUlvPlK_yNulgXTZalxJM2Wv8',
 };

config/test.js

@@ -7,5 +7,5 @@ module.exports = {
   PORT: process.env.PORT || 3000,
 
   // below env variables are visible in frontend
-  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI',
+  GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyC9tPymo7xUlvPlK_yNulgXTZalxJM2Wv8',
 };

src/components/Header/Header.scss

@@ -3,7 +3,7 @@
   width: 100%;
   color: white;
   position: relative;
-  z-index: 2;
+  z-index: 1001;
 
   > ul {
     padding: 0;

src/components/Pagination/Pagination.jsx

@@ -31,4 +31,4 @@ Pagination.propTypes = {
   onPageChange: PropTypes.func.isRequired,
 };
 
-export default CSSModules(Pagination, styles);
+export default CSSModules(Pagination, styles, {allowMultiple: true});

src/components/Pagination/Pagination.scss

@@ -37,7 +37,6 @@
   > a {
     color: #fff;
   }
-}
 
 .break,
 .next,
@@ -73,3 +72,5 @@
 .next {
   background-image: url('icon-pagination-next.png');
 }
+
+}

src/components/Spinner/Spinner.jsx

@@ -0,0 +1,52 @@
+import React, {PropTypes} from 'react';
+import CSSModules from 'react-css-modules';
+import Modal from 'react-modal';
+import styles from './Spinner.scss';
+
+const customStyles = {
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(9, 9, 9, 0.58)',
+    zIndex: '9999',
+  },
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    transform: 'translate(-50%, -50%)',
+    padding: '20px',
+    minWidth: '217px',
+    textAlign: 'center',
+    borderRadius: '5px',
+    fontWeight: 'bold',
+    fontSize: '20px',
+    zIndex: '99999',
+  },
+};
+
+const Spinner = ({content, isOpen, error}) => (
+  <Modal
+    style={customStyles}
+    isOpen={isOpen}
+    shouldCloseOnOverlayClick={false}
+    contentLabel="Spinner"
+  >
+    <div styleName={error ? 'error' : ''}>
+      {content}
+    </div>
+  </Modal>
+  );
+
+Spinner.propTypes = {
+  content: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  error: PropTypes.bool,
+};
+
+export default CSSModules(Spinner, styles);

src/components/Spinner/Spinner.scss

@@ -0,0 +1,3 @@
+.error{
+  color:red;
+}

src/components/Spinner/index.js

@@ -0,0 +1,3 @@
+import Spinner from './Spinner';
+
+export default Spinner;

src/components/StatusLabel/StatusLabel.jsx

@@ -8,8 +8,9 @@ const statusLabels = {
   inProgress: 'In Progress', // old style should be removed when all code is binded to backend
   cancelled: 'Cancelled',
   completed: 'Completed',
-  waiting: 'Waiting',
+  pending: 'Pending',
   scheduled: 'Scheduled',
+  rejected: 'Rejected',
 };
 
 export const StatusLabel = ({value}) => (

src/components/StatusLabel/StatusLabel.scss

@@ -34,15 +34,22 @@
   @extend .status-label;
 }
 
-.status-label_waiting {
-  background-color: #e3e3e3;
+.status-label_pending {
+  background-color: lightblue;
   background-image: url('icon-status-inprogress.png');
 
   @extend .status-label;
 }
 
-.status-label_scheduled {
-  background-color: #4c4c4c;
+.status-label_rejected{
+  background-color: red;
+  background-image: url('icon-status-cancelled.png');
+
+  @extend .status-label;
+}
+
+.status-label_scheduled{
+  background-color: pink;
   background-image: url('icon-status-inprogress.png');
 
   @extend .status-label;

src/components/Tabs/Tabs.jsx

@@ -2,17 +2,18 @@ import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './Tabs.scss';
 
-export const Tabs = ({tabList, activeTab}) => (
+export const Tabs = ({tabList, onSelect, activeTab}) => (
   <ul styleName="tab-list">
     {(tabList || []).map((tab, i) => (
-      <li onClick={tabList.onClick} styleName={activeTab === i ? 'active-tab' : null} key={i}>{tab.name}</li>
+      <li onClick={() => onSelect(i)} styleName={activeTab === i ? 'active-tab' : null} key={i}>{tab.name}</li>
     ))}
   </ul>
 );
 
 Tabs.propTypes = {
   tabList: PropTypes.array.isRequired,
   activeTab: PropTypes.number.isRequired,
+  onSelect: PropTypes.func,
 };
 
 export default CSSModules(Tabs, styles);

src/config/index.js

@@ -12,5 +12,4 @@ module.exports = {
   AUTH0_CLIENT_ID: process.env.REACT_APP_AUTH0_CLIENT_ID || 'h7p6V93Shau3SSvqGrl6V4xrATlkrVGm',
   AUTH0_CLIENT_DOMAIN: process.env.REACT_APP_AUTH0_CLIENT_DOMAIN || 'spanhawk.auth0.com',
   AUTH0_CALLBACK: 'http://localhost:3000',
-
 };

src/containers/HeaderContainer.js

@@ -13,7 +13,7 @@ const mapState = (state) => ({...state.global});
   (i.e. if the toggleNotification and loginAction actions are part of
   the acetions object, injected into the asyncConnect call below).
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch) => ({ // eslint-disable-line no-unused-vars
   handleNotification: (value) => {
     dispatch(toggleNotification(value));
   },

src/index.html

@@ -4,7 +4,7 @@
   <title>Drone Market</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script src="https://maps.googleapis.com/maps/api/js?key=<%= htmlWebpackPlugin.options.GOOGLE_API_KEY %>&libraries=drawing" type="text/javascript"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=<%= htmlWebpackPlugin.options.GOOGLE_API_KEY %>&libraries=drawing,geometry" type="text/javascript"></script>
 </head>
 <body>
   <div id="root" style="height: 100%"></div>

src/routes/MyRequest/components/AssignDrone/AssignDrone.jsx

@@ -0,0 +1,109 @@
+import React, {PropTypes, Component} from 'react';
+import CSSModules from 'react-css-modules';
+import cn from 'classnames';
+import Modal from 'react-modal';
+import styles from './AssignDrone.scss';
+
+const customStyles = {
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(9, 9, 9, 0.58)',
+    zIndex: '9999',
+  },
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    transform: 'translate(-50%, -50%)',
+    width: '450px',
+    height: '500px',
+    textAlign: 'center',
+    borderRadius: '5px',
+    fontWeight: 'bold',
+    fontSize: '20px',
+    zIndex: '99999',
+    padding: '0',
+  },
+};
+
+class AssignDrone extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      selectedDrone: null,
+    };
+    this.selectDrone = this.selectDrone.bind(this);
+  }
+
+  selectDrone(i) {
+    const {afterSelect} = this.props;
+
+    this.setState({
+      selectedDrone: i,
+    }, () => afterSelect(i));
+  }
+
+  render() {
+    const {drones, isOpen, closeModal, confirmAssign} = this.props;
+    return (
+      <div>
+        <Modal style={customStyles} isOpen={isOpen} contentLabel="assign-drone">
+          <div onClick={closeModal} styleName="icon-close" />
+          <div styleName="title">
+            Assign drone for the mission
+          </div>
+          <div styleName="body">
+            {
+              (drones && drones.length > 0) ?
+              (
+                <ul>
+                  {
+                    drones.map((d, i) => (
+                      <li key={i} onClick={() => this.selectDrone(i)} styleName={this.state.selectedDrone === i ? 'selected' : null}>
+                        {d.name}
+                      </li>
+                      )
+                    )
+                  }
+                </ul>
+              ) :
+              (
+                <div styleName="no-drones">
+                  No available drones for now!
+                </div>
+              )
+            }
+          </div>
+          <div styleName="foot">
+            <div
+              styleName={cn({'btn-confirm': true, disabled: this.state.selectedDrone === null})} onClick={
+              () => {
+                if (this.state.selectedDrone !== null) {
+                  confirmAssign();
+                }
+              }
+            }
+            >Confirm</div>
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+AssignDrone.propTypes = {
+  afterSelect: PropTypes.func,
+  drones: PropTypes.array,
+  isOpen: PropTypes.bool.isRequired,
+  closeModal: PropTypes.func,
+  confirmAssign: PropTypes.func,
+};
+
+export default CSSModules(AssignDrone, styles, {allowMultiple: true});

src/routes/MyRequest/components/AssignDrone/AssignDrone.scss

@@ -0,0 +1,63 @@
+:global{
+  .ReactModal__Body--open{
+    overflow: hidden;
+  }
+}
+.title{
+  height: 50px;
+  background-color: #E1E2E5;
+  line-height: 50px;
+  padding-left:20px;
+  border-bottom: 1px solid #333;
+}
+.icon-close{
+  background-image: url("icon-close-modal.png");
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top:12px;
+  right:12px;
+  cursor: pointer;
+}
+.body{
+  padding-top:20px;
+  height: calc(100% - 110px);
+  overflow: auto;
+  ul{
+    text-align: left;
+    list-style:none;
+    padding:0;
+    margin:0;
+    li{
+      padding: 10px 20px;
+      cursor: pointer;
+      &.selected{
+        background-color: #224488;
+        color:#fff;
+      }
+    }
+  }
+}
+.no-drones{
+  text-align: center;
+}
+.foot{
+  height: 60px;
+  display: flex;
+  align-items:center;
+  justify-content: flex-end;
+  background-color: #E1E2E5;
+  padding: 0 20px;
+  .btn-confirm{
+    color:#fff;
+    background-color: #224488;
+    height: 36px;
+    line-height: 36px;
+    padding:0 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    &.disabled{
+      cursor: not-allowed;
+    }
+  }
+}

src/routes/MyRequest/components/AssignDrone/index.js

@@ -0,0 +1,3 @@
+import AssignDrone from './AssignDrone';
+
+export default AssignDrone;