Merge branch 'gabshr' into dayana

13 files changed, 558 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Maps/Info.js b/front/odiparpack/app/containers/Maps/Info.js
new file mode 100644
index 0000000..1faea09
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/Info.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import Type from 'ba-styles/Typography.scss';
+import { Typography } from '@material-ui/core';
+
+class Info extends React.Component {
+  render() {
+    return (
+      <Typography className={Type.textWarning} gutterBottom style={{ marginBottom: 20 }}>
+        This demo may not working properly because it has not added Google Map api key. To add Your own Google Map api key please follow this link
+        &nbsp;
+        {' '}
+        <a rel="noopener noreferrer" style={{ wordWrap: 'break-word' }} target="_blank" href="https://developers.google.com/maps/documentation/javascript/get-api-key">https://developers.google.com/maps/documentation/javascript/get-api-key</a>
+      </Typography>
+    );
+  }
+}
+
+export default Info;
diff --git a/front/odiparpack/app/containers/Maps/MapDirection.js b/front/odiparpack/app/containers/Maps/MapDirection.js
new file mode 100644
index 0000000..97a463b
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/MapDirection.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Direction } from './demos';
+import Info from './Info';
+
+class MapDirection extends React.Component {
+  render() {
+    const title = brand.name + ' - Map';
+    const description = brand.desc;
+    const docSrc = 'containers/Maps/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock overflowX title="Map with Direction" desc="Rendering map with default configuration">
+          <Info />
+          <Direction />
+          <SourceReader componentName={docSrc + 'Direction.js'} />
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default MapDirection;
diff --git a/front/odiparpack/app/containers/Maps/MapMarker.js b/front/odiparpack/app/containers/Maps/MapMarker.js
new file mode 100644
index 0000000..65f2420
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/MapMarker.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { BasicMarker, PopoverMarker } from './demos';
+import Info from './Info';
+
+class MapMarker extends React.Component {
+  render() {
+    const title = brand.name + ' - Map';
+    const description = brand.desc;
+    const docSrc = 'containers/Maps/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock overflowX title="Map with a Marker" desc="A sample for basic mark a coodinate in map">
+          <Info />
+          <BasicMarker />
+          <SourceReader componentName={docSrc + 'BasicMarker.js'} />
+        </PapperBlock>
+        <PapperBlock overflowX title="Marker with Popover/Info Window" desc="Click marker to show detail place">
+          <Info />
+          <PopoverMarker />
+          <SourceReader componentName={docSrc + 'BasicMarker.js'} />
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default MapMarker;
diff --git a/front/odiparpack/app/containers/Maps/SearchMap.js b/front/odiparpack/app/containers/Maps/SearchMap.js
new file mode 100644
index 0000000..b3e21d9
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/SearchMap.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { SearchLocation } from './demos';
+import Info from './Info';
+
+class SearchMap extends React.Component {
+  render() {
+    const title = brand.name + ' - Map';
+    const description = brand.desc;
+    const docSrc = 'containers/Maps/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock overflowX title="Search Location" desc="Map with search input to find any location">
+          <Info />
+          <SearchLocation />
+          <SourceReader componentName={docSrc + 'SearchLocation.js'} />
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default SearchMap;
diff --git a/front/odiparpack/app/containers/Maps/StreetViewMap.js b/front/odiparpack/app/containers/Maps/StreetViewMap.js
new file mode 100644
index 0000000..e307da8
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/StreetViewMap.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { StreetView } from './demos';
+import Info from './Info';
+
+class StreetViewMap extends React.Component {
+  render() {
+    const title = brand.name + ' - Map';
+    const description = brand.desc;
+    const docSrc = 'containers/Maps/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock overflowX title="StreetView" desc="View location in 3d perspective">
+          <Info />
+          <StreetView />
+          <SourceReader componentName={docSrc + 'StreetView.js'} />
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default StreetViewMap;
diff --git a/front/odiparpack/app/containers/Maps/TrafficIndicator.js b/front/odiparpack/app/containers/Maps/TrafficIndicator.js
new file mode 100644
index 0000000..e1e8a69
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/TrafficIndicator.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Traffic } from './demos';
+import Info from './Info';
+
+class TrafficIndicator extends React.Component {
+  render() {
+    const title = brand.name + ' - Map';
+    const description = brand.desc;
+    const docSrc = 'containers/Maps/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock overflowX title="Traffic Indicator" desc="Get information of transportation traffic arround the world">
+          <Info />
+          <Traffic />
+          <SourceReader componentName={docSrc + 'Traffic.js'} />
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default TrafficIndicator;
diff --git a/front/odiparpack/app/containers/Maps/demos/BasicMarker.js b/front/odiparpack/app/containers/Maps/demos/BasicMarker.js
new file mode 100644
index 0000000..7577923
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/demos/BasicMarker.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { compose } from 'recompose';
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  Marker,
+} from 'react-google-maps';
+
+const MapWithAMarker = compose(
+  withScriptjs,
+  withGoogleMap
+)(props => (
+  <GoogleMap
+    {...props}
+    defaultZoom={8}
+    defaultCenter={{ lat: -34.397, lng: 150.644 }}
+  >
+    <Marker
+      position={{ lat: -34.397, lng: 150.644 }}
+    />
+  </GoogleMap>
+));
+
+class BasicMarker extends React.Component {
+  render() {
+    return (
+      <MapWithAMarker
+        googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
+        loadingElement={<div style={{ height: '100%' }} />}
+        containerElement={<div style={{ height: '400px' }} />}
+        mapElement={<div style={{ height: '100%' }} />}
+      />
+    );
+  }
+}
+
+export default BasicMarker;
diff --git a/front/odiparpack/app/containers/Maps/demos/Direction.js b/front/odiparpack/app/containers/Maps/demos/Direction.js
new file mode 100644
index 0000000..8867466
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/demos/Direction.js
@@ -0,0 +1,56 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { compose, withProps, lifecycle } from 'recompose';
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  DirectionsRenderer,
+} from 'react-google-maps';
+
+const MapWithADirectionsRenderer = compose(
+  withProps({
+    googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places',
+    loadingElement: <div style={{ height: '100%' }} />,
+    containerElement: <div style={{ height: '400px' }} />,
+    mapElement: <div style={{ height: '100%' }} />,
+  }),
+  withScriptjs,
+  withGoogleMap,
+  lifecycle({
+    componentDidMount() {
+      const DirectionsService = new google.maps.DirectionsService();
+
+      DirectionsService.route({
+        origin: new google.maps.LatLng(41.8507300, -87.6512600),
+        destination: new google.maps.LatLng(41.8525800, -87.6514100),
+        travelMode: google.maps.TravelMode.DRIVING,
+      }, (result, status) => {
+        if (status === google.maps.DirectionsStatus.OK) {
+          this.setState({
+            directions: result,
+          });
+        } else {
+          console.error(`error fetching directions ${result}`);
+        }
+      });
+    }
+  })
+)(props => (
+  <GoogleMap
+    defaultZoom={8}
+    defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
+  >
+    {props.directions && <DirectionsRenderer directions={props.directions} />}
+  </GoogleMap>
+));
+
+class Direction extends React.Component {
+  render() {
+    return (
+      <MapWithADirectionsRenderer />
+    );
+  }
+}
+
+export default Direction;
diff --git a/front/odiparpack/app/containers/Maps/demos/PopoverMarker.js b/front/odiparpack/app/containers/Maps/demos/PopoverMarker.js
new file mode 100644
index 0000000..9a07f11
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/demos/PopoverMarker.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { compose, withStateHandlers } from 'recompose';
+import LocalDining from '@material-ui/icons/LocalDining';
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  Marker,
+  InfoWindow
+} from 'react-google-maps';
+
+const MapWithAMakredInfoWindow = compose(
+  withStateHandlers(() => ({
+    isOpen: false,
+  }), {
+    onToggleOpen: ({ isOpen }) => () => ({
+      isOpen: !isOpen,
+    })
+  }),
+  withScriptjs,
+  withGoogleMap
+)(props => (
+  <GoogleMap
+    defaultZoom={8}
+    defaultCenter={{ lat: -34.397, lng: 150.644 }}
+  >
+    <Marker
+      position={{ lat: -34.397, lng: 150.644 }}
+      onClick={props.onToggleOpen}
+    >
+      {props.isOpen &&
+        <InfoWindow onCloseClick={props.onToggleOpen}>
+          <span>
+            <LocalDining /> A marked place
+          </span>
+        </InfoWindow>
+      }
+    </Marker>
+  </GoogleMap>
+));
+
+class PopoverMarker extends React.Component {
+  render() {
+    return (
+      <MapWithAMakredInfoWindow
+        googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
+        loadingElement={<div style={{ height: '100%' }} />}
+        containerElement={<div style={{ height: '400px' }} />}
+        mapElement={<div style={{ height: '100%' }} />}
+      />
+    );
+  }
+}
+
+export default PopoverMarker;
diff --git a/front/odiparpack/app/containers/Maps/demos/SearchLocation.js b/front/odiparpack/app/containers/Maps/demos/SearchLocation.js
new file mode 100644
index 0000000..16449d0
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/demos/SearchLocation.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import { compose, withProps, lifecycle } from 'recompose';
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  Marker,
+} from 'react-google-maps';
+import { SearchBox } from 'react-google-maps/lib/components/places/SearchBox';
+const _ = require('lodash');
+
+const MapWithASearchBox = compose(
+  withProps({
+    googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places',
+    loadingElement: <div style={{ height: '100%' }} />,
+    containerElement: <div style={{ height: '400px' }} />,
+    mapElement: <div style={{ height: '100%' }} />,
+  }),
+  lifecycle({
+    componentWillMount() {
+      const refs = {};
+
+      this.setState({
+        bounds: null,
+        center: {
+          lat: 41.9, lng: -87.624
+        },
+        markers: [],
+        onMapMounted: ref => {
+          refs.map = ref;
+        },
+        onBoundsChanged: () => {
+          this.setState({
+            bounds: refs.map.getBounds(),
+            center: refs.map.getCenter(),
+          });
+        },
+        onSearchBoxMounted: ref => {
+          refs.searchBox = ref;
+        },
+        onPlacesChanged: () => {
+          const places = refs.searchBox.getPlaces();
+          const bounds = new google.maps.LatLngBounds(); // eslint-disable-line
+
+          places.forEach(place => {
+            if (place.geometry.viewport) {
+              bounds.union(place.geometry.viewport);
+            } else {
+              bounds.extend(place.geometry.location);
+            }
+          });
+          const nextMarkers = places.map(place => ({
+            position: place.geometry.location,
+          }));
+          const nextCenter = _.get(nextMarkers, '0.position', this.state.center);
+
+          this.setState({
+            center: nextCenter,
+            markers: nextMarkers,
+          });
+          // refs.map.fitBounds(bounds);
+        },
+      });
+    },
+  }),
+  withScriptjs,
+  withGoogleMap
+)(props => (
+  <GoogleMap
+    {...props}
+    ref={props.onMapMounted}
+    defaultZoom={15}
+    center={props.center}
+    onBoundsChanged={props.onBoundsChanged}
+  >
+    <SearchBox
+      ref={props.onSearchBoxMounted}
+      bounds={props.bounds}
+      controlPosition={google.maps.ControlPosition.TOP_LEFT} // eslint-disable-line
+      onPlacesChanged={props.onPlacesChanged}
+    >
+      <input
+        type="text"
+        placeholder="Customized your placeholder"
+        style={{
+          boxSizing: 'border-box',
+          border: '1px solid transparent',
+          width: '240px',
+          height: '32px',
+          marginTop: '7px',
+          marginLeft: '10px',
+          padding: '0 12px',
+          borderRadius: '3px',
+          background: '#FAFAFA',
+          boxShadow: '0 2px 6px rgba(0, 0, 0, 0.3)',
+          fontSize: '14px',
+          outline: 'none',
+          textOverflow: 'ellipses',
+        }}
+      />
+    </SearchBox>
+    {props.markers.map((marker, index) =>
+      <Marker key={index.toString()} position={marker.position} />
+    )}
+  </GoogleMap>
+));
+
+class SearchLocation extends React.Component {
+  render() {
+    return (
+      <MapWithASearchBox />
+    );
+  }
+}
+
+export default SearchLocation;
diff --git a/front/odiparpack/app/containers/Maps/demos/StreetView.js b/front/odiparpack/app/containers/Maps/demos/StreetView.js
new file mode 100644
index 0000000..a8d3108
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/demos/StreetView.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import { compose, withProps } from 'recompose';
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  StreetViewPanorama,
+  OverlayView,
+} from 'react-google-maps';
+
+const getPixelPositionOffset = (width, height) => ({
+  x: -(width / 2),
+  y: -(height / 2),
+});
+
+const MapWithAMarker = compose(
+  withProps({
+    googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places',
+    loadingElement: <div style={{ height: '100%' }} />,
+    containerElement: <div style={{ height: '400px' }} />,
+    mapElement: <div style={{ height: '100%' }} />,
+    center: { lat: 49.2853171, lng: -123.1119202 },
+  }),
+  withScriptjs,
+  withGoogleMap
+)(props => (
+  <GoogleMap defaultZoom={8} defaultCenter={props.center}>
+    <StreetViewPanorama defaultPosition={props.center} visible>
+      <OverlayView
+        position={{ lat: 49.28590291211115, lng: -123.11248166065218 }}
+        mapPaneName={OverlayView.OVERLAY_LAYER}
+        getPixelPositionOffset={getPixelPositionOffset}
+      >
+        <div
+          style={{
+            background: 'red',
+            color: 'white',
+            padding: 5,
+            borderRadius: '50%'
+          }}
+        >
+        OverlayView
+        </div>
+      </OverlayView>
+    </StreetViewPanorama>
+  </GoogleMap>
+));
+
+class StreetView extends React.Component {
+  render() {
+    return (
+      <MapWithAMarker
+        googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
+        loadingElement={<div style={{ height: '100%' }} />}
+        containerElement={<div style={{ height: '400px' }} />}
+        mapElement={<div style={{ height: '100%' }} />}
+      />
+    );
+  }
+}
+
+export default StreetView;
diff --git a/front/odiparpack/app/containers/Maps/demos/Traffic.js b/front/odiparpack/app/containers/Maps/demos/Traffic.js
new file mode 100644
index 0000000..0f5cdfd
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/demos/Traffic.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { compose, withProps } from 'recompose';
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  TrafficLayer,
+} from 'react-google-maps';
+
+const MapWithATrafficLayer = compose(
+  withProps({
+    googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places',
+    loadingElement: <div style={{ height: '100%' }} />,
+    containerElement: <div style={{ height: '400px' }} />,
+    mapElement: <div style={{ height: '100%' }} />,
+  }),
+  withScriptjs,
+  withGoogleMap
+)(props => (
+  <GoogleMap
+    {...props}
+    defaultZoom={8}
+    defaultCenter={{ lat: 41.9, lng: -87.624 }}
+  >
+    <TrafficLayer autoUpdate />
+  </GoogleMap>
+));
+
+class Traffic extends React.Component {
+  render() {
+    return (
+      <MapWithATrafficLayer />
+    );
+  }
+}
+
+export default Traffic;
diff --git a/front/odiparpack/app/containers/Maps/demos/index.js b/front/odiparpack/app/containers/Maps/demos/index.js
new file mode 100644
index 0000000..33e8376
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/demos/index.js
@@ -0,0 +1,6 @@
+export BasicMarker from './BasicMarker';
+export PopoverMarker from './PopoverMarker';
+export Direction from './Direction';
+export SearchLocation from './SearchLocation';
+export Traffic from './Traffic';
+export StreetView from './StreetView';