Skip to content
Snippets Groups Projects
Commit c742fa45 authored by Antoine Marquis's avatar Antoine Marquis
Browse files

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

parents e8769d69 5a16edfa
No related branches found
No related tags found
No related merge requests found
frontend/assets/images/lol.jpeg

6.83 KiB

frontend/assets/images/roomDefault.jpeg

379 KiB

export default {
red: "#FF5A5F",
black: "rgb(35, 35, 35)",
green: "#006a70"
};
......@@ -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",
......
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,
},
});
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',
},
});
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 (
......
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: {
},
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment