nfz integration

Author: lstkz

.eslintrc

@@ -11,7 +11,7 @@
     "google": true,
   },
   "rules": {
-    "import/no-unresolved": [2, { ignore: ['^components/', '^containers/', '^services/', '^layouts/', '^store/', '^api/', '^routes/'] }],
+    "import/no-unresolved": [2, { ignore: ['^components/', '^containers/', '^services/', '^layouts/', '^store/', '^api/', '^routes/', '^Const'] }],
 
     // temporary for in-progress features
     "no-alert": 0,

package.json

@@ -28,6 +28,7 @@
     "babel-preset-stage-0": "^6.16.0",
     "babel-runtime": "^6.11.6",
     "bluebird": "^3.4.6",
+    "circle-to-polygon": "^1.0.0",
     "classnames": "^2.2.5",
     "config": "^1.24.0",
     "connect-history-api-fallback": "^1.3.0",
@@ -55,18 +56,19 @@
     "rc-tooltip": "^3.4.2",
     "react": "^15.3.2",
     "react-breadcrumbs": "^1.5.1",
-    "react-count-down": "^1.0.3",
     "react-click-outside": "^2.2.0",
+    "react-count-down": "^1.0.3",
     "react-css-modules": "^3.7.10",
     "react-date-picker": "^5.3.28",
     "react-dom": "^15.3.2",
+    "react-dropdown": "^1.2.0",
     "react-flexbox-grid": "^0.10.2",
     "react-google-maps": "^6.0.1",
-    "react-modal": "^1.5.2",
-    "react-dropdown": "^1.2.0",
+    "react-highcharts": "^11.0.0",
     "react-icheck": "^0.3.6",
     "react-input-range": "^0.9.3",
-    "react-highcharts": "^11.0.0",
+    "react-modal": "^1.5.2",
+    "react-portal": "^3.0.0",
     "react-redux": "^4.0.0",
     "react-redux-toastr": "^4.2.2",
     "react-router": "^2.8.1",
@@ -75,8 +77,8 @@
     "react-simple-dropdown": "^1.1.5",
     "react-slick": "^0.14.5",
     "react-star-rating-component": "^1.2.2",
-    "react-timeago": "^3.1.3",
     "react-tabs": "^0.8.2",
+    "react-timeago": "^3.1.3",
     "reactable": "^0.14.1",
     "redbox-react": "^1.2.10",
     "redux": "^3.0.0",
@@ -86,8 +88,8 @@
     "redux-logger": "^2.6.1",
     "redux-thunk": "^2.0.0",
     "sass-loader": "^4.0.0",
-    "socket.io-client": "^1.7.1",
     "slick-carousel": "^1.6.0",
+    "socket.io-client": "^1.7.1",
     "style-loader": "^0.13.0",
     "superagent": "^2.3.0",
     "superagent-promise": "^1.1.0",

src/Const.js

@@ -0,0 +1,6 @@
+
+export const GOOGLE_MAPS_BOUNDS_TIMEOUT = 1000;
+
+export default {
+  GOOGLE_MAPS_BOUNDS_TIMEOUT,
+};

src/components/AdminHeader/AdminHeader.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import {Link} from 'react-router';
+import styles from './AdminHeader.scss';
+
+export const AdminHeader = () => (
+  <nav styleName="admin-header">
+    <ul>
+      <li styleName="branding">
+        DRONE MARKET
+      </li>
+      <li styleName="pages">
+        <ul>
+          <li>
+            <Link activeClassName="active" to="/admin/dashboard">Dashboard</Link>
+          </li>
+          <li>
+            <Link activeClassName="active" to="/admin/no-fly-zones">No Fly Zones</Link>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+);
+
+AdminHeader.propTypes = {
+
+};
+
+export default CSSModules(AdminHeader, styles);

src/components/AdminHeader/AdminHeader.scss

@@ -0,0 +1,13 @@
+.admin-header {
+  composes: header from '../Header/Header.scss'
+}
+
+.branding {
+  composes: branding from '../Header/Header.scss'
+}
+
+.pages {
+  composes: pages from '../Header/Header.scss'
+}
+
+

src/components/AdminHeader/index.js

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

src/components/Button/Button.scss

@@ -3,6 +3,11 @@
   color: white;
   border: none;
   font-weight: bold;
+
+  &[disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
 }
 
 .color-gray {
@@ -22,10 +27,17 @@
   padding: 0 10px;
 }
 
+.size-xs {
+  height: 20px;
+  padding: 0 5px;
+  font-size: 12px;
+  font-weight: normal;
+}
+
 .color-black {
   background: #4c4c4c;
 }
 
 .color-silver {
   background: #67879a;
-}
+}

