浏览代码

added new landmarks

Eric Li 2 年之前
父节点
当前提交
f1d1399058

二进制
assets/garbage.png


二进制
assets/loudnoise.png


二进制
assets/tripping.png


+ 1 - 0
src/components/Map/IndoorFloor.tsx

@@ -17,6 +17,7 @@ function IndoorFloor(props) {
     <Image height={"100%"} width={"100%"} href={require('./MainMapComponent/images/thirdfloor.png')} />,
     <Image height={"100%"} width={"100%"} href={require('./MainMapComponent/images/fourthfloor.png')} />,
     <Image height={"100%"} width={"100%"} href={require('./MainMapComponent/images/fifthfloor.png')} />,
+    // <FifthFloorC viewBox='257 153 270 290' style={{ opacity: 0.7 }} height={"100%"} width={"100%"} />,
   ]
 
   return compArray[props.floorNum]

+ 1 - 1
src/components/Map/MainMapComponent/ArrowButton.tsx

@@ -1,7 +1,7 @@
 import { View, Text, TouchableOpacity, StyleSheet, ToastAndroid} from 'react-native'
 import React from 'react'
 import { FontAwesome } from "@expo/vector-icons";
-import { colors, lmTypes } from "../../../utils/GlobalUtils";
+import { colors} from "../../../utils/GlobalUtils";
 
 
 function ArrowButton(props) {

+ 1 - 1
src/components/Map/MainMapComponent/BottomButtons.tsx

@@ -1,6 +1,6 @@
 import { View, Text, TouchableOpacity, StyleSheet, Linking } from 'react-native'
 import React from 'react'
-import { colors, lmTypes } from "../../../utils/GlobalUtils";
+import { colors } from "../../../utils/GlobalUtils";
 
 function BottomButtons(props) {
   return (

+ 3 - 2
src/components/Map/MainMapComponent/IndoorMap.tsx

@@ -5,7 +5,7 @@ import { RadioButton } from 'react-native-paper';
 import { Picker as EricPicker } from '@react-native-picker/picker';
 import ReactNativeZoomableView from '@openspacelabs/react-native-zoomable-view/src/ReactNativeZoomableView';
 import Spinner from 'react-native-spinkit'
-import { colors, lmTypes } from "../../../utils/GlobalUtils";
+import { colors, lmTypesIndoor } from "../../../utils/GlobalUtils";
 import { MapStackNavigationProp } from "../../../navigation/MapNavigator"
 import CustomModal from './modal';
 import { FontAwesome } from "@expo/vector-icons";
@@ -20,6 +20,7 @@ import Picker from 'react-native-picker-select';
 import { Landmark } from '../../../data/landmarks';
 
 
+
 interface IndoorMapProps {
   navigation: MapStackNavigationProp
   landmarks: Landmark[]
@@ -52,7 +53,7 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
           y={item.latitude * SVGdim[1]}
           width={imageDim}
           height={imageDim}
-          href={lmTypes[item.landmark_type]['image'] as ImageSourcePropType} />
+          href={lmTypesIndoor[item.landmark_type]['image'] as ImageSourcePropType} />
       )
     }
   }

+ 3 - 3
src/components/Map/MainMapComponent/OutdoorMap.tsx

@@ -342,14 +342,14 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                     )}
 
 
-                    <MapViewDirections
+                    {/* <MapViewDirections
                         origin={coordinates[0]}
                         destination={coordinates[1]}
-                        apikey={""} // insert your API Key here
+                        apikey={"AIzaSyBpckHhiuieLglacinLqewC_HfWkLehwWI"} // insert your API Key here
                         strokeWidth={4}
                         strokeColor="#111111"
                     />
-                    <Marker coordinate={coordinates[1]} />
+                    <Marker coordinate={coordinates[1]} pinColor={colors.red} /> */}
 
 
 

+ 25 - 3
src/components/Map/Panels/AddLandmarkPanel.tsx

@@ -13,16 +13,20 @@ import { ScrollView } from "react-native-gesture-handler";
 import Modal from 'react-native-modal';
 import Picker from 'react-native-picker-select';
 import { Landmark, LMPhoto, useAddLandmark } from "../../../data/landmarks";
-import { colors, lmTypes } from "../../../utils/GlobalUtils";
+import { colors, lmTypes, lmTypes as lmTypess, lmTypesIndoor } from "../../../utils/GlobalUtils";
 import { IconButton, SecondaryButton } from "../../Buttons";
 import { PhotoPicker } from "../../PhotoPicker";
 import TouchOpaq from "./LandmarkDetailsPanel/TouchOpaq";
 import { Svg, Rect, Image as ImageSVG, Circle } from 'react-native-svg'
 import ReactDOMServer from 'react-dom/server'; //npm i --save-dev @types/react-dom
 
