Merge branch 'develop' of https://gitlab.utc.fr/lacouran/map_ut into develop

frontend/colors.js

+export default {
+  red: "#FF5A5F",
+  black: "rgb(35, 35, 35)",
+  green: "#006a70"
+};

frontend/package.json

@@ -13,6 +13,7 @@
     "@react-navigation/native-stack": "^6.6.2",
     "axios": "^0.26.1",
     "dateformat": "^5.0.3",
+    "draft-js": "^0.11.7",
     "expo": "^44.0.6",
     "expo-notifications": "^0.14.1",
     "expo-permissions": "^13.1.1",
@@ -21,11 +22,14 @@
     "google-map-react": "^2.1.10",
     "lodash": "^4.17.21",
     "lodash.isempty": "^4.4.0",
+    "prop-types": "^15.8.1",
     "react": "18.0.0",
     "react-dom": "18.0.0",
+    "react-draft-wysiwyg": "^1.14.7",
     "react-google-maps": "^9.4.5",
     "react-google-maps-loader": "^4.3.0",
     "react-native": "0.68.1",
+    "react-native-anchor-carousel": "^4.0.1",
     "react-native-dotenv": "^3.3.1",
     "react-native-elements": "^3.4.2",
     "react-native-maps": "0.29.4",
@@ -34,6 +38,7 @@
     "react-native-paper-form-builder": "^2.1.2",
     "react-native-safe-area-context": "4.2.4",
     "react-native-screens": "~3.13.1",
+    "react-native-snap-carousel": "^3.9.1",
     "react-native-vector-icons": "^9.1.0",
     "react-native-web": "0.17.7",
     "react-redux": "^8.0.1",

frontend/src/components/Carousel.js

