103 lines
2.3 KiB
TypeScript
103 lines
2.3 KiB
TypeScript
import { showToastError } from "@/config";
|
|
import { fetchGpsData } from "@/controller/DeviceController";
|
|
import { useState } from "react";
|
|
import { StyleSheet, Text, TouchableOpacity } from "react-native";
|
|
|
|
import MapView, { Marker } from "react-native-maps";
|
|
import { SafeAreaProvider } from "react-native-safe-area-context";
|
|
|
|
export default function HomeScreen() {
|
|
const [gpsData, setGpsData] = useState<Model.GPSResonse | null>(null);
|
|
|
|
// useEffect(() => {
|
|
// getGpsData();
|
|
// }, []);
|
|
|
|
const getGpsData = async () => {
|
|
try {
|
|
const response = await fetchGpsData();
|
|
console.log("GpsData: ", response.data);
|
|
|
|
setGpsData(response.data);
|
|
} catch (error) {
|
|
showToastError("Lỗi", "Không thể lấy dữ liệu GPS");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<SafeAreaProvider style={styles.container}>
|
|
<MapView
|
|
style={styles.map}
|
|
initialRegion={{
|
|
latitude: 15.70581,
|
|
longitude: 116.152685,
|
|
latitudeDelta: 2,
|
|
longitudeDelta: 2,
|
|
}}
|
|
mapType="none"
|
|
>
|
|
{gpsData && (
|
|
<Marker
|
|
coordinate={{
|
|
latitude: gpsData.lat,
|
|
longitude: gpsData.lon,
|
|
}}
|
|
title="Device Location"
|
|
description={`Lat: ${gpsData.lat}, Lon: ${gpsData.lon}`}
|
|
/>
|
|
)}
|
|
</MapView>
|
|
<TouchableOpacity style={styles.button} onPress={getGpsData}>
|
|
<Text style={styles.buttonText}>Get GPS Data</Text>
|
|
</TouchableOpacity>
|
|
</SafeAreaProvider>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
map: {
|
|
flex: 1,
|
|
},
|
|
button: {
|
|
position: "absolute",
|
|
top: 50,
|
|
right: 20,
|
|
backgroundColor: "#007AFF",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
borderRadius: 8,
|
|
elevation: 5,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
},
|
|
buttonText: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
titleContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
},
|
|
stepContainer: {
|
|
gap: 8,
|
|
marginBottom: 8,
|
|
},
|
|
reactLogo: {
|
|
height: 178,
|
|
width: 290,
|
|
bottom: 0,
|
|
left: 0,
|
|
position: "absolute",
|
|
},
|
|
});
|