|
@@ -15,7 +15,6 @@ import IndoorFloor from '../IndoorFloor'
|
|
|
// import Toast from 'react-native-toast-message';
|
|
|
import Toast from 'react-native-root-toast';
|
|
|
import ArrowButton from './ArrowButton'
|
|
|
-import BottomButtons from './BottomButtons'
|
|
|
import Picker from 'react-native-picker-select';
|
|
|
import { Landmark } from '../../../data/landmarks';
|
|
|
|
|
@@ -43,6 +42,9 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
|
|
|
|
|
|
const imageDim = 0.05 * Dimensions.get("window").width;
|
|
|
|
|
|
+
|
|
|
+ // Goes through every landmark found in the landmarks array and if corresponding landmark_type exists, return the landmark in the form of an SVG Image, with set width and height properties.
|
|
|
+ // Coordinates (x and y) of said landmark are percentages/proportions of screen dimensions, which can only be kept consistent if a fixed aspect ratio is set.
|
|
|
const loadLandmarks = applyFilter(landmarks)?.map((item) => {
|
|
|
if (!lmTypesIndoor[item.landmark_type]) {
|
|
|
return null
|
|
@@ -62,7 +64,7 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
|
|
|
}
|
|
|
)
|
|
|
|
|
|
-
|
|
|
+// Called once a user longPresses on an indoor map, calls the promptAddLandmark method if successful.
|
|
|
function addLandmark(evt: GestureResponderEvent) {
|
|
|
if (evt != null) {
|
|
|
Alert.alert("Are you sure you want to add a landmark here?", undefined,
|
|
@@ -76,8 +78,6 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
|
|
|
catch (err) {
|
|
|
Toast.show("Please ensure finger is not moving when holding down on screen.", { duration: Toast.durations.LONG, })
|
|
|
|
|
|
- // Alert.alert("An error has occured." , "Please ensure thumb is not moving when holding down on screen.")
|
|
|
- // consider toast
|
|
|
}
|
|
|
}
|
|
|
}]
|
|
@@ -86,49 +86,20 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
|
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
|
- // Alert.alert("useEffect has been triggered")
|
|
|
setShowAddedDot(false)
|
|
|
setShowDots(false)
|
|
|
setTimeout(() => setShowME(true), 100);
|
|
|
})
|
|
|
|
|
|
- const childToWeb = (child: any) => {
|
|
|
- const { type, props } = child;
|
|
|
- const name = type && type.displayName;
|
|
|
- const webName = name && name[0].toLowerCase() + name.slice(1);
|
|
|
- const Tag = webName ? webName : type;
|
|
|
- return <Tag {...props}>{toWeb(props.children)}</Tag>;
|
|
|
- };
|
|
|
-
|
|
|
- const toWeb = (children: any) => React.Children.map(children, childToWeb);
|
|
|
-
|
|
|
- function renderSvg() {
|
|
|
- return (
|
|
|
- <Svg height="100%" width="100%" style={{ backgroundColor: '#33AAFF' }}>
|
|
|
- <Rect
|
|
|
- x="50"
|
|
|
- y="50"
|
|
|
- width="50"
|
|
|
- height="50"
|
|
|
- fill="#3399ff"
|
|
|
- strokeWidth="3"
|
|
|
- stroke="rgb(0,0,0)"
|
|
|
- />
|
|
|
- </Svg>
|
|
|
- )
|
|
|
- }
|
|
|
-
|
|
|
function changer(num) {
|
|
|
setFloor(prevState => prevState + num)
|
|
|
}
|
|
|
|
|
|
- // TODO: wire up promptaddlandmark, applyfilters, and focuslandmark methods passed from MapNavigator
|
|
|
return (
|
|
|
<View style={{ height: '100%', width: Dimensions.get("screen").width, backgroundColor:colors.red }}>
|
|
|
|
|
|
<StatusBar backgroundColor={colors.red} />
|
|
|
<CustomModal />
|
|
|
- {/* <Text style={{ fontSize: 16, marginBottom: 5 }}>Please select a floor you would like to go to.</Text> */}
|
|
|
|
|
|
<View style={{ borderColor: "blue", borderWidth: 0, maxHeight: 50, flex: 1, flexDirection: "row", justifyContent: "center", }}>
|
|
|
|
|
@@ -161,25 +132,6 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
|
|
|
/>
|
|
|
</View>
|
|
|
|
|
|
-
|
|
|
- {/* <EricPicker
|
|
|
- style={{ backgroundColor: colors.red, width: 200, height: 50, flex: 5, color: 'white' }}
|
|
|
- selectedValue={floor} // the text of what gets displayed on the dropdown header
|
|
|
- onValueChange={(itemValue, itemIndex: number) => {
|
|
|
- setFloor(itemIndex)
|
|
|
- setShowME(false)
|
|
|
- }}>
|
|
|
- The value in EricPicker.Item refers to selectedValue in EricPicker, which refers to the state "floor"
|
|
|
- <EricPicker.Item label="Basement" value={0} />
|
|
|
- <EricPicker.Item label="First Floor" value={1} />
|
|
|
- <EricPicker.Item label="Second Floor" value={2} />
|
|
|
- <EricPicker.Item label="Third Floor" value={3} />
|
|
|
- <EricPicker.Item label="Fourth Floor" value={4} />
|
|
|
- <EricPicker.Item label="Fifth Floor" value={5} />
|
|
|
- </EricPicker> */}
|
|
|
-
|
|
|
-
|
|
|
- {/* {floor == 5 ? arrowBut(0, "") : arrowBut(1, "chevron-right")} */}
|
|
|
{floor == 5 ? <ArrowButton num={0} fontAweIcon={""} /> : <ArrowButton num={1} fontAweIcon={"chevron-right"} propEvent={() => changer(1)} />}
|
|
|
|
|
|
|
|
@@ -194,15 +146,12 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
|
|
|
|
|
|
<ReactNativeZoomableView
|
|
|
panBoundaryPadding={100}
|
|
|
- // bindToBorders={false}
|
|
|
bindToBorders={true}
|
|
|
zoomStep={2.8}
|
|
|
- // initialZoom={2.2}
|
|
|
maxZoom={2.8}
|
|
|
minZoom={1}
|
|
|
initialOffsetY={5}
|
|
|
onLongPress={(event) => {
|
|
|
- // serialize()
|
|
|
addLandmark(event)
|
|
|
}}
|
|
|
movementSensibility={3}
|
|
@@ -215,11 +164,9 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
|
|
|
const transformedLandmarks = localLandmarks.map(item => {
|
|
|
return { ...item, coordx: item.longitude * event.nativeEvent.layout.width, coordy: item.latitude * event.nativeEvent.layout.height }
|
|
|
})
|
|
|
- //console.log("*this is within onLayout* SVGdim values are " + SVGdim[0] + " AND " + SVGdim[1])
|
|
|
setLocalLandmarks(transformedLandmarks)
|
|
|
}}
|
|
|
>
|
|
|
- {/* {firstTime == true ? undefined : loadCircles} */}
|
|
|
<IndoorFloor floorNum={floor} />
|
|
|
{loadLandmarks}
|
|
|
</Svg>
|
|
@@ -228,21 +175,6 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
|
|
|
|
|
|
</View>
|
|
|
</View>
|
|
|
- {/* <Button title="load coordinates" onPress={() => {
|
|
|
- setfirstTime(false)
|
|
|
- setLocalLandmarks(landmarks)
|
|
|
- }} /> */}
|
|
|
-
|
|
|
- {/* <Button title='Press me to svgString' color={colors.red} onPress={serialize}></Button> */}
|
|
|
- {/* <View style={{ flex: 0.1, flexDirection: 'row', alignItems:'flex-end', justifyContent: 'space-around' , borderColor:'green' , borderWidth:0 ,}}>
|
|
|
- <Button title="Go back to map" color={colors.red} onPress={() => navigation.goBack()} />
|
|
|
- <Button title="Resources" color={colors.red} onPress={() => Linking.openURL('https://www.library.ualberta.ca/')} />
|
|
|
- </View> */}
|
|
|
- {/* <TouchableOpacity style={styles.arrowButton} onPress={() => setFloor(prevState => prevState+1)} ><Text>Increase floor by 1</Text></TouchableOpacity> */}
|
|
|
-
|
|
|
-
|
|
|
- {/* <BottomButtons navigation={navigation}/> */}
|
|
|
- {/* <Text>{floor}</Text> */}
|
|
|
|
|
|
</View >
|
|
|
);
|
|
@@ -251,18 +183,11 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
|
|
|
const styles = StyleSheet.create({
|
|
|
container: {
|
|
|
flex: 1,
|
|
|
- // backgroundColor: "#fff",
|
|
|
justifyContent: "center",
|
|
|
borderColor: "black",
|
|
|
borderWidth: 0,
|
|
|
marginVertical: 0,
|
|
|
aspectRatio: 8 / 10, // (caters to portrait mode) (width is 80% the value of height dimension)
|
|
|
- // flex: 1,
|
|
|
- // // backgroundColor: "#fff",
|
|
|
- // justifyContent: "center",
|
|
|
- // borderColor: "black",
|
|
|
- // borderWidth: 2,
|
|
|
- // marginVertical: 15,
|
|
|
width: '100%',
|
|
|
height: '100%',
|
|
|
maxWidth: "100%",
|
|
@@ -281,9 +206,7 @@ const styles = StyleSheet.create({
|
|
|
arrowButton: {
|
|
|
flex: 1,
|
|
|
backgroundColor: colors.red,
|
|
|
- // backgroundColor: "blue",
|
|
|
height: 53.5,
|
|
|
- // borderRadius: 10,
|
|
|
},
|
|
|
});
|
|
|
|