+import React, {useRef, useState} from 'react';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Dimensions,
+  ImageBackground,
+} from 'react-native';
+import Carousel from 'react-native-anchor-carousel';
+import SimplePaginationDot from './SimplePaginationDot.js';
+
+const {width: windowWidth} = Dimensions.get('window');
+
+const data = [
+  {
+    uri: 'https://i.imgur.com/GImvG4q.jpg',
+  },
+  {
+    uri: 'https://i.imgur.com/Pz2WYAc.jpg',
+
+  },
+  {
+    uri: 'https://i.imgur.com/IGRuEAa.jpg',
+
+  },
+  {
+    uri: 'https://i.imgur.com/fRGHItn.jpg',
+
+  },
+  {
+    uri: 'https://i.imgur.com/WmenvXr.jpg',
+  },
+];
+
+const INITIAL_INDEX = 0;
+export default function ImageCarousel(props) {
+  const carouselRef = useRef(null);
+  const [currentIndex, setCurrentIndex] = useState(INITIAL_INDEX);
+
+  function handleCarouselScrollEnd(item, index) {
+    setCurrentIndex(index);
+  }
+
+  function renderItem({item, index}) {
+    const {uri} = item;
+    return (
+      <TouchableOpacity
+        activeOpacity={1}
+        style={styles.item}
+        onPress={() => {
+          carouselRef.current.scrollToIndex(index);
+        }}>
+        <ImageBackground source={{uri: uri}} style={styles.imageBackground}>
+          <View style={styles.rightTextContainer}>
+            <Text style={styles.rightText}>Lorem</Text>
+          </View>
+        </ImageBackground>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Carousel
+        style={styles.carousel}
+        data={data}
+        renderItem={renderItem}
+        itemWidth={0.7 * windowWidth}
+        inActiveOpacity={0.3}
+        containerWidth={windowWidth}
+        onScrollEnd={handleCarouselScrollEnd}
+        ref={carouselRef}
+      />
+      <SimplePaginationDot currentIndex={currentIndex} length={data.length} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {backgroundColor: '#141518', paddingVertical: 20},
+  carousel: {
+    backgroundColor: '#141518',
+    aspectRatio: 1.5,
+    flexGrow: 0,
+    marginBottom: 20,
+  },
+  item: {
+    borderWidth: 2,
+    backgroundColor: 'white',
+    flex: 1,
+    borderRadius: 5,
+    borderColor: 'white',
+    elevation: 3,
+  },
+  imageBackground: {
+    flex: 2,
+    backgroundColor: '#EBEBEB',
+    borderWidth: 5,
+    borderColor: 'white',
+  },
+  rightTextContainer: {
+    marginLeft: 'auto',
+    marginRight: -2,
+    backgroundColor: 'rgba(49, 49, 51,0.5)',
+    padding: 3,
+    marginTop: 3,
+    borderTopLeftRadius: 5,
+    borderBottomLeftRadius: 5,
+  },
+  rightText: {color: 'white'},
+
+  titleText: {
+    fontWeight: 'bold',
+    fontSize: 18,
+  },
+  contentText: {
+    marginTop: 10,
+    fontSize: 12,
+  },
+});

frontend/src/components/SimplePaginationDot.js

+import React from 'react';
+
+import {View, StyleSheet} from 'react-native';
+
+function genCircleStyle(size) {
+  if (!size) {
+    return {};
+  }
+  return {width: size, height: size, borderRadius: size / 2};
+}
+
+function Dot({isActive, color, activeDotSize, inActiveDotSize, dotSeparator}) {
+  const processedActiveDotStyle = [
+    styles.activeDot,
+    {
+      backgroundColor: color,
+      borderColor: color,
+      marginHorizontal: dotSeparator / 2,
+      ...genCircleStyle(activeDotSize),
+    },
+  ];
+  const processedInActiveDotStyle = [
+    styles.inActiveDot,
+    {
+      backgroundColor: 'transparent',
+      borderColor: color,
+      marginHorizontal: dotSeparator / 2,
+      ...genCircleStyle(inActiveDotSize),
+    },
+  ];
+  return (
+    <View
+      style={[
+        styles.baseDot,
+        isActive ? processedActiveDotStyle : processedInActiveDotStyle,
+      ]}
+    />
+  );
+}
+
+export default function SimplePaginationDot(props) {
+  const {
+    style,
+    length,
+    currentIndex = 0,
+    color = '#fff',
+    activeDotSize = 14,
+    inActiveDotSize = 10,
+    dotSeparator = 10,
+  } = props;
+  function renderItem(item, index) {
+    return (
+      <Dot
+        key={index}
+        isActive={index === currentIndex}
+        color={color}
+        activeDotSize={activeDotSize}
+        inActiveDotSize={inActiveDotSize}
+        dotSeparator={dotSeparator}
+      />
+    );
+  }
+  return (
+    <View style={[styles.container, style]}>
+      {Array(length).fill(0).map(renderItem)}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    width: '100%',
+    height: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  baseDot: {
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: 'white',
+  },
+  activeDot: {
+    backgroundColor: 'white',
+  },
+  inActiveDot: {
+    backgroundColor: 'transparent',
+  },
+});

frontend/src/components/map/infoWindow.js

 import { TouchableOpacity, Button, View, Text } from "react-native";
 
+
+import useComponentVisible from '../../components/ComponentVisible'
+
 export const goTo = (navigation, place) => navigation.navigate("vuDetails",{name : place});
 
 export const InfoWindow = (props) => {
     const { place, navigation } = props;
-    //
+
+
+    const { ref, isComponentVisible } = useComponentVisible(true);
+
+  //
     // console.log(route.param.name)
     const infoWindowStyle = {
       position: 'relative',
@@ -18,6 +25,10 @@ export const InfoWindow = (props) => {
     };
 
     return (
+      isComponentVisible &&(
+      <View ref={ref}>
+
+        <TouchableOpacity>
           <View style={{width: 200, height: 100, backgroundColor: "white"}}>
             <Text style = {{fontSize: 16}}>
               {place.name}
@@ -33,10 +44,20 @@ export const InfoWindow = (props) => {
                 <Text style = {{ color: 'lightgrey' }}>
                   {String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
                 </Text>
+                <Text style={{ fontSize: 14, color: 'green' }}>
+                  {"\n"}
+                  {place.loue.loue ? 'disponible' : 'occupé'}
+                </Text>
+
               </View>
               <Button onPress={() => goTo(navigation, place)} title={`voir`} />
             </View>
           </View>
+        </TouchableOpacity>
+
+      </View>
+      )
+
     )
 
     return (

frontend/src/pages/map/details.js

 import React from "react";
-import { View, Text, StyleSheet, Button } from "react-native";
+import { View, Text, StyleSheet, Button,ScrollView} from "react-native";
+import  colors from '../../../colors'
+import styled from "styled-components/native";
+
+import ImageCarousel from '../../components/Carousel'
+
+
+
+
+
+
 
 export default function Detail (props) {
   const {route,navigation}=props
@@ -8,10 +18,18 @@ export default function Detail (props) {
   const goTo = () => navigation.navigate("stackMap");
 
   return (
-    <View style={styles.container}>
-      <Text>Home screen</Text>
+    <ScrollView
+      contentContainerStyle={{ alignItems: 'center' }}
+      style={{ flex: 1, width: '100%' }}
+      showsVerticalScrollIndicator={false}
+    >
+
+    <View style={styles.carousel} >
+      <ImageCarousel   />
+      </View>
       <Button onPress={goTo} title={`Go to maps`} />
-    </View>
+    </ScrollView>
+
   );
 }
 
@@ -21,5 +39,10 @@ const styles = StyleSheet.create({
     backgroundColor: "azure",
     alignItems: "center",
     justifyContent: "center",
+  },
+  carousel: {
+
+
+
   },
 });