src/components/Header/Header.jsx

@@ -39,23 +39,23 @@ export const Header = ({
           return (
             <li styleName="pages">
               <ul>
-                <li className={currentRoute === 'Dashboard' ? 'active' : null}>
-                  <Link to="/dashboard">Dashboard</Link>
+                <li>
+                  <Link to="/dashboard" activeClassName="active">Dashboard</Link>
                 </li>
-                <li className={currentRoute === 'Requests' ? 'active' : null}>
-                  <Link to="/my-request">Requests</Link>
+                <li>
+                  <Link to="/my-request" activeClassName="active">Requests</Link>
                 </li>
-                <li className={currentRoute === 'My Drones' ? 'active' : null}>
+                <li>
                   <Link to="/my-drone" activeClassName="active">My Drones</Link>
                 </li>
-                <li className={currentRoute === 'My Services' ? 'active' : null}>
+                <li>
                   <Link to="/my-services" activeClassName="active">My Services</Link>
                 </li>
                 <li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
                 <li className={currentRoute === 'DroneMap' ? 'active' : null}>
-                  <Link to="/drones-map">Drone Traffic</Link></li>
+                  <Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
                 <li className={currentRoute === 'MissionPlanner' ? 'active' : null}>
-                  <Link to="/mission-planner">MissionPlanner</Link></li>
+                  <Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
               </ul>
             </li>
           );

src/components/Header/Header.scss

@@ -10,7 +10,7 @@
     margin: 0;
     width: 100%;
     display: flex;
-    
+
     > li {
       height: 60px;
       display: flex;
@@ -21,7 +21,7 @@
       + li {
         border-left: 1px solid #484848;
       }
-      
+
       &.search {
         flex-grow: 1;
       }
@@ -64,16 +64,16 @@
             align-items: center;
             padding: 8px 8px 0;
             border-bottom: 8px solid transparent;
-            &:hover, &:focus {
+            &:hover {
               border-bottom: 8px solid #315b95;
             }
           }
 
-        } 
+        }
 
         :global {
           .active {
-            border-bottom: 5px solid #214A84;
+            border-bottom: 8px solid #214A84;
           }
         }
       }
@@ -124,5 +124,5 @@
     color: #fff;
     font-weight: bold;
   }
-  
-}
+
+}

src/components/NoFlyZone/NoFlyZone.jsx

@@ -0,0 +1,30 @@
+import React, {PropTypes} from 'react';
+import {Circle, Polygon} from 'react-google-maps';
+
+export const NoFlyZone = ({zone}) => {
+  if (zone.circle) {
+    return (
+      <Circle
+        options={zone.style}
+        radius={zone.circle.radius}
+        center={{
+          lng: zone.circle.center[0],
+          lat: zone.circle.center[1],
+        }}
+      />
+    );
+  }
+
+  return (
+    <Polygon
+      options={zone.style}
+      path={zone.location.coordinates[0].map((pair) => ({lng: pair[0], lat: pair[1]}))}
+    />
+  );
+};
+
+NoFlyZone.propTypes = {
+  zone: PropTypes.object.isRequired,
+};
+
+export default NoFlyZone;

src/components/NoFlyZone/index.js

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

src/components/TextField/TextField.jsx

