|
|
@@ -8,17 +8,21 @@
|
|
|
import { FontAwesome } from "@expo/vector-icons";
|
|
|
import { useNavigationState } from "@react-navigation/native";
|
|
|
import React, { MutableRefObject, useEffect, useRef, useState } from "react";
|
|
|
-import { FlatList, Image, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
|
|
|
+import { FlatList, Dimensions, Image, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
|
|
|
+import { TouchableOpacity } from "react-native-gesture-handler";
|
|
|
import Picker from "react-native-picker-select";
|
|
|
import { QueryStatus } from "react-query";
|
|
|
import { LMComment } from "../../../../data/comments";
|
|
|
import { Landmark, LMPhoto } from "../../../../data/landmarks";
|
|
|
+import MapView, {Marker} from "react-native-maps";
|
|
|
+import { usePermissions } from "../../../../data/PermissionsContext";
|
|
|
import { MainTabsNavigationProp } from "../../../../navigation/MainTabsNavigator";
|
|
|
import { lmTypes as allLmTypes, lmTypesIndoor } from "../../../../utils/GlobalUtils";
|
|
|
import LandmarkTypePicker from "../../../LandmarkTypePicker";
|
|
|
import { Separator } from "../../../Separator";
|
|
|
import { CommentsContainer } from "./CommentsContainer";
|
|
|
import { LandmarkPhotos } from "./LandmarkPhotos";
|
|
|
+import { useOutdoorMapState } from "../../MainMapComponent/useMapState";
|
|
|
|
|
|
|
|
|
|
|
|
@@ -58,6 +62,8 @@ interface DetailsBodyProps {
|
|
|
* Component that renders the body of the Landmark details panel
|
|
|
*/
|
|
|
export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
|
|
|
+ const {locationPermissionsGranted, checkLocationPermissions, voicePermissionsGranted, checkVoicePermissions} = usePermissions();
|
|
|
+ const mapState = useOutdoorMapState()
|
|
|
|
|
|
const navigationState = useNavigationState(state => state)
|
|
|
const [currentRoute, setCurrentRoute] = useState<string>()
|
|
|
@@ -133,6 +139,24 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
|
|
|
<ScrollView ref={mainScrollRef} nestedScrollEnabled={true} contentContainerStyle={{justifyContent: 'space-between'}} style={{flex: 1, marginHorizontal: 20}}>
|
|
|
{props.editingEnabled ?
|
|
|
<>
|
|
|
+ <Text style={{color: 'white', marginBottom: 10}}>Location</Text>
|
|
|
+ <MapView
|
|
|
+ toolbarEnabled={false}
|
|
|
+ onPress={(e) =>
|
|
|
+ props.setUpdatedLandmark({...props.updatedLandmark, longitude: e.nativeEvent.coordinate.longitude, latitude: e.nativeEvent.coordinate.latitude})
|
|
|
+ }
|
|
|
+ testID="mapViewLocationEdit"
|
|
|
+ style={{ width: '100%', height: Dimensions.get("window").height * .4, marginBottom: 20}}
|
|
|
+ initialRegion={{latitude: props.landmark?.latitude, longitude: props.landmark?.longitude, latitudeDelta: 0.01, longitudeDelta: 0.01}}
|
|
|
+ showsUserLocation={locationPermissionsGranted}
|
|
|
+ showsMyLocationButton={false}
|
|
|
+ >
|
|
|
+
|
|
|
+ <Marker
|
|
|
+ coordinate={{ latitude: props.updatedLandmark?.latitude as number, longitude: props.updatedLandmark?.longitude as number }} >
|
|
|
+ {props.updatedLandmark?.landmark_type ? <Image style={{ height: 35, width: 25 }} source={lmTypes[props.updatedLandmark?.landmark_type]?.image} /> : null}
|
|
|
+ </Marker>
|
|
|
+ </MapView>
|
|
|
<LandmarkTypePickerContainer />
|
|
|
<Separator style={{marginBottom: 20, opacity: .5}} color="lightgray" />
|
|
|
<Text style={{color: 'white', marginBottom: 10}}>Description</Text>
|
|
|
@@ -143,6 +167,7 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
|
|
|
onChangeText={text => props.setUpdatedLandmark({...props.updatedLandmark, description: text})}
|
|
|
value={props.updatedLandmark?.description}/>
|
|
|
</ScrollView>
|
|
|
+
|
|
|
</>: <EditingDisabledUpperView />}
|
|
|
{!props.editingEnabled ?
|
|
|
<CommentsContainer
|
chase