Skip to content

Commit 9cea5e8

Browse files
athulroshathulrosh
committed
Driver map update
1 parent 8288832 commit 9cea5e8

File tree

15 files changed

+422
-54
lines changed

15 files changed

+422
-54
lines changed

‎Driver/App.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { Platform, StatusBar, StyleSheet, Text, View } from "react-native";
22
import Routes from "./Routes/routes";
3+
import DriverContextProvider from "./context/Context";
34

45
export default function App() {
56
return (
67
<View style={styles.container}>
7-
<Routes/>
8+
<DriverContextProvider>
9+
<Routes/>
10+
</DriverContextProvider>
811
</View>
912
);
1013
}

‎Driver/Routes/routes.js

+20-14
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,39 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
33
import LoginScreen from "../screens/login";
44
import SignUpScreen from "../screens/signup";
55
import Dashboard from "../screens/Dashboard";
6-
6+
import { DriverContext } from "../context/Context";
7+
import { useContext } from "react";
78

89
const Routes = () => {
910
const Stack = createNativeStackNavigator();
11+
const { token } = useContext(DriverContext);
1012
return (
1113
<NavigationContainer>
1214
<Stack.Navigator>
13-
14-
<>
15-
<Stack.Screen
16-
name="Login"
17-
component={LoginScreen}
18-
options={{ headerShown: false }}
19-
/>
20-
<Stack.Screen
21-
name="SignUp"
22-
component={SignUpScreen}
23-
options={{ headerShown: false }}
24-
/>
25-
</>
15+
{!token ?(
16+
<>
17+
<Stack.Screen
18+
name="Login"
19+
component={LoginScreen}
20+
options={{ headerShown: false }}
21+
/>
22+
<Stack.Screen
23+
name="SignUp"
24+
component={SignUpScreen}
25+
options={{ headerShown: false }}
26+
/>
27+
</>
28+
):(
2629
<>
2730
<Stack.Screen
2831
name="Dashboard"
2932
component={Dashboard}
3033
options={{ headerShown: false }}
3134
/>
3235
</>
36+
37+
)}
38+
3339

3440
</Stack.Navigator>
3541
</NavigationContainer>

‎Driver/components/DashboardContent.js

+50-10
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,48 @@ import color from "../config/color";
55
import ToggleButton from "./ToggleButton";
66
import OrderBox from "./OrderBox";
77
import * as Location from "expo-location";
8+
import { DriverContext } from "../context/Context";
9+
import MapView from "./MapView/MapView";
810

11+
const DashboardContent = (navigation) => {
912

10-
const DashboardContent = () => {
11-
13+
const [location,setLocation] = useState(null)
14+
const {getOrders,token,orderList,updateOrderStatus} =useContext(DriverContext);
1215

16+
17+
useEffect(() => {
18+
const getLocation = async () => {
19+
let { status } = await Location.requestForegroundPermissionsAsync();
20+
if (status !== "granted") {
21+
console.log("Permission denied");
22+
return;
23+
}
24+
25+
try {
26+
let location = await Location.getLastKnownPositionAsync({});
27+
if (location) {
28+
console.log("Got location");
29+
const { latitude, longitude } = location.coords;
30+
// updateUserLocation(longitude, latitude);
31+
setLocation([latitude, longitude]);
32+
} else {
33+
console.log("Didn't get location");
34+
const defaultLatitude = 9.2656466;
35+
const defaultLongitude = 76.8089454;
36+
// updateUserLocation(defaultLongitude, defaultLatitude);
37+
setLocation([defaultLatitude, defaultLongitude]);
38+
}
39+
} catch (error) {
40+
console.error("Error getting location:", error);
41+
const defaultLatitude = 9.2656466;
42+
const defaultLongitude = 76.8089454;
43+
// updateUserLocation(defaultLongitude, defaultLatitude);
44+
setLocation([defaultLatitude, defaultLongitude]);
45+
}
46+
};
47+
getLocation();
48+
}, []);
49+
1350
return (
1451
<View>
1552
<View style={{ justifyContent: "center" }}>
@@ -20,18 +57,21 @@ const DashboardContent = () => {
2057
<Text style={styles.statustext}>Status</Text>
2158
</View>
2259
</View>
23-
60+
2461
<View>
25-
<OrderBox
62+
<OrderBox navigation={navigation}
2663
userimg={require("../assets/girl.jpg")}
27-
name="SERENA"
28-
location="10.110.21.22"
29-
fuel="PETROL"
30-
litre="2"
64+
name={orderList[0].userInfo.name}
65+
litre={orderList[0].fuelAmount}
66+
fuel={orderList[0].fuelType}
67+
phone={orderList[0].userInfo.phoneNumber}
3168
distance="10"
3269
/>
33-
{/* for map view */}
34-
70+
</View>
71+
<View style={{paddingTop: 23,
72+
paddingLeft: 10,
73+
height: 500,}}>
74+
<MapView location={location}/>
3575
</View>
3676
</View>
3777
);

‎Driver/components/MapTemplate/map-template.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
export default `
2+
<div>
3+
<style>
4+
html, body {
5+
margin: 0;
6+
}
7+
8+
#map {
9+
height: 100%;
10+
width: 100%;
11+
}
12+
</style>
13+
14+
<div id='map' class='map'></div>
15+
16+
<!-- load TomTom Maps Web SDK from CDN -->
17+
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.13.0/maps/maps.css'/>
18+
<script src='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.13.0/maps/maps-web.min.js'></script>
19+
20+
<script>
21+
// create the map
22+
tt.setProductInfo('TomTom Maps React Native Demo', '1.0');
23+
let map = tt.map({
24+
key: 'G6s10rHxiazuOmC5kNMPeyqgDmGAdezZ',
25+
container: 'map',
26+
zoom: 17
27+
});
28+
29+
let marker = null;
30+
31+
map.on('dragend', function() {
32+
let center = map.getCenter();
33+
window.ReactNativeWebView.postMessage(center.lng.toFixed(3) + ", " + center.lat.toFixed(3));
34+
})
35+
36+
37+
</script>
38+
</div>
39+
`;

‎Driver/components/MapView/MapView.js

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import React, { useEffect, useState } from "react";
2+
import { Button, StyleSheet, TextInput, View } from "react-native";
3+
import WebView from "react-native-webview";
4+
5+
import mapTemplate from "../MapTemplate/map-template";
6+
7+
const MapView = ({ location }) => {
8+
let webRef = undefined;
9+
let [mapCenter, setMapCenter] = useState("76.2144, 10.5276");
10+
11+
useEffect(() => {
12+
if (location) {
13+
setMapCenter(`${location[1]},${location[0]}`);
14+
}
15+
16+
const [lng, lat] = mapCenter.split(",");
17+
webRef.injectJavaScript(`
18+
map.setCenter([${parseFloat(lng)}, ${parseFloat(lat)}])
19+
20+
if(marker){
21+
marker.remove();
22+
}
23+
24+
marker = new tt.Marker().setLngLat([${parseFloat(lng)},${parseFloat(
25+
lat
26+
)}]).addTo(map);`);
27+
}, [location]);
28+
29+
// const onButtonClick = () => {
30+
// const [lng, lat] = mapCenter.split(",");
31+
// webRef.injectJavaScript(`
32+
// map.setCenter([${parseFloat(lng)}, ${parseFloat(lat)}])
33+
34+
// if(marker){
35+
// marker.remove();
36+
// }
37+
38+
// marker = new tt.Marker().setLngLat([${parseFloat(lng)},${parseFloat(
39+
// lat
40+
// )}]).addTo(map);
41+
// `);
42+
// };
43+
44+
const handleMapEvent = (event) => {
45+
console.log(event.nativeEvent.data);
46+
setMapCenter(event.nativeEvent.data);
47+
};
48+
49+
return (
50+
<View style={styles.container}>
51+
<View style={styles.buttons}>
52+
<TextInput
53+
style={styles.textInput}
54+
onChangeText={setMapCenter}
55+
value={mapCenter}
56+
/>
57+
<Button
58+
title="Set Center"
59+
onPress={() => {
60+
console.log("clicked");
61+
}}
62+
/>
63+
</View>
64+
<View style={styles.mapContainer}>
65+
<WebView
66+
ref={(r) => (webRef = r)}
67+
onMessage={handleMapEvent}
68+
style={styles.map}
69+
originWhitelist={["*"]}
70+
source={{ html: mapTemplate }}
71+
/>
72+
</View>
73+
</View>
74+
);
75+
};
76+
77+
const styles = StyleSheet.create({
78+
container: {
79+
flexDirection: "column",
80+
flex: 1,
81+
backgroundColor: "red",
82+
},
83+
buttons: {
84+
flexDirection: "row",
85+
height: "15%",
86+
backgroundColor: "#fff",
87+
color: "#000",
88+
alignItems: "center",
89+
justifyContent: "center",
90+
paddingTop: 12,
91+
},
92+
textInput: {
93+
height: 40,
94+
width: "60%",
95+
marginRight: 12,
96+
paddingLeft: 5,
97+
borderWidth: 1,
98+
},
99+
mapContainer: {
100+
flex: 1,
101+
},
102+
map: {
103+
width: "100%",
104+
height: "85%",
105+
alignItems: "center",
106+
justifyContent: "center",
107+
transform: [{scale:3}]
108+
109+
},
110+
});
111+
112+
export default MapView;

‎Driver/components/OrderBox.js

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
import React, { useState } from "react";
1+
import React, { useContext, useState } from "react";
22
import { Image, StyleSheet, Text, View } from "react-native";
33
import color from "../config/color";
4+
import { TouchableOpacity } from "react-native";
5+
import { DriverContext } from "../context/Context";
46

5-
const OrderBox = ({ userimg, name, fuel, litre, distance, location }) => {
7+
8+
const OrderBox = ({navigation, userimg, name, fuel, litre, distance, location,phone }) => {
9+
const {orderList,updateOrderStatus} =useContext(DriverContext);
10+
611
return (
712
<View style={styles.MainBox}>
813
<View
@@ -22,8 +27,17 @@ const OrderBox = ({ userimg, name, fuel, litre, distance, location }) => {
2227
<View style={styles.sideText}>
2328
<Text>FUEL:{fuel}</Text>
2429
<Text>LITRE:{litre}L</Text>
25-
<Text>LOCATION:{location}</Text>
2630
<Text>DISTANCE:{distance}KM</Text>
31+
<Text>DISTANCE:{phone}</Text>
32+
{(orderList[0].status === "Processing")?
33+
(<TouchableOpacity style={styles.button} onPress={()=>{updateOrderStatus(orderList[0]._id,"Delivered");
34+
orderList[0].status="Delivered";
35+
}} >
36+
<Text style={styles.accreText}>COMPLETE</Text>
37+
</TouchableOpacity>)
38+
:(<TouchableOpacity style={styles.button} >
39+
<Text style={styles.accreText}>COMPLETED</Text>
40+
</TouchableOpacity>)}
2741
</View>
2842
</Text>
2943
</View>

‎Driver/context/Context.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,15 @@ const initialState = {
4444

4545
export const DriverContext = createContext(initialState);
4646

47-
const DistributorContextProvider = ({ children }) => {
47+
const DriverContextProvider = ({ children }) => {
4848
const [driverState, dispatch] = useReducer(driverContextReducer, initialState);
4949
const [orderList, setOrderList] = useState([]);
5050
let [token, setToken] = useState("");
5151

5252
const config = {
5353
headers: {
5454
"Content-Type": "application/json",
55+
5556
},
5657
};
5758
const driverConfig = {
@@ -174,13 +175,15 @@ const DistributorContextProvider = ({ children }) => {
174175
}
175176

176177
const logoutDriver = async () => {
178+
console.log("logged Out")
177179
try {
178180
const res = axios.get(`${driverUrl}/logout`, driverConfig);
179181
dispatch({
180182
type: DRIVER_LOGOUT_SUCCESS,
181183
});
182184
setToken(null)
183185
AsyncStorage.setItem("@token", "");
186+
console.log("token")
184187
} catch (error) {
185188
console.log("Driver Logout Failed: " + { error });
186189
dispatch({
@@ -209,7 +212,7 @@ const DistributorContextProvider = ({ children }) => {
209212
};
210213

211214
return (
212-
<DistributorContext.Provider
215+
<DriverContext.Provider
213216
value={{
214217
driverState,
215218
token,
@@ -224,8 +227,8 @@ const DistributorContextProvider = ({ children }) => {
224227
}}
225228
>
226229
{children}
227-
</DistributorContext.Provider>
230+
</DriverContext.Provider>
228231
);
229232
}
230233

231-
export default DistributorContextProvider;
234+
export default DriverContextProvider;

0 commit comments

Comments
 (0)