diff --git a/ev_station/app/Context/UserLocationContext.jsx b/ev_station/app/context/UserLocationContext.jsx similarity index 100% rename from ev_station/app/Context/UserLocationContext.jsx rename to ev_station/app/context/UserLocationContext.jsx diff --git a/ev_station/app/index.js b/ev_station/app/index.js index 88ecdd3..7111394 100644 --- a/ev_station/app/index.js +++ b/ev_station/app/index.js @@ -7,7 +7,7 @@ import * as Location from 'expo-location'; import { NavigationContainer } from "@react-navigation/native"; import HomeNavigator from "./Navigation/HomeNavigator"; import { useEffect, useState } from "react"; -import { UserLocationContext } from "../app/Context/UserLocationContext"; +import { UserLocationContext } from "./context/UserLocationContext"; const tokenCache = { diff --git a/ev_station/app/misc/GlobalApi.js b/ev_station/app/misc/GlobalApi.js new file mode 100644 index 0000000..a4261cf --- /dev/null +++ b/ev_station/app/misc/GlobalApi.js @@ -0,0 +1,25 @@ +import axios from 'axios' + +const BASE_URL = 'https://places.googleapis.com/v1/places:searchNearby'; +const API_KEY = process.env.EXPO_PUBLIC_GOOGLE_PLACE_API_KEY; + +const config = { + headers:{ + 'Content-Type': 'application/json', + 'X-Goog-Api-Key': API_KEY, + 'X-Goog-FieldMask': [ + 'places.displayName', + 'places.formattedAddress', + 'places.location', + 'places.evChargeOptions', + 'places.photos' + ] + } +} + +const NewNearByPlace = (data) => axios.post(BASE_URL, data, config).catch(function (error) { + console.log(error.toJSON()); + }); +; + +export default{NewNearByPlace, API_KEY} \ No newline at end of file diff --git a/ev_station/app/screen/HomeScreen.jsx b/ev_station/app/screen/HomeScreen.jsx index 63af050..104808c 100644 --- a/ev_station/app/screen/HomeScreen.jsx +++ b/ev_station/app/screen/HomeScreen.jsx @@ -1,11 +1,41 @@ import { Image, Pressable, StyleSheet, Text, View } from 'react-native'; -import React from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import MapViewScreen from "../screen/mapView/MapViewScreen"; - import HomeHeader from './HomeHeader'; import HomeSearch from './HomeSearch'; +import { UserLocationContext } from '../context/UserLocationContext'; +import GlobalApi from '../misc/GlobalApi'; +import EVListView from '../screen/googleList/EVListView'; const HomeScreen = () => { + const {location, setLocation} = useContext(UserLocationContext); + const [placeList, setPlaceList] = useState([]); + + useEffect(() => { + location && GetNearByPlace(); + },[location]) + + const GetNearByPlace = () => { + + const data = { + "includedTypes": ["electric_vehicle_charging_station"], + "maxResultCount": 10, + "locationRestriction": { + "circle": { + "center": { + "latitude": location?.latitude, + "longitude": location?.longitude + }, + "radius": 5000.0 + } + } + } + + GlobalApi.NewNearByPlace(data).then(res => { + console.log(JSON.stringify(res.data)); + setPlaceList(res.data?.places); + }) + } return ( @@ -13,8 +43,10 @@ const HomeScreen = () => { console.log(location)}/> - - + {placeList && } + + {placeList && } + ) } diff --git a/ev_station/app/screen/googleList/EVListView.jsx b/ev_station/app/screen/googleList/EVListView.jsx new file mode 100644 index 0000000..4f4aa37 --- /dev/null +++ b/ev_station/app/screen/googleList/EVListView.jsx @@ -0,0 +1,41 @@ +import { Dimensions, FlatList, StyleSheet, Text, View } from 'react-native' +import React, { useEffect, useRef } from 'react' +import ItemList from './ItemList' + +const EVListView = ({placeList}) => { + const flatListRef = useRef(null); + + useEffect(() => { + //scrollToIndex(); + }, []) + + const scrollToIndex = (index) => { + flatListRef.current?.scrollToIndex({animated: true, index}) + } + + const getItemLayout = (_,index) => ({ + length: Dimensions.get('window').width, + offset: Dimensions.get('window').width*index, + index + }); + + return ( + + ( + + + + )} + /> + + ) +} + +export default EVListView + +const styles = StyleSheet.create({}) \ No newline at end of file diff --git a/ev_station/app/screen/googleList/ItemList.jsx b/ev_station/app/screen/googleList/ItemList.jsx new file mode 100644 index 0000000..70b85c2 --- /dev/null +++ b/ev_station/app/screen/googleList/ItemList.jsx @@ -0,0 +1,28 @@ +import { Dimensions, Image, Pressable, StyleSheet, Text, View } from 'react-native' +import React from 'react' +import GlobalApi from '@/app/misc/GlobalApi' + +const ItemList = ({place}) => { + const placePhoto_Base_Url = 'https://places.googleapis.com/v1/' + + return ( + + + + + {place.displayName.text} + Total chargers: {place?.evChargeOptions?.connectorCount} + {place?.formattedAddress} + + + Start + + + + ) +} + +export default ItemList + +const styles = StyleSheet.create({}) \ No newline at end of file diff --git a/ev_station/app/screen/mapView/MapViewScreen.jsx b/ev_station/app/screen/mapView/MapViewScreen.jsx index 2fadad1..c6f1b7c 100644 --- a/ev_station/app/screen/mapView/MapViewScreen.jsx +++ b/ev_station/app/screen/mapView/MapViewScreen.jsx @@ -1,10 +1,11 @@ import { Image, StyleSheet, Text, View } from 'react-native'; import React, { useContext } from 'react'; import MapView, { Marker, PROVIDER_DEFAULT} from 'react-native-maps'; -import { UserLocationContext } from '@/app/Context/UserLocationContext'; +import { UserLocationContext } from '@/app/context/UserLocationContext'; +import MarkerList from '../mapView/MarkerList'; -const MapViewScreen = () => { +const MapViewScreen = ({placeList}) => { const {location, setLocation} = useContext(UserLocationContext) @@ -12,17 +13,21 @@ const {location, setLocation} = useContext(UserLocationContext) - - - + {location? + + : null} + + {placeList && placeList.map((item, index) => ( + + ))} + ) diff --git a/ev_station/app/screen/mapView/MarkerList.jsx b/ev_station/app/screen/mapView/MarkerList.jsx new file mode 100644 index 0000000..1c7b19b --- /dev/null +++ b/ev_station/app/screen/mapView/MarkerList.jsx @@ -0,0 +1,19 @@ +import { Image, StyleSheet, Text, View } from 'react-native' +import React from 'react' +import { Marker } from 'react-native-maps' + +const MarkerList = ({index, place}) => { + return place && ( + {}} + coordinate={{ + latitude: place.location?.latitude, + longitude: place.location?.longitude + }}> + + + ) +} + +export default MarkerList + +const styles = StyleSheet.create({}) \ No newline at end of file diff --git a/ev_station/assets/images/ev_images/charging.png b/ev_station/assets/images/ev_images/charging.png new file mode 100644 index 0000000..293277c Binary files /dev/null and b/ev_station/assets/images/ev_images/charging.png differ diff --git a/ev_station/package-lock.json b/ev_station/package-lock.json index 48f72c8..3e41c72 100644 --- a/ev_station/package-lock.json +++ b/ev_station/package-lock.json @@ -11,6 +11,7 @@ "@clerk/clerk-expo": "^2.0.0", "@expo/vector-icons": "^14.0.2", "@react-navigation/native": "^6.1.18", + "axios": "^1.7.2", "expo": "~51.0.22", "expo-constants": "~16.0.2", "expo-font": "~12.0.9", @@ -7428,6 +7429,29 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/babel-core": { "version": "7.0.0-bridge.0", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", @@ -10210,6 +10234,25 @@ "node": ">=0.4.0" } }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/fontfaceobserver": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz", @@ -15778,6 +15821,11 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/ev_station/package.json b/ev_station/package.json index 182c0e5..3934316 100644 --- a/ev_station/package.json +++ b/ev_station/package.json @@ -18,6 +18,7 @@ "@clerk/clerk-expo": "^2.0.0", "@expo/vector-icons": "^14.0.2", "@react-navigation/native": "^6.1.18", + "axios": "^1.7.2", "expo": "~51.0.22", "expo-constants": "~16.0.2", "expo-font": "~12.0.9",