From 3bd46cbc47284fa78bb3e9aac3149d9743281fcb Mon Sep 17 00:00:00 2001 From: Nattawod Satee Date: Sun, 14 Apr 2019 13:51:24 -0700 Subject: [PATCH] Try to implement the geo bar --- client/package-lock.json | 30 +++++++++++ client/package.json | 2 + client/public/index.html | 1 + client/src/actions/index.js | 3 +- client/src/actions/reportAction.js | 6 +++ client/src/components/Map.js | 4 +- client/src/components/Panel/PanelAction.js | 35 +++++++++---- client/src/components/Panel/ReportPanel.js | 50 +++++++++++++++++++ client/src/styles/components/reportPanel.scss | 39 +++++++++++++++ client/src/styles/main.scss | 3 +- 10 files changed, 157 insertions(+), 16 deletions(-) create mode 100644 client/src/actions/reportAction.js create mode 100644 client/src/components/Panel/ReportPanel.js create mode 100644 client/src/styles/components/reportPanel.scss diff --git a/client/package-lock.json b/client/package-lock.json index 182f4df..42729cc 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1932,6 +1932,22 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "^1.3.0", + "is-buffer": "^1.1.5" + }, + "dependencies": { + "is-buffer": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" + } + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", @@ -9448,6 +9464,11 @@ "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=" }, + "lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -13487,6 +13508,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-places-autocomplete": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/react-places-autocomplete/-/react-places-autocomplete-7.2.1.tgz", + "integrity": "sha512-X1SRv3zJjEZ9dnfy/vlSFi8dpUZc/vW4CF7GhN46AVATNMmB1y1EwhX2aiqKVWXO1888p9l7FMJLgySPRBDMCQ==", + "requires": { + "lodash.debounce": "^4.0.8", + "prop-types": "^15.5.8" + } + }, "react-redux": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.0.2.tgz", diff --git a/client/package.json b/client/package.json index 0184ba7..8560fe8 100644 --- a/client/package.json +++ b/client/package.json @@ -3,11 +3,13 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.18.0", "google-map-react": "^1.1.4", "node-sass": "^4.11.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-google-location": "^1.2.2", + "react-places-autocomplete": "^7.2.1", "react-redux": "^7.0.2", "react-router-dom": "^5.0.0", "react-scripts": "2.1.8", diff --git a/client/public/index.html b/client/public/index.html index 5200a24..9790294 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -38,5 +38,6 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> + diff --git a/client/src/actions/index.js b/client/src/actions/index.js index 7628944..988f319 100644 --- a/client/src/actions/index.js +++ b/client/src/actions/index.js @@ -1 +1,2 @@ -export * from './mapAction'; \ No newline at end of file +export * from './mapAction'; +export * from './reportAction'; \ No newline at end of file diff --git a/client/src/actions/reportAction.js b/client/src/actions/reportAction.js new file mode 100644 index 0000000..4b7f125 --- /dev/null +++ b/client/src/actions/reportAction.js @@ -0,0 +1,6 @@ +import axios from 'axios' + +export const postReport = (info) => async dispatch => { + console.log(info) + // axios.post('/') + }; \ No newline at end of file diff --git a/client/src/components/Map.js b/client/src/components/Map.js index bc3e037..a24c1ec 100644 --- a/client/src/components/Map.js +++ b/client/src/components/Map.js @@ -65,14 +65,12 @@ class Map extends Component { return new window.google.maps.Marker({ position: location, label: labels[i % labels.length], - icon: batteryIcon, - size: new window.google.maps.Size(25, 25) }); }); // Add a marker clusterer to manage the markers. var markerCluster = new window.MarkerClusterer(map, markers, { imagePath: - "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/" + "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m" }); }; render() { diff --git a/client/src/components/Panel/PanelAction.js b/client/src/components/Panel/PanelAction.js index d93eb72..f57f477 100644 --- a/client/src/components/Panel/PanelAction.js +++ b/client/src/components/Panel/PanelAction.js @@ -1,16 +1,29 @@ -import React, {Component} from 'react'; +import React, { Component } from "react"; +import ReportAction from "./ReportPanel"; class PanelAction extends Component { - render() { - return ( -
-
- - -
-
- ) + state = { + showReport: false, } + + + closeReport = () => { + this.setState({showReport: false}); + } + + render() { + return ( + + {this.state.showReport && } +
+
+ + +
+
+ + ); + } } -export default PanelAction; \ No newline at end of file +export default PanelAction; diff --git a/client/src/components/Panel/ReportPanel.js b/client/src/components/Panel/ReportPanel.js new file mode 100644 index 0000000..ee81b1f --- /dev/null +++ b/client/src/components/Panel/ReportPanel.js @@ -0,0 +1,50 @@ +import React, { Component } from "react"; +import { postReport } from "../../actions"; +import { connect } from "react-redux"; +import { GoogleComponent } from "react-google-location"; +const API_KEY = "AIzaSyCvdgUHoWt0MgqmWmcw-IcMAXMvRLWxcpE"; + +class ReportAction extends Component { + state = { + location: "", + cat: "" + }; + handleSubmit = e => { + e.preventDefault(); + const { location, cat } = this.state; + this.props.postReport({ location, cat }); + }; + render() { + console.log(this.state.location); + return ( +
+
this.props.closeReport()} /> +
+
this.handleSubmit(e)}> + this.setState({ location: e.target })} + > + {/* this.setState({location: e.target.value })}/> */} + this.setState({ cat: e.target.value })} + /> + +
+
+
+ ); + } +} + +export default connect( + null, + { postReport } +)(ReportAction); diff --git a/client/src/styles/components/reportPanel.scss b/client/src/styles/components/reportPanel.scss new file mode 100644 index 0000000..64c9afd --- /dev/null +++ b/client/src/styles/components/reportPanel.scss @@ -0,0 +1,39 @@ +.report-panel { + width: 100vw; + height: 100vh; + position: fixed; + z-index: 9999; + display: flex; + justify-content: center; + align-items: center; + + .fade { + background: rgba(0, 0, 0, .7); + position: absolute; + width: 100%; + height: 100%; + cursor: pointer; + } + + &__wrapper { + background: black; + width: 400px; + height: 400px; + display: flex; + flex-wrap: wrap; + justify-content: center; + position: relative; + + input { + width: 100%; + padding: 10px; + border: 0; + border-radius: 20px; + margin-top: 10px; + } + + } + + +} + diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss index 19fd67d..4523863 100644 --- a/client/src/styles/main.scss +++ b/client/src/styles/main.scss @@ -6,4 +6,5 @@ //components styling @import 'components/map'; @import 'components/navigation'; -@import 'components/panelAction'; \ No newline at end of file +@import 'components/panelAction'; +@import 'components/reportPanel'; \ No newline at end of file