Merge pull request #5 from topcoderinc/dev

Dev +map and mission and 3 and 4

Author: kbowerma

.eslintrc

@@ -21,7 +21,7 @@
     "no-script-url": 0,
     "max-len": 0,
     "new-cap": 0,
-    "object-curly-spacing": 0,
+    "object-curly-spacing": ["error", "always"],
     "react/jsx-no-bind": 0,
     "no-mixed-operators": 0,
     "arrow-parens": [
@@ -41,6 +41,6 @@
     "jsx-a11y/label-has-for": 0,
     "no-plusplus": 0,
     "jsx-a11y/no-static-element-interactions": 0,
-    "no-use-before-define": ["error", { "functions": false, "classes": true }]
+    "no-use-before-define": ["error", { "functions": false, "classes": true }],
   }
 }

README.md

@@ -1,10 +1,9 @@
-# dsp-fronted
+## DSP app
 
 ## Requirements
 * node v6 (https://nodejs.org)
 
 ## Quick Start
-* `npm install -g nodemon`
 * `npm install`
 * `npm run dev`
 * Navigate browser to `http://localhost:3000`
@@ -18,6 +17,7 @@ See Guild https://github.com/lorenwest/node-config/wiki/Configuration-Files
 |----|-----------|
 |`PORT`| The port to listen|
 |`GOOGLE_API_KEY`| The google api key see (https://developers.google.com/maps/documentation/javascript/get-api-key#key)|
+|`API_BASE_URL`| The base URL for Drone API |
 
 
 ## Install dependencies
@@ -36,23 +36,3 @@ See Guild https://github.com/lorenwest/node-config/wiki/Configuration-Files
 
 ## Google Map
 In this project module [react-google-maps](https://github.com/tomchentw/react-google-maps) is used to work with google maps. So it can be used for any new functionality.
-
-# Challenges
-
-## [30055900](https://www.topcoder.com/challenge-details/30055900)
-## DONE
-- All modules were rewritten almost from the scratch because the previous code was very buggy, hard to support and too far from the redux way which is used in the new project. This was the biggest job. Current code is much more robust and is 99% stateless.
-- For most important parts detailed unit tests are written.
-- Redrawing mission on the map was optimised, no unnecessary redrawing.
-- Readme file was cleaned and updated with information about tests and module used to implement google maps for future developers.
-
-## ADDITIONALLY
-- These small things from `kbowerma` was added:
-- - I know this was not in the challenge req but another thing that would be nice is if the label for PARAM4 changed to “Heading” only if NAV_WAYPOINT is selected. and PARAMA1 label changed to “hold time” only if NAV_WAYPOINT is selected.
-- - IT should be, but home and take off should be pinned together with the first click, but then should be able to be dragged or updated with text separately
-- All modules integrated with current project styles.
-- Test environment was set up. It uses `Mocha`, `Chai` and `Enzyme`. Also, it supports `jsx`, `css-modules` and `webpack resolve aliases`. Even though it's implicitly the scope of the challenge, it was a tangible part.
-
-## NOTES
-- As there is no Authorization implemented in the project. In the API I've hardcoded automatic registering and authorization of a dumb user to make requests to the server.
-- A lot of files in the repository had the `crlf` line endings. Though `eslint` and `.editorconfig` prescribe using `lf` line endings. So all files were converted to `lf` line endings to pass the linting process and follow configuration.

config/default.js

@@ -3,8 +3,10 @@
  * Main config file
  */
 module.exports = {
+  // below env variables are NOT visible in frontend
   PORT: process.env.PORT || 3000,
+
+  // below env variables are visible in frontend
   GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI',
-  //API_BASE_PATH: process.env.API_BASE_PATH || 'http://localhost:3000',
   API_BASE_PATH: process.env.API_BASE_PATH || 'https://kb-dsp-server-dev.herokuapp.com',
 };

package.json

@@ -32,6 +32,7 @@
     "copy-webpack-plugin": "^4.0.0",
     "cross-env": "^3.1.2",
     "css-loader": "^0.23.0",
+    "dateformat": "^2.0.0",
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
@@ -43,6 +44,7 @@
     "json-loader": "^0.5.4",
     "lodash": "^4.16.4",
     "moment": "^2.17.0",
+    "node-js-marker-clusterer": "^1.0.0",
     "node-sass": "^3.7.0",
     "postcss-flexboxfixer": "0.0.5",
     "postcss-loader": "^0.13.0",
@@ -55,12 +57,18 @@
     "react-flexbox-grid": "^0.10.2",
     "react-google-maps": "^6.0.1",
     "react-modal": "^1.5.2",
+    "react-flexbox-grid": "^0.10.2",
+    "react-highcharts": "^11.0.0",
+    "react-modal": "^1.5.2",
     "react-redux": "^4.0.0",
     "react-redux-toastr": "^4.2.2",
     "react-router": "^2.8.1",
     "react-router-redux": "^4.0.0",
     "react-select": "^1.0.0-rc.2",
     "react-simple-dropdown": "^1.1.5",
+    "react-slick": "^0.14.5",
+    "react-star-rating-component": "^1.2.2",
+    "react-timeago": "^3.1.3",
     "redbox-react": "^1.2.10",
     "redux": "^3.0.0",
     "redux-actions": "^0.10.1",
@@ -69,6 +77,7 @@
     "redux-logger": "^2.6.1",
     "redux-thunk": "^2.0.0",
     "sass-loader": "^4.0.0",
+    "socket.io-client": "^1.7.1",
     "style-loader": "^0.13.0",
     "superagent": "^2.3.0",
     "superagent-promise": "^1.1.0",

src/components/Accordion/Accordion.jsx

@@ -4,8 +4,8 @@ import CSSModules from 'react-css-modules';
 import cn from 'classnames';
 import styles from './Accordion.scss';
 
-export const Accordion = ({onToggleExpand, isExpanded, children, title}) => (
-  <div styleName={cn('accordion', {expanded: isExpanded})}>
+export const Accordion = ({ onToggleExpand, isExpanded, children, title }) => (
+  <div styleName={cn('accordion', { expanded: isExpanded })}>
     <div styleName="title" onClick={() => onToggleExpand(!isExpanded)}>
       {title}
     </div>
@@ -20,6 +20,6 @@ Accordion.propTypes = {
   title: PropTypes.any,
 };
 
-export default uncontrollable(CSSModules(Accordion, styles, {allowMultiple: true}), {
+export default uncontrollable(CSSModules(Accordion, styles, { allowMultiple: true }), {
   isExpanded: 'onToggleExpand',
 });

src/components/Breadcrumb/Breadcrumb.jsx

@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+import CSSModules from 'react-css-modules';
+import { Link } from 'react-router';
+import styles from './Breadcrumb.scss';
+
+export const Breadcrumb = ({ items }) => (
+  <ul styleName="breadcrumb">
+    {items.map((item, index) => (
+      <li styleName="item" key={index}>
+        {item.path
+          ? <Link to={item.path}>{item.text}</Link>
+          : <span key={index}>{item.text}</span>}
+      </li>
+    ))}
+  </ul>
+);
+
+const BreadcrumbItemPropType = {
+  text: PropTypes.string.isRequired,
+  path: PropTypes.string,
+};
+
+Breadcrumb.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape(BreadcrumbItemPropType)
+  ).isRequired,
+};
+
+export default CSSModules(Breadcrumb, styles);

src/components/Breadcrumb/Breadcrumb.scss

@@ -0,0 +1,36 @@
+.breadcrumb {
+  background-color: #fff;
+  border-bottom: 1px solid #d8d8d8;
+  border-top: 1px solid #d8d8d8;
+  color: #525051;
+  font-size: 12px;
+  line-height: 37px;
+  margin: 0;
+  padding: 0 30px;
+}
+
+.item {
+  display: inline;
+  list-style: none;
+
+  &:after {
+    content: '>';
+    display: inline;
+    margin-left: 4px;
+    margin-right: 8px;
+  }
+
+  &:last-child:after {
+    content: '';
+    display: none;
+  }
+
+  > a {
+    color: #525051;
+  }
+
+  > span {
+    color: #525051;
+    font-weight: 600;
+  }
+}

src/components/Breadcrumb/index.js

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

src/components/Button/Button.jsx

@@ -21,4 +21,4 @@ Button.defaultProps = {
   size: 'normal',
 };
 
-export default CSSModules(Button, styles, {allowMultiple: true});
+export default CSSModules(Button, styles, { allowMultiple: true });

src/components/DatePicker/DatePicker.jsx

@@ -3,15 +3,15 @@ import CSSModules from 'react-css-modules';
 import { DateField, TransitionView, Calendar } from 'react-date-picker';
 import styles from './DatePicker.scss';
 
-export const DatePicker = ({onChange, value}) => (
+export const DatePicker = ({ onChange, value }) => (
   <div styleName="date-picker">
     <DateField
       dateFormat="YYYY-MM-DD hh:mm:ss A"
       onChange={onChange}
       value={value}
     >
       <TransitionView>
-        <Calendar style={{padding: 10}} />
+        <Calendar style={{ padding: 10 }} />
       </TransitionView>
     </DateField>
   </div>

src/components/Dropdown/Dropdown.jsx

@@ -3,7 +3,7 @@ import CSSModules from 'react-css-modules';
 import ReactDropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
 import styles from './Dropdown.scss';
 
-export const Dropdown = ({title, children}) => (
+export const Dropdown = ({ title, children }) => (
   <div styleName="dropdown">
     <ReactDropdown>
       <DropdownTrigger className={styles.trigger}>{title}</DropdownTrigger>

src/components/Dropdown/Dropdown.scss

@@ -19,6 +19,7 @@
   background: white;
   border: 1px solid #d8d8d8;
   box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.06);
+  z-index: 1;
 
   ul {
     margin: 0;
@@ -45,7 +46,7 @@
 .trigger {
   position: relative;
   padding-right: 20px;
-  
+
   &, &:hover, &:active, &:focus, &:focus:active {
     color: white;
   }

src/components/Footer/Footer.jsx

@@ -4,14 +4,13 @@ import styles from './Footer.scss';
 
 export const Footer = () => (
   <div styleName="footer">
-    <div styleName="copyright">
-      Copyright © Drone Website. All Rights Reserved
-    </div>
-    <ul>
-      <li><a href="#">Disclaimer</a></li>
-      <li><a href="#">Privacy Policy</a></li>
-      <li><a href="#">Terms & Conditions</a></li>
-    </ul>
+    <p styleName="copyright">Copyright © Drone Website. All Rights Reserved</p>
+
+    <nav styleName="menu">
+      <a styleName="menu-item" href="javascript:;">Disclaimer</a>
+      <a styleName="menu-item" href="javascript:;">Privacy Policy</a>
+      <a styleName="menu-item" href="javascript:;">Terms & Conditions</a>
+    </nav>
   </div>
 );
 

src/components/Footer/Footer.scss

@@ -1,34 +1,33 @@
 .footer {
-  width: 100%;
-  background-color: #101010;
-  min-height: 50px;
-  display: flex;
+  background-color: #131313;
   color: #fff;
   font-size: 14px;
-  display: flex;
-  align-items: center;
-  padding: 0 18px 0 30px; 
-  flex-direction: row;
+  line-height: 49px;
+  padding: 0 35px;
+}
 
+.footer:after {
+  clear: both;
+  content: '';
+  display: table;
+}
 
-  .copyright {
-    display: flex;
-  }
+.copyright {
+  float: left;
+  margin: 0;
+  padding: 0;
+}
 
-  ul {
-    display: flex;
-    flex-direction: row;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    margin-left: auto;
+.menu {
+  float: right;
+}
 
-    li {
-      margin: 0 25px;
+a.menu-item {
+  color: #fff;
+  margin-right: 65px;
+  text-decoration: none;
+}
 
-      a {
-        color: #fff;
-      }
-    }
-  }
-}
+.menu-item:last-child {
+  margin-right: 0;
+}

src/components/FormField/FormField.jsx

@@ -3,8 +3,8 @@ import CSSModules from 'react-css-modules';
 import cn from 'classnames';
 import styles from './FormField.scss';
 
-export const FormField = ({label, error, touched, children}) => (
-  <div styleName={cn('form-field', {error: error && touched})}>
+export const FormField = ({ label, error, touched, children }) => (
+  <div styleName={cn('form-field', { error: error && touched })}>
     <div styleName="label">{label || <span>&nbsp;</span>}</div>
     {children}
     {error && touched && <div styleName="error-message">{error}</div>}
@@ -18,4 +18,4 @@ FormField.propTypes = {
   children: PropTypes.any.isRequired,
 };
 
-export default CSSModules(FormField, styles, {allowMultiple: true});
+export default CSSModules(FormField, styles, { allowMultiple: true });

src/components/Header/Header.jsx

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import CSSModules from 'react-css-modules';
+import { Link } from 'react-router';
 import SearchInput from '../SearchInput';
 import Dropdown from '../Dropdown';
 import styles from './Header.scss';
@@ -13,7 +14,9 @@ export const Header = ({location, selectedCategory, categories, user, notificati
       {
         (() => {
           const currentRoute = routes[routes.length - 1].name;
-          if (currentRoute === 'ServiceRequest') {
+          if (currentRoute === 'ServiceRequest'
+              || currentRoute === 'MyRequestStatus'
+              || currentRoute === 'StatusDetail') {
             return (
             [(<li key="location" styleName="location">
               <i />
@@ -28,11 +31,13 @@ export const Header = ({location, selectedCategory, categories, user, notificati
           return (
             <li styleName="pages">
               <ul>
-                <li className={currentRoute === 'Dashboard' ? 'active' : null}><a href="/dashboard">Dashboard</a></li>
-                <li className={currentRoute === 'Requests' ? 'active' : null}><a href="/my-request">Requests</a></li>
+                <li className={currentRoute === 'Dashboard' ? 'active' : null}><Link to="/dashboard">Dashboard</Link></li>
+                <li className={currentRoute === 'Requests' ? 'active' : null}><Link to="/my-request">Requests</Link></li>
                 <li className={currentRoute === 'MyDrones' ? 'active' : null}>My Drones</li>
                 <li className={currentRoute === 'MyServices' ? 'active' : null}>My Services</li>
                 <li className={currentRoute === 'Analytics' ? 'active' : null}>Analytics</li>
+                <li className={currentRoute === 'DroneMap' ? 'active' : null}><Link to="/drones-map">Drone Traffic</Link></li>
+                <li className={currentRoute === 'MissionPlanner' ? 'active' : null}><Link to="/mission-planner">MissionPlanner</Link></li>
               </ul>
             </li>
           );

src/components/InfoIcon/InfoIcon.jsx

@@ -3,7 +3,7 @@ import CSSModules from 'react-css-modules';
 import Tooltip from 'rc-tooltip';
 import styles from './InfoIcon.scss';
 
-export const InfoIcon = ({children}) => (
+export const InfoIcon = ({ children }) => (
   <div styleName="info-icon">
     <Tooltip placement="right" trigger={['hover', 'click']} overlay={children}>
       <div styleName="icon" />