|
|
|
@ -1,50 +1,63 @@
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
import { View, StyleSheet, Text, Image, Pressable} from 'react-native';
|
|
|
|
import {View, StyleSheet, Text, Image, Pressable, useWindowDimensions, ScrollView} from 'react-native';
|
|
|
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
|
|
import {SafeAreaProvider } from 'react-native-safe-area-context';
|
|
|
|
import { Modal, Portal, PaperProvider} from 'react-native-paper';
|
|
|
|
import {Modal, Portal, PaperProvider} from 'react-native-paper';
|
|
|
|
|
|
|
|
import {LinearGradient} from 'expo-linear-gradient';
|
|
|
|
import TopBar from '../components/TopBar';
|
|
|
|
import TopBar from '../components/TopBar';
|
|
|
|
import RecipeElement from '../components/RecipeElement';
|
|
|
|
import RecipeElement from '../components/RecipeElement';
|
|
|
|
import SelectedIngredient from '../components/SelectedIngredient';
|
|
|
|
import SelectedIngredient from '../components/SelectedIngredient';
|
|
|
|
|
|
|
|
import FoodElementTextSimple from '../components/FoodElementTextSimple';
|
|
|
|
import FoodElementText from '../components/FoodElementText';
|
|
|
|
import FoodElementText from '../components/FoodElementText';
|
|
|
|
import brochette from '../assets/images/brochette.png';
|
|
|
|
import brochette from '../assets/images/brochette.png';
|
|
|
|
import ParameterTopBar from '../components/ParameterTopBar';
|
|
|
|
import ParameterTopBar from '../components/ParameterTopBar';
|
|
|
|
|
|
|
|
import ListSelect from '../components/ListSelect';
|
|
|
|
|
|
|
|
import ListWithoutSelect from '../components/ListWithoutSelect';
|
|
|
|
|
|
|
|
import ValidateButton from '../components/ValidateButton';
|
|
|
|
import bracketLeft from '../assets/images/angle_bracket_left.png';
|
|
|
|
import bracketLeft from '../assets/images/angle_bracket_left.png';
|
|
|
|
import bracketRight from '../assets/images/angle_bracket_right.png';
|
|
|
|
import bracketRight from '../assets/images/angle_bracket_right.png';
|
|
|
|
import CustomButton from '../components/CustomButton';
|
|
|
|
import CustomButton from '../components/CustomButton';
|
|
|
|
import DietsTab from '../components/DietsTab';
|
|
|
|
import plus from '../assets/images/plus_small.png';
|
|
|
|
|
|
|
|
import minus from '../assets/images/minus.png';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function RecipeSuggestion(props) {
|
|
|
|
export default function RecipeSuggestion(props) {
|
|
|
|
|
|
|
|
|
|
|
|
const imageList = [];
|
|
|
|
|
|
|
|
const [visible, setVisible] = React.useState(false);
|
|
|
|
const [visible, setVisible] = React.useState(false);
|
|
|
|
const [visibleFilters, setVisibleFilters] = React.useState(false);
|
|
|
|
const [visibleFilters, setVisibleFilters] = React.useState(false);
|
|
|
|
const [visibleIngredients, setVisibleIngredients] = React.useState(true);
|
|
|
|
const [visibleIngredients, setVisibleIngredients] = React.useState(true);
|
|
|
|
const [minCpt, setMinCpt] = useState(0);
|
|
|
|
const [minCpt, setMinCpt] = useState(0);
|
|
|
|
const [maxCpt, setMaxCpt] = useState(4);
|
|
|
|
const [maxCpt, setMaxCpt] = useState(4);
|
|
|
|
const listeIngredient = props.list;
|
|
|
|
const ingredientList = [{title: "Steak"}, {title: "Sheep Ribs"}, {title: "Rabbit Thigh"}, {title: "Ham"}, {title: "Cream (Liquid)"}, {title: "Pepper Bell"}]
|
|
|
|
const limitedList = listeIngredient.slice(minCpt, maxCpt);
|
|
|
|
const ingredientListV2 = [{title: "Smoked Salmon"}, {title: "Tomato"}, {title: "Carrot"}]
|
|
|
|
const showModal = () => setVisible(true);
|
|
|
|
const limitedList = ingredientList.slice(minCpt, maxCpt);
|
|
|
|
const hideModal = () => setVisible(false);
|
|
|
|
const [colorIngredients, setColorIngredients] = useState("#59BDCD");
|
|
|
|
|
|
|
|
const [colorFilters, setColorFilters] = useState("#3F3C42");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const die = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Gluten free"}, {value: "Porkless"}]
|
|
|
|
|
|
|
|
const all = []
|
|
|
|
|
|
|
|
|
|
|
|
const containerStyle = {
|
|
|
|
const containerStyle = {
|
|
|
|
backgroundColor: 'white',
|
|
|
|
//minHeight: useWindowDimensions().height/2,
|
|
|
|
height: 450,
|
|
|
|
//width: useWindowDimensions().width,
|
|
|
|
width: 380,
|
|
|
|
height: "75%",
|
|
|
|
|
|
|
|
width: "100%",
|
|
|
|
|
|
|
|
borderTopLeftRadius: 20,
|
|
|
|
|
|
|
|
borderTopRightRadius: 20,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleChildEvent = (value) => {
|
|
|
|
const handleChildEvent = () => {
|
|
|
|
setVisible(!visible)
|
|
|
|
setVisible(!visible)
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleChildEventGoFilters = () => {
|
|
|
|
const handleChildEventGoFilters = (value) => {
|
|
|
|
|
|
|
|
setVisibleIngredients(false);
|
|
|
|
setVisibleIngredients(false);
|
|
|
|
setVisibleFilters(true);
|
|
|
|
setVisibleFilters(true);
|
|
|
|
|
|
|
|
setColorFilters("#59BDCD")
|
|
|
|
|
|
|
|
setColorIngredients("#3F3C42")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleChildEventGoIngredients = () => {
|
|
|
|
const handleChildEventGoIngredients = (value) => {
|
|
|
|
|
|
|
|
setVisibleFilters(false);
|
|
|
|
setVisibleFilters(false);
|
|
|
|
setVisibleIngredients(true);
|
|
|
|
setVisibleIngredients(true);
|
|
|
|
console.log("jai change pour iingredient");
|
|
|
|
setColorFilters("#3F3C42")
|
|
|
|
|
|
|
|
setColorIngredients("#59BDCD")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const decreaseCounter = () => {
|
|
|
|
const decreaseCounter = () => {
|
|
|
|
@ -52,123 +65,176 @@ export default function RecipeSuggestion(props) {
|
|
|
|
setMinCpt(minCpt - 4);
|
|
|
|
setMinCpt(minCpt - 4);
|
|
|
|
setMaxCpt(maxCpt - 4)
|
|
|
|
setMaxCpt(maxCpt - 4)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
else{
|
|
|
|
|
|
|
|
setMaxCpt(ingredientList.length+ingredientList.length%4)
|
|
|
|
|
|
|
|
var cpt=ingredientList.length-(ingredientList.length%4)
|
|
|
|
|
|
|
|
setMinCpt(cpt)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
const increaseCounter = () => {
|
|
|
|
const increaseCounter = () => {
|
|
|
|
if (maxCpt < listeIngredient.length) {
|
|
|
|
if (maxCpt < ingredientList.length) {
|
|
|
|
setMinCpt(minCpt + 4);
|
|
|
|
setMinCpt(minCpt + 4);
|
|
|
|
setMaxCpt(maxCpt + 4)
|
|
|
|
setMaxCpt(maxCpt + 4)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
else{
|
|
|
|
|
|
|
|
setMinCpt(0)
|
|
|
|
|
|
|
|
setMaxCpt(4)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const imageElements = limitedList.map((source, index) => (
|
|
|
|
const imageElements = limitedList.map((source, index) => (
|
|
|
|
<View style={[styles.horizontalAlignement, { marginBottom: 10 }]}>
|
|
|
|
<View style={[styles.horizontalAlignment, {marginVertical: "3%"}]}>
|
|
|
|
<FoodElementText key={index} title={source} />
|
|
|
|
<FoodElementTextSimple title={source.title}/>
|
|
|
|
<Image source={brochette} style={{ width: 20, height: 20 }} />
|
|
|
|
<Image source={plus} style={{width: 20, resizeMode: "contain"}}/>
|
|
|
|
<Image source={brochette} style={{ width: 20, height: 20 }} />
|
|
|
|
<Image source={minus} style={{width: 20, resizeMode: "contain"}}/>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
));
|
|
|
|
));
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<SafeAreaProvider>
|
|
|
|
<SafeAreaProvider style={{flex: 1}}>
|
|
|
|
|
|
|
|
<PaperProvider>
|
|
|
|
<TopBar title="Recipes" isVisible="true"/>
|
|
|
|
<TopBar title="Recipes" isVisible="true"/>
|
|
|
|
<View style={styles.page}>
|
|
|
|
<ScrollView>
|
|
|
|
|
|
|
|
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
|
|
|
|
|
|
|
|
<View style={{marginTop: "6%"}}/>
|
|
|
|
<SelectedIngredient
|
|
|
|
<SelectedIngredient
|
|
|
|
listeIngredient={props.list}
|
|
|
|
ingredientList={ingredientList}
|
|
|
|
listeImage={imageList}
|
|
|
|
onEvent={handleChildEvent}/>
|
|
|
|
onEvent={handleChildEvent}
|
|
|
|
<ScrollView style={{marginTop: "6%"}} horizontal={true}>
|
|
|
|
/>
|
|
|
|
<View style={{marginHorizontal: 10}}/>
|
|
|
|
<View style={{ marginTop: 100 }}>
|
|
|
|
|
|
|
|
<RecipeElement
|
|
|
|
<RecipeElement
|
|
|
|
number="13"
|
|
|
|
number="63"
|
|
|
|
title="Pizza with Pineapples"
|
|
|
|
title="Meat Stick"
|
|
|
|
imageList={imageList}
|
|
|
|
textList={ingredientList}
|
|
|
|
textList={props.list}
|
|
|
|
description="Delicious stick with 4 meats. Accessible for beginners. 20 min or less to cook."/>
|
|
|
|
description="delicious plate that will please you"
|
|
|
|
<View style={{marginHorizontal: 10}}/>
|
|
|
|
style={styles.element}
|
|
|
|
<RecipeElement
|
|
|
|
/>
|
|
|
|
number="03"
|
|
|
|
</View>
|
|
|
|
title="Vichyssoise"
|
|
|
|
</View>
|
|
|
|
textList={ingredientListV2}
|
|
|
|
<View style={styles.modal}>
|
|
|
|
description="Cold soup of vegetables. Difficult recipe. Not advised to beginners. 1h or more."/>
|
|
|
|
<PaperProvider>
|
|
|
|
<View style={{marginHorizontal: 10}}/>
|
|
|
|
|
|
|
|
</ScrollView>
|
|
|
|
|
|
|
|
<View style={{marginBottom: "20%"}}/>
|
|
|
|
|
|
|
|
</LinearGradient>
|
|
|
|
|
|
|
|
</ScrollView>
|
|
|
|
<Portal>
|
|
|
|
<Portal>
|
|
|
|
<Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
|
|
|
|
<Modal visible={visible} onDismiss={handleChildEvent} contentContainerStyle={containerStyle} style={{marginTop: 0, justifyContent: "flex-end"}}>
|
|
|
|
<ParameterTopBar onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients}></ParameterTopBar>
|
|
|
|
<ParameterTopBar onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients} colorFilters={colorFilters} colorIngredients={colorIngredients}/>
|
|
|
|
|
|
|
|
{visibleIngredients &&(
|
|
|
|
{visibleIngredients && (
|
|
|
|
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
|
|
|
|
<View style={[styles.page, { justifyContent: 'space-between' }]}>
|
|
|
|
|
|
|
|
{imageElements}
|
|
|
|
{imageElements}
|
|
|
|
<View id="IngredientList" style={[styles.horizontalAlignement, {marginTop: 10}]}>
|
|
|
|
<View style={[styles.horizontalAlignment, {marginTop: "6%"}]}>
|
|
|
|
<Pressable onPress={decreaseCounter} id="GoLeft" >
|
|
|
|
<Pressable onPress={decreaseCounter}>
|
|
|
|
<Image source={bracketLeft} style={{ width: 20, height: 20 }} />
|
|
|
|
<Image source={bracketLeft} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: "#3F3C42"}}/>
|
|
|
|
</Pressable>
|
|
|
|
</Pressable>
|
|
|
|
|
|
|
|
<CustomButton title="Save"></CustomButton>
|
|
|
|
<Pressable onPress={increaseCounter} id="GoRight">
|
|
|
|
<Pressable onPress={increaseCounter}>
|
|
|
|
<Image source={bracketRight} style={{ width: 20, height: 20 }} />
|
|
|
|
<Image source={bracketRight} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: "#3F3C42"}}/>
|
|
|
|
</Pressable>
|
|
|
|
</Pressable>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
|
|
|
|
</LinearGradient>
|
|
|
|
|
|
|
|
|
|
|
|
<View>
|
|
|
|
|
|
|
|
<CustomButton title="Save"></CustomButton>
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
|
|
{visibleFilters &&(
|
|
|
|
{visibleFilters &&(
|
|
|
|
<View style={[styles.page, { justifyContent: 'space-between', alignContent: 'center'}]}>
|
|
|
|
<ScrollView>
|
|
|
|
|
|
|
|
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
|
|
|
|
<View style={{backgroundColor: '#F2F0E4', zIndex: 2}}>
|
|
|
|
<View style={{marginTop: "10%"}}/>
|
|
|
|
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 20}]}>
|
|
|
|
<View style={styles.background}>
|
|
|
|
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
|
|
|
|
<View style={styles.filterBar}>
|
|
|
|
|
|
|
|
<Text style={styles.filters}>Additional Filters</Text>
|
|
|
|
|
|
|
|
<Text style={styles.nbSelected}>{die.length} selected</Text>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
<View style={{alignContent: 'center', justifyContent: 'space-between', margin: 10}}>
|
|
|
|
<ListWithoutSelect title="Diets" content={die}></ListWithoutSelect>
|
|
|
|
<DietsTab title="Diets" content={props.diets}></DietsTab>
|
|
|
|
<View style={{marginTop: "3%"}}/>
|
|
|
|
<View style={{height: 5}}></View>
|
|
|
|
<ListWithoutSelect title="Allergies" content={all}></ListWithoutSelect>
|
|
|
|
<DietsTab title="Allergy" content={props.allergy}></DietsTab>
|
|
|
|
<View style={{marginTop: "3%"}}/>
|
|
|
|
</View>
|
|
|
|
<ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
|
|
|
|
|
|
|
|
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
<View style={{zIndex: 1, position: 'absolute', marginTop: 300}} >
|
|
|
|
<View style={{marginTop: "6%"}}/>
|
|
|
|
|
|
|
|
<View>
|
|
|
|
<CustomButton title="Save"></CustomButton>
|
|
|
|
<CustomButton title="Save"></CustomButton>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
<View style={{marginTop: "43%"}}/>
|
|
|
|
|
|
|
|
</LinearGradient>
|
|
|
|
|
|
|
|
</ScrollView>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</Modal>
|
|
|
|
</Modal>
|
|
|
|
</Portal>
|
|
|
|
</Portal>
|
|
|
|
</PaperProvider>
|
|
|
|
</PaperProvider>
|
|
|
|
</View>
|
|
|
|
|
|
|
|
</SafeAreaProvider>
|
|
|
|
</SafeAreaProvider>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
page: {
|
|
|
|
linearGradient: {
|
|
|
|
|
|
|
|
width: "100%",
|
|
|
|
flex: 1,
|
|
|
|
flex: 1,
|
|
|
|
backgroundColor: '#59BDCD',
|
|
|
|
//padding: "2%",
|
|
|
|
|
|
|
|
paddingTop: 0,
|
|
|
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
|
|
|
justifyContent: "center"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
background: {
|
|
|
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
alignItems: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'center',
|
|
|
|
flexWrap: 'wrap',
|
|
|
|
borderRadius: 20,
|
|
|
|
padding: 20,
|
|
|
|
backgroundColor: '#F2F0E4',
|
|
|
|
|
|
|
|
padding: "3%",
|
|
|
|
|
|
|
|
marginHorizontal: "3%",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
filterBar: {
|
|
|
|
|
|
|
|
flexDirection: "row",
|
|
|
|
|
|
|
|
width: "85%",
|
|
|
|
|
|
|
|
paddingTop: "3%",
|
|
|
|
|
|
|
|
paddingBottom: "2%",
|
|
|
|
|
|
|
|
alignItems: "flex-end",
|
|
|
|
|
|
|
|
justifyContent: "center",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
element: {
|
|
|
|
filters: {
|
|
|
|
marginTop: 20,
|
|
|
|
fontSize: 20,
|
|
|
|
|
|
|
|
color: '#ACA279',
|
|
|
|
|
|
|
|
flex: 1,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
backdrop: {
|
|
|
|
nbSelected: {
|
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
|
|
fontSize: 11,
|
|
|
|
|
|
|
|
color: "#3F3C42",
|
|
|
|
|
|
|
|
textAlign: "right",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
page: {
|
|
|
|
|
|
|
|
flex: 1,
|
|
|
|
|
|
|
|
backgroundColor: '#59BDCD',
|
|
|
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
|
|
|
paddingHorizontal: "3%",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
modal :{
|
|
|
|
modal :{
|
|
|
|
position: 'absolute',
|
|
|
|
position: 'absolute',
|
|
|
|
top: '50%', // Centre verticalement
|
|
|
|
top: '50%',
|
|
|
|
left: '50%', // Centre horizontalement
|
|
|
|
height: "50%",
|
|
|
|
transform: [{ translateX: -185 }, { translateY: -90 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
|
|
|
|
width: "100%",
|
|
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
|
|
borderColor: "red",
|
|
|
|
|
|
|
|
borderTopLeftRadius: 20,
|
|
|
|
|
|
|
|
borderTopRightRadius: 20,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
horizontalAlignement: {
|
|
|
|
horizontalAlignment: {
|
|
|
|
display: 'flex',
|
|
|
|
display: 'flex',
|
|
|
|
height: 30,
|
|
|
|
height: "10%",
|
|
|
|
width: 350,
|
|
|
|
width: "100%",
|
|
|
|
flexDirection: 'row',
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'space-around',
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
alignItems: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
marginTop: 10,
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
recipes: {
|
|
|
|
|
|
|
|
flexDirection: "row",
|
|
|
|
|
|
|
|
overflow: "scroll",
|
|
|
|
|
|
|
|
alignItems: "flex-start",
|
|
|
|
|
|
|
|
justifyContent: "center",
|
|
|
|
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