+
 import IndoorFloor from "../IndoorFloor";
 import ViewShot, { captureRef, captureScreen } from "react-native-view-shot";
 
+import { useNavigationState } from "@react-navigation/native"
+
+
 /**
  * Props for the {@link AddLandmarkPanel} component.
  */
@@ -58,6 +62,15 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
 
     const addLandmarkMutation = useAddLandmark()
 
+    const navigationState = useNavigationState(state => state)
+    const [currentRoute, setCurrentRoute] = useState<string>()
+    useEffect(() => {
+        const currentRouteIndex = navigationState?.routes[0]?.state?.index
+        const currentRouteName = navigationState?.routes[0]?.state?.routeNames[currentRouteIndex]
+        setCurrentRoute(currentRouteName)
+    }, [navigationState])
+
+    
     useEffect(() => {
         let eventString = Platform.OS == "android" ? 'keyboardDidShow' : Platform.OS == "ios" ? 'keyboardWillShow' : null;
         if (eventString) {
@@ -100,6 +113,11 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
     const imgWidth = 346
     const imgHeight = 448
     const imageDim = 25
+    
+    let lmTypes = lmTypess
+    if(currentRoute=="Indoor") {
+        lmTypes = lmTypesIndoor
+    }
 
     useEffect(() => {
         /**
@@ -144,7 +162,6 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
         }
 
 
-
         // create svg content here, then pass it to addLandmarkAsync as the value of indoorLmLocImg
         // if (typeof newLandmark.floor === 'number') {
         //     let rectangle = serialize()
@@ -192,6 +209,9 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
                 enabled={photos?.length > 0}
             >
                 {console.log("state of keyboard is " + keyboardOpened)}
+                {/* {console.log("*THIS IS IN PANEL* navigationState is " + navigationState.index)}
+                {console.log("*THIS IS IN PANEL* currentRoute is " + currentRoute)} */}
+
                 <SafeAreaView style={{ backgroundColor: colors.red, height: determineModalHeight(), }}>
                     {addLandmarkMutation.isIdle ?
                         <>
@@ -253,8 +273,10 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
                                                 )
                                             })}
                                         />
+
                                         {newLandmark?.landmark_type ? <Image style={{ marginLeft: 20 }} source={lmTypes[newLandmark.landmark_type].image} />
                                             : null}
+                                            <Text>{currentRoute=="Indoor" ? "INDOOR" : "OUTDOOR"}</Text>
                                     </View>
                                 </View>
                                 {newLandmark?.landmark_type ?
@@ -302,8 +324,8 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
                         <View style={styles.container}>
                             <Svg>
                                 {console.log("x coord is " + newLandmark.longitude + " and y coord is " + newLandmark.latitude)}
-                                <ImageSVG x={newLandmark.longitude * imgWidth - 3} y={newLandmark.latitude * imgHeight - 3} width={imageDim} height={imageDim} href={lmTypes[newLandmark.landmark_type]['image'] as ImageSourcePropType} />
                                 <IndoorFloor floorNum={newLandmark.floor} />
+                                <ImageSVG x={newLandmark.longitude * imgWidth - 3} y={newLandmark.latitude * imgHeight - 3} width={imageDim} height={imageDim} href={lmTypes[newLandmark.landmark_type]['image'] as ImageSourcePropType} />
                             </Svg>
                         </View>
                     }

+ 52 - 26
src/components/Map/Panels/FilterPanel/FilterLmTypes.tsx

@@ -5,43 +5,69 @@
  * <dev@clicknpush.ca>, January 2022
  */
 
-import React from "react"
-import { View, Text } from "react-native"
+import React, { useEffect, useState } from "react";
+import { View, Text, ScrollView } from "react-native"
 import Select from "react-native-multiple-select"
-import { lmTypes } from "../../../../utils/GlobalUtils"
+import { lmTypes as lmTypess, lmTypesIndoor } from "../../../../utils/GlobalUtils"
+import { useNavigation, useNavigationState, useRoute } from "@react-navigation/native"
+
 
 interface FilterLmTypesProps {
     localFilterTypes: number[],
     setLocalFilterTypes: (types: number[]) => void
 }
 
+
+
+
 /**
  * Component that offers a selector for landmark types to be filtered
  */
-export const FilterLmTypes: React.FC<FilterLmTypesProps> = ({setLocalFilterTypes, localFilterTypes}) => {
+export const FilterLmTypes: React.FC<FilterLmTypesProps> = ({ setLocalFilterTypes, localFilterTypes }) => {
+
+    const navigationState = useNavigationState(state => state)
+    const [currentRoute, setCurrentRoute] = useState<string>()
+    useEffect(() => {
+        const currentRouteIndex = navigationState?.routes[0]?.state?.index
+        const currentRouteName = navigationState?.routes[0]?.state?.routeNames[currentRouteIndex]
+        setCurrentRoute(currentRouteName)
+    }, [navigationState])
+
+    let lmTypes = lmTypess
+
+    if (currentRoute == "Indoor") {
+        lmTypes = lmTypesIndoor
+    }
+
     return (
-        <View style={{marginBottom: 10, justifyContent: 'flex-start'}}>
-            <Text style={{marginRight: 10, marginBottom: 5}}>Landmark type:</Text>
-            <View style={{borderColor:"blue" , borderWidth:0, width: '100%', justifyContent: 'center'}}>
-                <Select
-                    styleRowList={{borderColor:"red" , borderWidth:0}}
-                    textColor='black'  
-                    itemTextColor='black'
-                    displayKey="label"
-                    uniqueKey="value"
-                    submitButtonText="Confirm"
-                    submitButtonColor='black'
-                    onSelectedItemsChange={(types) => {
-                        setLocalFilterTypes(types)
-                    }}
-
-                    selectedItems={localFilterTypes}
-                    items={Object.keys(lmTypes)?.map(icon => {
-                        return (
-                            {label: lmTypes[parseInt(icon)].label.toUpperCase(), value: parseInt(icon), key: icon}
-                        )})}>
-                </Select>
+        <View style={{ justifyContent: 'flex-start' }}>
+            <Text style={{ marginRight: 10, marginBottom: 5 }}>Landmark type:</Text>
+            <View style={{ borderColor: "blue", borderWidth: 0, width: '100%', justifyContent: 'center' }}>
+
+                {/* <ScrollView style={{height:"60%"}}> */}
+                    <Select
+                        styleRowList={{ borderColor: "red", borderWidth: 0 }}
+                        textColor='black'
+                        itemTextColor='black'
+                        displayKey="label"
+                        uniqueKey="value"
+                        submitButtonText="Confirm"
+                        submitButtonColor='black'
+                        onSelectedItemsChange={(types) => {
+                            setLocalFilterTypes(types)
+                        }}
+
+                        selectedItems={localFilterTypes}
+                        items={Object.keys(lmTypes)?.map(icon => {
+                            return (
+                                    {label: lmTypes[parseInt(icon)].label.toUpperCase(), value: parseInt(icon), key: icon }
+                            )
+                        })}>
+                    </Select>
+                {/* </ScrollView> */}
+
+                {/* {console.log("*FILTER PANEL* currentRoute is " + currentRoute)} */}
             </View>
-        </View> 
+        </View>
     )
 }

+ 20 - 1
src/components/Map/Panels/LandmarkDetailsPanel/DetailsBody.tsx

@@ -14,13 +14,16 @@ import { QueryStatus } from "react-query";
 import { LMComment } from "../../../../data/comments";
 import { Landmark, LMPhoto } from "../../../../data/landmarks";
 import { MainTabsNavigationProp } from "../../../../navigation/MainTabsNavigator";
-import { lmTypes } from "../../../../utils/GlobalUtils";
+import { lmTypes as lmTypess , lmTypesIndoor } from "../../../../utils/GlobalUtils";
 import { IconButton, PrimaryButton } from "../../../Buttons";
 import { PhotoPicker } from "../../../PhotoPicker";
 import { Separator } from "../../../Separator";
 import { CommentsContainer } from "./CommentsContainer";
 import { LandmarkPhotos } from "./LandmarkPhotos";
 
+import { useNavigationState } from "@react-navigation/native"
+
+
 interface DetailsBodyProps {
     editingEnabled: boolean,
     updatedLandmark?: Landmark,
@@ -58,6 +61,21 @@ interface DetailsBodyProps {
 */
 export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
 
+    const navigationState = useNavigationState(state => state)
+    const [currentRoute, setCurrentRoute] = useState<string>()
+    useEffect(() => {
+        const currentRouteIndex = navigationState?.routes[0]?.state?.index
+        const currentRouteName = navigationState?.routes[0]?.state?.routeNames[currentRouteIndex]
+        setCurrentRoute(currentRouteName)
+    }, [navigationState])
+
+
+    let lmTypes = lmTypess
+    if(currentRoute=="Indoor") {
+        lmTypes = lmTypesIndoor
+    }
+
+
     useEffect(() => {
         if (props.editingEnabled) {
             console.log("[LandmarkDetails]: Editing is enabled")
@@ -126,6 +144,7 @@ export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {
                 <LandmarkTypePicker />
                 <Separator style={{marginBottom: 20, opacity: .5}} color="lightgray" />
                 <Text style={{color: 'white', marginBottom: 10}}>Description</Text>
+                {/* {console.log("*DETAILS BODY: currentRotue is " + currentRoute)} */}
                 <ScrollView nestedScrollEnabled={true} style={{backgroundColor: 'white', marginBottom: 20}}>
                     <TextInput 
                         multiline={true} 

+ 1 - 1
src/navigation/MapNavigator.tsx

@@ -197,7 +197,7 @@ const MapNavigator: React.FC = ({ }) => {
                             setVisible(false)
                             navigate("Outdoor")
                             // Alert.alert("Cameron Library")
-                        }}>Go back outdoors</MenuItem>
+                        }}>Go Back Outdoors</MenuItem>
 
                         <MenuItem onPress={() => {
                             setVisible(false)

+ 31 - 2
src/utils/GlobalUtils.ts

@@ -28,14 +28,43 @@ export const lmTypes: {[key: number]: {image: ImageURISource, label: string}} =
     7: {image: require('../../assets/power.png'), label: "power issue"},
     8: {image: require('../../assets/crosswalk.png'), label: "crosswalk issue"},
     9: {image: require('../../assets/ice.png'), label: "ice"},
+    14: {image: require('../../assets/ramp.png'), label: "ramp"},
+    16: {image: require('../../assets/childfriendly.png'), label: "child friendly area"},
+}
+
+export const lmTypesIndoor: {[key: number]: {image: ImageURISource, label: string}} = {
+    2: {image: require('../../assets/stairs.png'), label: "stairs"},
+    5: {image: require('../../assets/information.png'), label: "information"},
+    6: {image: require('../../assets/washroom.png'), label: "accessible washroom"},
     10: {image: require('../../assets/desk.png'), label: "desk"},
     11: {image: require('../../assets/elevator.png'), label: "elevator"},
     12: {image: require('../../assets/kiosk.png'), label: "kiosk"},
     13: {image: require('../../assets/monitor.png'), label: "monitor"},
     14: {image: require('../../assets/ramp.png'), label: "ramp"},
-    15: {image: require('../../assets/water.png'), label: "water"},
+    15: {image: require('../../assets/water.png'), label: "water fountain"},
     16: {image: require('../../assets/childfriendly.png'), label: "child friendly area"},
-} 
+    17: {image: require('../../assets/garbage.png'), label: "Garbage cans"},
+    18: {image: require('../../assets/loudnoise.png'), label: "Loud area"},
+    19: {image: require('../../assets/tripping.png'), label: "Tripping hazard"},
+
+}
+
+// 2: {image: require('../../assets/stairs.png'), label: "stairs"},
+// 3: {image: require('../../assets/barrier.png'), label: "barrier"},
+// 4: {image: require('../../assets/uneven.png'), label: "rough terrain"},
+// 5: {image: require('../../assets/information.png'), label: "information"},
+// 6: {image: require('../../assets/washroom.png'), label: "accessible washroom"},
+// 7: {image: require('../../assets/power.png'), label: "power issue"},
+// 8: {image: require('../../assets/crosswalk.png'), label: "crosswalk issue"},
+// 9: {image: require('../../assets/ice.png'), label: "ice"},
+// 10: {image: require('../../assets/desk.png'), label: "desk"},
+// 11: {image: require('../../assets/elevator.png'), label: "elevator"},
+// 12: {image: require('../../assets/kiosk.png'), label: "kiosk"},
+// 13: {image: require('../../assets/monitor.png'), label: "monitor"},
+// 14: {image: require('../../assets/ramp.png'), label: "ramp"},
+// 15: {image: require('../../assets/water.png'), label: "water fountain"},
+// 16: {image: require('../../assets/childfriendly.png'), label: "child friendly area"},
+
 
 export const GlobalStyles = StyleSheet.create({
     itemRowContainer: {

+ 2 - 2
src/utils/RequestUtils.ts

@@ -25,8 +25,8 @@ import Config from 'react-native-config'
 //export const API_URL = 'http://192.168.3.81:8000'
 // export const API_URL = 'https://staging.clicknpush.ca'
 
-export const API_URL = 'http://192.168.3.102:8001'   // Chase
-//export const API_URL = 'http://192.168.0.22:8000'       // Eric
+//export const API_URL = 'http://192.168.3.102:8001'   // Chase
+export const API_URL = 'http://192.168.0.22:8000'       // Eric
 //export const API_URL = 'https://app.clicknpush.ca'
 
 // export const API_URL = Config.API_URL