Commit @10fed03f31cf73eca8b8ad8b6781130d31b9e7d5 - ansdpwn/도로위험상황

moonyeju 2023-11-15

[FIX] driving문제 수정

@10fed03f31cf73eca8b8ad8b6781130d31b9e7d5

aeb2733

10fed03

src/component/Map.js

--- src/component/Map.js

+++ src/component/Map.js


 
   return (
     <View style={styles.mapStyle}>
-      <View style={styles.searchContainer}>
-        <Search placeholder={'도착지를 입력하세요'} />
-      </View>
       <MapView
         style={styles.mapStyle}
         provider={PROVIDER_GOOGLE}

             />
           ))}
       </MapView>
-      <View style={styles.buttonstyle}>
+      {/* <View style={styles.buttonstyle}>
         <View style={styles.markerButtonStyle}>
           <Button
             title={'마커 표시'}

             backgroundColor={PRIMERY}
           />
         </View>
-      </View>
+      </View> */}
     </View>
   );
 }

   mapStyle: {
     flex: 1,
   },
-  searchContainer: {
-    paddingTop: 10,
-    flexDirection: 'row',
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 5,
-  },
+
   buttonstyle: {
     marginHorizontal: 15,
   },

aeb2733

10fed03

src/component/Photo.js

--- src/component/Photo.js

+++ src/component/Photo.js


 import RNFS from 'react-native-fs';
 import {url} from '../url';
 import ModalComponent from './ModalComponent';
+import {MapContext} from '../context/MapContext';
 
 export default function Photo({onUploadFile}) {
   const {onQuery, location} = useContext(MapContext);

aeb2733

10fed03

src/context/MapContext.js

--- src/context/MapContext.js

+++ src/context/MapContext.js


 import React, {createContext, useState, useEffect} from 'react';
 import Geolocation from 'react-native-geolocation-service';
-import {Platform, PermissionsAndroid} from 'react-native';
+import {Platform, PermissionsAndroid, Alert} from 'react-native';
+import {url} from '../url';
+// import {accelerometer} from 'react-native-sensors';
+import {
+  setUpdateIntervalForType,
+  SensorTypes,
+  accelerometer,
+} from 'react-native-sensors';
+import {latLng} from 'leaflet';
 
 export const MapContext = createContext();
 

   //현위치, marker 위치 검색내용 state
   const [location, setLocation] = useState();
   const [searchQuery, setSearchQuery] = useState(null);
+  const [isAccelerometerActive, setIsAccelerometerActive] = useState(false); // 상태 추가
 
   //backedn 받아온 node
   const [startPoint, setStartPoint] = useState();

   }, []);
 
   //두좌표 거리 구하는 함수
