Merge branch 'WORK-LPA'
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
# Conflicts: # LeftOvers/App.tsx # LeftOvers/screens/IngredientSelection.tsx # LeftOvers/screens/RecipeDetails.tsx # LeftOvers/screens/RecipeSuggestion.tsxpull/20/head
commit
0750f52c57
@ -1,69 +1,25 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, View } from 'react-native';
|
||||
import ProfileModification from './components/ProfileModification';
|
||||
import ValidateButton from './components/ValidateButton';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import {StyleSheet, View, SafeAreaView, ScrollView, Text} from 'react-native';
|
||||
import HomePage from './screens/HomePage';
|
||||
import Profiles from './screens/Profiles';
|
||||
import ModifyProfile from './screens/ModifyProfile';
|
||||
import CreateProfile from './screens/CreateProfile';
|
||||
import FiltersSelection from './screens/FiltersSelection';
|
||||
import RecipeSuggestion from './screens/RecipeSuggestion';
|
||||
import RecipeDetails from './screens/RecipeDetails';
|
||||
import IngredientSelection from './screens/IngredientSelection';
|
||||
import {SafeAreaProvider} from 'react-native-safe-area-context';
|
||||
import {LinearGradient} from 'expo-linear-gradient';
|
||||
|
||||
export default function App() {
|
||||
const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
|
||||
const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
|
||||
const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}]
|
||||
const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}]
|
||||
const steps = [{value: "Chauffer chocolat"},
|
||||
{value: "1. Casser oeuf"},
|
||||
{value: "2. Melanger la farine, le lait et les oeufs"},
|
||||
{value: "3. Battre fort"},
|
||||
{value: "4. Voler la montre de Louison"},
|
||||
{value: "5. Melanger avec le chocolat"},
|
||||
{value: "6. Mettre au four"},
|
||||
]
|
||||
|
||||
function generateList() {
|
||||
const list = [];
|
||||
list.push("Meat");
|
||||
list.push("Meat");
|
||||
list.push("Meat");
|
||||
list.push("Meat");
|
||||
list.push("Teat");
|
||||
list.push("Meat");
|
||||
list.push("Meat");
|
||||
list.push("Meat");
|
||||
return list;
|
||||
}
|
||||
|
||||
const ingredients = generateList();
|
||||
|
||||
return (
|
||||
<IngredientSelection listIngredient={ingredients}></IngredientSelection>
|
||||
/*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/
|
||||
/*<RecipeDetails ingredient={ingredient}
|
||||
ustensils={ustensils}
|
||||
steps={steps}
|
||||
title="Chocolat Cake"
|
||||
number="63"
|
||||
duree="30 minutes"
|
||||
></RecipeDetails>*/
|
||||
export default function App(props) {
|
||||
return(
|
||||
//<HomePage/>
|
||||
//<Profiles/>
|
||||
//<ModifyProfile/>
|
||||
//<CreateProfile/>
|
||||
//<FiltersSelection/>
|
||||
//<RecipeSuggestion/>
|
||||
//<RecipeDetails/>
|
||||
<IngredientSelection/>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#3F3C42',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
linearGradient: {
|
||||
//height: 844,
|
||||
//width: 390,
|
||||
flex: 1,
|
||||
padding: 10,
|
||||
paddingTop: 0,
|
||||
//backgroundColor: "#59BDCD",
|
||||
//alignItems: 'center',
|
||||
//justifyContent: 'flex-start',
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
|
||||
import Separator from '../components/Separator';
|
||||
|
||||
|
||||
|
||||
interface foodElementTextProps {
|
||||
title: string
|
||||
}
|
||||
|
||||
|
||||
export default function FoodElementTextSimple(props: foodElementTextProps) {
|
||||
return (
|
||||
<Pressable style={styles.button}>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.view}>
|
||||
<Text style={styles.text}>{props.title}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: "80%",
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#E3DEC9',
|
||||
},
|
||||
text: {
|
||||
fontSize: 10,
|
||||
fontWeight: 'bold',
|
||||
padding : "2%",
|
||||
color: 'black',
|
||||
},
|
||||
view: {
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
container: {
|
||||
width: "100%",
|
||||
borderRadius: 5,
|
||||
borderWidth: 1,
|
||||
borderColor: '#3F3C42',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
@ -1,27 +1,19 @@
|
||||
import React from 'react';
|
||||
import { Appbar } from 'react-native-paper';
|
||||
|
||||
interface TopBarProps{
|
||||
source : string
|
||||
firstImage : string
|
||||
lastImage : string
|
||||
}
|
||||
interface ParameterTopBarProps{
|
||||
onEventIngredient: () => void
|
||||
onEventFilter: () => void
|
||||
colorIngredients: string
|
||||
colorFilters: string
|
||||
}
|
||||
|
||||
|
||||
export default function ParameterTopBar(props : any) {
|
||||
|
||||
const goFilter = () =>{
|
||||
props.onEventFilter('Hello');
|
||||
}
|
||||
|
||||
const goIngredients = () =>{
|
||||
props.onEventIngredient('Hello');
|
||||
}
|
||||
|
||||
export default function ParameterTopBar(props : ParameterTopBarProps) {
|
||||
return (
|
||||
<Appbar.Header style={{backgroundColor: '#F2F0E4', justifyContent: 'center'}} >
|
||||
<Appbar.Action icon="magnify" onPress={goIngredients} />
|
||||
<Appbar.Action icon="dots-vertical" onPress={goFilter} />
|
||||
</Appbar.Header>
|
||||
<Appbar.Header style={{backgroundColor: '#F2F0E4', height: "10%", justifyContent: "center", borderTopLeftRadius: 20, borderTopRightRadius: 20,}}>
|
||||
<Appbar.Action icon="magnify" onPress={props.onEventIngredient} color={props.colorIngredients}/>
|
||||
<Appbar.Action icon="dots-vertical" onPress={props.onEventFilter} color={props.colorFilters}/>
|
||||
</Appbar.Header>
|
||||
);
|
||||
}
|
||||
@ -1,128 +1,133 @@
|
||||
import React from 'react';
|
||||
import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native';
|
||||
import {View, StyleSheet, Text, Image, Pressable, ScrollView, useWindowDimensions} from 'react-native';
|
||||
import {SafeAreaProvider} from 'react-native-safe-area-context';
|
||||
import TopBar from '../components/TopBar';
|
||||
import {Searchbar} from 'react-native-paper';
|
||||
import brochette from '../assets/images/brochette.png';
|
||||
import {LinearGradient} from 'expo-linear-gradient';
|
||||
import brochette from '../assets/images/brochette.png';
|
||||
import FoodElementText from '../components/FoodElementText';
|
||||
import CustomButton from '../components/CustomButton';
|
||||
import plus from '../assets/images/plus.png';
|
||||
import moins from '../assets/images/minus.png';
|
||||
import plus from '../assets/images/plus_small.png';
|
||||
import minus from '../assets/images/minus.png';
|
||||
import meat from '../assets/images/meat_icon.png';
|
||||
import vegetable from '../assets/images/vegetable_icon.png';
|
||||
import fruit from '../assets/images/fruit_icon.png';
|
||||
|
||||
|
||||
export default function IngredientSelection(props) {
|
||||
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
|
||||
const onChangeSearch = query => setSearchQuery(query);
|
||||
const ingredientList = [{title: "Steak"}, {title: "Sheep Ribs"}, {title: "Rabbit Thigh"}, {title: "Ham"}, {title: "Cream (Liquid)"}, {title: "Pepper Bell"}]
|
||||
const availableList = [{title: "Tomato"}, {title: "Lemon"}, {title: "Strawberry"}, {title: "Rice"}, {title: "Flour"}]
|
||||
|
||||
type ItemProps = {value: string}
|
||||
|
||||
const AvailaibleItem = ({value}: ItemProps) => (
|
||||
<><View style={styles.horizontalAlignement}>
|
||||
<FoodElementText title={value} />
|
||||
<Pressable>
|
||||
<Image source={plus} style={{ width: 20, height: 20 }} />
|
||||
</Pressable>
|
||||
</View><View style={{ height: 30 }}></View></>
|
||||
)
|
||||
const AvailableItem = ({value}: any) => (
|
||||
<>
|
||||
<View style={styles.horizontalAlignment}>
|
||||
<FoodElementText title={value.title}/>
|
||||
<Pressable>
|
||||
<Image source={plus} style={{width: 20, height: 20, resizeMode: "contain", marginRight: "3%"}}/>
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={{height: 20}}/>
|
||||
</>
|
||||
)
|
||||
|
||||
const ChooseItem = ({value}: ItemProps) => (
|
||||
<><View style={styles.horizontalAlignement}>
|
||||
<FoodElementText title={value} />
|
||||
<Pressable>
|
||||
<Image source={moins} style={{ width: 20, height: 20 }} />
|
||||
</Pressable>
|
||||
</View><View style={{ height: 30 }}></View></>
|
||||
)
|
||||
const ChooseItem = ({value}: any) => (
|
||||
<>
|
||||
<View style={styles.horizontalAlignment}>
|
||||
<FoodElementText title={value.title}/>
|
||||
<Pressable>
|
||||
<Image source={minus} style={{width: 20, height: 20, resizeMode: "contain", marginRight: "3%"}}/>
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={{height: 20}}/>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<TopBar title="Ingredient selection" />
|
||||
<View style={styles.page}>
|
||||
|
||||
<View style={styles.element}>
|
||||
<View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
|
||||
<Pressable>
|
||||
<Image source={meat} style={{ width: 30, height: 30 }} />
|
||||
</Pressable>
|
||||
<Pressable>
|
||||
<Image source={vegetable} style={{ width: 30, height: 30 }} />
|
||||
</Pressable>
|
||||
<Pressable>
|
||||
<Image source={fruit} style={{ width: 30, height: 30 }} />
|
||||
</Pressable>
|
||||
</View>
|
||||
<View>
|
||||
<Searchbar
|
||||
placeholder="Search"
|
||||
onChangeText={onChangeSearch}
|
||||
value={searchQuery}
|
||||
style={{margin: 10,
|
||||
backgroundColor: '#F2F0E4',
|
||||
borderWidth : 1,
|
||||
borderColor: "#ACA279",
|
||||
borderRadius: 15,
|
||||
height: 50,
|
||||
}}/>
|
||||
</View>
|
||||
<View style={{ flex: 1}} >
|
||||
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
|
||||
{props.listIngredient.map((source, index) => (
|
||||
<AvailaibleItem key={index} value={source}></AvailaibleItem>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<View style={{ height: 20 }}></View>
|
||||
</View>
|
||||
|
||||
<View style={[styles.element, {marginTop: 40}]}>
|
||||
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
|
||||
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
|
||||
<SafeAreaProvider style={{flex: 1}}>
|
||||
<TopBar title="Ingredient selection"/>
|
||||
<ScrollView>
|
||||
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
|
||||
<View style={{marginTop: "6%"}}/>
|
||||
<View style={styles.element}>
|
||||
<View style={[styles.horizontalAlignment, {justifyContent: 'center'}]}>
|
||||
<Pressable>
|
||||
<Image source={meat} style={{width: 30, height: 30, resizeMode: "contain"}}/>
|
||||
</Pressable>
|
||||
<View style={{marginHorizontal: "1%"}}/>
|
||||
<Pressable>
|
||||
<Image source={vegetable} style={{width: 30, height: 30, resizeMode: "contain"}}/>
|
||||
</Pressable>
|
||||
<View style={{marginHorizontal: "1%"}}/>
|
||||
<Pressable>
|
||||
<Image source={fruit} style={{width: 30, height: 30, resizeMode: "contain"}}/>
|
||||
</Pressable>
|
||||
</View>
|
||||
<View>
|
||||
<Searchbar
|
||||
placeholder="Search"
|
||||
onChangeText={onChangeSearch}
|
||||
value={searchQuery}
|
||||
style={{margin: "3%",
|
||||
backgroundColor: '#F2F0E4',
|
||||
borderWidth : 1,
|
||||
borderColor: "#ACA279",
|
||||
borderRadius: 15,
|
||||
}}/>
|
||||
</View>
|
||||
<View style={{flex: 1}}>
|
||||
<ScrollView>
|
||||
{ingredientList.map((title, index) => (
|
||||
<AvailableItem key={index} value={title}></AvailableItem>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={{ height: 5 }}></View>
|
||||
|
||||
<View style={{ flex: 1}} >
|
||||
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
|
||||
{props.listIngredient.map((source, index) => (
|
||||
<ChooseItem key={index} value={source}></ChooseItem>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<View style={{ height: 20 }}></View>
|
||||
</View>
|
||||
|
||||
<View style={{ height: 15 }}></View>
|
||||
<CustomButton title="Find a recipe"/>
|
||||
</View>
|
||||
</SafeAreaProvider>
|
||||
<View style={{marginTop: "6%"}}/>
|
||||
<View style={styles.element}>
|
||||
<View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}>
|
||||
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
|
||||
</View>
|
||||
<View style={{flex: 1}}>
|
||||
<ScrollView>
|
||||
{availableList.map((title, index) => (
|
||||
<ChooseItem key={index} value={title}></ChooseItem>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{marginTop: "8%"}}></View>
|
||||
<CustomButton title="Find a recipe"/>
|
||||
<View style={{marginBottom: "20%"}}></View>
|
||||
</LinearGradient>
|
||||
</ScrollView>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
flex: 1,
|
||||
backgroundColor: '#59BDCD',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
padding: 20,
|
||||
linearGradient: {
|
||||
width: "100%",
|
||||
flex: 1,
|
||||
padding: "3%",
|
||||
paddingTop: 0,
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
},
|
||||
|
||||
element: {
|
||||
backgroundColor:'#F2F0E4',
|
||||
width: "100%",
|
||||
backgroundColor:'#F2F0E4',
|
||||
borderRadius: 30,
|
||||
},
|
||||
horizontalAlignement: {
|
||||
display: 'flex',
|
||||
height: 30,
|
||||
width: 350,
|
||||
horizontalAlignment: {
|
||||
width: "100%",
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
marginTop: 15,
|
||||
marginTop: "3%",
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1,71 +1,93 @@
|
||||
import React from 'react';
|
||||
import { View, StyleSheet, Text} from 'react-native';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
import {View, StyleSheet, ScrollView, useWindowDimensions, Text} from 'react-native';
|
||||
import {SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
import {LinearGradient} from 'expo-linear-gradient';
|
||||
import TopBar from '../components/TopBar';
|
||||
import RecipeElementReduce from '../components/RecipeElementReduce';
|
||||
import AllergiesTab from '../components/AllergiesTab';
|
||||
|
||||
import ListWithoutSelect from '../components/ListWithoutSelect';
|
||||
import ValidateButton from '../components/ValidateButton';
|
||||
|
||||
export default function RecipeDetails(props) {
|
||||
const ing = [{value: "Chocolate"}, {value: "Milk"}, {value: "Eggs"}, {value: "Flour"}]
|
||||
const ute = [{value: "Spoon (3cl)"}, {value: "Whisk"}, {value: "Oven"}]
|
||||
const ste = [
|
||||
{value: "1. Break the eggs and whisk them. Add the flour."},
|
||||
{value: "2. Melt the chocolate in the microwave. Add it to the eggs."},
|
||||
{value: "3. Put the cake in the oven. 40 minutes, 180 degrees."},
|
||||
{value: "4. Clean the utensils."}
|
||||
]
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<TopBar title="Recipe Detail"/>
|
||||
<View style={styles.page}>
|
||||
<RecipeElementReduce
|
||||
title={props.title}
|
||||
number={props.number}
|
||||
duree={props.duree}/>
|
||||
|
||||
<View style={{height: 20}}></View>
|
||||
|
||||
<View style={styles.element}>
|
||||
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
|
||||
<Text style={{fontSize: 20, color: '#ACA279'}}>Preparation</Text>
|
||||
</View>
|
||||
<View style={{margin: 20}}>
|
||||
<AllergiesTab title="Ingredient" content={props.ingredient}></AllergiesTab>
|
||||
<View style={{height: 5}}></View>
|
||||
<AllergiesTab title="Ustensils" content={props.ustensils}></AllergiesTab>
|
||||
</View>
|
||||
</View >
|
||||
|
||||
<View style={{height: 20}}></View>
|
||||
|
||||
<View style={styles.element}>
|
||||
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
|
||||
<Text style={{fontSize: 20, color: '#ACA279'}}>Cooking</Text>
|
||||
</View>
|
||||
<View style={{margin: 20}}>
|
||||
<AllergiesTab title="Steps" content={props.steps}></AllergiesTab>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
<ScrollView>
|
||||
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
|
||||
<View style={{marginTop: "6%"}}>
|
||||
<RecipeElementReduce title="Meat Stick" number="63" duration="15 minutes"/>
|
||||
</View>
|
||||
<View style={styles.separator}/>
|
||||
<View style={styles.background}>
|
||||
<View style={styles.filterBar}>
|
||||
<Text style={styles.filters}>Preparation</Text>
|
||||
</View>
|
||||
<ListWithoutSelect title="Ingredients" content={ing}></ListWithoutSelect>
|
||||
<View style={{marginTop: "3%"}}/>
|
||||
<ListWithoutSelect title="Utensils" content={ute}></ListWithoutSelect>
|
||||
<View style={{marginTop: "3%"}}/>
|
||||
</View>
|
||||
<View style={styles.separator}/>
|
||||
<View style={styles.background}>
|
||||
<View style={styles.filterBar}>
|
||||
<Text style={styles.filters}>Cooking</Text>
|
||||
</View>
|
||||
<ListWithoutSelect title="Steps" content={ste}></ListWithoutSelect>
|
||||
<View style={{marginTop: "3%"}}/>
|
||||
</View>
|
||||
<View style={{marginBottom: "20%"}}/>
|
||||
</LinearGradient>
|
||||
</ScrollView>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
flex: 1,
|
||||
backgroundColor: '#59BDCD',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
padding: 20,
|
||||
linearGradient: {
|
||||
width: "100%",
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start"
|
||||
},
|
||||
separator: {
|
||||
marginTop: "6%",
|
||||
},
|
||||
|
||||
background: {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#F2F0E4',
|
||||
padding: "3%",
|
||||
marginHorizontal: "3%",
|
||||
},
|
||||
|
||||
filterBar: {
|
||||
flexDirection: "row",
|
||||
width: "85%",
|
||||
paddingTop: "3%",
|
||||
paddingBottom: "2%",
|
||||
alignItems: "flex-end",
|
||||
justifyContent: "center",
|
||||
},
|
||||
filters: {
|
||||
fontSize: 20,
|
||||
color: '#ACA279',
|
||||
flex: 1,
|
||||
},
|
||||
element: {
|
||||
backgroundColor:'#F2F0E4',
|
||||
borderRadius: 30,
|
||||
nbSelected: {
|
||||
fontSize: 11,
|
||||
color: "#3F3C42",
|
||||
textAlign: "right",
|
||||
},
|
||||
horizontalAlignement: {
|
||||
display: 'flex',
|
||||
height: 30,
|
||||
width: 350,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,174 +1,240 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, StyleSheet, Text, Image, Pressable} from 'react-native';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
import { Modal, Portal, PaperProvider} from 'react-native-paper';
|
||||
import {View, StyleSheet, Text, Image, Pressable, useWindowDimensions, ScrollView} from 'react-native';
|
||||
import {SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
import {Modal, Portal, PaperProvider} from 'react-native-paper';
|
||||
import {LinearGradient} from 'expo-linear-gradient';
|
||||
import TopBar from '../components/TopBar';
|
||||
import RecipeElement from '../components/RecipeElement';
|
||||
import SelectedIngredient from '../components/SelectedIngredient';
|
||||
import FoodElementTextSimple from '../components/FoodElementTextSimple';
|
||||
import FoodElementText from '../components/FoodElementText';
|
||||
import brochette from '../assets/images/brochette.png';
|
||||
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 bracketRight from '../assets/images/angle_bracket_right.png';
|
||||
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) {
|
||||
|
||||
const imageList = [];
|
||||
const [visible, setVisible] = React.useState(false);
|
||||
const [visibleFilters, setVisibleFilters] = React.useState(false);
|
||||
const [visibleIngredients, setVisibleIngredients] = React.useState(true);
|
||||
const [minCpt, setMinCpt] = useState(0);
|
||||
const [maxCpt, setMaxCpt] = useState(4);
|
||||
const listeIngredient = props.list;
|
||||
const limitedList = listeIngredient.slice(minCpt, maxCpt);
|
||||
const showModal = () => setVisible(true);
|
||||
const hideModal = () => setVisible(false);
|
||||
const ingredientList = [{title: "Steak"}, {title: "Sheep Ribs"}, {title: "Rabbit Thigh"}, {title: "Ham"}, {title: "Cream (Liquid)"}, {title: "Pepper Bell"}]
|
||||
const ingredientListV2 = [{title: "Smoked Salmon"}, {title: "Tomato"}, {title: "Carrot"}]
|
||||
const limitedList = ingredientList.slice(minCpt, maxCpt);
|
||||
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 = {
|
||||
backgroundColor: 'white',
|
||||
height: 450,
|
||||
width: 380,
|
||||
//minHeight: useWindowDimensions().height/2,
|
||||
//width: useWindowDimensions().width,
|
||||
height: "75%",
|
||||
width: "100%",
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
};
|
||||
|
||||
const handleChildEvent = (value) => {
|
||||
setVisible(!visible)
|
||||
};
|
||||
|
||||
const handleChildEventGoFilters = (value) => {
|
||||
const handleChildEvent = () => {
|
||||
setVisible(!visible)
|
||||
}
|
||||
const handleChildEventGoFilters = () => {
|
||||
setVisibleIngredients(false);
|
||||
setVisibleFilters(true);
|
||||
setColorFilters("#59BDCD")
|
||||
setColorIngredients("#3F3C42")
|
||||
}
|
||||
|
||||
const handleChildEventGoIngredients = (value) => {
|
||||
const handleChildEventGoIngredients = () => {
|
||||
setVisibleFilters(false);
|
||||
setVisibleIngredients(true);
|
||||
console.log("jai change pour iingredient");
|
||||
setColorFilters("#3F3C42")
|
||||
setColorIngredients("#59BDCD")
|
||||
}
|
||||
|
||||
const decreaseCounter = () => {
|
||||
if (minCpt > 0) {
|
||||
setMinCpt(minCpt - 4);
|
||||
setMaxCpt(maxCpt - 4)
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
else{
|
||||
setMaxCpt(ingredientList.length+ingredientList.length%4)
|
||||
var cpt=ingredientList.length-(ingredientList.length%4)
|
||||
setMinCpt(cpt)
|
||||
}
|
||||
}
|
||||
const increaseCounter = () => {
|
||||
if (maxCpt < listeIngredient.length) {
|
||||
if (maxCpt < ingredientList.length) {
|
||||
setMinCpt(minCpt + 4);
|
||||
setMaxCpt(maxCpt + 4)
|
||||
}
|
||||
};
|
||||
}
|
||||
else{
|
||||
setMinCpt(0)
|
||||
setMaxCpt(4)
|
||||
}
|
||||
}
|
||||
|
||||
const imageElements = limitedList.map((source, index) => (
|
||||
<View style={[styles.horizontalAlignement, { marginBottom: 10 }]}>
|
||||
<FoodElementText key={index} title={source} />
|
||||
<Image source={brochette} style={{ width: 20, height: 20 }} />
|
||||
<Image source={brochette} style={{ width: 20, height: 20 }} />
|
||||
<View style={[styles.horizontalAlignment, {marginVertical: "3%"}]}>
|
||||
<FoodElementTextSimple title={source.title}/>
|
||||
<Image source={plus} style={{width: 20, resizeMode: "contain"}}/>
|
||||
<Image source={minus} style={{width: 20, resizeMode: "contain"}}/>
|
||||
</View>
|
||||
));
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<SafeAreaProvider style={{flex: 1}}>
|
||||
<PaperProvider>
|
||||
<TopBar title="Recipes" isVisible="true"/>
|
||||
<View style={styles.page}>
|
||||
<SelectedIngredient
|
||||
listeIngredient={props.list}
|
||||
listeImage={imageList}
|
||||
onEvent={handleChildEvent}
|
||||
/>
|
||||
<View style={{ marginTop: 100 }}>
|
||||
<RecipeElement
|
||||
number="13"
|
||||
title="Pizza with Pineapples"
|
||||
imageList={imageList}
|
||||
textList={props.list}
|
||||
description="delicious plate that will please you"
|
||||
style={styles.element}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.modal}>
|
||||
<PaperProvider>
|
||||
<Portal>
|
||||
<Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
|
||||
<ParameterTopBar onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients}></ParameterTopBar>
|
||||
|
||||
{visibleIngredients && (
|
||||
<View style={[styles.page, { justifyContent: 'space-between' }]}>
|
||||
{imageElements}
|
||||
<View id="IngredientList" style={[styles.horizontalAlignement, {marginTop: 10}]}>
|
||||
<Pressable onPress={decreaseCounter} id="GoLeft" >
|
||||
<Image source={bracketLeft} style={{ width: 20, height: 20 }} />
|
||||
</Pressable>
|
||||
|
||||
<Pressable onPress={increaseCounter} id="GoRight">
|
||||
<Image source={bracketRight} style={{ width: 20, height: 20 }} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<CustomButton title="Save"></CustomButton>
|
||||
</View>
|
||||
<ScrollView>
|
||||
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
|
||||
<View style={{marginTop: "6%"}}/>
|
||||
<SelectedIngredient
|
||||
ingredientList={ingredientList}
|
||||
onEvent={handleChildEvent}/>
|
||||
<ScrollView style={{marginTop: "6%"}} horizontal={true}>
|
||||
<View style={{marginHorizontal: 10}}/>
|
||||
<RecipeElement
|
||||
number="63"
|
||||
title="Meat Stick"
|
||||
textList={ingredientList}
|
||||
description="Delicious stick with 4 meats. Accessible for beginners. 20 min or less to cook."/>
|
||||
<View style={{marginHorizontal: 10}}/>
|
||||
<RecipeElement
|
||||
number="03"
|
||||
title="Vichyssoise"
|
||||
textList={ingredientListV2}
|
||||
description="Cold soup of vegetables. Difficult recipe. Not advised to beginners. 1h or more."/>
|
||||
<View style={{marginHorizontal: 10}}/>
|
||||
</ScrollView>
|
||||
<View style={{marginBottom: "20%"}}/>
|
||||
</LinearGradient>
|
||||
</ScrollView>
|
||||
<Portal>
|
||||
<Modal visible={visible} onDismiss={handleChildEvent} contentContainerStyle={containerStyle} style={{marginTop: 0, justifyContent: "flex-end"}}>
|
||||
<ParameterTopBar onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients} colorFilters={colorFilters} colorIngredients={colorIngredients}/>
|
||||
{visibleIngredients &&(
|
||||
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
|
||||
{imageElements}
|
||||
<View style={[styles.horizontalAlignment, {marginTop: "6%"}]}>
|
||||
<Pressable onPress={decreaseCounter}>
|
||||
<Image source={bracketLeft} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: "#3F3C42"}}/>
|
||||
</Pressable>
|
||||
<CustomButton title="Save"></CustomButton>
|
||||
<Pressable onPress={increaseCounter}>
|
||||
<Image source={bracketRight} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: "#3F3C42"}}/>
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{visibleFilters &&(
|
||||
<View style={[styles.page, { justifyContent: 'space-between', alignContent: 'center'}]}>
|
||||
</LinearGradient>
|
||||
|
||||
<View style={{backgroundColor: '#F2F0E4', zIndex: 2}}>
|
||||
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 20}]}>
|
||||
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
|
||||
</View>
|
||||
<View style={{alignContent: 'center', justifyContent: 'space-between', margin: 10}}>
|
||||
<DietsTab title="Diets" content={props.diets}></DietsTab>
|
||||
<View style={{height: 5}}></View>
|
||||
<DietsTab title="Allergy" content={props.allergy}></DietsTab>
|
||||
</View>
|
||||
|
||||
)}
|
||||
{visibleFilters &&(
|
||||
<ScrollView>
|
||||
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
|
||||
<View style={{marginTop: "10%"}}/>
|
||||
<View style={styles.background}>
|
||||
<View style={styles.filterBar}>
|
||||
<Text style={styles.filters}>Additional Filters</Text>
|
||||
<Text style={styles.nbSelected}>{die.length} selected</Text>
|
||||
</View>
|
||||
<View style={{zIndex: 1, position: 'absolute', marginTop: 300}} >
|
||||
<CustomButton title="Save"></CustomButton>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</Modal>
|
||||
</Portal>
|
||||
</PaperProvider>
|
||||
</View>
|
||||
<ListWithoutSelect title="Diets" content={die}></ListWithoutSelect>
|
||||
<View style={{marginTop: "3%"}}/>
|
||||
<ListWithoutSelect title="Allergies" content={all}></ListWithoutSelect>
|
||||
<View style={{marginTop: "3%"}}/>
|
||||
<ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
|
||||
</View>
|
||||
<View style={{marginTop: "6%"}}/>
|
||||
<View>
|
||||
<CustomButton title="Save"></CustomButton>
|
||||
</View>
|
||||
<View style={{marginTop: "43%"}}/>
|
||||
</LinearGradient>
|
||||
</ScrollView>
|
||||
)}
|
||||
</Modal>
|
||||
</Portal>
|
||||
</PaperProvider>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
flex: 1,
|
||||
backgroundColor: '#59BDCD',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
padding: 20,
|
||||
linearGradient: {
|
||||
width: "100%",
|
||||
flex: 1,
|
||||
//padding: "2%",
|
||||
paddingTop: 0,
|
||||
alignItems: "center",
|
||||
justifyContent: "center"
|
||||
},
|
||||
|
||||
background: {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#F2F0E4',
|
||||
padding: "3%",
|
||||
marginHorizontal: "3%",
|
||||
},
|
||||
|
||||
filterBar: {
|
||||
flexDirection: "row",
|
||||
width: "85%",
|
||||
paddingTop: "3%",
|
||||
paddingBottom: "2%",
|
||||
alignItems: "flex-end",
|
||||
justifyContent: "center",
|
||||
},
|
||||
element: {
|
||||
marginTop: 20,
|
||||
filters: {
|
||||
fontSize: 20,
|
||||
color: '#ACA279',
|
||||
flex: 1,
|
||||
},
|
||||
backdrop: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
nbSelected: {
|
||||
fontSize: 11,
|
||||
color: "#3F3C42",
|
||||
textAlign: "right",
|
||||
},
|
||||
|
||||
page: {
|
||||
flex: 1,
|
||||
backgroundColor: '#59BDCD',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: "3%",
|
||||
},
|
||||
|
||||
modal :{
|
||||
position: 'absolute',
|
||||
top: '50%', // Centre verticalement
|
||||
left: '50%', // Centre horizontalement
|
||||
transform: [{ translateX: -185 }, { translateY: -90 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
|
||||
top: '50%',
|
||||
height: "50%",
|
||||
width: "100%",
|
||||
borderWidth: 1,
|
||||
borderColor: "red",
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
},
|
||||
horizontalAlignement: {
|
||||
horizontalAlignment: {
|
||||
display: 'flex',
|
||||
height: 30,
|
||||
width: 350,
|
||||
height: "10%",
|
||||
width: "100%",
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
}
|
||||
},
|
||||
|
||||
recipes: {
|
||||
flexDirection: "row",
|
||||
overflow: "scroll",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"compilerOptions": {},
|
||||
"extends": "expo/tsconfig.base"
|
||||
}
|
||||
Loading…
Reference in new issue