Browse Source

Merge branch 'map' into dev

Arnaud Vergnet 3 years ago
parent
commit
5e36b993c5

+ 1
- 0
package.json View File

@@ -24,6 +24,7 @@
24 24
     "@react-native-community/masked-view": "^0.1.10",
25 25
     "@react-native-community/push-notification-ios": "^1.1.1",
26 26
     "@react-native-community/slider": "^3.0.0",
27
+    "@react-native-mapbox-gl/maps": "^8.1.0-rc.1",
27 28
     "@react-navigation/bottom-tabs": "^5.3.2",
28 29
     "@react-navigation/native": "^5.2.2",
29 30
     "@react-navigation/stack": "^5.2.17",

+ 8
- 0
src/navigation/MainNavigator.js View File

@@ -30,6 +30,7 @@ import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
30 30
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
31 31
 import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
32 32
 import BugReportScreen from "../screens/Other/FeedbackScreen";
33
+import MapScreen from "../screens/Services/MapScreen";
33 34
 
34 35
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
35 36
 
@@ -106,6 +107,13 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
106 107
             {getWebsiteStack("available-rooms", MainStack, AvailableRoomScreen, i18n.t('screens.availableRooms'))}
107 108
             {getWebsiteStack("bib", MainStack, BibScreen, i18n.t('screens.bib'))}
108 109
             {createScreenCollapsibleStack("self-menu", MainStack, SelfMenuScreen, i18n.t('screens.menuSelf'))}
110
+            <MainStack.Screen
111
+                name="map"
112
+                component={MapScreen}
113
+                options={{
114
+                    title: i18n.t('screens.map'),
115
+                }}
116
+            />
109 117
 
110 118
             {/*     STUDENTS     */}
111 119
             {createScreenCollapsibleStack("proximo", MainStack, ProximoMainScreen, i18n.t('screens.proximo'))}

+ 104
- 0
src/screens/Services/MapScreen.js View File

@@ -0,0 +1,104 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {View} from 'react-native';
5
+import {withTheme} from 'react-native-paper';
6
+import {StackNavigationProp} from "@react-navigation/stack";
7
+import type {CustomTheme} from "../../managers/ThemeManager";
8
+import MapboxGL from "@react-native-mapbox-gl/maps";
9
+
10
+type Props = {
11
+    navigation: StackNavigationProp,
12
+    theme: CustomTheme,
13
+}
14
+
15
+type State = {
16
+    featureCollection: Array<Object>,
17
+}
18
+
19
+MapboxGL.setAccessToken("pk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM2d5OHYwYmdiMndxdnV4bmh6bGFwIn0.qiOwbs2_HRaQGUOpBDjbsQ");
20
+
21
+// const styles = {
22
+//     icon: {
23
+//         iconImage: exampleIcon,
24
+//         iconAllowOverlap: true,
25
+//     },
26
+// };
27
+
28
+// const FEATURES = [{
29
+//     type: 'Feature',
30
+//     geometry: {
31
+//         type: 'Point',
32
+//         coordinates: [1.4669608, 43.5698867],
33
+//     }
34
+// }]
35
+
36
+/**
37
+ * Class defining the app's map screen.
38
+ */
39
+class MapScreen extends React.Component<Props, State> {
40
+
41
+    map: { current: null | MapboxGL.MapView };
42
+
43
+    constructor() {
44
+        super();
45
+        this.map = React.createRef();
46
+
47
+        this.state = {
48
+            featureCollection: [],
49
+        };
50
+    }
51
+
52
+    componentDidMount() {
53
+        MapboxGL.setTelemetryEnabled(false);
54
+
55
+    }
56
+
57
+    // onSymbolPress = (feature) => {
58
+    //     console.log("coucou");
59
+    // }
60
+    //
61
+    //
62
+    // onSourceLayerPress = ({features, coordinates, point}) => {
63
+    //     console.log(
64
+    //         'You pressed a layer here are your features:',
65
+    //         features,
66
+    //         coordinates,
67
+    //         point,
68
+    //     );
69
+    // }
70
+
71
+    render() {
72
+        return (
73
+            <View style={{flex: 1}}>
74
+                <MapboxGL.MapView
75
+                    style={{flex: 1}}
76
+                    ref={this.map}
77
+                    styleURL={MapboxGL.StyleURL.Outdoors}
78
+                    surfaceView={true}
79
+                    onPress={(e) => {
80
+                        console.log(e)
81
+                    }}
82
+                >
83
+                    <MapboxGL.Camera
84
+                        zoomLevel={15}
85
+                        centerCoordinate={[1.4669608, 43.5698867]}
86
+                        pitch={30}
87
+                    />
88
+                    {/*<MapboxGL.ShapeSource*/}
89
+                    {/*    id="symbolLocationSource"*/}
90
+                    {/*    shape={{ type: 'FeatureCollection', features: FEATURES }}*/}
91
+                    {/*>*/}
92
+                    {/*    <MapboxGL.SymbolLayer*/}
93
+                    {/*        id="symbolLocationSymbols"*/}
94
+                    {/*        minZoomLevel={15}*/}
95
+                    {/*        style={styles.icon}*/}
96
+                    {/*    />*/}
97
+                    {/*</MapboxGL.ShapeSource>*/}
98
+                </MapboxGL.MapView>
99
+            </View>
100
+        );
101
+    }
102
+}
103
+
104
+export default withTheme(MapScreen);

+ 9
- 0
src/screens/Services/ServicesScreen.js View File

@@ -31,6 +31,7 @@ const WIKETUD_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Wiketud
31 31
 const EE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/EEC.png";
32 32
 const TUTORINSA_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/TutorINSA.png";
33 33
 
34
+const MAP_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Map.png";
34 35
 const BIB_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bib.png";
35 36
 const RU_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/RU.png";
36 37
 const ROOM_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Salles.png";
@@ -49,6 +50,8 @@ type State = {
49 50
     isLoggedIn: boolean,
50 51
 }
51 52
 
53
+// TODO translate subtitles
54
+
52 55
 class ServicesScreen extends React.Component<Props, State> {
53 56
 
54 57
     amicaleDataset: cardList;
@@ -120,6 +123,12 @@ class ServicesScreen extends React.Component<Props, State> {
120 123
         ];
121 124
         this.insaDataset = [
122 125
             {
126
+                title: i18n.t('screens.map'),
127
+                subtitle: "MAP",
128
+                image: MAP_IMAGE,
129
+                onPress: () => nav.navigate("map"),
130
+            },
131
+            {
123 132
                 title: i18n.t('screens.menuSelf'),
124 133
                 subtitle: "the ru",
125 134
                 image: RU_IMAGE,

+ 2
- 1
translations/en.json View File

@@ -25,7 +25,8 @@
25 25
     "profile": "Profile",
26 26
     "vote": "Elections",
27 27
     "scanner": "Scanotron 3000",
28
-    "feedback": "Feedback"
28
+    "feedback": "Feedback",
29
+    "map": "Campus Map"
29 30
   },
30 31
   "intro": {
31 32
     "slideMain": {

+ 2
- 1
translations/fr.json View File

@@ -25,7 +25,8 @@
25 25
     "profile": "Profil",
26 26
     "vote": "Élections",
27 27
     "scanner": "Scanotron 3000",
28
-    "feedback": "Votre avis"
28
+    "feedback": "Votre avis",
29
+    "map": "Carte du campus"
29 30
   },
30 31
   "intro": {
31 32
     "slideMain": {

Loading…
Cancel
Save