|
|
@@ -4,7 +4,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack"
|
|
|
import { StackNavigationProp } from "@react-navigation/stack"
|
|
|
import { observer } from "mobx-react"
|
|
|
import React, { useEffect, useState } from "react"
|
|
|
-import { Dimensions, Image, ScrollView, View } from "react-native"
|
|
|
+import { Alert, Dimensions, Image, ScrollView, View, Linking, Text } from "react-native"
|
|
|
import { Chip } from "react-native-paper"
|
|
|
import { IconButton } from "../components/Buttons"
|
|
|
import IndoorMap from "../components/Map/MainMapComponent/IndoorMap"
|
|
|
@@ -19,6 +19,12 @@ import { Landmark, useLandmarks } from '../data/landmarks'
|
|
|
import { colors, lmTypes, } from "../utils/GlobalUtils"
|
|
|
import { MainTabsNavigationProp } from "./MainTabsNavigator"
|
|
|
|
|
|
+import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
|
|
|
+import { navigate } from "./RootNavigator"
|
|
|
+import { Separator } from "../components/Separator"
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
const MapStackNavigator = createNativeStackNavigator()
|
|
|
|
|
|
export type MapStackParamList = {
|
|
|
@@ -39,10 +45,11 @@ const MapNavigator: React.FC = ({ }) => {
|
|
|
|
|
|
// const currentRouteIndex = useNavigation().getState().routes[0].state.index
|
|
|
// const currentRouteName = useNavigation().getState().routes[0].state.routeNames[currentRouteIndex]
|
|
|
-
|
|
|
const navigationState = useNavigationState(state => state)
|
|
|
const [currentRoute, setCurrentRoute] = useState<string>()
|
|
|
|
|
|
+ const [visible, setVisible] = useState(false);
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
const currentRouteIndex = navigationState?.routes[0]?.state?.index
|
|
|
const currentRouteName = navigationState?.routes[0]?.state?.routeNames[currentRouteIndex]
|
|
|
@@ -134,9 +141,7 @@ const MapNavigator: React.FC = ({ }) => {
|
|
|
setSelectedLandmarkId={mapState.setSelectedLandmarkId} />}
|
|
|
</MapStackNavigator.Screen>
|
|
|
|
|
|
- <MapStackNavigator.Screen name="Indoor" listeners={{
|
|
|
-
|
|
|
- }} >
|
|
|
+ <MapStackNavigator.Screen name="Indoor" >
|
|
|
{({ navigation }) =>
|
|
|
<IndoorMap
|
|
|
navigation={navigation}
|
|
|
@@ -147,15 +152,13 @@ const MapNavigator: React.FC = ({ }) => {
|
|
|
/>}
|
|
|
</MapStackNavigator.Screen>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
</MapStackNavigator.Navigator>
|
|
|
|
|
|
|
|
|
|
|
|
{/* Filter chips and button*/}
|
|
|
{!mapState.filterVisible && currentRoute == 'Indoor' ?
|
|
|
- <View style={{width:Dimensions.get("window").width*0.8 ,marginLeft:Dimensions.get("window").width*0.1, borderColor:"red" , borderWidth:0, bottom: 55, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
|
|
|
+ <View style={{ top: 60, right: 7.5 , position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
|
|
|
<IconButton size={16} color={colors.red} style={[mapStyles.filterButtonIndoor]} icon="filter" onPress={() => mapState.toggleFilter(true)} />
|
|
|
<ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }} style={{ marginHorizontal: 10, flexDirection: 'row' }}>
|
|
|
{mapState.onlyOwned ? <Chip avatar={(<FontAwesome name="user" size={20} color='gray' style={{ textAlign: 'center', textAlignVertical: 'center' }} />)} style={{ borderWidth: 1, borderColor: 'lightgray', marginRight: 5, marginLeft: 10 }} onClose={() => mapState.toggleOnlyOwned(false)}>My landmarks</Chip> : null}
|
|
|
@@ -167,7 +170,7 @@ const MapNavigator: React.FC = ({ }) => {
|
|
|
{mapState.minLmRating > 0 ? <Chip avatar={(<FontAwesome name="star" size={20} color='gray' style={{ textAlign: 'center', textAlignVertical: 'center' }} />)} style={{ borderWidth: 1, borderColor: 'lightgray', marginLeft: 5, marginRight: 10 }} onClose={() => mapState.setMinLmRating(0)}>Minimum rating: {mapState.minLmRating}</Chip> : null}
|
|
|
</ScrollView>
|
|
|
</View>
|
|
|
- :
|
|
|
+ :
|
|
|
<View style={{ top: 10, marginLeft: 40, marginRight: 20, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
|
|
|
<IconButton size={20} color={colors.red} style={[mapStyles.filterButtonOutdoor]} icon="filter" onPress={() => mapState.toggleFilter(true)} />
|
|
|
<ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }} style={{ marginHorizontal: 10, flexDirection: 'row' }}>
|
|
|
@@ -180,10 +183,58 @@ const MapNavigator: React.FC = ({ }) => {
|
|
|
{mapState.minLmRating > 0 ? <Chip avatar={(<FontAwesome name="star" size={20} color='gray' style={{ textAlign: 'center', textAlignVertical: 'center' }} />)} style={{ borderWidth: 1, borderColor: 'lightgray', marginLeft: 5, marginRight: 10 }} onClose={() => mapState.setMinLmRating(0)}>Minimum rating: {mapState.minLmRating}</Chip> : null}
|
|
|
</ScrollView>
|
|
|
</View>
|
|
|
- }
|
|
|
-
|
|
|
+ }
|
|
|
+
|
|
|
+ {/* Create Hamburger icon */}
|
|
|
+ {currentRoute == 'Indoor' ?
|
|
|
+ <View style={{ top: 100, right: 7.5 , position: 'absolute', }}>
|
|
|
+ <Menu
|
|
|
+ visible={visible}
|
|
|
+ anchor={<IconButton size={16} color={colors.red} style={[mapStyles.filterButtonIndoor]} icon="bars" onPress={() => setVisible(true)} />}
|
|
|
+ onRequestClose={() => setVisible(false)}
|
|
|
+ >
|
|
|
+ <MenuItem onPress={() => {
|
|
|
+ setVisible(false)
|
|
|
+ navigate("Outdoor")
|
|
|
+ // Alert.alert("Cameron Library")
|
|
|
+ }}>Go back outdoors</MenuItem>
|
|
|
+
|
|
|
+ <MenuItem onPress={() => {
|
|
|
+ setVisible(false)
|
|
|
+ Linking.openURL('https://www.ualberta.ca/facilities-operations/portfolio/emergency-management-office/emergency-procedures/alarms-evacuation.html')
|
|
|
+ // Alert.alert("Cameron Library")
|
|
|
+ }}>Resources</MenuItem>
|
|
|
+
|
|
|
+ </Menu>
|
|
|
+ </View>
|
|
|
+ :
|
|
|
+ <View style={{ top: 60, right: 20, position: 'absolute', }}>
|
|
|
+ <Menu
|
|
|
+ visible={visible}
|
|
|
+ anchor={<IconButton size={20} color={colors.red} style={[mapStyles.filterButtonOutdoor]} icon="bars" onPress={() => setVisible(true)} />}
|
|
|
+ onRequestClose={() => setVisible(false)}
|
|
|
+ >
|
|
|
+ <MenuItem disabled={true} disabledTextColor='black' style={{alignItems: 'center', borderColor: 'black', borderBottomWidth: 1, marginHorizontal: 10, opacity: .7}}>
|
|
|
+ <Text>Indoor buildings</Text>
|
|
|
+ </MenuItem>
|
|
|
+ <MenuItem onPress={() => {
|
|
|
+ setVisible(false)
|
|
|
+ navigate("Indoor")
|
|
|
+ // Alert.alert("Cameron Library")
|
|
|
+ }}>Cameron</MenuItem>
|
|
|
+
|
|
|
+ <MenuDivider />
|
|
|
+ <MenuItem disabled>More indoor maps on the way!</MenuItem>
|
|
|
+
|
|
|
+ </Menu>
|
|
|
+
|
|
|
+ {/* either "bars" or "list" */}
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
|
|
|
- {/* {!mapState.filterVisible ?
|
|
|
+ {/* {!mapState.filterVisible ?
|
|
|
<View style={{ top: 10, marginLeft: 40, marginRight: 20, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
|
|
|
<IconButton size={20} color={colors.red} style={[mapStyles.filterButton]} icon="filter" onPress={() => mapState.toggleFilter(true)} />
|
|
|
<ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }} style={{ marginHorizontal: 10, flexDirection: 'row' }}>
|
cdmoss
