Skip to content
Snippets Groups Projects
Commit 5090f5db authored by Anael Lacour's avatar Anael Lacour
Browse files

Merge branch 'viewRoom2' into develop

parents a9b52e3b 8e43ecea
No related branches found
No related tags found
No related merge requests found
......@@ -7,6 +7,10 @@
"eject": "expo eject"
},
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.6.4",
"@react-google-maps/api": "^2.8.1",
"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/native": "^6.0.10",
......@@ -39,6 +43,7 @@
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.13.1",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "^12.3.0",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "0.17.7",
"react-redux": "^8.0.1",
......
{
"results": [{
"formatted_address": "10 rue saint Joseph",
"geometry": {
"location": {
"lat": 49.41229,
"lng": 2.82145
}
},
"id": "1113d3dd7339f965caae39387dd808a9e877bc2e",
"name": "l'Agence",
"loue": {
"loue": false,
"place_restant": 5
},
"place_id": "ChIJj62e80jHwoARusJT4mjohWw",
"price_level": 2,
"rating": 4.6,
"types": [
"colocation",
"results": [
{
"formatted_address": "10 rue saint Joseph",
"geometry": {
"location": {
"lat": 49.41229,
"lng": 2.82145
}
},
"id": "1113d3efdld7339f965caae39387dd808a9e877bc2e",
"name": "l'Agence étage",
"loue": {
"loue": false,
"place_restant": 1
},
"place_id": "ChIJj62e80hhhHwoARusJT4mjohWw",
"price_level": 2,
"rating": 3.6,
"types": [
"colocation",
"etudiant"
]
},
],
"inside":{
"bed" : true,
"wifi": true,
"four": true,
"lave-vaiselle": true
}
},
{
"formatted_address": "6 rue saint Joseph",
"geometry": {
......
......@@ -66,7 +66,7 @@ export default function ImageCarousel(props) {
style={styles.carousel}
data={data}
renderItem={renderItem}
itemWidth={0.7 * windowWidth}
itemWidth={0.5 * windowWidth}
inActiveOpacity={0.3}
containerWidth={windowWidth}
onScrollEnd={handleCarouselScrollEnd}
......@@ -80,6 +80,7 @@ export default function ImageCarousel(props) {
const styles = StyleSheet.create({
container: {backgroundColor: '#141518', paddingVertical: 20},
carousel: {
height:250,
backgroundColor: '#141518',
aspectRatio: 1.5,
flexGrow: 0,
......
import React from 'react'
import { Entypo } from '@expo/vector-icons'
import { Button, ScrollView, StyleSheet, TouchableOpacity, View,Text } from 'react-native';
import BedIcon from '@mui/icons-material/Bed';
import NetworkWifi3BarOutlinedIcon from '@mui/icons-material/NetworkWifi3BarOutlined';
import MicrowaveIcon from '@mui/icons-material/Microwave';
export default function InsideRoom (props) {
const {
route,
navigation
} = props
const room = route.params.room
return (
<>
{room.inside &&
<>
<Text>Equipements Disponibles</Text>
<View style={{ flexDirection: "row",paddingTop :"150"}}>
{room.inside.bed && <BedIcon fontSize="large"/>}
{room.inside.wifi && <NetworkWifi3BarOutlinedIcon fontSize="large"/>}
{room.inside.four && <MicrowaveIcon fontSize="large"/>}
</View>
</>
}
</>
)
}
const styles = StyleSheet.create({
container: {
container: {
flex: 1,
backgroundColor: "#FF0000",
alignItems: "center",
justifyContent: "center",
},
},
carousel: {
},
});
......@@ -3,7 +3,7 @@ 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 goTo = (navigation, place) => navigation.navigate("vuDetails",{room : place});
export const InfoWindow = (props) => {
const { place, navigation } = props;
......@@ -33,23 +33,33 @@ export const InfoWindow = (props) => {
<Text style = {{fontSize: 16}}>
{place.name}
</Text>
<View style = {{fontSize: 14}}>
<Text style = {{ color: 'grey' }}>
{place.rating}
<Text style={{ fontSize: 14, color: 'grey' }}>
{place.types[0]}
</Text>
<View style={{ flexDirection: "row"}}>
<Text style = {{ color: 'orange' }}>
{String.fromCharCode(9733).repeat(Math.floor(place.rating))}
</Text>
<Text style = {{ color: 'lightgrey' }}>
{String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
</Text>
</View>
<Text style = {{ color: 'grey' }}>
{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>
......@@ -60,41 +70,41 @@ export const InfoWindow = (props) => {
)
return (
<div ref={ref}>
{isComponentVisible &&(
<TouchableOpacity>
<div style={infoWindowStyle}>
<div style={{ fontSize: 16 }}>
{place.name}
</div>
<div style={{ fontSize: 14 }}>
<span style={{ color: 'grey' }}>
{place.rating}
{' '}
</span>
<span style={{ color: 'orange' }}>
{String.fromCharCode(9733).repeat(Math.floor(place.rating))}
</span>
<span style={{ color: 'lightgrey' }}>
{String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
</span>
</div>
<div style={{ fontSize: 14, color: 'grey' }}>
{place.types[0]}
</div>
<div style={{ fontSize: 14, color: 'grey' }}>
{'$'.repeat(place.price_level)}
</div>
<div style={{ fontSize: 14, color: 'green' }}>
{place.loue.loue ? 'disponible' : 'occupé'}
</div>
<Button onPress={goTo} title={`voir`} />
</div>
</TouchableOpacity>
)}
</div>
);
// return (
// <div ref={ref}>
// {isComponentVisible &&(
// <TouchableOpacity>
// <div style={infoWindowStyle}>
//
// <div style={{ fontSize: 16 }}>
// {place.name}
// </div>
// <div style={{ fontSize: 14 }}>
// <span style={{ color: 'grey' }}>
// {place.rating}
// {' '}
// </span>
// <span style={{ color: 'orange' }}>
// {String.fromCharCode(9733).repeat(Math.floor(place.rating))}
// </span>
// <span style={{ color: 'lightgrey' }}>
// {String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
// </span>
// </div>
// <div style={{ fontSize: 14, color: 'grey' }}>
// {place.types[0]}
// </div>
// <div style={{ fontSize: 14, color: 'grey' }}>
// {'$'.repeat(place.price_level)}
// </div>
// <div style={{ fontSize: 14, color: 'green' }}>
// {place.loue.loue ? 'disponible' : 'occupé'}
// </div>
// <Button onPress={goTo} title={`voir`} />
// </div>
// </TouchableOpacity>
// )}
// </div>
// );
};
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Animated, } from "react-native";
import Star from "./star"
const PercentageBar = ({ starText, percentage }) => {
const [animation] = useState(new Animated.Value(0));
useEffect(() => {
Animated.timing(animation, {
toValue: percentage,
duration: 500,
}).start();
}, [percentage]);
return (
<View
style={{
flexDirection: "row",
}}
>
<Text style={styles.progressText}>{starText}</Text>
<View style={styles.progressMiddle}>
<View style={styles.progressWrap}>
<Animated.View
style={[
styles.progressBar,
{
width: animation.interpolate({
inputRange: [0, 100],
outputRange: ["0%", "100%"],
}),
},
]}
/>
</View>
</View>
<Text style={styles.progressPercentText}>{percentage}%</Text>
</View>
);
};
export default function Review() {
return (
<View style={styles.container}>
<View style={styles.reviewContainer}>
<Text style={styles.title}>Customer reviews</Text>
<View style={styles.totalWrap}>
<View
style={{
flexDirection: "row",
}}
>
<Star />
<Star />
<Star />
<Star />
<Star />
</View>
<Text>4.7 out of 5</Text>
</View>
<Text style={styles.amountText}>40 customer ratings</Text>
<View style={{ marginTop: 40 }}>
<View style={styles.spacer}>
<PercentageBar starText="5 star" percentage={84} />
</View>
<View style={styles.spacer}>
<PercentageBar starText="4 star" percentage={9} />
</View>
<View style={styles.spacer}>
<PercentageBar starText="3 star" percentage={4} />
</View>
<View style={styles.spacer}>
<PercentageBar starText="2 star" percentage={2} />
</View>
<View style={styles.spacer}>
<PercentageBar starText="1 star" percentage={1} />
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5F8FF",
alignItems: "center",
justifyContent: "center",
},
reviewContainer: {
backgroundColor: "#FFFFFF",
borderRadius: 10,
paddingHorizontal: 30,
paddingVertical: 40,
minWidth: "80%",
shadowOffset: { width: 0, height: 5 },
shadowOpacity: 1.0,
shadowRadius: 2,
shadowColor: "rgba(193, 211, 251, 0.5)",
elevation: 5,
},
title: {
fontWeight: "bold",
fontSize: 20,
color: "#323357",
textAlign: "center",
},
totalWrap: {
marginTop: 20,
marginBottom: 5,
backgroundColor: "#F5F8FF",
borderRadius: 40,
alignItems: "center",
justifyContent: "space-between",
flexDirection: "row",
paddingHorizontal: 15,
paddingVertical: 10,
},
amountText: {
fontSize: 16,
color: "#595B71",
textAlign: "center",
},
howWeCalculate: {
fontSize: 15,
color: "#2A5BDA",
textAlign: "center",
},
spacer: {
marginBottom: 14,
},
progressText: {
width: 50,
fontSize: 14,
color: "#2A5BDA",
},
progressPercentText: { width: 40, fontSize: 14, color: "#323357" },
progressMiddle: {
height: 15,
flex: 1,
marginHorizontal: 10,
},
progressWrap: {
backgroundColor: "#F5F8FF",
borderRadius: 18,
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
padding: 2,
},
progressBar: {
flex: 1,
shadowOffset: { width: 0, height: 0 },
shadowColor: "#ffcc48",
shadowOpacity: 1.0,
shadowRadius: 4,
backgroundColor: "#FFCC48",
borderRadius: 18,
minWidth: 5,
},
});
import React from "react";
import Svg, { Path } from "react-native-svg";
const Star = (props) => {
return (
<Svg width={24} height={22} viewBox="0 0 33 30" fill="none" {...props}>
<Path
d="M16.5 0l4.849 9.826 10.843 1.575-7.846 7.648 1.852 10.8-9.698-5.1-9.698 5.1 1.852-10.8-7.846-7.648L11.65 9.826 16.5 0z"
fill="#FFCC48"
/>
</Svg>
);
};
export default Star;
......@@ -14,7 +14,7 @@ export default function MapHome ({ navigation }) {
{props => <CustomMap {...props} />}
</Stack.Screen>
<Stack.Screen name='vuDetails'>
<Stack.Screen name='vuDetails' screenOptions={{ headerShown: false }}>
{props => <Detail {...props} />}
</Stack.Screen>
......
......@@ -2,9 +2,9 @@ import React from "react";
import { View, Text, StyleSheet, Button,ScrollView} from "react-native";
import colors from '../../../colors'
import styled from "styled-components/native";
import InsideRoom from '../../components/InsideRoom'
import ImageCarousel from '../../components/Carousel'
import Review from '../../components/review'
......@@ -14,7 +14,7 @@ import ImageCarousel from '../../components/Carousel'
export default function Detail (props) {
const {route,navigation}=props
console.log(route.params.name)
console.log(route.params.room)
const goTo = () => navigation.navigate("stackMap");
return (
......@@ -24,10 +24,21 @@ export default function Detail (props) {
showsVerticalScrollIndicator={false}
>
<View style={styles.carousel} >
<Text>{route.params.room.name}</Text>
<View style={styles.carousel} >
<ImageCarousel />
</View>
<View>
<View style={styles.container2}>
<InsideRoom {...props} />
</View>
<View>
<Review/>
</View>
<Button onPress={goTo} title={`Go to maps`} />
</View>
</ScrollView>
);
......@@ -40,6 +51,12 @@ const styles = StyleSheet.create({
alignItems: "center",
justifyContent: "center",
},
container2: {
flex: 1,
backgroundColor: "#F5F8FF",
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