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
Hide whitespace changes
Inline Side-by-side
Showing
with 337 additions and 68 deletions
frontend/package.json
+ 5
− 0
View file @ 5090f5db
......@@ -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",
......
frontend/public/places.json
+ 28
− 21
View file @ 5090f5db
{
"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": {
......
frontend/src/components/Carousel.js
+ 2
− 1
View file @ 5090f5db
......@@ -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,
......
frontend/src/components/InsideRoom.js 0 → 100644
+ 47
− 0
View file @ 5090f5db
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: {
},
});
frontend/src/components/map/infoWindow.js
+ 51
− 41
View file @ 5090f5db
......@@ -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>
// );
};
frontend/src/components/review.js 0 → 100644
+ 167
− 0
View file @ 5090f5db
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,
},
});
frontend/src/components/star.js 0 → 100644
+ 15
− 0
View file @ 5090f5db
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;
frontend/src/pages/map/MapHome.js
+ 1
− 1
View file @ 5090f5db
......@@ -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>
......
frontend/src/pages/map/details.js
+ 21
− 4
View file @ 5090f5db
......@@ -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% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment