Merge branch 'map' into dev

package.json

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

src/navigation/MainNavigator.js

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

src/screens/Services/MapScreen.js

@@ -0,0 +1,104 @@
+// @flow
+
+import * as React from 'react';
+import {View} from 'react-native';
+import {withTheme} from 'react-native-paper';
+import {StackNavigationProp} from "@react-navigation/stack";
+import type {CustomTheme} from "../../managers/ThemeManager";
+import MapboxGL from "@react-native-mapbox-gl/maps";
+
+type Props = {
+    navigation: StackNavigationProp,
+    theme: CustomTheme,
+}
+
+type State = {
+    featureCollection: Array<Object>,
+}
+
+MapboxGL.setAccessToken("pk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM2d5OHYwYmdiMndxdnV4bmh6bGFwIn0.qiOwbs2_HRaQGUOpBDjbsQ");
+
+// const styles = {
+//     icon: {
+//         iconImage: exampleIcon,
+//         iconAllowOverlap: true,
+//     },
+// };
+
+// const FEATURES = [{
+//     type: 'Feature',
+//     geometry: {
+//         type: 'Point',
+//         coordinates: [1.4669608, 43.5698867],
+//     }
+// }]
+
+/**
+ * Class defining the app's map screen.
+ */
+class MapScreen extends React.Component<Props, State> {
+
+    map: { current: null | MapboxGL.MapView };
+
+    constructor() {
+        super();
+        this.map = React.createRef();
+
+        this.state = {
+            featureCollection: [],
+        };
+    }
+
+    componentDidMount() {
+        MapboxGL.setTelemetryEnabled(false);
+
+    }
+
+    // onSymbolPress = (feature) => {
+    //     console.log("coucou");
+    // }
+    //
+    //
+    // onSourceLayerPress = ({features, coordinates, point}) => {
+    //     console.log(
+    //         'You pressed a layer here are your features:',
+    //         features,
+    //         coordinates,
+    //         point,
+    //     );
+    // }
+
+    render() {
+        return (
+            <View style={{flex: 1}}>
+                <MapboxGL.MapView
+                    style={{flex: 1}}
+                    ref={this.map}
+                    styleURL={MapboxGL.StyleURL.Outdoors}
+                    surfaceView={true}
+                    onPress={(e) => {
+                        console.log(e)
+                    }}
+                >
+                    <MapboxGL.Camera
+                        zoomLevel={15}
+                        centerCoordinate={[1.4669608, 43.5698867]}
+                        pitch={30}
+                    />
+                    {/*<MapboxGL.ShapeSource*/}
+                    {/*    id="symbolLocationSource"*/}
+                    {/*    shape={{ type: 'FeatureCollection', features: FEATURES }}*/}
+                    {/*>*/}
+                    {/*    <MapboxGL.SymbolLayer*/}
+                    {/*        id="symbolLocationSymbols"*/}
+                    {/*        minZoomLevel={15}*/}
+                    {/*        style={styles.icon}*/}
+                    {/*    />*/}
+                    {/*</MapboxGL.ShapeSource>*/}
+                </MapboxGL.MapView>
+            </View>
+        );
+    }
+}
+
+export default withTheme(MapScreen);

src/screens/Services/ServicesScreen.js

@@ -31,6 +31,7 @@ const WIKETUD_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Wiketud
 const EE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/EEC.png";
 const TUTORINSA_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/TutorINSA.png";
 
+const MAP_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Map.png";
 const BIB_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bib.png";
 const RU_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/RU.png";
 const ROOM_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Salles.png";
@@ -49,6 +50,8 @@ type State = {
     isLoggedIn: boolean,
 }
 
+// TODO translate subtitles
+
 class ServicesScreen extends React.Component<Props, State> {
 
     amicaleDataset: cardList;
@@ -119,6 +122,12 @@ class ServicesScreen extends React.Component<Props, State> {
             },
         ];
         this.insaDataset = [
+            {
+                title: i18n.t('screens.map'),
+                subtitle: "MAP",
+                image: MAP_IMAGE,
+                onPress: () => nav.navigate("map"),
+            },
             {
                 title: i18n.t('screens.menuSelf'),
                 subtitle: "the ru",

translations/en.json

@@ -25,7 +25,8 @@
     "profile": "Profile",
     "vote": "Elections",
     "scanner": "Scanotron 3000",
-    "feedback": "Feedback"
+    "feedback": "Feedback",
+    "map": "Campus Map"
   },
   "intro": {
     "slideMain": {

translations/fr.json

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