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

added select park ability

Browse Source
This commit is contained in:
whysman 2025-04-27 14:54:25 -04:00
parent e7d0beb123
commit cc5a8abb49
2 changed files with 134 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/index.tsx
View File

@ -95,7 +95,6 @@ const Index = () => {
/> />
<LocationScreen <LocationScreen
visible={isLocationActive} visible={isLocationActive}
setTheme={setTheme}
currentTheme={currentTheme} currentTheme={currentTheme}
setChanged={setUserDataChanged} setChanged={setUserDataChanged}
onClose={() => setLocationActive(false)} onClose={() => setLocationActive(false)}

224
components/Location.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import {Dialog, TextInput, useTheme, Button, Text, List, Portal} from "react-native-paper"; import { Dialog, TextInput, useTheme, Button, Text, List, Portal } from "react-native-paper";
import { View, FlatList } from "react-native"; import { View, FlatList } from "react-native";
import Slider from "@react-native-community/slider"; import Slider from "@react-native-community/slider";
import axios from "axios"; import axios from "axios";
@ -9,7 +9,6 @@ import log from "@/util/log";
interface LocationScreenProps { interface LocationScreenProps {
visible: boolean; visible: boolean;
setChanged: (dataChanged: boolean) => void; setChanged: (dataChanged: boolean) => void;
setTheme: (theme: string) => void;
currentTheme: string; currentTheme: string;
onClose: () => void; onClose: () => void;
} }
@ -29,7 +28,7 @@ type Park = {
}; };
}; };
const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, currentTheme, setChanged, onClose }) => { const LocationScreen: React.FC<LocationScreenProps> = ({ visible, currentTheme, setChanged, onClose }) => {
const theme = useTheme(); const theme = useTheme();
const [zip, setZip] = useState(""); const [zip, setZip] = useState("");
const [distance, setDistance] = useState(25); const [distance, setDistance] = useState(25);
@ -37,6 +36,7 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
const [locLoading, setLocLoading] = useState(false); const [locLoading, setLocLoading] = useState(false);
const [parks, setParks] = useState<Park[]>([]); const [parks, setParks] = useState<Park[]>([]);
const [hasSearched, setHasSearched] = useState(false); const [hasSearched, setHasSearched] = useState(false);
const [selectedParkId, setSelectedParkId] = useState<string | null>(null);
// Call the parks endpoint with coordinates // Call the parks endpoint with coordinates
const fetchNearbyParks = async (longitude: number, latitude: number) => { const fetchNearbyParks = async (longitude: number, latitude: number) => {
@ -104,101 +104,145 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
}} }}
titleStyle={{ fontWeight: "bold" }} titleStyle={{ fontWeight: "bold" }}
descriptionNumberOfLines={2} descriptionNumberOfLines={2}
onPress={() => setSelectedParkId(item.Id)}
/> />
); );
// Find the selected park, if one is selected
const selectedPark = selectedParkId
? parks.find(p => p.Id === selectedParkId)
: null;
return ( return (
<Portal> <Portal>
<Dialog visible={visible} <Dialog
onDismiss={() => { visible={visible}
onClose(); onDismiss={onClose}
}} style={{ backgroundColor: theme.colors.background }}
style={{ backgroundColor: theme.colors.background }}> >
<Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Location</Dialog.Title> <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Location</Dialog.Title>
<Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}> <Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}>
<View style={{ alignItems: "center", width: "100%" }}> <View style={{ alignItems: "center", width: "100%" }}>
<Button mode="outlined" onPress={handleGetLocation} loading={locLoading} disabled={locLoading} {/* If a park is selected, show only that park info and change button */}
style={{ marginBottom: 12, width: BUTTON_WIDTH }}>Use My Location</Button> {selectedPark ? (
<Text style={{ marginBottom: 12, color: theme.colors.primary, fontWeight: "bold" }}>OR</Text> <View style={{ width: BUTTON_WIDTH, alignItems: "center" }}>
<View style={{ <List.Item
flexDirection: "row", title={selectedPark.name}
alignItems: "center", description={
width: BUTTON_WIDTH, `${selectedPark.address}\n${selectedPark.city}, ${selectedPark.state} ${selectedPark.zip}`
justifyContent: "center", }
marginBottom: 4, left={props => <List.Icon {...props} icon="paw" />}
}} style={{
> backgroundColor: theme.colors.surface,
<TextInput borderRadius: 8,
label="Enter Zip Code" marginBottom: 8,
mode="outlined" elevation: 1,
value={zip} width: "100%"
onChangeText={setZip} }}
style={{ titleStyle={{ fontWeight: "bold" }}
flex: 3, descriptionNumberOfLines={2}
marginRight: 6, />
fontFamily: "SpaceReg", <Button
minWidth: 0, mode="outlined"
}} onPress={() => setSelectedParkId(null)}
placeholderTextColor={theme.colors.primary} style={{ marginTop: 16, width: "100%" }}
textColor={theme.colors.primary} >
theme={{ colors: { text: theme.colors.primary } }} Change Park
/> </Button>
<Button
mode="contained"
onPress={handleSubmit}
loading={loading}
disabled={!zip || loading}
style={{
flex: 2,
minWidth: 0,
height: 50,
}}
contentStyle={{ height: 50 }}
>
Submit
</Button>
</View>
<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>
{/* Parks List */}
{hasSearched && (
<View style={{ width: BUTTON_WIDTH, marginTop: 18, maxHeight: 200 }}>
<Text style={{
fontWeight: "bold",
fontSize: 18,
marginBottom: parks != null ? 8 : 2,
color: theme.colors.primary
}}>
Nearby Dogparks
</Text>
{parks != null ? (
<FlatList
data={parks}
keyExtractor={(_, idx) => String(idx)}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
style={{ maxHeight: 170 }}
/>
) : (
<Text style={{ color: theme.colors.onSurface, textAlign: "center", marginTop: 12 }}>
No parks found in range.
</Text>
)}
</View> </View>
) : (
// Otherwise show location lookup tools and park list
<>
<Button
mode="outlined"
onPress={handleGetLocation}
loading={locLoading}
disabled={locLoading}
style={{ marginBottom: 12, width: BUTTON_WIDTH }}
>
Use My Location
</Button>
<Text style={{ marginBottom: 12, color: theme.colors.primary, fontWeight: "bold" }}>OR</Text>
<View style={{
flexDirection: "row",
alignItems: "center",
width: BUTTON_WIDTH,
justifyContent: "center",
marginBottom: 4,
}}>
<TextInput
label="Enter Zip Code"
mode="outlined"
value={zip}
onChangeText={setZip}
style={{
flex: 3,
marginRight: 6,
fontFamily: "SpaceReg",
minWidth: 0,
}}
placeholderTextColor={theme.colors.primary}
textColor={theme.colors.primary}
theme={{ colors: { text: theme.colors.primary } }}
/>
<Button
mode="contained"
onPress={handleSubmit}
loading={loading}
disabled={!zip || loading}
style={{
flex: 2,
minWidth: 0,
height: 50,
}}
contentStyle={{ height: 50 }}
>
Submit
</Button>
</View>
<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>
{/* Parks List */}
{hasSearched && (
<View style={{ width: BUTTON_WIDTH, marginTop: 18, maxHeight: 200 }}>
<Text style={{
fontWeight: "bold",
fontSize: 18,
marginBottom: parks.length > 0 ? 8 : 2,
color: theme.colors.primary
}}>
Nearby Dogparks
</Text>
{parks.length > 0 ? (
<FlatList
data={parks}
keyExtractor={(item) => item.Id}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
style={{ maxHeight: 170 }}
/>
) : (
<Text style={{ color: theme.colors.onSurface, textAlign: "center", marginTop: 12 }}>
No parks found in range.
</Text>
)}
</View>
)}
</>
)} )}
</View> </View>
</Dialog.Content> </Dialog.Content>