keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Allow user location to be manually adjusted

Browse source
This commit is contained in:
Keannu Bernasol 2023-08-05 14:43:29 +08:00
parent 93aab046d8
commit 16f3cda10d
1 changed files with 48 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/routes/Home/Home.tsx
View file

@ -6,7 +6,6 @@ import MapView, { Callout, Marker, UrlTile } from "react-native-maps";
import * as Location from "expo-location"; import * as Location from "expo-location";
import GetDistance from "../../components/GetDistance/GetDistance"; import GetDistance from "../../components/GetDistance/GetDistance";
import Button from "../../components/Button/Button"; import Button from "../../components/Button/Button";
import { AnimatedMapView } from "react-native-maps/lib/MapView";
type LocationType = Location.LocationObject; type LocationType = Location.LocationObject;
export default function Home() { export default function Home() {
const [location, setLocation] = useState<LocationType | null>(null); const [location, setLocation] = useState<LocationType | null>(null);
@ -31,34 +30,36 @@ export default function Home() {
return; return;
} }
if (status == "granted") { if (status == "granted") {
let location = await Location.getCurrentPositionAsync({}); let newLocation = await Location.getCurrentPositionAsync({});
if (location) { if (newLocation) {
setLocation(location); // Only update location state if user's location has changed
getDistance(location); if (
!location ||
newLocation.coords.latitude !== location.coords.latitude ||
newLocation.coords.longitude !== location.coords.longitude
) {
setLocation(newLocation);
GetDistanceRoundedOff(newLocation);
}
} }
} }
} }
// Refresh every 10 seconds // Refresh every 15 seconds
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
requestLocation(); requestLocation();
}, 10000); }, 15000);
return () => clearInterval(interval); return () => clearInterval(interval);
}); });
// Refresh when user moves location
useEffect(() => {
requestLocation();
}, [location]);
// Run when screen loads // Run when screen loads
useEffect(() => { useEffect(() => {
requestLocation(); requestLocation();
}, []); }, []);
async function getDistance(location: LocationType) { async function GetDistanceRoundedOff(location: LocationType) {
let dist = GetDistance( let dist = GetDistance(
location.coords.latitude, location.coords.latitude,
location.coords.longitude, location.coords.longitude,
@ -70,10 +71,10 @@ export default function Home() {
function CustomMap() { function CustomMap() {
if (dist && location) { if (dist && location) {
if (dist <= 2) { if (dist >= 2) {
// Just switch this condition for map debugging // Just switch this condition for map debugging
return ( return (
<AnimatedMapView <MapView
style={styles.map} style={styles.map}
customMapStyle={[ customMapStyle={[
{ {
@ -90,10 +91,9 @@ export default function Home() {
zoomEnabled={true} zoomEnabled={true}
toolbarEnabled={false} toolbarEnabled={false}
rotateEnabled={false} rotateEnabled={false}
zoomControlEnabled maxZoomLevel={19}
minZoomLevel={18} minZoomLevel={19}
zoomTapEnabled zoomTapEnabled
followsUserLocation={true}
initialRegion={{ initialRegion={{
latitude: location.coords.latitude, latitude: location.coords.latitude,
longitude: location.coords.longitude, longitude: location.coords.longitude,
@ -115,6 +115,33 @@ export default function Home() {
longitude: location.coords.longitude, longitude: location.coords.longitude,
}} }}
onPress={() => console.log(location)} onPress={() => console.log(location)}
draggable
onDragEnd={(e) => {
const newLocation = e.nativeEvent.coordinate;
const distance = GetDistance(
newLocation.latitude,
newLocation.longitude,
location.coords.latitude,
location.coords.longitude
);
console.log("Distance:", distance);
if (distance <= 0.1) {
// If the new location is within 100 meters of the actual location, update the location state
setLocation({
...location,
coords: {
...location.coords,
latitude: newLocation.latitude,
longitude: newLocation.longitude,
},
});
} else {
// If the new location is more than 100 meters away from the actual location, reset the marker to the actual location
setLocation({
...location,
});
}
}}
pinColor={colors.primary_1} pinColor={colors.primary_1}
> >
<Callout> <Callout>
@ -125,7 +152,7 @@ export default function Home() {
</Text> </Text>
</Callout> </Callout>
</Marker> </Marker>
</AnimatedMapView> </MapView>
); );
} else { } else {
return ( return (
@ -134,7 +161,7 @@ export default function Home() {
You are too far from USTP {"\n"} You are too far from USTP {"\n"}
Get closer to use Stud-E Get closer to use Stud-E
</Text> </Text>
<AnimatedMapView <MapView
style={{ style={{
height: Viewport.height * 0.5, height: Viewport.height * 0.5,
width: Viewport.width * 0.8, width: Viewport.width * 0.8,
@ -155,7 +182,6 @@ export default function Home() {
zoomEnabled={false} zoomEnabled={false}
toolbarEnabled={false} toolbarEnabled={false}
rotateEnabled={false} rotateEnabled={false}
followsUserLocation={true}
minZoomLevel={18} minZoomLevel={18}
initialRegion={{ initialRegion={{
latitude: location.coords.latitude, latitude: location.coords.latitude,
@ -188,7 +214,7 @@ export default function Home() {
</Text> </Text>
</Callout> </Callout>
</Marker> </Marker>
</AnimatedMapView> </MapView>
<Text style={styles.text_white_small}> <Text style={styles.text_white_small}>
{dist}km away from USTP {"\n"} {dist}km away from USTP {"\n"}
</Text> </Text>