public/pogdark-app
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Added distance slider

Browse Source
This commit is contained in:
whysman 2025-04-26 13:28:33 -04:00
parent f714617e35
commit a0ed714f2d
3 changed files with 49 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/Location.tsx
View File

@ -1,6 +1,7 @@
import React, { useState } from "react";
import { Dialog, TextInput, useTheme, Button, Text } from "react-native-paper";
import { View } from "react-native";
import Slider from "@react-native-community/slider";
import axios from "axios";
import * as Location from "expo-location";
import log from "@/util/log"
@ -11,14 +12,14 @@ const BUTTON_WIDTH = 260;
const LocationComponent = () => {
const theme = useTheme();
const [zip, setZip] = useState("");
const [distance, setDistance] = useState(25); // <-- slider value
const [loading, setLoading] = useState(false);
const [locLoading, setLocLoading] = useState(false);
// Call the parks endpoint with coordinates
const fetchNearbyParks = async (longitude: number, latitude: number) => {
try {
const range = 25;
const response = await axios.post(API_URL + "/parkLookup", { "Lon": longitude, "Lat": latitude, "Dist": range });
const response = await axios.post(API_URL + "/parkLookup", { "Lon": longitude, "Lat": latitude, "Dist": distance });
log.error("Nearby Parks:", response.data); // handle parks as you need
} catch (err) {
log.error("Nearby Parks Error:", err);
@ -62,7 +63,7 @@ const LocationComponent = () => {
};
return (
<Dialog.Content style={{ maxHeight: 360, justifyContent: "center", alignItems: "center" }}>
<Dialog.Content style={{ maxHeight: 400, justifyContent: "center", alignItems: "center" }}>
<View style={{ alignItems: "center", width: "100%" }}>
<Button
mode="outlined"
@ -80,6 +81,7 @@ const LocationComponent = () => {
alignItems: "center",
width: BUTTON_WIDTH,
justifyContent: "center",
marginBottom: 4,
}}
>
<TextInput
@ -112,6 +114,23 @@ const LocationComponent = () => {
Submit
</Button>
</View>
{/* Distance Slider */}
<View style={{ width: BUTTON_WIDTH, marginTop: 10, alignItems: "center" }}>
<Text style={{ color: theme.colors.primary, marginBottom: 2 }}>
Distance: {distance} mile{distance !== 1 ? "s" : ""}
</Text>
<Slider
style={{ width: "100%", height: 36 }}
minimumValue={1}
maximumValue={40}
step={1}
value={distance}
onValueChange={setDistance}
minimumTrackTintColor={theme.colors.primary}
maximumTrackTintColor={theme.colors.onSurfaceDisabled || "#ccc"}
thumbTintColor={theme.colors.primary}
/>
</View>
</View>
</Dialog.Content>
);

17
package-lock.json generated
View File

@ -11,6 +11,7 @@
"@expo/metro-runtime": "~4.0.1",
"@expo/vector-icons": "^14.0.2",
"@react-native-async-storage/async-storage": "~2.1.1",
"@react-native-community/slider": "^4.5.6",
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/native": "^7.0.14",
"axios": "~1.8.4",
@ -21,6 +22,7 @@
"expo-haptics": "~14.0.1",
"expo-image-picker": "~16.0.6",
"expo-linking": "~7.0.4",
"expo-location": "^18.0.10",
"expo-router": "~4.0.16",
"expo-splash-screen": "~0.29.20",
"expo-status-bar": "~2.0.1",
@ -3597,6 +3599,12 @@
"react-native": "^0.0.0-0 || >=0.65 <1.0"
}
},
"node_modules/@react-native-community/slider": {
"version": "4.5.6",
"resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-4.5.6.tgz",
"integrity": "sha512-UhLPFeqx0YfPLrEz8ffT3uqAyXWu6iqFjohNsbp4cOU7hnJwg2RXtDnYHoHMr7MOkZDVdlLMdrSrAuzY6KGqrg==",
"license": "MIT"
},
"node_modules/@react-native/assets-registry": {
"version": "0.77.1",
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.77.1.tgz",
@ -7308,6 +7316,15 @@
"react-native": "*"
}
},
"node_modules/expo-location": {
"version": "18.0.10",
"resolved": "https://registry.npmjs.org/expo-location/-/expo-location-18.0.10.tgz",
"integrity": "sha512-R0Iioz0UZ9Ts8TACPngh8uDFbajJhVa5/igLqWB8Pq/gp8UHuwj7PC8XbZV7avsFoShYjaxrOhf4U7IONeKLgg==",
"license": "MIT",
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-modules-autolinking": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.5.tgz",

16
package.json
View File

@ -15,15 +15,21 @@
"preset": "jest-expo"
},
"dependencies": {
"@expo/metro-runtime": "~4.0.1",
"@expo/vector-icons": "^14.0.2",
"@react-native-async-storage/async-storage": "~2.1.1",
"@react-native-community/slider": "^4.5.6",
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/native": "^7.0.14",
"axios": "~1.8.4",
"expo": "~52.0.25",
"expo-blur": "~14.0.2",
"expo-constants": "~17.0.4",
"expo-font": "~13.0.3",
"expo-haptics": "~14.0.1",
"expo-image-picker": "~16.0.6",
"expo-linking": "~7.0.4",
"expo-location": "^18.0.10",
"expo-router": "~4.0.16",
"expo-splash-screen": "~0.29.20",
"expo-status-bar": "~2.0.1",
@ -35,19 +41,15 @@
"react-native": "0.77.1",
"react-native-gesture-handler": "~2.20.2",
"react-native-logs": "~5.3.0",
"react-native-paper": "~5.13.1",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0",
"react-native-vector-icons": "~10.2.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.5",
"react-use-websocket": "~4.13.0",
"@react-native-async-storage/async-storage": "~2.1.1",
"expo-image-picker": "~16.0.6",
"axios": "~1.8.4",
"uuid": "~11.0.5",
"react-native-paper": "~5.13.1",
"react-native-vector-icons": "~10.2.0",
"@expo/metro-runtime": "~4.0.1"
"uuid": "~11.0.5"
},
"devDependencies": {
"@babel/core": "^7.25.2",