|
|
@@ -9,11 +9,10 @@ import { FontAwesome } from "@expo/vector-icons";
|
|
|
import { useNavigationState } from "@react-navigation/native";
|
|
|
import React, { MutableRefObject, useEffect, useRef, useState } from "react";
|
|
|
import { FlatList, Dimensions, Image, ScrollView, StyleSheet, Text, TextInput, View, TouchableOpacity } from "react-native";
|
|
|
-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 { LMComment, useReportComment } from "../../../../data/comments";
|
|
|
+import { Landmark, LMPhoto, useReportLandmark } 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, catTypes, catTypesInGroup } from "../../../../utils/GlobalUtils";
|
|
|
@@ -21,11 +20,13 @@ import LandmarkTypePicker from "../../../LandmarkTypePicker";
|
|
|
import { Separator } from "../../../Separator";
|
|
|
import { CommentsContainer } from "./CommentsContainer";
|
|
|
import { LandmarkPhotos } from "./LandmarkPhotos";
|
|
|
-import { useOutdoorMapState } from "../../MainMapComponent/useMapState";
|
|
|
import { TagContainer } from "./TagContainer";
|
|
|
import CheckBox from "@react-native-community/checkbox";
|
|
|
import DatePicker from "react-native-date-picker";
|
|
|
import { useAuth } from "../../../../data/Auth/AuthContext";
|
|
|
+import { captureRef } from "react-native-view-shot";
|
|
|
+import { Report } from "./Report";
|
|
|
+import mapStyles from "../../MainMapComponent/Map.styles";
|
|
|
|
|
|
|
|
|
|
|
|
@@ -41,17 +42,17 @@ interface DetailsBodyProps {
|
|
|
focusComment: (id: string) => void,
|
|
|
startEditingComment: (comment: LMComment) => void,
|
|
|
deleteComment: (id: string) => void
|
|
|
- commentBeingEdited?: LMComment,
|
|
|
+ commentBeingEdited?: LMComment,
|
|
|
setCommentBeingEdited: (comment: LMComment) => void,
|
|
|
setNewComment: (commentId: string) => void,
|
|
|
newCommentId?: string,
|
|
|
editComment: (comment: LMComment) => void,
|
|
|
addComment: () => void
|
|
|
- setSelectedImage: (index: number) => void
|
|
|
+ setSelectedImage: (index: number) => void
|
|
|
tryDeletePhoto: (photoId: string) => void
|
|
|
addPhoto: (photo: LMPhoto) => void
|
|
|
addPhotoStatus: QueryStatus
|
|
|
- deletePhotoStatus: QueryStatus
|
|
|
+ deletePhotoStatus: QueryStatus
|
|
|
toggleLmDetails: (state: boolean) => void
|
|
|
setKeyboardOpened: (state: boolean) => void
|
|
|
keyboardOpened: boolean
|
|
|
@@ -65,17 +66,21 @@ interface DetailsBodyProps {
|
|
|
applyFilters: (landmarks?: Landmark[], getGroupList?: boolean, parent?: string) => Landmark[]
|
|
|
landmarks: Landmark[]
|
|
|
toggleDetailsPanel: (state: boolean) => void,
|
|
|
- setLandmark: (landmark: string) => void;
|
|
|
+ setLandmark: (landmark: string) => void;
|
|
|
promptAddLandmark: (longitude: number, latitude: number, floor?: number, lmCount?: string, parent?: string) => void
|
|
|
+ reportingEnabled: boolean
|
|
|
+ toggleReporting: (state: boolean) => void,
|
|
|
+ commentReported: string
|
|
|
+ editLmLoc: boolean
|
|
|
+ toggleEditLmLoc: (state: boolean) => void
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 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 {landmarkOwnedByUser} = useAuth()
|
|
|
+ const { locationPermissionsGranted } = usePermissions();
|
|
|
+ const { landmarkOwnedByUser } = useAuth()
|
|
|
|
|
|
const navigationState = useNavigationState(state => state)
|
|
|
const [currentRoute, setCurrentRoute] = useState<string>()
|
|
|
@@ -88,7 +93,7 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
|
|
|
|
|
|
|
|
|
let lmTypes = allLmTypes
|
|
|
- if(currentRoute=="Indoor") {
|
|
|
+ if (currentRoute == "Indoor") {
|
|
|
lmTypes = lmTypesIndoor
|
|
|
}
|
|
|
|
|
|
@@ -100,7 +105,7 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
|
|
|
console.error(props.landmark?.expiry_date)
|
|
|
if (props.landmark?.expiry_date !== null) {
|
|
|
toggleShowExpire(true)
|
|
|
- var parts = (props.landmark?.expiry_date?.toString().substring(0,10)).split('-')
|
|
|
+ var parts = (props.landmark?.expiry_date?.toString().substring(0, 10)).split('-')
|
|
|
setDate(new Date(+parts[0], +parts[1] - 1, +parts[2]))
|
|
|
}
|
|
|
else {
|
|
|
@@ -111,78 +116,112 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
|
|
|
props.setUpdatedLandmark(undefined)
|
|
|
}
|
|
|
}, [props.editingEnabled])
|
|
|
-
|
|
|
+
|
|
|
const [date, setDate] = useState(new Date())
|
|
|
const [showExpire, toggleShowExpire] = useState<boolean>(false)
|
|
|
const [groupList, toggleGroupList] = useState<boolean>(props.landmark?.landmark_type == 30 ? true : false)
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (props.editingEnabled && !showExpire)
|
|
|
- props.setUpdatedLandmark({...props.updatedLandmark, expiry_date: null})
|
|
|
+ props.setUpdatedLandmark({ ...props.updatedLandmark, expiry_date: null })
|
|
|
else if (props.editingEnabled && showExpire)
|
|
|
- props.setUpdatedLandmark({...props.updatedLandmark, expiry_date: date})
|
|
|
+ props.setUpdatedLandmark({ ...props.updatedLandmark, expiry_date: date })
|
|
|
}, [showExpire])
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (showExpire)
|
|
|
- props.setUpdatedLandmark({...props.updatedLandmark, expiry_date: date})
|
|
|
+ props.setUpdatedLandmark({ ...props.updatedLandmark, expiry_date: date })
|
|
|
}, [date])
|
|
|
|
|
|
- const [editLocation, toggleEditLocation] = useState<boolean>(false)
|
|
|
-
|
|
|
+ const reportLandmarkMutation = useReportLandmark()
|
|
|
+ const reportCommentMutation = useReportComment()
|
|
|
+ const capture: any = React.createRef();
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Calls the {@linkcode reportLandmark} mutation from the {@link useReportLandmark} hook.
|
|
|
+ */
|
|
|
+ const reportLandmark = async (landmark, reasons, extraComments) => {
|
|
|
+ if (landmark.floor !== null) { // Indoor landmark screenshot
|
|
|
+ console.log('indoor landmark reported')
|
|
|
+ const uri = await captureRef(capture, {
|
|
|
+ format: "jpg",
|
|
|
+ quality: 1,
|
|
|
+ result: 'base64'
|
|
|
+ })
|
|
|
+ landmark['indoorLmLocImg'] = uri
|
|
|
+ }
|
|
|
+ else { // Outdoor landmark screenshot
|
|
|
+ console.log('outdoor landmark reported')
|
|
|
+ landmark['indoorLmLocImg'] = props.uri
|
|
|
+ }
|
|
|
+ landmark['reasons'] = reasons
|
|
|
+ landmark['isLandmark'] = true
|
|
|
+ landmark['extraComments'] = extraComments
|
|
|
+
|
|
|
+ await reportLandmarkMutation.mutateAsync(landmark);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Calls the {@linkcode reportComment} mutation from the {@link useReportComment} hook.
|
|
|
+ */
|
|
|
+ const reportComment = async (commentID: string, reasons: any[], extraComments: string) => {
|
|
|
+ let content = {}
|
|
|
+ content['id'] = commentID
|
|
|
+ if (props.landmark?.floor !== null) { // Indoor landmark screenshot
|
|
|
+ const uri = await captureRef(capture, {
|
|
|
+ format: "jpg",
|
|
|
+ quality: 1,
|
|
|
+ result: 'base64'
|
|
|
+ })
|
|
|
+ content['indoorLmLocImg'] = uri
|
|
|
+ }
|
|
|
+ else { // Outdoor landmark screenshot
|
|
|
+ content['indoorLmLocImg'] = props.uri
|
|
|
+ }
|
|
|
+ content['reasons'] = reasons
|
|
|
+ content['isLandmark'] = false
|
|
|
+ content['extraComments'] = extraComments
|
|
|
+ content['landmarkInfo'] = props.landmark
|
|
|
+
|
|
|
+ await reportCommentMutation.mutateAsync(content);
|
|
|
+ }
|
|
|
+
|
|
|
/**
|
|
|
* Sub-component that renders picker for landmark types
|
|
|
* @param
|
|
|
*/
|
|
|
const LandmarkTypePickerContainer: React.FC = () => {
|
|
|
- if (props.updatedLandmark?.landmark_type){
|
|
|
- return(
|
|
|
- <>
|
|
|
- <LandmarkTypePicker
|
|
|
- placeholder={{ label: "Select a landmark type...", value: 0 }}
|
|
|
- value={props.updatedLandmark?.landmark_type}
|
|
|
- onValueChange={(value) => {
|
|
|
- if (value) {
|
|
|
- props.setUpdatedLandmark({ ...props.updatedLandmark, landmark_type: value, title: lmTypes[value].label })
|
|
|
- }
|
|
|
- else {
|
|
|
- props.setUpdatedLandmark({ ...props.updatedLandmark, landmark_type: undefined, title: 'no title' })
|
|
|
- }
|
|
|
- }}
|
|
|
- cats={Object.keys(props.landmark?.groupCount == -1 ? catTypesInGroup : catTypes)?.map(icon => {
|
|
|
- return (
|
|
|
- { label: catTypes[parseInt(icon)]?.cat.toUpperCase(), value: icon, key: icon }
|
|
|
- )
|
|
|
- })}
|
|
|
- items={Object.keys(lmTypes)?.map(icon => {
|
|
|
- return (
|
|
|
- { label: lmTypes[parseInt(icon)]?.label.toUpperCase(),
|
|
|
- value: icon, key: lmTypes[parseInt(icon)]?.cat.toUpperCase() }
|
|
|
- )
|
|
|
- })}/>
|
|
|
- </>
|
|
|
+ if (props.updatedLandmark?.landmark_type) {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <LandmarkTypePicker
|
|
|
+ placeholder={{ label: "Select a landmark type...", value: 0 }}
|
|
|
+ value={props.updatedLandmark?.landmark_type}
|
|
|
+ onValueChange={(value) => {
|
|
|
+ if (value) {
|
|
|
+ props.setUpdatedLandmark({ ...props.updatedLandmark, landmark_type: value, title: lmTypes[value].label })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ props.setUpdatedLandmark({ ...props.updatedLandmark, landmark_type: undefined, title: 'no title' })
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ cats={Object.keys(props.landmark?.groupCount == -1 ? catTypesInGroup : catTypes)?.map(icon => {
|
|
|
+ return (
|
|
|
+ { label: catTypes[parseInt(icon)]?.cat.toUpperCase(), value: icon, key: icon }
|
|
|
+ )
|
|
|
+ })}
|
|
|
+ items={Object.keys(lmTypes)?.map(icon => {
|
|
|
+ return (
|
|
|
+ {
|
|
|
+ label: lmTypes[parseInt(icon)]?.label.toUpperCase(),
|
|
|
+ value: icon, key: lmTypes[parseInt(icon)]?.cat.toUpperCase()
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })} />
|
|
|
+ </>
|
|
|
)
|
|
|
}
|
|
|
- else return(null)
|
|
|
- // return (
|
|
|
- // <View style={{flexDirection: 'row', marginBottom: 20, justifyContent: "space-between"}}>
|
|
|
- // {props.updatedLandmark?.landmark_type ?
|
|
|
- // <>
|
|
|
- // <LandmarkTypePicker
|
|
|
- // placeholder={{}}
|
|
|
- // value={props.updatedLandmark?.landmark_type}
|
|
|
- // onValueChange={(value) => {
|
|
|
- // props.setUpdatedLandmark({...props.updatedLandmark, landmark_type: value, title: lmTypes[value].label})
|
|
|
- // }}
|
|
|
- // items={Object.keys(lmTypes)?.filter(icon => parseInt(icon) != props.landmark?.landmark_type).map(icon => {
|
|
|
- // return (
|
|
|
- // {label: lmTypes[parseInt(icon)].label.toUpperCase(), value: icon, key: icon}
|
|
|
- // )})}/>
|
|
|
- // {props.updatedLandmark ? <Image style={{marginLeft: 20}} source={lmTypes[props.updatedLandmark?.landmark_type].image}/> : null}
|
|
|
- // </>
|
|
|
- // : null}
|
|
|
- // </View>
|
|
|
- // )
|
|
|
+ else return (null)
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
@@ -190,21 +229,21 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
|
|
|
* @param
|
|
|
*/
|
|
|
const EditingDisabledUpperView: React.FC = () => {
|
|
|
- if (!groupList) {
|
|
|
+ if (!groupList && !props.reportingEnabled) {
|
|
|
return (
|
|
|
- <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
|
|
|
- <View style={{flex: 8, flexDirection: 'column', marginBottom: 20}}>
|
|
|
+ <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
|
|
+ <View style={{ flex: 8, flexDirection: 'column', marginBottom: 20 }}>
|
|
|
{props.landmark?.groupCount == -1 ?
|
|
|
- <TouchableOpacity style={styles.groupReturnButton} onPress={() => {props.setLandmark(props.landmark?.parent); toggleGroupList(true)}}>
|
|
|
- <FontAwesome size={15} color="white" name="chevron-left"/>
|
|
|
- <Text style={{color: "white", marginLeft: 5}}>Return to group</Text>
|
|
|
+ <TouchableOpacity style={styles.groupReturnButton} onPress={() => { props.setLandmark(props.landmark?.parent); toggleGroupList(true) }}>
|
|
|
+ <FontAwesome size={15} color="white" name="chevron-left" />
|
|
|
+ <Text style={{ color: "white", marginLeft: 5 }}>Return to group</Text>
|
|
|
</TouchableOpacity>
|
|
|
: null}
|
|
|
- <Text style={{color: 'white', marginBottom: 10, fontSize: 15}}>{lmTypes[props.landmark?.landmark_type]?.label.toUpperCase()}</Text>
|
|
|
+ <Text style={{ color: 'white', marginBottom: 10, fontSize: 15 }}>{lmTypes[props.landmark?.landmark_type]?.label.toUpperCase()}</Text>
|
|
|
<ScrollView nestedScrollEnabled={true}>
|
|
|
- <Text style={{color: 'white', fontSize: 13}}>{props.landmark?.description}</Text>
|
|
|
+ <Text style={{ color: 'white', fontSize: 13 }}>{props.landmark?.description}</Text>
|
|
|
{props.landmark?.expiry_date ?
|
|
|
- <Text style={{color: 'white', fontSize: 13}}>Landmark expires on {props.landmark.expiry_date.toString().substring(0,10)}</Text> : null}
|
|
|
+ <Text style={{ color: 'white', fontSize: 13 }}>Landmark expires on {props.landmark.expiry_date.toString().substring(0, 10)}</Text> : null}
|
|
|
</ScrollView>
|
|
|
</View>
|
|
|
{props.landmark?.landmark_type ? <Image source={lmTypes[props.landmark?.landmark_type]?.image} /> : null}
|
|
|
@@ -219,10 +258,10 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
|
|
|
const LandmarkGroupListView: React.FC = () => {
|
|
|
return (
|
|
|
<View>
|
|
|
- <Text style={{color: 'white', fontSize: 13}}>{props.landmark?.description}</Text>
|
|
|
+ <Text style={{ color: 'white', fontSize: 13 }}>{props.landmark?.description}</Text>
|
|
|
{props.landmark?.expiry_date ?
|
|
|
- <Text style={{color: 'white', fontSize: 13}}>Landmark group expires on {props.landmark.expiry_date.toString().substring(0,10)}</Text> : null}
|
|
|
- <Text style={{fontSize: 16, color: "white", marginBottom: 10, marginTop: 5}}>Landmarks in this group:</Text>
|
|
|
+ <Text style={{ color: 'white', fontSize: 13 }}>Landmark group expires on {props.landmark.expiry_date.toString().substring(0, 10)}</Text> : null}
|
|
|
+ <Text style={{ fontSize: 16, color: "white", marginBottom: 10, marginTop: 5 }}>Landmarks in this group:</Text>
|
|
|
<ScrollView>
|
|
|
{props.applyFilters(props.landmarks, true, props.landmark?.id)?.map((landmark) => {
|
|
|
return (
|
|
|
@@ -234,130 +273,156 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
|
|
|
props.setLandmark(landmark.id)
|
|
|
}}>
|
|
|
<Image style={{ height: 52.5, width: 37.5, zIndex: 10, margin: 5 }} source={lmTypes[landmark.landmark_type]?.image} />
|
|
|
- <Text style={{marginLeft: 10}}>{lmTypes[landmark?.landmark_type]?.label.toUpperCase()}</Text>
|
|
|
+ <Text style={{ marginLeft: 10 }}>{lmTypes[landmark?.landmark_type]?.label.toUpperCase()}</Text>
|
|
|
</TouchableOpacity>
|
|
|
)
|
|
|
}
|
|
|
)}
|
|
|
- {landmarkOwnedByUser(props.landmark) ?
|
|
|
- <TouchableOpacity style={{marginTop: 30, justifyContent: 'center', alignItems: 'center', opacity: .7}}
|
|
|
- onPress={() => {props.promptAddLandmark(props.landmark?.longitude, props.landmark?.latitude, props.landmark?.floor, "groupItem", props.landmark?.id)}}>
|
|
|
- <Text style={{fontSize: 20, marginBottom: 10, color: 'white'}}>Add landmark to group</Text>
|
|
|
- <FontAwesome name="plus" size={30} color='white' />
|
|
|
- </TouchableOpacity> : null }
|
|
|
+ {landmarkOwnedByUser(props.landmark) ?
|
|
|
+ <TouchableOpacity style={{ marginTop: 30, marginBottom: 30, justifyContent: 'center', alignItems: 'center', opacity: .7 }}
|
|
|
+ onPress={() => { props.promptAddLandmark(props.landmark?.longitude, props.landmark?.latitude, props.landmark?.floor, "groupItem", props.landmark?.id) }}>
|
|
|
+ <Text style={{ fontSize: 20, color: 'white' }}>Add another landmark here</Text>
|
|
|
+ <FontAwesome name="plus" size={30} color='white' />
|
|
|
+ </TouchableOpacity> : null}
|
|
|
</ScrollView>
|
|
|
</View>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
+
|
|
|
return (
|
|
|
- <ScrollView ref={mainScrollRef} nestedScrollEnabled={true} contentContainerStyle={{justifyContent: 'space-between'}} style={{flex: 1, marginHorizontal: 20}}>
|
|
|
+ <ScrollView ref={mainScrollRef} nestedScrollEnabled={true} contentContainerStyle={{ justifyContent: 'space-between' }} style={{ flex: 1, marginHorizontal: 20 }}>
|
|
|
{props.editingEnabled ?
|
|
|
- <>
|
|
|
- {props.landmark?.groupCount !== -1 && // Prevent users from editing the location of landmarks in a group (must edit group itself)
|
|
|
- <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, marginTop: 10}}
|
|
|
- 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>}
|
|
|
- {props.landmark?.landmark_type !== 30 && <LandmarkTypePickerContainer /> /* Prevent editing of landmark type if it is a group */}
|
|
|
- <Separator style={{marginVertical: 10, opacity: .5}} color="lightgray" />
|
|
|
- <Text style={{color: 'white', marginBottom: 10}}>Description</Text>
|
|
|
- <ScrollView nestedScrollEnabled={true} style={{backgroundColor: 'white', marginBottom: 20}}>
|
|
|
- <TextInput
|
|
|
- multiline={true}
|
|
|
- style={[styles.input, {fontSize: 13, marginBottom: 10}]}
|
|
|
- onChangeText={text => props.setUpdatedLandmark({...props.updatedLandmark, description: text})}
|
|
|
- value={props.updatedLandmark?.description}/>
|
|
|
- </ScrollView>
|
|
|
- <View style={{ paddingHorizontal: 15, paddingVertical: 10, flex: 1, flexDirection: "row"}}>
|
|
|
- <Text style={{color: "white", margin: 0, fontSize: 16}}>Add expiry date?</Text>
|
|
|
- <CheckBox
|
|
|
- value={showExpire}
|
|
|
- boxType="square"
|
|
|
- onValueChange={() => toggleShowExpire(!showExpire)}
|
|
|
- tintColors={{true: "white", false: "white"}}
|
|
|
- tintColor="white"
|
|
|
- onCheckColor="#00000000"
|
|
|
- onFillColor="white"
|
|
|
- onTintColor="white"
|
|
|
- style={{borderColor: "white", marginLeft: 10, width: 20, height: 20}}
|
|
|
- />
|
|
|
- </View>
|
|
|
- <View style={{flex: 1, alignSelf: "stretch"}}>
|
|
|
- {showExpire && <DatePicker
|
|
|
- mode="date"
|
|
|
- date={date}
|
|
|
- onDateChange={setDate}
|
|
|
- fadeToColor="none" />}
|
|
|
- </View>
|
|
|
- </>: <EditingDisabledUpperView />}
|
|
|
+ <>
|
|
|
+ {props.landmark?.groupCount !== -1 ? // Prevent users from editing the location of landmarks in a group (must edit group itself)
|
|
|
+ props.landmark?.floor == null ? // Outdoor landmark, render MapView to edit location
|
|
|
+ <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, marginTop: 10 }}
|
|
|
+ initialRegion={{ latitude: props.landmark?.latitude, longitude: props.landmark?.longitude, latitudeDelta: 0.01, longitudeDelta: 0.01 }}
|
|
|
+ showsUserLocation={locationPermissionsGranted}
|
|
|
+ showsMyLocationButton={false}
|
|
|
+ >
|
|
|
+ <Marker
|
|
|
+ draggable
|
|
|
+ onDragEnd={(e) => props.setUpdatedLandmark({ ...props.updatedLandmark, longitude: e.nativeEvent.coordinate.longitude, latitude: e.nativeEvent.coordinate.latitude })}
|
|
|
+ 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>
|
|
|
+ :
|
|
|
+ // Indoor landmark, button to edit landmark location
|
|
|
+ <View>
|
|
|
+ <TouchableOpacity style={[mapStyles.previewButtons, mapStyles.editIndoorLocation]}
|
|
|
+ onPress={() => {
|
|
|
+ // props.toggleDetailsPanel(false)
|
|
|
+ props.toggleLmDetails(false)
|
|
|
+ props.toggleEditLmLoc(true)
|
|
|
+ }}>
|
|
|
+ <Text style={{ color: 'white' }}>Edit landmark location</Text>
|
|
|
+ </TouchableOpacity>
|
|
|
+ </View>
|
|
|
+ : null}
|
|
|
+ {props.landmark?.landmark_type !== 30 && <LandmarkTypePickerContainer /> /* Prevent editing of landmark type if it is a group */}
|
|
|
+ <Separator style={{ marginVertical: 10, opacity: .5 }} color="lightgray" />
|
|
|
+ <Text style={{ color: 'white', marginBottom: 10 }}>Description</Text>
|
|
|
+ <ScrollView nestedScrollEnabled={true} style={{ backgroundColor: 'white', marginBottom: 20 }}>
|
|
|
+ <TextInput
|
|
|
+ multiline={true}
|
|
|
+ style={[styles.input, { fontSize: 13, marginBottom: 10 }]}
|
|
|
+ onChangeText={text => props.setUpdatedLandmark({ ...props.updatedLandmark, description: text })}
|
|
|
+ value={props.updatedLandmark?.description} />
|
|
|
+ </ScrollView>
|
|
|
+ <View style={{ paddingHorizontal: 15, paddingVertical: 10, flex: 1, flexDirection: "row" }}>
|
|
|
+ <Text style={{ color: "white", margin: 0, fontSize: 16 }}>Add expiry date?</Text>
|
|
|
+ <CheckBox
|
|
|
+ value={showExpire}
|
|
|
+ boxType="square"
|
|
|
+ onValueChange={() => toggleShowExpire(!showExpire)}
|
|
|
+ tintColors={{ true: "white", false: "white" }}
|
|
|
+ tintColor="white"
|
|
|
+ onCheckColor="#00000000"
|
|
|
+ onFillColor="white"
|
|
|
+ onTintColor="white"
|
|
|
+ style={{ borderColor: "white", marginLeft: 10, width: 20, height: 20 }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View style={{ flex: 1, alignSelf: "stretch" }}>
|
|
|
+ {showExpire && <DatePicker
|
|
|
+ mode="date"
|
|
|
+ date={date}
|
|
|
+ onDateChange={setDate}
|
|
|
+ fadeToColor="none" />}
|
|
|
+ </View>
|
|
|
+ </> : <EditingDisabledUpperView />}
|
|
|
+ {props.reportingEnabled ?
|
|
|
+ <Report
|
|
|
+ landmark={props.landmark}
|
|
|
+ commentID={props.commentReported}
|
|
|
+ isLandmark={props.commentReported == "" ? true : false}
|
|
|
+ reportLandmark={reportLandmark}
|
|
|
+ reportComment={reportComment}
|
|
|
+ toggleReporting={props.toggleReporting} /> : null}
|
|
|
{!props.editingEnabled && groupList ?
|
|
|
- <LandmarkGroupListView /> : null}
|
|
|
- {!props.editingEnabled && !groupList ?
|
|
|
- <TagContainer
|
|
|
- landmark={props.landmark}
|
|
|
- tagLandmark={props.tagLandmark}
|
|
|
- toggleLmDetails={props.toggleLmDetails}
|
|
|
- authNavigation={props.authNavigation}
|
|
|
- taggedByUser={props.taggedByUser} /> : null}
|
|
|
- {!props.editingEnabled && !groupList ?
|
|
|
- <CommentsContainer
|
|
|
- toggleLmDetails={props.toggleLmDetails}
|
|
|
- authNavigation={props.authNavigation}
|
|
|
- setKeyboardOpened={props.setKeyboardOpened}
|
|
|
- keyboardOpened={props.keyboardOpened}
|
|
|
- comments={props.comments}
|
|
|
- mainScrollRef={mainScrollRef}
|
|
|
- focusComment={props.focusComment}
|
|
|
- focusedCommentId={props.focusedCommentId}
|
|
|
- commentListRef={props.commentListRef}
|
|
|
- commentTextInputRef={props.commentTextInputRef}
|
|
|
- commentBeingEdited={props.commentBeingEdited}
|
|
|
- addComment={props.addComment}
|
|
|
- setCommentBeingEdited={props.setCommentBeingEdited}
|
|
|
- setNewComment={props.setNewComment}
|
|
|
- newCommentId={props.newCommentId}
|
|
|
- editComment={props.editComment}
|
|
|
- startEditingComment={props.startEditingComment}
|
|
|
- deleteComment={props.deleteComment}
|
|
|
- uri={props.uri} /> : null}
|
|
|
+ <LandmarkGroupListView /> : null}
|
|
|
+ {!props.editingEnabled && !groupList && !props.reportingEnabled ?
|
|
|
+ <TagContainer
|
|
|
+ landmark={props.landmark}
|
|
|
+ tagLandmark={props.tagLandmark}
|
|
|
+ toggleLmDetails={props.toggleLmDetails}
|
|
|
+ authNavigation={props.authNavigation}
|
|
|
+ taggedByUser={props.taggedByUser} /> : null}
|
|
|
+ {!props.editingEnabled && !groupList && !props.reportingEnabled ?
|
|
|
+ <CommentsContainer
|
|
|
+ toggleLmDetails={props.toggleLmDetails}
|
|
|
+ authNavigation={props.authNavigation}
|
|
|
+ setKeyboardOpened={props.setKeyboardOpened}
|
|
|
+ keyboardOpened={props.keyboardOpened}
|
|
|
+ comments={props.comments}
|
|
|
+ mainScrollRef={mainScrollRef}
|
|
|
+ focusComment={props.focusComment}
|
|
|
+ focusedCommentId={props.focusedCommentId}
|
|
|
+ commentListRef={props.commentListRef}
|
|
|
+ commentTextInputRef={props.commentTextInputRef}
|
|
|
+ commentBeingEdited={props.commentBeingEdited}
|
|
|
+ addComment={props.addComment}
|
|
|
+ setCommentBeingEdited={props.setCommentBeingEdited}
|
|
|
+ setNewComment={props.setNewComment}
|
|
|
+ newCommentId={props.newCommentId}
|
|
|
+ editComment={props.editComment}
|
|
|
+ startEditingComment={props.startEditingComment}
|
|
|
+ deleteComment={props.deleteComment}
|
|
|
+ uri={props.uri}
|
|
|
+ toggleReporting={props.toggleReporting} /> : null}
|
|
|
{!props.editingEnabled && !props.keyboardOpened && !groupList ?
|
|
|
- <LandmarkPhotos
|
|
|
- profileId={props.profileId}
|
|
|
- deletePhotoStatus={props.deletePhotoStatus}
|
|
|
- addPhotoStatus={props.addPhotoStatus}
|
|
|
- tryDeletePhoto={props.tryDeletePhoto}
|
|
|
- addPhoto={props.addPhoto}
|
|
|
- toggleLmDetails={props.toggleLmDetails}
|
|
|
- editingEnabled={props.editingEnabled}
|
|
|
- setUpdatedLandmark={props.setUpdatedLandmark}
|
|
|
- updatedLandmark={props.updatedLandmark}
|
|
|
- landmark={props.landmark}
|
|
|
- setSelectedImage={props.setSelectedImage}
|
|
|
- processingPhoto={props.processingPhoto}
|
|
|
- setProcessingPhoto={props.setProcessingPhoto}/>
|
|
|
- : null}
|
|
|
- {landmarkOwnedByUser(props.landmark) && !groupList && !props.landmark?.parent ?
|
|
|
- <View style={{borderTopWidth: 1, borderColor: 'lightgray'}}>
|
|
|
- <TouchableOpacity style={{paddingTop: 30, justifyContent: 'center', alignItems: 'center', opacity: .7}}
|
|
|
- onPress={() => {props.promptAddLandmark(props.landmark?.longitude, props.landmark?.latitude, props.landmark?.floor, "newGroup", props.landmark?.id)}}>
|
|
|
- <Text style={{fontSize: 20, marginBottom: 10, color: 'white'}}>Add another landmark here</Text>
|
|
|
+ <LandmarkPhotos
|
|
|
+ profileId={props.profileId}
|
|
|
+ deletePhotoStatus={props.deletePhotoStatus}
|
|
|
+ addPhotoStatus={props.addPhotoStatus}
|
|
|
+ tryDeletePhoto={props.tryDeletePhoto}
|
|
|
+ addPhoto={props.addPhoto}
|
|
|
+ toggleLmDetails={props.toggleLmDetails}
|
|
|
+ editingEnabled={props.editingEnabled}
|
|
|
+ setUpdatedLandmark={props.setUpdatedLandmark}
|
|
|
+ updatedLandmark={props.updatedLandmark}
|
|
|
+ landmark={props.landmark}
|
|
|
+ setSelectedImage={props.setSelectedImage}
|
|
|
+ processingPhoto={props.processingPhoto}
|
|
|
+ setProcessingPhoto={props.setProcessingPhoto} />
|
|
|
+ : null}
|
|
|
+ {landmarkOwnedByUser(props.landmark) && !groupList && !props.landmark?.parent ?
|
|
|
+ <View style={{ borderTopWidth: 1, borderColor: 'lightgray' }}>
|
|
|
+ <TouchableOpacity style={{ paddingTop: 30, marginBottom: 20, justifyContent: 'center', alignItems: 'center', opacity: .7 }}
|
|
|
+ onPress={() => { props.promptAddLandmark(props.landmark?.longitude, props.landmark?.latitude, props.landmark?.floor, "newGroup", props.landmark?.id) }}>
|
|
|
+ <Text style={{ fontSize: 20, marginBottom: 10, color: 'white' }}>Add another landmark here</Text>
|
|
|
<FontAwesome name="plus" size={30} color='white' />
|
|
|
</TouchableOpacity>
|
|
|
- </View> : null }
|
|
|
-
|
|
|
+ </View> : null}
|
|
|
+
|
|
|
</ScrollView>
|
|
|
)
|
|
|
}
|