@@ -11,7 +11,7 @@ export const TextField = (props) => (
 );
 
 TextField.propTypes = {
-  type: PropTypes.oneOf(['text', 'email', 'password']),
+  type: PropTypes.oneOf(['text', 'email', 'password', 'date']),
   size: PropTypes.oneOf(['normal', 'narrow']),
   readOnly: PropTypes.bool,
   label: PropTypes.string,

src/containers/AppContainer.jsx

@@ -6,7 +6,7 @@ import ReduxToastr from 'react-redux-toastr';
 
 const AppContainer = ({history, routes, routerKey, store}) => (
   <Provider store={store}>
-    <div>
+    <div style={{height: '100%'}}>
       <Router history={history} render={(props) => <ReduxAsyncConnect {...props} />} key={routerKey}>{routes}</Router>
       <ReduxToastr
         timeOut={3000}

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 %>" type="text/javascript"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=<%= htmlWebpackPlugin.options.GOOGLE_API_KEY %>&libraries=drawing" type="text/javascript"></script>
 </head>
 <body>
   <div id="root" style="height: 100%"></div>

src/layouts/AdminLayout/AdminLayout.jsx

@@ -0,0 +1,28 @@
+import React, {PropTypes} from 'react';
+import CSSModules from 'react-css-modules';
+import AdminHeader from 'components/AdminHeader';
+import Breadcrumbs from 'react-breadcrumbs';
+import Footer from 'components/Footer';
+import styles from './AdminLayout.scss';
+
+export const AdminLayout = ({children, routes, params}) => (
+  <div styleName="admin-layout">
+    <AdminHeader />
+    <div className="breadcrumb-container">
+      <Breadcrumbs routes={routes} params={params} excludes={['CoreLayout', 'AdminLayout']} />
+    </div>
+
+    <div styleName="content">
+      {children}
+    </div>
+    <Footer />
+  </div>
+);
+
+AdminLayout.propTypes = {
+  children: PropTypes.any.isRequired,
+  routes: PropTypes.any.isRequired,
+  params: PropTypes.any.isRequired,
+};
+
+export default CSSModules(AdminLayout, styles);

src/layouts/AdminLayout/AdminLayout.scss

@@ -0,0 +1,7 @@
+.admin-layout {
+  composes: core-layout from '../CoreLayout/CoreLayout.scss';
+}
+
+.content {
+  composes: content from '../CoreLayout/CoreLayout.scss';
+}

src/layouts/AdminLayout/index.js

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

src/routes/Admin/AdminDashboard/components/AdminDashboardView.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './AdminDashboardView.scss';
+
+export const AdminDashboardView = () => (
+  <div styleName="admin-dashboard-view">
+    Placeholder for admin dashboard
+  </div>
+);
+
+export default CSSModules(AdminDashboardView, styles);

src/routes/Admin/AdminDashboard/components/AdminDashboardView.scss

@@ -0,0 +1,7 @@
+.admin-dashboard-view {
+  background-color: transparent;
+
+  :global {
+
+  }
+}

src/routes/Admin/AdminDashboard/containers/AdminDashboardContainer.js

@@ -0,0 +1,12 @@
+import {asyncConnect} from 'redux-connect';
+import {actions} from '../modules/AdminDashboard';
+
+import AdminDashboardView from '../components/AdminDashboardView';
+
+const resolve = [{
+  promise: () => Promise.resolve(),
+}];
+
+const mapState = (state) => state.adminDashboard;
+
+export default asyncConnect(resolve, mapState, actions)(AdminDashboardView);

src/routes/Admin/AdminDashboard/index.js

@@ -0,0 +1,15 @@
+import {injectReducer} from '../../../store/reducers';
+
+export default (store) => ({
+  path: 'dashboard',
+  name: 'Dashboard',
+  getComponent(nextState, cb) {
+    require.ensure([], (require) => {
+      const AdminDashboard = require('./containers/AdminDashboardContainer').default;
+      const reducer = require('./modules/AdminDashboard').default;
+
+      injectReducer(store, {key: 'adminDashboard', reducer});
+      cb(null, AdminDashboard);
+    }, 'AdminDashboard');
+  },
+});