+  function getDistance(lat1, lon1, lat2, lon2) {
+    if (lat1 == lat2 && lon1 == lon2) return 0;
+
+    var radLat1 = (Math.PI * lat1) / 180;
+    var radLat2 = (Math.PI * lat2) / 180;
+    var theta = lon1 - lon2;
+    var radTheta = (Math.PI * theta) / 180;
+    var dist =
+      Math.sin(radLat1) * Math.sin(radLat2) +
+      Math.cos(radLat1) * Math.cos(radLat2) * Math.cos(radTheta);
+    if (dist > 1) dist = 1;
+
+    dist = Math.acos(dist);
+    dist = (dist * 180) / Math.PI;
+    dist = dist * 60 * 1.1515 * 1.609344 * 1000;
+    if (dist < 100) dist = Math.round(dist / 10) * 10;
+    else dist = Math.round(dist / 100) * 100;
+
+    return dist;
+  }
 
   //목적지 send
   const onQuery = query => {
+    setSearchQuery(query);
     const {latitude, longitude} = location;
+    return fetch(`${url}/trip/trip2`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8',
+      },
+      body: JSON.stringify({
+        dest1_x: latitude,
+        dest1_y: longitude,
+        path_end: query,
+      }),
+    })
+      .then(response => response.json())
+      .then(data => {
+        const nodes = data.nodes;
+        const start_point = data.start_point;
+        const end_point = data.end_point;
+
+        //end_point obj 변환
+        let endPointObj = {};
+        endPointObj.latitude = end_point[0];
+        endPointObj.longitude = end_point[1];
+        setEndPoint(endPointObj);
+        //nodes obj 변환
+        let nodesArr = nodes;
+        let resultNodes = nodesArr.map(i => {
+          let nodesObj = {};
+          nodesObj.latitude = i[0];
+          nodesObj.longitude = i[1];
+          return nodesObj;
+        });
+        setNodes(resultNodes);
+        //start_point obj 변환
+        let startPointObj = {};
+        startPointObj.latitude = start_point[0];
+        startPointObj.longitude = start_point[1];
+        setStartPoint(startPointObj);
+        // console.log('resultNodes', resultNodes);
+        //nodes total km
+        let total = [];
+        for (let i = 0; i < resultNodes.length - 1; i++) {
+          let km = getDistance(
+            resultNodes[i].latitude,
+            resultNodes[i].longitude,
+            resultNodes[i + 1].latitude,
+            resultNodes[i + 1].longitude,
+          );
+          total.push(km);
+        }
+        const totalKm = total.reduce((acc, curr) => acc + curr, 0);
+        const resultKm = totalKm / 1000;
+        setKm(resultKm);
+        return resultNodes;
+      });
   };
 
   const value = React.useMemo(() => ({

aeb2733

10fed03

src/navigator/AppStack.js

--- src/navigator/AppStack.js

+++ src/navigator/AppStack.js


 import React from 'react';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
-import Main from '../screens/Main'
+import Main from '../screens/Main';
+import Driving from '../screens/Driving';
+import DestinationList from '../screens/DestinationList';
+import AuthStack from './AuthStack';
 
 const Stack = createNativeStackNavigator();
 
 export default function AppStack() {
   return (
     <Stack.Navigator
-      initialRouteName='Main'
+      initialRouteName="Main"
       screenOptions={{
         headerBackTitleVisible: false,
         headerShown: false,
       }}>
       <Stack.Screen name="Main" component={Main} />
+      <Stack.Screen name="DestinationList" component={DestinationList} />
+      <Stack.Screen name="Driving" component={Driving} />
+      <Stack.Screen name="Login screen" component={AuthStack} />
     </Stack.Navigator>
   );
-}
+}

aeb2733

10fed03

src/screens/DestinationList.js

--- src/screens/DestinationList.js

+++ src/screens/DestinationList.js


         <Polyline coordinates={nodes} strokeWidth={10} strokeColor={PRIMERY} />
       </Map>
       <BottomDrop>
-        <View style={directionAlign}>
+        <View style={[directionAlign, {flexDirection: 'row'}]}>
           <Text style={{flex: 9}}>{searchQuery}</Text>
           <Button
             title={'운행 시작'}

aeb2733

10fed03

src/screens/Main.js

--- src/screens/Main.js

+++ src/screens/Main.js


 import {url} from '../url';
 import {PRIMERY, RED, WHITE} from '../color';
 import ModalComponent from '../component/ModalComponent';
+import Search from '../component/Search';
 
 export default function Main({navigation}) {
   const {onQuery, searchQuery, location, nodes} = useContext(MapContext);

 
   return (
     <View style={{flex: 1}}>
+      <View style={styles.searchContainer}>
+        <Search placeholder={'도착지를 입력하세요'} />
+      </View>
       <Map
         lat={location.latitude}
         long={location.longitude}

 
 const styles = StyleSheet.create({
   container: {
-    width: '45%',
+    width: '90%',
     // marginLeft: 5,
     // justifyContent: 'center',
     // alignItems: 'center',

     bottom: 7,
     right: 15,
   },
+  searchContainer: {
+    paddingTop: 10,
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 5,
+  },
   infoContainer: {
     marginTop: 16,
     justifyContent: 'center',

Add a comment

Open 0
Closed 0

List

...	...	@@ -45,9 +45,6 @@
45	45
46	46	return (
47	47	<View style={styles.mapStyle}>
48		- <View style={styles.searchContainer}>
49		- <Search placeholder={'도착지를 입력하세요'} />
50		- </View>
51	48	<MapView
52	49	style={styles.mapStyle}
53	50	provider={PROVIDER_GOOGLE}
...	...	@@ -70,7 +67,7 @@
70	67	/>
71	68	))}
72	69	</MapView>
73		- <View style={styles.buttonstyle}>
	70	+ {/* <View style={styles.buttonstyle}>
74	71	<View style={styles.markerButtonStyle}>
75	72	<Button
76	73	title={'마커 표시'}
...	...	@@ -82,7 +79,7 @@
82	79	backgroundColor={PRIMERY}
83	80	/>
84	81	</View>
85		- </View>
	82	+ </View> */}
86	83	</View>
87	84	);
88	85	}
...	...	@@ -97,14 +94,7 @@
97	94	mapStyle: {
98	95	flex: 1,
99	96	},
100		- searchContainer: {
101		- paddingTop: 10,
102		- flexDirection: 'row',
103		- width: '100%',
104		- justifyContent: 'center',
105		- alignItems: 'center',
106		- paddingHorizontal: 5,
107		- },
	97	+
108	98	buttonstyle: {
109	99	marginHorizontal: 15,
110	100	},

...	...	@@ -40,7 +40,7 @@
40	40	<Polyline coordinates={nodes} strokeWidth={10} strokeColor={PRIMERY} />
41	41	</Map>
42	42	<BottomDrop>
43		- <View style={directionAlign}>
	43	+ <View style={[directionAlign, {flexDirection: 'row'}]}>
44	44	<Text style={{flex: 9}}>{searchQuery}</Text>
45	45	<Button
46	46	title={'운행 시작'}

...	...	@@ -14,6 +14,7 @@
14	14	import {url} from '../url';
15	15	import {PRIMERY, RED, WHITE} from '../color';
16	16	import ModalComponent from '../component/ModalComponent';
	17	+import Search from '../component/Search';
17	18
18	19	export default function Main({navigation}) {
19	20	const {onQuery, searchQuery, location, nodes} = useContext(MapContext);
...	...	@@ -161,6 +162,9 @@
161	162
162	163	return (
163	164	<View style={{flex: 1}}>
	165	+ <View style={styles.searchContainer}>
	166	+ <Search placeholder={'도착지를 입력하세요'} />
	167	+ </View>
164	168	<Map
165	169	lat={location.latitude}
166	170	long={location.longitude}
...	...	@@ -208,7 +212,7 @@
208	212
209	213	const styles = StyleSheet.create({
210	214	container: {
211		- width: '45%',
	215	+ width: '90%',
212	216	// marginLeft: 5,
213	217	// justifyContent: 'center',
214	218	// alignItems: 'center',
...	...	@@ -216,6 +220,14 @@
216	220	bottom: 7,
217	221	right: 15,
218	222	},
	223	+ searchContainer: {
	224	+ paddingTop: 10,
	225	+ flexDirection: 'row',
	226	+ width: '100%',
	227	+ justifyContent: 'center',
	228	+ alignItems: 'center',
	229	+ paddingHorizontal: 5,
	230	+ },
219	231	infoContainer: {
220	232	marginTop: 16,
221	233	justifyContent: 'center',

...	...	@@ -10,6 +10,7 @@
10	10	import RNFS from 'react-native-fs';
11	11	import {url} from '../url';
12	12	import ModalComponent from './ModalComponent';
	13	+import {MapContext} from '../context/MapContext';
13	14
14	15	export default function Photo({onUploadFile}) {
15	16	const {onQuery, location} = useContext(MapContext);

...	...	@@ -1,6 +1,14 @@
1	1	import React, {createContext, useState, useEffect} from 'react';
2	2	import Geolocation from 'react-native-geolocation-service';
3		-import {Platform, PermissionsAndroid} from 'react-native';
	3	+import {Platform, PermissionsAndroid, Alert} from 'react-native';
	4	+import {url} from '../url';
	5	+// import {accelerometer} from 'react-native-sensors';
	6	+import {
	7	+ setUpdateIntervalForType,
	8	+ SensorTypes,
	9	+ accelerometer,
	10	+} from 'react-native-sensors';
	11	+import {latLng} from 'leaflet';
4	12
5	13	export const MapContext = createContext();
6	14
...	...	@@ -24,6 +32,7 @@
24	32	//현위치, marker 위치 검색내용 state
25	33	const [location, setLocation] = useState();
26	34	const [searchQuery, setSearchQuery] = useState(null);
	35	+ const [isAccelerometerActive, setIsAccelerometerActive] = useState(false); // 상태 추가
27	36
28	37	//backedn 받아온 node
29	38	const [startPoint, setStartPoint] = useState();
...	...	@@ -55,10 +64,84 @@
55	64	}, []);
56	65
57	66	//두좌표 거리 구하는 함수
	67	+ function getDistance(lat1, lon1, lat2, lon2) {
	68	+ if (lat1 == lat2 && lon1 == lon2) return 0;
	69	+
	70	+ var radLat1 = (Math.PI * lat1) / 180;
	71	+ var radLat2 = (Math.PI * lat2) / 180;
	72	+ var theta = lon1 - lon2;
	73	+ var radTheta = (Math.PI * theta) / 180;
	74	+ var dist =
	75	+ Math.sin(radLat1) * Math.sin(radLat2) +
	76	+ Math.cos(radLat1) * Math.cos(radLat2) * Math.cos(radTheta);
	77	+ if (dist > 1) dist = 1;
	78	+
	79	+ dist = Math.acos(dist);
	80	+ dist = (dist * 180) / Math.PI;
	81	+ dist = dist * 60 * 1.1515 * 1.609344 * 1000;
	82	+ if (dist < 100) dist = Math.round(dist / 10) * 10;
	83	+ else dist = Math.round(dist / 100) * 100;
	84	+
	85	+ return dist;
	86	+ }
58	87
59	88	//목적지 send
60	89	const onQuery = query => {
	90	+ setSearchQuery(query);
61	91	const {latitude, longitude} = location;
	92	+ return fetch(`${url}/trip/trip2`, {
	93	+ method: 'POST',
	94	+ headers: {
	95	+ 'Content-Type': 'application/json; charset=UTF-8',
	96	+ },
	97	+ body: JSON.stringify({
	98	+ dest1_x: latitude,
	99	+ dest1_y: longitude,
	100	+ path_end: query,
	101	+ }),
	102	+ })
	103	+ .then(response => response.json())
	104	+ .then(data => {
	105	+ const nodes = data.nodes;
	106	+ const start_point = data.start_point;
	107	+ const end_point = data.end_point;
	108	+
	109	+ //end_point obj 변환
	110	+ let endPointObj = {};
	111	+ endPointObj.latitude = end_point[0];
	112	+ endPointObj.longitude = end_point[1];
	113	+ setEndPoint(endPointObj);
	114	+ //nodes obj 변환
	115	+ let nodesArr = nodes;
	116	+ let resultNodes = nodesArr.map(i => {
	117	+ let nodesObj = {};
	118	+ nodesObj.latitude = i[0];
	119	+ nodesObj.longitude = i[1];
	120	+ return nodesObj;
	121	+ });
	122	+ setNodes(resultNodes);
	123	+ //start_point obj 변환
	124	+ let startPointObj = {};
	125	+ startPointObj.latitude = start_point[0];
	126	+ startPointObj.longitude = start_point[1];
	127	+ setStartPoint(startPointObj);
	128	+ // console.log('resultNodes', resultNodes);
	129	+ //nodes total km
	130	+ let total = [];
	131	+ for (let i = 0; i < resultNodes.length - 1; i++) {
	132	+ let km = getDistance(
	133	+ resultNodes[i].latitude,
	134	+ resultNodes[i].longitude,
	135	+ resultNodes[i + 1].latitude,
	136	+ resultNodes[i + 1].longitude,
	137	+ );
	138	+ total.push(km);
	139	+ }
	140	+ const totalKm = total.reduce((acc, curr) => acc + curr, 0);
	141	+ const resultKm = totalKm / 1000;
	142	+ setKm(resultKm);
	143	+ return resultNodes;
	144	+ });
62	145	};
63	146
64	147	const value = React.useMemo(() => ({

...	...	@@ -1,19 +1,25 @@
1	1	import React from 'react';
2	2	import {createNativeStackNavigator} from '@react-navigation/native-stack';
3	3
4		-import Main from '../screens/Main'
	4	+import Main from '../screens/Main';
	5	+import Driving from '../screens/Driving';
	6	+import DestinationList from '../screens/DestinationList';
	7	+import AuthStack from './AuthStack';
5	8
6	9	const Stack = createNativeStackNavigator();
7	10
8	11	export default function AppStack() {
9	12	return (
10	13	<Stack.Navigator
11		- initialRouteName='Main'
	14	+ initialRouteName="Main"
12	15	screenOptions={{
13	16	headerBackTitleVisible: false,
14	17	headerShown: false,
15	18	}}>
16	19	<Stack.Screen name="Main" component={Main} />
	20	+ <Stack.Screen name="DestinationList" component={DestinationList} />
	21	+ <Stack.Screen name="Driving" component={Driving} />
	22	+ <Stack.Screen name="Login screen" component={AuthStack} />
17	23	</Stack.Navigator>
18	24	);
19		-} (파일 끝에 줄바꿈 문자 없음)
	25	+}

Delete comment