Merge branch 'WORK-LPA'
continuous-integration/drone/push Build is failing Details

# Conflicts:
#	LeftOvers/App.tsx
#	LeftOvers/screens/IngredientSelection.tsx
#	LeftOvers/screens/RecipeDetails.tsx
#	LeftOvers/screens/RecipeSuggestion.tsx
pull/20/head
Louison PARANT 1 year ago
commit 0750f52c57

@ -1,69 +1,25 @@
import React from 'react'; import React from 'react';
import {StyleSheet, View } from 'react-native'; import {StyleSheet, View, SafeAreaView, ScrollView, Text} from 'react-native';
import ProfileModification from './components/ProfileModification'; import HomePage from './screens/HomePage';
import ValidateButton from './components/ValidateButton'; import Profiles from './screens/Profiles';
import { LinearGradient } from 'expo-linear-gradient'; import ModifyProfile from './screens/ModifyProfile';
import CreateProfile from './screens/CreateProfile';
import FiltersSelection from './screens/FiltersSelection';
import RecipeSuggestion from './screens/RecipeSuggestion'; import RecipeSuggestion from './screens/RecipeSuggestion';
import RecipeDetails from './screens/RecipeDetails'; import RecipeDetails from './screens/RecipeDetails';
import IngredientSelection from './screens/IngredientSelection'; import IngredientSelection from './screens/IngredientSelection';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {LinearGradient} from 'expo-linear-gradient';
export default function App() { export default function App(props) {
const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}] return(
const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] //<HomePage/>
const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}] //<Profiles/>
const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}] //<ModifyProfile/>
const steps = [{value: "Chauffer chocolat"}, //<CreateProfile/>
{value: "1. Casser oeuf"}, //<FiltersSelection/>
{value: "2. Melanger la farine, le lait et les oeufs"}, //<RecipeSuggestion/>
{value: "3. Battre fort"}, //<RecipeDetails/>
{value: "4. Voler la montre de Louison"}, <IngredientSelection/>
{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>*/
); );
} }
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',
},
});

@ -23,25 +23,22 @@ const styles = StyleSheet.create({
width : 150, width : 150,
height: 40, height: 40,
borderRadius: 4, borderRadius: 4,
elevation: 3, backgroundColor: '#F2F0E4',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
}, },
text: { text: {
fontSize: 15, fontSize: 15,
lineHeight: 21,
fontWeight: 'bold', fontWeight: 'bold',
letterSpacing: 0.25, color: '#ACA279',
color: 'white',
}, },
view: { view: {
width : 145, width : 145,
height: 35, height: 35,
borderRadius: 4, borderRadius: 4,
elevation: 3,
borderWidth: 1, borderWidth: 1,
borderColor: 'grey', borderColor: '#ACA279',
alignItems: 'center', // Centre le contenu verticalement alignItems: 'center',
justifyContent: 'center', // Centre le contenu horizontalement justifyContent: 'center',
margin: "1%",
}, },
}); });

@ -4,15 +4,11 @@ import Separator from '../components/Separator';
import plus from '../assets/images/plus.png'; import plus from '../assets/images/plus.png';
import moins from '../assets/images/minus.png'; import moins from '../assets/images/minus.png';
interface foodElementTextProps {
interface foodElementImageProps {
source : string
title : string title : string
} }
export default function FoodElementText(props : foodElementTextProps) {
export default function FoodElementText(props : any) {
return ( return (
<Pressable style={styles.button}> <Pressable style={styles.button}>
<View style={styles.container}> <View style={styles.container}>
@ -29,32 +25,30 @@ const styles = StyleSheet.create({
button: { button: {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
width : 270, width : "80%",
height: 60,
borderRadius: 5, borderRadius: 5,
elevation: 3,
backgroundColor: '#E3DEC9', backgroundColor: '#E3DEC9',
marginHorizontal: "3%",
}, },
text: { text: {
fontSize: 15, fontSize: 15,
lineHeight: 21, lineHeight: 20,
fontWeight: 'bold', fontWeight: 'bold',
letterSpacing: 0.25, padding : "3%",
padding : 7, color: '#3F3C42',
color: 'black',
}, },
view: { view: {
alignItems: 'flex-start', alignItems: 'flex-start',
justifyContent: 'center', justifyContent: 'center',
marginRight: 5 // Centre le contenu horizontalement marginRight: "3%",
width: "100%"
}, },
container: { container: {
width :260, width: "100%",
height: 50, height: 50,
borderRadius: 5, borderRadius: 5,
elevation: 3,
borderWidth: 2, borderWidth: 2,
borderColor: 'black', borderColor: '#3F3C42',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
}, },

@ -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',
},
});

@ -25,6 +25,7 @@ export default function ListSelect(props: ListProps) {
dropdownTextStyles={styles.itemText} dropdownTextStyles={styles.itemText}
badgeStyles={styles.badges} badgeStyles={styles.badges}
badgeTextStyles={styles.badgesText} badgeTextStyles={styles.badgesText}
notFoundText="All Diets Already Selected"
placeholder={props.title} placeholder={props.title}
label={props.title}/> label={props.title}/>
); );
@ -35,7 +36,6 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "stretch", justifyContent: "stretch",
minHeight: 25,
backgroundColor: "#F2F0E4", backgroundColor: "#F2F0E4",
borderTopRightRadius: 15, borderTopRightRadius: 15,
borderTopLeftRadius: 15, borderTopLeftRadius: 15,
@ -43,13 +43,12 @@ const styles = StyleSheet.create({
borderBottomLeftRadius: 0, borderBottomLeftRadius: 0,
borderWidth: 2, borderWidth: 2,
borderColor: "#ACA279", borderColor: "#ACA279",
width: 330, minWidth: "92%",
maxWidth: "92%",
marginBottom: 0, marginBottom: 0,
overflow: "hidden", overflow: "hidden",
}, },
arrow: { arrow: {
height: 20,
width: 20,
resizeMode: 'contain', resizeMode: 'contain',
tintColor: "#3F3C42", tintColor: "#3F3C42",
flex: 0.1, flex: 0.1,
@ -63,34 +62,36 @@ const styles = StyleSheet.create({
}, },
itemList: { itemList: {
//flexDirection: "row", flexDirection: "row",
alignItems: "flex-start", alignItems: "flex-start",
//justifyContent: "stretch", justifyContent: "stretch",
borderWidth: 0, borderWidth: 0,
borderTopRightRadius: 0, borderTopRightRadius: 0,
borderTopLeftRadius: 0, borderTopLeftRadius: 0,
borderBottomRightRadius: 15, borderBottomRightRadius: 15,
borderBottomLeftRadius: 15, borderBottomLeftRadius: 15,
backgroundColor: "#E3DEC9", backgroundColor: "#E3DEC9",
width: 330, minWidth: "92%",
maxWidth: "92%",
}, },
itemCell: { itemCell: {
maxHeight: 30,
flex: 1,
padding: 0, padding: 0,
paddingLeft: 10, paddingTop: "5%",
width: "100%",
minWidth: 250,
maxWidth: 250,
}, },
itemText: { itemText: {
fontSize: 13, fontSize: 13,
textAlign: "left", textAlign: "left",
flex: 1, flex: 1,
padding: 5, padding: "1%",
paddingLeft: 10, paddingLeft: "3%",
color: "#3F3C42", color: "#3F3C42",
}, },
badges: { badges: {
backgroundColor: "#59BDCD" backgroundColor: "#59BDCD",
}, },
badgesText: { badgesText: {
fontSize: 15, fontSize: 15,

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native'; import {StyleSheet, Text, TextInput, View, Image, FlatList, Pressable} from 'react-native';
import ValidateButton from './ValidateButton'; import ValidateButton from './ValidateButton';
import HeaderFlatList from './HeaderFlatList'; import HeaderFlatList from './HeaderFlatList';
import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list' import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
@ -12,20 +12,20 @@ type ListProps = {
export default function ListWithoutSelect(props: ListProps) { export default function ListWithoutSelect(props: ListProps) {
const [selected, setSelected] = React.useState([]); const [selected, setSelected] = React.useState([]);
return ( return (
<MultipleSelectList <MultipleSelectList
data={props.content} data={props.content}
save="value" save="value"
search={false} search={false}
arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>} arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
boxStyles={styles.titleBar} boxStyles={styles.titleBar}
inputStyles={styles.title} inputStyles={styles.title}
dropdownStyles={styles.itemList} dropdownStyles={styles.itemList}
dropdownItemStyles={styles.itemCell} dropdownItemStyles={styles.itemCell}
dropdownTextStyles={styles.itemText} dropdownTextStyles={styles.itemText}
checkBoxStyles={styles.box} checkBoxStyles={styles.box}
notFoundText="None" notFoundText="None"
placeholder={props.title} placeholder={props.title}
label={props.title}/> label={props.title}/>
); );
} }
@ -34,7 +34,6 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "stretch", justifyContent: "stretch",
minHeight: 25,
backgroundColor: "#F2F0E4", backgroundColor: "#F2F0E4",
borderTopRightRadius: 15, borderTopRightRadius: 15,
borderTopLeftRadius: 15, borderTopLeftRadius: 15,
@ -42,13 +41,12 @@ const styles = StyleSheet.create({
borderBottomLeftRadius: 0, borderBottomLeftRadius: 0,
borderWidth: 2, borderWidth: 2,
borderColor: "#ACA279", borderColor: "#ACA279",
width: 330, minWidth: "92%",
maxWidth: "92%",
marginBottom: 0, marginBottom: 0,
overflow: "hidden", overflow: "hidden",
}, },
arrow: { arrow: {
height: 20,
width: 20,
resizeMode: 'contain', resizeMode: 'contain',
tintColor: "#3F3C42", tintColor: "#3F3C42",
flex: 0.1, flex: 0.1,
@ -62,22 +60,24 @@ const styles = StyleSheet.create({
}, },
itemList: { itemList: {
//flexDirection: "row", flexDirection: "row",
alignItems: "flex-start", alignItems: "flex-start",
//justifyContent: "stretch", justifyContent: "stretch",
borderWidth: 0, borderWidth: 0,
borderTopRightRadius: 0, borderTopRightRadius: 0,
borderTopLeftRadius: 0, borderTopLeftRadius: 0,
borderBottomRightRadius: 15, borderBottomRightRadius: 15,
borderBottomLeftRadius: 15, borderBottomLeftRadius: 15,
backgroundColor: "#E3DEC9", backgroundColor: "#E3DEC9",
width: 330, minWidth: "92%",
maxWidth: "92%",
}, },
itemCell: { itemCell: {
maxHeight: 30,
flex: 1,
padding: 0, padding: 0,
paddingLeft: 10, paddingTop: "5%",
width: "100%",
minWidth: 250,
maxWidth: 250,
}, },
itemText: { itemText: {
fontSize: 13, fontSize: 13,

@ -1,27 +1,19 @@
import React from 'react'; import React from 'react';
import { Appbar } from 'react-native-paper'; import { Appbar } from 'react-native-paper';
interface TopBarProps{ interface ParameterTopBarProps{
source : string onEventIngredient: () => void
firstImage : string onEventFilter: () => void
lastImage : string 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 ( return (
<Appbar.Header style={{backgroundColor: '#F2F0E4', justifyContent: 'center'}} > <Appbar.Header style={{backgroundColor: '#F2F0E4', height: "10%", justifyContent: "center", borderTopLeftRadius: 20, borderTopRightRadius: 20,}}>
<Appbar.Action icon="magnify" onPress={goIngredients} /> <Appbar.Action icon="magnify" onPress={props.onEventIngredient} color={props.colorIngredients}/>
<Appbar.Action icon="dots-vertical" onPress={goFilter} /> <Appbar.Action icon="dots-vertical" onPress={props.onEventFilter} color={props.colorFilters}/>
</Appbar.Header> </Appbar.Header>
); );
} }

@ -21,13 +21,24 @@ export default function ProfileDelete(props: ProfileProps) {
} }
}; };
let imageSource
if (props.avatar == "plus.png"){
imageSource = require('../assets/images/plus.png')
}
else if (props.avatar == "plus_small.png"){
imageSource = require('../assets/images/plus_small.png')
}
else{
imageSource = require('../assets/images/logo.png')
}
return ( return (
<View style={styles.background}> <View style={styles.background}>
<View style={styles.pseudoBar}> <View style={styles.pseudoBar}>
<Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image> <Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text> <Text style={styles.text}>{props.name}</Text>
</View> </View>
<Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}> <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Filters</Text> <Text style={styles.filters}>Filters</Text>
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image> <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
@ -35,9 +46,8 @@ export default function ProfileDelete(props: ProfileProps) {
</Pressable> </Pressable>
<View style={{display: display}}> <View style={{display: display}}>
<ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect> <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect> <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
<View style={{marginTop: 10}}/>
</View> </View>
</View> </View>
); );
@ -45,69 +55,61 @@ export default function ProfileDelete(props: ProfileProps) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background: {
//maxWidth: 370,
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: 15, borderRadius: 15,
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
padding: 10, padding: "3%",
marginHorizontal: 10, marginHorizontal: "3%",
height: "100%",
}, },
pseudoBar: { pseudoBar: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
flex: 0.7, width: "100%",
width: 330, marginHorizontal: "3%",
marginBottom: 10, marginBottom: "3%",
}, },
avatar: { avatar: {
padding: 20, padding: "5%",
resizeMode: 'contain', resizeMode: 'contain',
borderWidth: 2, borderWidth: 2,
borderColor: "#ACA279", borderColor: "#ACA279",
borderRadius: 45, borderRadius: 45,
height: "100%",
flex: 0.03,
}, },
text: { text: {
flex: 1,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
alignItems: 'center', alignItems: 'center',
justifyContent: 'left', textAlign: 'left',
flex: 0.8, marginLeft: "10%",
marginLeft: 20, padding: "2%",
padding: 5, height: "100%",
}, },
filterBar: { filterBar: {
flexDirection: "row", flexDirection: "row",
width: 300, width: "90%",
paddingTop: 10, paddingTop: "3%",
paddingBottom: 5,
alignItems: "flex-end", alignItems: "flex-end",
justifyContent: "center", justifyContent: "center",
flex: 0.2,
}, },
filters: { filters: {
flex: 0.5,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
flex: 1, flex: 1,
padding: 5, padding: "2%",
paddingLeft: 0, paddingLeft: 0,
paddingBottom: 0, paddingBottom: 0,
}, },
nbSelected: {
fontSize: 11,
flex: 1,
color: "#3F3C42",
textAlign: "right",
},
arrow: { arrow: {
height: 20, height: "100%",
width: 20,
resizeMode: 'contain', resizeMode: 'contain',
tintColor: "#3F3C42", tintColor: "#3F3C42",
flex: 0.1, flex: 0.1,

@ -22,28 +22,40 @@ export default function ProfileDetails(props: ProfileProps) {
} }
}; };
let imageSource
if (props.avatar == "plus.png"){
imageSource = require('../assets/images/plus.png')
}
else if (props.avatar == "plus_small.png"){
imageSource = require('../assets/images/plus_small.png')
}
else{
imageSource = require('../assets/images/logo.png')
}
return ( return (
<View style={styles.background}> <View style={styles.background}>
<View style={styles.pseudoBar}> <View style={styles.pseudoBar}>
<Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image> <Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text> <Text style={styles.text}>{props.name}</Text>
<Image source={require("../assets/images/modify.png")} style={styles.modify}></Image> <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
<Pressable onPress={props.onDeleteProfile}> <Pressable onPress={props.onDeleteProfile} style={{flex: 0.1, marginLeft: "1%",}}>
<Image source={require("../assets/images/delete.png")} style={styles.delete}></Image> <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
</Pressable> </Pressable>
</View> </View>
<Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}> <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Filters</Text> <Text style={styles.filters}>Filters</Text>
<Text style={styles.nbSelected}>3 selected</Text> <Text style={styles.nbSelected}>{props.diets.length} selected</Text>
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image> <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
</View> </View>
</Pressable> </Pressable>
<View style={{display: display}}> <View style={{display: display, alignItems: "center", justifyContent: "center"}}>
<ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect> <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect> <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
</View> </View>
</View> </View>
); );
@ -51,72 +63,71 @@ export default function ProfileDetails(props: ProfileProps) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background: {
//maxWidth: 370,
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: 15, borderRadius: 15,
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
padding: 10, padding: "3%",
marginHorizontal: 10, marginHorizontal: "3%",
}, },
pseudoBar: { pseudoBar: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
flex: 0.7, width: "100%",
width: 330, marginHorizontal: "3%",
marginBottom: 10, marginBottom: "3%",
}, },
avatar: { avatar: {
padding: 20, padding: "5%",
resizeMode: 'contain', resizeMode: 'contain',
borderWidth: 2, borderWidth: 2,
borderColor: "#ACA279", borderColor: "#ACA279",
borderRadius: 45, borderRadius: 45,
height: "100%",
flex: 0.03,
}, },
text: { text: {
flex: 1,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
alignItems: 'center', alignItems: 'center',
justifyContent: 'left', textAlign: 'left',
flex: 0.8, marginLeft: "3%",
marginLeft: 20, padding: "2%",
padding: 5, height: "100%",
}, },
modify: { modify: {
height: 20, height: "100%",
width: 20,
tintColor: "#ACA279", tintColor: "#ACA279",
resizeMode: 'contain', resizeMode: 'contain',
flex: 0.05, flex: 0.1,
marginLeft: 15, marginLeft: "3%",
}, },
delete: { delete: {
height: 20, height: "100%",
width: 20, width: "100%",
tintColor: "#ACA279", tintColor: "#ACA279",
resizeMode: 'contain', resizeMode: 'contain',
flex: 0.05, flex: 1,
}, },
filterBar: { filterBar: {
flexDirection: "row", flexDirection: "row",
width: 300, width: "85%",
paddingTop: 10, paddingTop: "3%",
paddingBottom: 5, paddingBottom: "1%",
alignItems: "flex-end", alignItems: "flex-end",
justifyContent: "center", justifyContent: "center",
flex: 0.2, flex: 1,
}, },
filters: { filters: {
flex: 0.5,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
flex: 1, flex: 1,
padding: 5, padding: "2%",
paddingLeft: 0, paddingLeft: 0,
paddingBottom: 0, paddingBottom: 0,
}, },
@ -125,10 +136,10 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
color: "#3F3C42", color: "#3F3C42",
textAlign: "right", textAlign: "right",
marginRight: "3%",
}, },
arrow: { arrow: {
height: 20, height: "100%",
width: 20,
resizeMode: 'contain', resizeMode: 'contain',
tintColor: "#3F3C42", tintColor: "#3F3C42",
flex: 0.1, flex: 0.1,

@ -21,19 +21,34 @@ export default function ProfileElement(props : Profile) {
else{ else{
setWaiting("flex") setWaiting("flex")
} }
if (props.isActive == "flex" && waiting == "none"){ if (props.disableSelection){
setSeparator("none")
}
else if (props.isActive == "flex" && waiting == "none"){
setSeparator("flex") setSeparator("flex")
} }
else{ else{
setSeparator("none") setSeparator("none")
} }
console.log(waiting, separator, props.name) console.log(waiting, separator, props.name)
}; }
let imageSource
if (props.avatar == "plus.png"){
imageSource = require('../assets/images/plus.png')
}
else if (props.avatar == "plus_small.png"){
imageSource = require('../assets/images/plus_small.png')
}
else{
imageSource = require('../assets/images/logo.png')
}
return ( return (
<Pressable onPress={changeStatus} style={styles.button}> <Pressable onPress={changeStatus} style={styles.button}>
<View style={{flexDirection: "column"}}> <View>
<View style={styles.pseudoBar}> <View style={styles.pseudoBar}>
<Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image> <Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text> <Text style={styles.text}>{props.name}</Text>
</View> </View>
<View style={styles.pseudoBar}> <View style={styles.pseudoBar}>
@ -54,42 +69,42 @@ const styles = StyleSheet.create({
button: { button: {
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-start', justifyContent: 'flex-start',
height: 80, height: "80%",
//width: "75%", width: "78%",
marginVertical: 15, marginVertical: "3%",
}, },
pseudoBar: { pseudoBar: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
//width: "120%", width: "100%",
width: 225, marginHorizontal: "3%",
marginHorizontal: 10, marginBottom: "3%",
marginBottom: 10,
}, },
avatar: { avatar: {
padding: 20, padding: "5%",
resizeMode: 'contain', resizeMode: 'contain',
borderWidth: 2, borderWidth: 2,
borderColor: "#ACA279", borderColor: "#ACA279",
borderRadius: 45, borderRadius: 45,
height: "100%",
flex: 0.01,
}, },
text: { text: {
fontSize: 15, fontSize: 15,
color: '#ACA279', color: '#ACA279',
alignItems: 'center', alignItems: 'center',
justifyContent: 'left', textAlign: 'left',
flex: 0.8, flex: 0.9,
marginLeft: 20, marginLeft: "10%",
padding: 5, padding: "2%",
width: "100%"
}, },
active: { active: {
borderWidth: 1, borderWidth: 1,
borderRadius: 20, borderRadius: 20,
borderColor: "#59BDCD", borderColor: "#59BDCD",
padding: 5, padding: "1%",
}, },
textActive: { textActive: {
fontSize: 10, fontSize: 10,
@ -100,7 +115,7 @@ const styles = StyleSheet.create({
borderWidth: 1, borderWidth: 1,
borderRadius: 20, borderRadius: 20,
borderColor: "#ACA279", borderColor: "#ACA279",
padding: 5, padding: "1%",
}, },
textWaiting: { textWaiting: {
fontSize: 10, fontSize: 10,

@ -14,10 +14,21 @@ type ProfileProps = {
export default function ProfileModification(props: ProfileProps) { export default function ProfileModification(props: ProfileProps) {
const [name, onChangeName] = useState(props.name); const [name, onChangeName] = useState(props.name);
let imageSource
if (props.avatar == "plus.png"){
imageSource = require('../assets/images/plus.png')
}
else if (props.avatar == "plus_small.png"){
imageSource = require('../assets/images/plus_small.png')
}
else{
imageSource = require('../assets/images/logo.png')
}
return ( return (
<View style={styles.background}> <View style={styles.background}>
<View style={styles.pseudoBar}> <View style={styles.pseudoBar}>
<Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image> <Image source={imageSource} style={styles.avatar}></Image>
<TextInput style={styles.textInput} value={name} onChangeText={onChangeName} placeholder="Name"></TextInput> <TextInput style={styles.textInput} value={name} onChangeText={onChangeName} placeholder="Name"></TextInput>
<Image source={require("../assets/images/modify.png")} style={styles.modify}></Image> <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
</View> </View>
@ -26,9 +37,9 @@ export default function ProfileModification(props: ProfileProps) {
<Text style={styles.nbSelected}>3 selected</Text> <Text style={styles.nbSelected}>3 selected</Text>
</View> </View>
<ListSelect title="Diets" content={props.diets}></ListSelect> <ListSelect title="Diets" content={props.diets}></ListSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "6%"}}/>
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect> <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton> <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
</View> </View>
); );
@ -36,77 +47,68 @@ export default function ProfileModification(props: ProfileProps) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background: {
//maxWidth: 370,
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: 15, borderRadius: 15,
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
padding: 10, padding: "3%",
marginHorizontal: 10, marginHorizontal: "3%",
}, },
pseudoBar: { pseudoBar: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
flex: 0.7, width: "100%",
width: 330, marginHorizontal: "3%",
marginBottom: 10, marginBottom: "3%",
}, },
avatar: { avatar: {
padding: 20, padding: "5%",
resizeMode: 'contain', resizeMode: 'contain',
borderWidth: 2, borderWidth: 2,
borderColor: "#ACA279", borderColor: "#ACA279",
borderRadius: 45, borderRadius: 45,
height: "100%",
flex: 0.04,
}, },
textInput: { textInput: {
flex: 0.5,
fontSize: 15, fontSize: 15,
color: '#ACA279', color: '#ACA279',
width : 150,
borderRadius: 10, borderRadius: 10,
borderWidth: 2, borderWidth: 2,
borderStyle: 'dashed', borderStyle: 'dashed',
borderColor: '#ACA279', borderColor: '#ACA279',
alignItems: 'center', alignItems: 'center',
justifyContent: 'left', textAlign: 'left',
flex: 0.8, flex: 0.8,
marginLeft: 20, marginLeft: "7%",
padding: 5, padding: "2%",
}, },
modify: { modify: {
height: 20, height: "100%",
width: 20,
tintColor: "#ACA279", tintColor: "#ACA279",
resizeMode: 'contain', resizeMode: 'contain',
flex: 0.1, flex: 0.1,
marginLeft: 5, marginLeft: "3%",
}, },
filterBar: { filterBar: {
flexDirection: "row", flexDirection: "row",
width: 300, width: "85%",
paddingTop: 10, paddingTop: "3%",
paddingBottom: 5, paddingBottom: "2%",
alignItems: "flex-end", alignItems: "flex-end",
justifyContent: "center", justifyContent: "center",
flex: 0.2,
}, },
filters: { filters: {
flex: 0.5,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
flex: 1, flex: 1,
padding: 5,
paddingLeft: 0,
paddingBottom: 0,
}, },
nbSelected: { nbSelected: {
fontSize: 11, fontSize: 11,
flex: 1,
color: "#3F3C42", color: "#3F3C42",
textAlign: "right", textAlign: "right",
} }

@ -36,12 +36,12 @@ export default function ProfileSelection(props: ProfileSelectionProps) {
return ( return (
<View style={styles.background}> <View style={styles.background}>
<Pressable onPress={decreaseCounter} style={{}}> <Pressable onPress={decreaseCounter}>
<Image source={bracketLeft} style={{ width: 40, height: 40 }} /> <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain", tintColor: "#3F3C42", }}/>
</Pressable> </Pressable>
<ProfileElement name={props.listProfile[cpt].name} avatar={props.listProfile[cpt].avatar} isActive={props.listProfile[cpt].isActive} disableSelection={props.disableSelection}/> <ProfileElement name={props.listProfile[cpt].name} avatar={props.listProfile[cpt].avatar} isActive={props.listProfile[cpt].isActive} disableSelection={props.disableSelection}/>
<Pressable onPress={increaseCounter} style={{}}> <Pressable onPress={increaseCounter}>
<Image source={bracketRight} style={{ width: 40, height: 40 }} /> <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain", tintColor: "#3F3C42", }}/>
</Pressable> </Pressable>
</View> </View>
); );
@ -49,10 +49,9 @@ export default function ProfileSelection(props: ProfileSelectionProps) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background: {
//height: 120, width: "92%",
height: 100, height: 80,
borderRadius: 20, borderRadius: 20,
marginHorizontal: 10,
borderWidth: 2, borderWidth: 2,
borderColor: '#ACA279', borderColor: '#ACA279',
backgroundColor: '#E3DEC9', backgroundColor: '#E3DEC9',

@ -6,63 +6,40 @@ import Union_right from '../assets/images/Union_right.png';
import background from '../assets/images/Background.png'; import background from '../assets/images/Background.png';
interface recipeElementProps { interface recipeElementProps {
number : number number: string
title : string title: string
description : string textList: string[]
imageList : string[] description: string
image : string
} }
export default function RecipeElement(props : any) { export default function RecipeElement(props: recipeElementProps) {
const totalContentCount = props.imageList.length + 11;
const dynamicHeight = totalContentCount * 40;
const scrollViewHeight = 100;
return ( return (
<Pressable style={[styles.button, { height: dynamicHeight }]}> <Pressable style={styles.button}>
<View style={[styles.view, { height: dynamicHeight - 10}]}> <View style={styles.view}>
<Text style={styles.text}>{props.number}</Text> <Text style={styles.text}>{props.number}</Text>
<Text style={styles.title}>{props.title}</Text> <Text style={styles.title}>{props.title}</Text>
<Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/> <Image source={props.image ? props.image : brochette} style={{width: 100, resizeMode: "contain"}}/>
<View style={styles.horizontalAlignement}> <View style={styles.horizontalAlignment}>
<Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} /> <Image source={Union_left} style={{width: "25%", marginRight: "3%", resizeMode: "contain"}} />
<Text style={styles.text}>Ingredients</Text> <Text style={styles.text}>Ingredients</Text>
<Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} /> <Image source={Union_right} style={{ width: "25%", marginLeft: "3%", resizeMode: "contain"}} />
</View> </View>
<View style={styles.horizontalAlignment}>
<View style={styles.horizontalAlignement}> {props.textList.length > 0 && props.textList.map((source, index) => (
{props.imageList.length > 0 && props.imageList.map((source, index) => ( <Text key={index} style={styles.smallText}>- {source.title} -</Text>
<Image key={index} source={source} style={{ width: 40, height: 40 }} /> ))}
))}
</View> </View>
{props.imageList.length <= 0 ? (
<View style={styles.horizontalAlignement}>
{props.textList.length > 0 && props.textList.map((source, index) => (
<Text key={index} style={styles.smallText}>{source}</Text>
))}
</View>
) : null}
<View style={styles.scrollViewContainer}> <View style={styles.scrollViewContainer}>
<SafeAreaView> <View style={styles.horizontalAlignment}>
<View style={styles.horizontalAlignement}> <Image source={Union_left} style={{width: "27%", marginRight: "3%", resizeMode: "contain"}}/>
<Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} /> <Text style={styles.text}>Description</Text>
<Text style={styles.text}>Description</Text> <Image source={Union_right} style={{width: "27%", marginLeft: "3%", resizeMode: "contain"}}/>
<Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
</View> </View>
<ScrollView style={{ marginTop: 5, height: scrollViewHeight }}> <ScrollView style={{marginTop: "3%", overflow: "hidden"}}>
<Text style={styles.smallText}>{props.description}</Text> <Text style={styles.smallText}>{props.description}</Text>
</ScrollView> </ScrollView>
</SafeAreaView>
</View> </View>
<Image source={background} style={{width: "80%", resizeMode: "contain"}}></Image>
<Image source={background} style={{width: 210, height: 20, marginTop: dynamicHeight - 50, position: 'absolute'}}></Image>
</View> </View>
</Pressable> </Pressable>
); );
@ -73,54 +50,47 @@ const styles = StyleSheet.create({
button: { button: {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
width : 300, width: 300,
height: "90%",
borderRadius: 40, borderRadius: 40,
elevation: 3,
backgroundColor: '#E3DEC9', backgroundColor: '#E3DEC9',
}, },
text: { text: {
fontSize: 14, fontSize: 15,
lineHeight: 21,
fontWeight: 'bold', fontWeight: 'bold',
letterSpacing: 0.25,
color: '#756C28', color: '#756C28',
marginTop: 10, marginTop: "4%",
}, },
smallText: { smallText: {
fontSize: 12, fontSize: 12,
lineHeight: 21,
fontWeight: 'bold',
letterSpacing: 0.25,
color: '#71662A', color: '#71662A',
textAlign: "center", textAlign: "center",
margin : 5 margin : "2%"
}, },
title:{ title:{
fontSize: 18, fontSize: 18,
lineHeight: 21,
fontWeight: 'bold', fontWeight: 'bold',
letterSpacing: 0.25,
color: '#524B1A', color: '#524B1A',
}, },
view: { view: {
width : 290, width : "95%",
height: "96.5%",
borderRadius: 40, borderRadius: 40,
elevation: 3,
borderWidth: 2, borderWidth: 2,
borderColor: 'grey', padding: "5%",
alignItems: 'center', // Centre le contenu verticalement borderColor: '#73692A',
display: "flex", alignItems: 'center',
flexWrap: "wrap", justifyContent: "center",
}, },
horizontalAlignement: { horizontalAlignment: {
display: "flex", display: "flex",
flexDirection : 'row', flexDirection : 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
marginTop : 5, marginTop : "2%",
flexWrap: 'wrap', flexWrap: 'wrap',
}, },
scrollViewContainer: { scrollViewContainer: {
flex: 1, // Assurez-vous que le reste du contenu occupe l'espace restant flex: 1,
}, },
}); });

@ -8,24 +8,21 @@ interface recipeElementReduceProps {
number : number number : number
title : string title : string
image : string image : string
duree : string duration : string
} }
export default function RecipeElementReduce(props: recipeElementReduceProps) {
export default function RecipeElementReduce(props : any) {
return ( return (
<Pressable style={styles.button}> <View style={styles.button}>
<View style={styles.view}> <View style={styles.view}>
<Text style={styles.text}>{props.number}</Text> <Text style={styles.text}>{props.number}</Text>
<Text style={styles.title}>{props.title}</Text> <Text style={styles.title}>{props.title}</Text>
<Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/> <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100, resizeMode: "contain", zIndex: 2}}/>
<View style={{marginTop: 200, position: 'absolute'}}> <View style={{marginBottom: "20%"}}/>
<Image source={background} style={{width: 210, height: 20}}></Image> <Image source={background} style={{width: "80%", resizeMode: "contain", position: "absolute", zIndex: 1, top: "90%"}}></Image>
<Text style={styles.smallText}>{props.duree}</Text> <Text style={styles.smallText}>{props.duration}</Text>
</View>
</View> </View>
</Pressable> </View>
); );
} }
@ -37,48 +34,39 @@ const styles = StyleSheet.create({
width : 250, width : 250,
height: 250, height: 250,
borderRadius: 40, borderRadius: 40,
elevation: 3,
backgroundColor: '#E3DEC9', backgroundColor: '#E3DEC9',
}, },
text: { text: {
fontSize: 14, fontSize: 15,
lineHeight: 21,
fontWeight: 'bold', fontWeight: 'bold',
letterSpacing: 0.25,
color: '#756C28', color: '#756C28',
marginTop: 10, marginTop: "4%",
zIndex: 2
}, },
smallText: { smallText: {
position: 'absolute', position: "absolute",
textAlign: 'center', fontSize: 12,
left: 0, color: '#F2F0E4',
right: 0, textAlign: "center",
marginHorizontal: 'auto', margin : "2%",
color: '#E3DEC9', zIndex: 2,
fontWeight: "bold",
top: "89.25%"
}, },
title:{ title:{
fontSize: 18, fontSize: 18,
lineHeight: 21, fontWeight: 'bold',
fontWeight: 'bold', color: '#524B1A',
letterSpacing: 0.25, zIndex: 2
color: '#524B1A',
}, },
view: { view: {
width : 240, width : "95%",
height: 240, height: "95%",
borderRadius: 40, borderRadius: 40,
elevation: 3, borderWidth: 2,
borderWidth: 2, padding: "5%",
borderColor: 'grey', borderColor: '#73692A',
alignItems: 'center', // Centre le contenu verticalement alignItems: 'center',
display: "flex", justifyContent: "center",
flexWrap: "wrap",
}, },
horizontalAlignement: {
display: "flex",
flexDirection : 'row',
alignItems: 'center',
marginTop: 10,
}
}); });

@ -1,58 +1,51 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { View, StyleSheet, Pressable, Image, Text } from 'react-native'; import {View, StyleSheet, Pressable, Image, Text} from 'react-native';
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 parameter from '../assets/images/parameter.png'; import parameter from '../assets/images/parameter.png';
import FoodElementText from './FoodElementText'; import FoodElementText from './FoodElementText';
interface SelectedIngredientProps { interface SelectedIngredientProps {
listeIngredient: string[]; ingredientList: string[]
listeImage: string[]; onEvent: () => void
onEvent: (value: string) => void;
} }
export default function SelectedIngredient(props: SelectedIngredientProps) { export default function SelectedIngredient(props: SelectedIngredientProps) {
const [cpt, setCpt] = useState(0); const [cpt, setCpt] = useState(0);
const decreaseCounter = () => { const decreaseCounter = () => {
if (cpt > 0) { if(cpt > 0){
setCpt(cpt - 1); setCpt(cpt - 1);
} else { }
setCpt(props.listeIngredient.length - 1); else{
setCpt(props.ingredientList.length - 1);
} }
}; };
const increaseCounter = () => { const increaseCounter = () => {
if (cpt < props.listeIngredient.length - 1) { if(cpt < props.ingredientList.length - 1){
setCpt(cpt + 1); setCpt(cpt + 1);
} else { }
else{
setCpt(0); setCpt(0);
} }
}; };
const handlePress = () => {
// Supposons que vous voulez envoyer la valeur 'Hello' au parent
props.onEvent('Hello');
};
return ( return (
<View style={styles.view}> <View style={styles.view}>
<View id="Top" style={styles.horizontalAlignement}> <View style={styles.horizontalAlignment}>
<Text style={styles.text}>Selected ingredients</Text> <Text style={styles.text}>Selected ingredients</Text>
<Pressable onPress={handlePress}> <Pressable onPress={props.onEvent}>
<Image source={parameter} style={{ width: 15, height: 15 }} /> <Image source={parameter} style={{tintColor: "#3F3C42", resizeMode: "contain", flex: 1, marginRight: "8%"}}/>
</Pressable> </Pressable>
</View> </View>
<View id="IngredientList" style={styles.horizontalAlignement}> <View style={styles.horizontalAlignment}>
<Pressable onPress={decreaseCounter} id="GoLeft" style={{}}> <Pressable onPress={decreaseCounter}>
<Image source={bracketLeft} style={{ width: 40, height: 40 }} /> <Image source={bracketLeft} style={{width: 40, height: 40, tintColor: "#3F3C42", resizeMode: "contain"}}/>
</Pressable> </Pressable>
<FoodElementText title={props.ingredientList[cpt].title}/>
<FoodElementText title={props.listeIngredient[cpt]} /> <Pressable onPress={increaseCounter}>
<Image source={bracketRight} style={{width: 40, height: 40, tintColor: "#3F3C42", resizeMode: "contain"}}/>
<Pressable onPress={increaseCounter} id="GoRight" style={{}}>
<Image source={bracketRight} style={{ width: 40, height: 40 }} />
</Pressable> </Pressable>
</View> </View>
</View> </View>
@ -61,30 +54,26 @@ export default function SelectedIngredient(props: SelectedIngredientProps) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
view: { view: {
width: 350, width: "90%",
height: 110, paddingBottom: "5%",
borderRadius: 15, borderRadius: 15,
elevation: 3, borderColor: '#3F3C42',
borderWidth: 1,
borderColor: 'black',
display: 'flex',
flexWrap: 'wrap',
backgroundColor: '#E3DEC9', backgroundColor: '#E3DEC9',
alignItems: "center",
justifyContent: "center",
}, },
horizontalAlignement: { horizontalAlignment: {
display: 'flex', width: "90%",
height: 30,
width: 350,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-around', justifyContent: 'space-evenly',
alignItems: 'center', alignItems: 'center',
marginTop: 10, marginTop: "3%",
}, },
text: { text: {
fontSize: 14, fontSize: 15,
lineHeight: 21,
fontWeight: 'bold', fontWeight: 'bold',
letterSpacing: 0.25, color: '#3F3C42',
color: 'black', flex: 1,
marginLeft: "8%",
}, },
}); });

@ -7,11 +7,11 @@ export default function Separator (){
const styles = StyleSheet.create({ const styles = StyleSheet.create({
separator: { separator: {
width: 200, // Largeur de la ligne width: "90%",
backgroundColor: 'black', // Couleur de la ligne backgroundColor: '#3F3C42',
borderWidth : 1, borderWidth : 1,
marginLeft : 10, marginLeft : "5%",
marginRight : 10, marginRight : "5%",
}, },
}); });

@ -13,12 +13,11 @@ export default function TopBar(props) {
return ( return (
<Appbar.Header style={{backgroundColor: '#F2F0E4'}} > <Appbar.Header style={{backgroundColor: '#F2F0E4'}} >
<Appbar.BackAction onPress={_goBack} /> <Appbar.BackAction onPress={_goBack} color={"#3F3C42"}/>
<Appbar.Content title={props.title} /> <Appbar.Content title={props.title} color={"#3F3C42"}/>
{props.isVisible &&( {props.isVisible &&(
<><Appbar.Action icon="magnify" onPress={_handleSearch} /> <><Appbar.Action icon="magnify" onPress={_handleSearch} color={"#3F3C42"}/>
<Appbar.Action icon="dots-vertical" onPress={_handleMore} /> <Appbar.Action icon="dots-vertical" onPress={_handleMore} color={"#3F3C42"}/>
</> </>
)} )}
</Appbar.Header> </Appbar.Header>

@ -10,6 +10,47 @@ type ValidateButtonProps = {
} }
export default function ValidateButton(props: ValidateButtonProps) { export default function ValidateButton(props: ValidateButtonProps) {
let imageSource
if (props.image == "cook.png"){
imageSource = require('../assets/images/cook.png')
}
else if (props.image == "cross.png"){
imageSource = require('../assets/images/cross.png')
}
else if (props.image == "delete.png"){
imageSource = require('../assets/images/delete.png')
}
else if (props.image == "modify.png"){
imageSource = require('../assets/images/modify.png')
}
else if (props.image == "parameter.png"){
imageSource = require('../assets/images/parameter.png')
}
else if (props.image == "plus.png"){
imageSource = require('../assets/images/plus.png')
}
else if (props.image == "plus_small.png"){
imageSource = require('../assets/images/plus_small.png')
}
else if (props.image == "save.png"){
imageSource = require('../assets/images/save.png')
}
else if (props.image == "search.png"){
imageSource = require('../assets/images/search.png')
}
else if (props.image == "update.png"){
imageSource = require('../assets/images/update.png')
}
else if (props.image == "validate.png"){
imageSource = require('../assets/images/validate.png')
}
else if (props.image == "warehouse.png"){
imageSource = require('../assets/images/warehouse.png')
}
else{
imageSource = require('../assets/images/logo.png')
}
return ( return (
<Pressable style={{ <Pressable style={{
alignItems: 'center', alignItems: 'center',
@ -23,18 +64,18 @@ export default function ValidateButton(props: ValidateButtonProps) {
alignItems: 'center', alignItems: 'center',
justifyContent: "center", justifyContent: "center",
flexDirection: "row", flexDirection: "row",
padding: 5, padding: "2%",
paddingRight: 10,}}> paddingRight: "3%",}}>
<Image source={require('../assets/images/'+props.image)} style={{ <Image source={imageSource} style={{
height: 20, height: "90%",
width: 20, width: "9%",
marginLeft: 5, marginLeft: "2%",
marginRight: 10, marginRight: "3%",
resizeMode: "center", resizeMode: "contain",
tintColor: props.colour,}}> tintColor: props.colour,}}>
</Image> </Image>
<Text style={{ <Text style={{
fontSize: 20, fontSize: 15,
color: props.colour, color: props.colour,
}}>{props.title}</Text> }}>{props.title}</Text>
</View> </View>

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {StyleSheet, View} from 'react-native'; import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native';
import ProfileModification from '../components/ProfileModification'; import ProfileModification from '../components/ProfileModification';
import ValidateButton from '../components/ValidateButton'; import ValidateButton from '../components/ValidateButton';
import TopBar from '../components/TopBar'; import TopBar from '../components/TopBar';
@ -10,16 +10,17 @@ export default function CreateProfile(props) {
const all = [] const all = []
const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
return ( return (
<SafeAreaProvider> <SafeAreaProvider style={{flex: 1}}>
<TopBar title="Create Profile" isVisible="true"/> <TopBar title="Create Profile" isVisible="true"/>
<View style={styles.container}> <ScrollView>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: 20}}/> <View style={{marginTop: "6%"}}/>
<ProfileModification name="" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification> <ProfileModification name="" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
<View style={{marginTop: 20}}/> <View style={{marginTop: "3%"}}/>
<ValidateButton title="Create Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton> <ValidateButton title="Create Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
<View style={{marginTop: "20%"}}/>
</LinearGradient> </LinearGradient>
</View> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }
@ -37,7 +38,7 @@ const styles = StyleSheet.create({
height: "100%", height: "100%",
width: "100%", width: "100%",
flex: 1, flex: 1,
padding: 10, padding: "2%",
paddingTop: 0, paddingTop: 0,
}, },
}); });

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {StyleSheet, View, Text} from 'react-native'; import {StyleSheet, View, Text, ScrollView, useWindowDimensions} from 'react-native';
import ProfileModification from '../components/ProfileModification'; import ProfileModification from '../components/ProfileModification';
import ValidateButton from '../components/ValidateButton'; import ValidateButton from '../components/ValidateButton';
import TopBar from '../components/TopBar'; import TopBar from '../components/TopBar';
@ -17,55 +17,72 @@ export default function FiltersSelection(props) {
{name: "David Martinez", avatar: "plus_small.png", isActive: "flex"}, {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
] ]
let cptActive = 0
profiles.forEach(function (value) {
if(value.isActive=="flex"){
cptActive=cptActive+1
}
})
const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
const allProfiles = [{value: "Skimmed Milk"}, {value: "Nuts"}] const allProfiles = [{value: "Skimmed Milk"}, {value: "Nuts"}]
const dieProfiles = [{value: "Porkless"}, {value: "Pescatarian"}] const dieProfiles = [{value: "Porkless"}, {value: "Pescatarian"}]
const dieAdd = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Vegan"}, {value: "Vegetarian"}] function isInProfileDiets(element, index, array) {
var retType = true
dieProfiles.forEach(function (diets) {
if(diets.value==element.value){
retType = false
}
})
return retType
}
const dieAdd = die.filter(isInProfileDiets);
const allAdd = [] const allAdd = []
return ( return (
<SafeAreaProvider> <SafeAreaProvider style={{flex: 1}}>
<TopBar title="Filters Selection" isVisible="true"/> <TopBar title="Filters Selection" isVisible="true"/>
<View style={styles.container}> <ScrollView>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: 20}}/> <View style={{marginTop: "6%"}}/>
<View style={styles.profilesSelection}> <View style={styles.profilesSelection}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Profiles</Text> <Text style={styles.filters}>Profiles</Text>
<Text style={styles.nbSelected}>2 selected, 1 waiting</Text> <Text style={styles.nbSelected}>{cptActive} selected, 1 waiting</Text>
</View> </View>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ProfileSelection listProfile={profiles} disableSelection={false}/> <ProfileSelection listProfile={profiles} disableSelection={false}/>
<View style={{marginTop: 20}}/> <View style={{marginTop: "4%"}}/>
<ValidateButton title="Change Selected Profiles" image="update.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton> <ValidateButton title="Change Selected Profiles" image="update.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
</View> </View>
<View style={{marginTop: 20}}/> <View style={{marginTop: "6%"}}/>
<View style={styles.background}> <View style={styles.background}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Filters from Profiles</Text> <Text style={styles.filters}>Filters from Profiles</Text>
</View> </View>
<ListWithoutSelect title="Diets" content={dieProfiles}></ListWithoutSelect> <ListWithoutSelect title="Diets" content={dieProfiles}></ListWithoutSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ListWithoutSelect title="Allergies" content={allProfiles}></ListWithoutSelect> <ListWithoutSelect title="Allergies" content={allProfiles}></ListWithoutSelect>
</View> </View>
<View style={{marginTop: 20}}/> <View style={{marginTop: "6%"}}/>
<View style={styles.background}> <View style={styles.background}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Additional Filters</Text> <Text style={styles.filters}>Additional Filters</Text>
<Text style={styles.nbSelected}>3 selected</Text> <Text style={styles.nbSelected}>{dieAdd.length} available</Text>
</View> </View>
<ListSelect title="Diets" content={dieAdd}></ListSelect> <ListSelect title="Diets" content={dieAdd}></ListSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ListWithoutSelect title="Allergies" content={allAdd}></ListWithoutSelect> <ListWithoutSelect title="Allergies" content={allAdd}></ListWithoutSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton> <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
</View> </View>
<View style={{marginTop: 20}}/> <View style={{marginTop: "6%"}}/>
<ValidateButton title="Save Filters" image="save.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton> <ValidateButton title="Save Filters" image="save.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
<View style={{marginTop: "20%"}}/>
</LinearGradient> </LinearGradient>
</View> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }
@ -83,53 +100,45 @@ const styles = StyleSheet.create({
height: "100%", height: "100%",
width: "100%", width: "100%",
flex: 1, flex: 1,
padding: 10, padding: "2%",
paddingTop: 0, paddingTop: 0,
}, },
background: { background: {
//maxWidth: 370,
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: 20, borderRadius: 20,
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
padding: 10, padding: "3%",
paddingBottom: 0, marginHorizontal: "3%",
marginHorizontal: 10,
}, },
filterBar: { filterBar: {
flexDirection: "row", flexDirection: "row",
width: 300, width: "85%",
paddingTop: 10, paddingTop: "3%",
paddingBottom: 5, paddingBottom: "2%",
alignItems: "flex-end", alignItems: "flex-end",
justifyContent: "center", justifyContent: "center",
flex: 0.2,
}, },
filters: { filters: {
flex: 0.8,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
flex: 1, flex: 1,
padding: 5,
paddingLeft: 0,
paddingBottom: 0,
}, },
nbSelected: { nbSelected: {
fontSize: 11, fontSize: 11,
//flex: 0.2,
color: "#3F3C42", color: "#3F3C42",
textAlign: "right", textAlign: "right",
}, },
profilesSelection: { profilesSelection: {
//maxWidth: 370,
flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: 20, borderRadius: 20,
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
marginHorizontal: 10, marginHorizontal: "3%",
paddingBottom: "3%",
}, },
}); });

@ -1,5 +1,5 @@
import {React, useState} from 'react'; import {React, useState} from 'react';
import {StyleSheet, View, Text, Pressable, Image} from 'react-native'; import {StyleSheet, View, Text, Pressable, Image, ScrollView, SafeAreaView} from 'react-native';
import ProfileModification from '../components/ProfileModification'; import ProfileModification from '../components/ProfileModification';
import ValidateButton from '../components/ValidateButton'; import ValidateButton from '../components/ValidateButton';
import TopBar from '../components/TopBar'; import TopBar from '../components/TopBar';
@ -41,15 +41,15 @@ export default function HomePage(props) {
}; };
return ( return (
<SafeAreaProvider> <SafeAreaProvider style={{flex: 1}}>
<View style={styles.topBar}> <ScrollView>
<Image source={require("../assets/images/logo.png")} style={{width: 40, height: 40, flex: 0.1, marginLeft: 10}}/> <View style={styles.topBar}>
<Text style={styles.appName}>LeftOvers</Text> <Image source={require("../assets/images/logo.png")} style={{width: "100%", height: "100%", flex: 0.1, marginLeft: "5%", resizeMode: "contain"}}/>
<Image source={require("../assets/images/logo.png")} style={{width: 40, height: 40, flex: 0.1, marginRight: 10}}/> <Text style={styles.appName}>LeftOvers</Text>
</View> <Image source={require("../assets/images/logo.png")} style={{width: "100%", height: "100%", flex: 0.1, marginRight: "5%", resizeMode: "contain"}}/>
<View style={styles.container}> </View>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<View style={{marginTop: 20}}/> <View style={styles.separator}/>
<View style={styles.welcome}> <View style={styles.welcome}>
<View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}> <View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
<View style={{flexDirection: "row"}}> <View style={{flexDirection: "row"}}>
@ -60,57 +60,57 @@ export default function HomePage(props) {
<Text style={styles.text}>Glad to see you again!</Text> <Text style={styles.text}>Glad to see you again!</Text>
</View> </View>
</View> </View>
<View style={{marginTop: 20}}/> <View style={styles.separator}/>
<View style={styles.profilesSelection}> <View style={styles.profilesSelection}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Profiles</Text> <Text style={styles.filters}>Profiles</Text>
<Text style={styles.nbSelected}>2 selected</Text> <Text style={styles.nbSelected}>2 selected</Text>
</View> </View>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ProfileSelection listProfile={profiles} disableSelection={true}/> <ProfileSelection listProfile={profiles} disableSelection={true}/>
<View style={{marginTop: 20}}/> <View style={{marginTop: "4%"}}/>
<ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9"/> <ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9"/>
</View> </View>
<View style={{marginTop: 20}}/> <View style={styles.separator}/>
<View style={styles.profilesSelection}> <View style={styles.profilesSelection}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Ingredient Stocks</Text> <Text style={styles.filters}>Ingredient Stocks</Text>
</View> </View>
<View style={{marginTop: 10}}/> <View style={{marginTop: "4%"}}/>
<ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9"/> <ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9"/>
</View> </View>
<View style={{marginTop: 20}}/> <View style={styles.separator}/>
<View style={styles.profilesSelection}> <View style={styles.profilesSelection}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Cooking</Text> <Text style={styles.filters}>Cooking</Text>
</View> </View>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<View style={styles.ingredientSelection}> <View style={styles.ingredientSelection}>
<Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text> <Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
<View style={{flexDirection: "row", padding: 10, justifyContent: "center", alignItems: "center"}}> <View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
<Pressable onPress={decreaseCounter}> <Pressable onPress={decreaseCounter}>
<Image source={bracketLeft} style={{ width: 40, height: 40 }} /> <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} />
</Pressable> </Pressable>
<FoodElementText title={ingredientList[cpt].title}/> <FoodElementText title={ingredientList[cpt].title}/>
<Pressable onPress={increaseCounter}> <Pressable onPress={increaseCounter}>
<Image source={bracketRight} style={{ width: 40, height: 40 }} /> <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
</Pressable> </Pressable>
</View> </View>
</View> </View>
<View style={{marginTop: 15}}/> <View style={{marginTop: "4%"}}/>
<ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9"/> <ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9"/>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9"/> <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9"/>
</View> </View>
<View style={{marginBottom: "20%"}}/>
</LinearGradient> </LinearGradient>
</View> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
height: "100%",
width: "100%", width: "100%",
flex: 1, flex: 1,
backgroundColor: '#3F3C42', backgroundColor: '#3F3C42',
@ -118,30 +118,27 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
}, },
linearGradient: { linearGradient: {
height: "100%",
width: "100%", width: "100%",
flex: 1, flex: 1,
padding: 10, padding: "2%",
paddingTop: 0, paddingTop: 0,
}, },
separator: {
marginTop: "6%"
},
filterBar: { filterBar: {
flexDirection: "row", flexDirection: "row",
width: 300, width: "85%",
paddingTop: 10, paddingTop: "3%",
paddingBottom: 5, paddingBottom: "2%",
alignItems: "flex-end", alignItems: "flex-end",
justifyContent: "center", justifyContent: "center",
flex: 0.2,
}, },
filters: { filters: {
flex: 0.8,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
flex: 1, flex: 1,
padding: 5,
paddingLeft: 0,
paddingBottom: 0,
}, },
nbSelected: { nbSelected: {
fontSize: 11, fontSize: 11,
@ -150,23 +147,22 @@ const styles = StyleSheet.create({
}, },
profilesSelection: { profilesSelection: {
flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: 20, borderRadius: 20,
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
paddingTop: 5, marginHorizontal: "3%",
marginHorizontal: 10, paddingBottom: "3%",
}, },
welcome: { welcome: {
flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: 20, borderRadius: 20,
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
paddingVertical: 10, paddingVertical: "3%",
paddingHorizontal: 25, paddingHorizontal: "7%",
marginHorizontal: 10, marginHorizontal: "3%",
}, },
text: { text: {
fontSize: 20, fontSize: 20,
@ -176,10 +172,9 @@ const styles = StyleSheet.create({
fontSize: 20, fontSize: 20,
fontWeight: "bold", fontWeight: "bold",
color: '#59BDCD', color: '#59BDCD',
textAlign: "left",
}, },
ingredientSelection: { ingredientSelection: {
flexDirection: 'column',
width: "90%", width: "90%",
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -187,8 +182,7 @@ const styles = StyleSheet.create({
backgroundColor: '#E3DEC9', backgroundColor: '#E3DEC9',
borderWidth: 2, borderWidth: 2,
borderColor: "#ACA279", borderColor: "#ACA279",
marginHorizontal: 10, padding: "2%"
padding: 5
}, },
appName: { appName: {
@ -201,9 +195,10 @@ const styles = StyleSheet.create({
topBar: { topBar: {
flexDirection: 'row', flexDirection: 'row',
width: "100%", width: "100%",
height: "11%",
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
padding: 5, paddingTop: "8%",
}, },
}); });

@ -1,128 +1,133 @@
import React from 'react'; 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 {SafeAreaProvider} from 'react-native-safe-area-context';
import TopBar from '../components/TopBar'; import TopBar from '../components/TopBar';
import {Searchbar} from 'react-native-paper'; import {Searchbar} from 'react-native-paper';
import {LinearGradient} from 'expo-linear-gradient';
import brochette from '../assets/images/brochette.png'; import brochette from '../assets/images/brochette.png';
import FoodElementText from '../components/FoodElementText'; import FoodElementText from '../components/FoodElementText';
import CustomButton from '../components/CustomButton'; import CustomButton from '../components/CustomButton';
import plus from '../assets/images/plus.png'; import plus from '../assets/images/plus_small.png';
import moins from '../assets/images/minus.png'; import minus from '../assets/images/minus.png';
import meat from '../assets/images/meat_icon.png'; import meat from '../assets/images/meat_icon.png';
import vegetable from '../assets/images/vegetable_icon.png'; import vegetable from '../assets/images/vegetable_icon.png';
import fruit from '../assets/images/fruit_icon.png'; import fruit from '../assets/images/fruit_icon.png';
export default function IngredientSelection(props) { export default function IngredientSelection(props) {
const [searchQuery, setSearchQuery] = React.useState(''); const [searchQuery, setSearchQuery] = React.useState('');
const onChangeSearch = query => setSearchQuery(query); 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} type ItemProps = {value: string}
const AvailaibleItem = ({value}: ItemProps) => ( const AvailableItem = ({value}: any) => (
<><View style={styles.horizontalAlignement}> <>
<FoodElementText title={value} /> <View style={styles.horizontalAlignment}>
<Pressable> <FoodElementText title={value.title}/>
<Image source={plus} style={{ width: 20, height: 20 }} /> <Pressable>
</Pressable> <Image source={plus} style={{width: 20, height: 20, resizeMode: "contain", marginRight: "3%"}}/>
</View><View style={{ height: 30 }}></View></> </Pressable>
) </View>
<View style={{height: 20}}/>
</>
)
const ChooseItem = ({value}: ItemProps) => ( const ChooseItem = ({value}: any) => (
<><View style={styles.horizontalAlignement}> <>
<FoodElementText title={value} /> <View style={styles.horizontalAlignment}>
<Pressable> <FoodElementText title={value.title}/>
<Image source={moins} style={{ width: 20, height: 20 }} /> <Pressable>
</Pressable> <Image source={minus} style={{width: 20, height: 20, resizeMode: "contain", marginRight: "3%"}}/>
</View><View style={{ height: 30 }}></View></> </Pressable>
) </View>
<View style={{height: 20}}/>
</>
)
return ( return (
<SafeAreaProvider> <SafeAreaProvider style={{flex: 1}}>
<TopBar title="Ingredient selection" /> <TopBar title="Ingredient selection"/>
<View style={styles.page}> <ScrollView>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={styles.element}> <View style={{marginTop: "6%"}}/>
<View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}> <View style={styles.element}>
<Pressable> <View style={[styles.horizontalAlignment, {justifyContent: 'center'}]}>
<Image source={meat} style={{ width: 30, height: 30 }} /> <Pressable>
</Pressable> <Image source={meat} style={{width: 30, height: 30, resizeMode: "contain"}}/>
<Pressable> </Pressable>
<Image source={vegetable} style={{ width: 30, height: 30 }} /> <View style={{marginHorizontal: "1%"}}/>
</Pressable> <Pressable>
<Pressable> <Image source={vegetable} style={{width: 30, height: 30, resizeMode: "contain"}}/>
<Image source={fruit} style={{ width: 30, height: 30 }} /> </Pressable>
</Pressable> <View style={{marginHorizontal: "1%"}}/>
</View> <Pressable>
<View> <Image source={fruit} style={{width: 30, height: 30, resizeMode: "contain"}}/>
<Searchbar </Pressable>
placeholder="Search" </View>
onChangeText={onChangeSearch} <View>
value={searchQuery} <Searchbar
style={{margin: 10, placeholder="Search"
backgroundColor: '#F2F0E4', onChangeText={onChangeSearch}
borderWidth : 1, value={searchQuery}
borderColor: "#ACA279", style={{margin: "3%",
borderRadius: 15, backgroundColor: '#F2F0E4',
height: 50, borderWidth : 1,
}}/> borderColor: "#ACA279",
</View> borderRadius: 15,
<View style={{ flex: 1}} > }}/>
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}> </View>
{props.listIngredient.map((source, index) => ( <View style={{flex: 1}}>
<AvailaibleItem key={index} value={source}></AvailaibleItem> <ScrollView>
))} {ingredientList.map((title, index) => (
</ScrollView> <AvailableItem key={index} value={title}></AvailableItem>
</View> ))}
<View style={{ height: 20 }}></View> </ScrollView>
</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>
</View> </View>
<View style={{marginTop: "6%"}}/>
<View style={{ height: 5 }}></View> <View style={styles.element}>
<View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}>
<View style={{ flex: 1}} > <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}> </View>
{props.listIngredient.map((source, index) => ( <View style={{flex: 1}}>
<ChooseItem key={index} value={source}></ChooseItem> <ScrollView>
))} {availableList.map((title, index) => (
</ScrollView> <ChooseItem key={index} value={title}></ChooseItem>
</View> ))}
<View style={{ height: 20 }}></View> </ScrollView>
</View> </View>
</View>
<View style={{ height: 15 }}></View> <View style={{marginTop: "8%"}}></View>
<CustomButton title="Find a recipe"/> <CustomButton title="Find a recipe"/>
</View> <View style={{marginBottom: "20%"}}></View>
</SafeAreaProvider> </LinearGradient>
</ScrollView>
</SafeAreaProvider>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
page: { linearGradient: {
flex: 1, width: "100%",
backgroundColor: '#59BDCD', flex: 1,
alignItems: 'center', padding: "3%",
display: 'flex', paddingTop: 0,
flexWrap: 'wrap', alignItems: "center",
padding: 20, justifyContent: "flex-start",
}, },
element: { element: {
width: "100%",
backgroundColor:'#F2F0E4', backgroundColor:'#F2F0E4',
borderRadius: 30, borderRadius: 30,
}, },
horizontalAlignement: { horizontalAlignment: {
display: 'flex', width: "100%",
height: 30,
width: 350,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-around', justifyContent: 'space-around',
alignItems: 'center', alignItems: 'center',
marginTop: 15, marginTop: "3%",
} }
}); });

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {StyleSheet, View} from 'react-native'; import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native';
import ProfileModification from '../components/ProfileModification'; import ProfileModification from '../components/ProfileModification';
import ValidateButton from '../components/ValidateButton'; import ValidateButton from '../components/ValidateButton';
import TopBar from '../components/TopBar'; import TopBar from '../components/TopBar';
@ -10,16 +10,17 @@ export default function ModifyProfile(props) {
const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}] 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 die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
return ( return (
<SafeAreaProvider> <SafeAreaProvider style={{flex: 1}}>
<TopBar title="Modify Profile" isVisible="true"/> <TopBar title="Modify Profile" isVisible="true"/>
<View style={styles.container}> <ScrollView style={{minHeight: useWindowDimensions().height}}>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: 20}}/> <View style={{marginTop: "6%"}}/>
<ProfileModification name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification> <ProfileModification name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
<View style={{marginTop: 10}}/> <View style={{marginTop: "3%"}}/>
<ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton> <ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
<View style={{marginBottom: "20%"}}/>
</LinearGradient> </LinearGradient>
</View> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }
@ -37,7 +38,7 @@ const styles = StyleSheet.create({
height: "100%", height: "100%",
width: "100%", width: "100%",
flex: 1, flex: 1,
padding: 10, padding: "2%",
paddingTop: 0, paddingTop: 0,
}, },
}); });

@ -1,12 +1,12 @@
import {React, useState} from 'react'; import {React, useState} from 'react';
import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native'; import {StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions} from 'react-native';
import ProfileDetails from '../components/ProfileDetails'; import ProfileDetails from '../components/ProfileDetails';
import ProfileDelete from '../components/ProfileDelete'; import ProfileDelete from '../components/ProfileDelete';
import TopBar from '../components/TopBar'; import TopBar from '../components/TopBar';
import {LinearGradient} from 'expo-linear-gradient'; import {LinearGradient} from 'expo-linear-gradient';
import {SafeAreaProvider} from 'react-native-safe-area-context'; import {SafeAreaProvider} from 'react-native-safe-area-context';
export default function ModifyProfile(props) { export default function Profiles(props) {
const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}] const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}] const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
@ -23,7 +23,7 @@ export default function ModifyProfile(props) {
const [opacity, setOpacity] = useState(1); const [opacity, setOpacity] = useState(1);
const raisePopUp = () => { const raisePopUp = () => {
setVisible(true) setVisible(true)
setOpacity(0.4) setOpacity(0.3)
} }
const erasePopUp = () => { const erasePopUp = () => {
setVisible(false) setVisible(false)
@ -31,20 +31,19 @@ export default function ModifyProfile(props) {
} }
return ( return (
<SafeAreaProvider> <SafeAreaProvider style={{flex: 1}}>
<View style={styles.container}> <ScrollView>
<View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}> <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
<TopBar title="Profiles" isVisible="true"/> <TopBar title="Profiles" isVisible="true"/>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: 10}}/> <View style={styles.separator}/>
<ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails> <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/> <View style={styles.separator}/>
<ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails> <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/> <View style={styles.separator}/>
<ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails> <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/> <View style={styles.separator}/>
<ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails> <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/>
<View style={styles.modal}> <View style={styles.modal}>
<Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}> <Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
<View style={styles.modal}> <View style={styles.modal}>
@ -57,13 +56,13 @@ export default function ModifyProfile(props) {
<View style={styles.decisionBar}> <View style={styles.decisionBar}>
<Pressable onPress={erasePopUp} style={{flex:0.5}}> <Pressable onPress={erasePopUp} style={{flex:0.5}}>
<View style={styles.yesButton}> <View style={styles.yesButton}>
<Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: 30, width: 30, flex: 0.2, margin: 10}}/> <Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
<Text style={styles.yesText}>Yes</Text> <Text style={styles.yesText}>Yes</Text>
</View> </View>
</Pressable> </Pressable>
<Pressable onPress={erasePopUp} style={{flex:0.5}}> <Pressable onPress={erasePopUp} style={{flex:0.5}}>
<View style={styles.noButton}> <View style={styles.noButton}>
<Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: 30, width: 30, flex: 0.2, margin: 10}}/> <Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
<Text style={styles.noText}>No</Text> <Text style={styles.noText}>No</Text>
</View> </View>
</Pressable> </Pressable>
@ -73,9 +72,10 @@ export default function ModifyProfile(props) {
</View> </View>
</Modal> </Modal>
</View> </View>
<View style={{marginBottom: "20%"}}/>
</LinearGradient> </LinearGradient>
</View> </View>
</View> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }
@ -88,47 +88,46 @@ const styles = StyleSheet.create({
backgroundColor: '#3F3C42', backgroundColor: '#3F3C42',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
marginBottom: 10,
}, },
linearGradient: { linearGradient: {
height: "100%", height: "100%",
width: "100%", width: "100%",
flex: 1, flex: 1,
padding: 10, padding: "2%",
paddingTop: 0, paddingTop: 0,
}, },
separator: {
marginTop: "6%"
},
modal: { modal: {
position: 'absolute', position: 'absolute',
top: '50%', top: '8%',
left: '50%',
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
width: "100%", width: "100%",
transform: [{ translateX: -207 }, { translateY: -140 }],
}, },
viewModal: { viewModal: {
flexDirection: "column", flexDirection: "column",
padding: 10, padding: "3%",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
width: "100%", width: "100%",
height: 200, flex: 1,
}, },
profileValidation: { profileValidation: {
width: "100%", width: "100%",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
paddingBottom: 20, marginBottom: "6%",
flex: 0.7,
}, },
decisionBarVertical: { decisionBarVertical: {
flexDirection: "column", flexDirection: "column",
width: "100%", width: "90%",
padding: 10, padding: "3%",
height: "100%",
borderRadius: 15, borderRadius: 15,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
@ -140,23 +139,21 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flex: 0.3, flex: 0.3,
padding: 5, marginBottom: "2%",
marginHorizontal: "2%",
}, },
decisionBar: { decisionBar: {
flexDirection: "row", flexDirection: "row",
flex: 0.7, flex: 0.7,
width: "100%", width: "100%",
height: "20%",
borderRadius: 15,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
backgroundColor: "#F2F0E4",
}, },
yesButton: { yesButton: {
flexDirection: "row", flexDirection: "row",
flex: 0.5, flex: 0.5,
padding: 10, padding: "2%",
marginHorizontal: 10, marginHorizontal: "5%",
width: "90%", width: "90%",
borderRadius: 20, borderRadius: 20,
alignItems: "center", alignItems: "center",
@ -169,13 +166,13 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flex: 0.7, flex: 0.7,
padding: 5, padding: "4%",
}, },
noButton: { noButton: {
flexDirection: "row", flexDirection: "row",
flex: 0.5, flex: 0.5,
padding: 10, padding: "2%",
marginHorizontal: 10, marginHorizontal: "5%",
width: "90%", width: "90%",
borderRadius: 20, borderRadius: 20,
alignItems: "center", alignItems: "center",
@ -188,6 +185,6 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flex: 0.7, flex: 0.7,
padding: 5, padding: "4%",
}, },
}); });

@ -1,71 +1,93 @@
import React from 'react'; import React from 'react';
import { View, StyleSheet, Text} from 'react-native'; import {View, StyleSheet, ScrollView, useWindowDimensions, Text} from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context'; import {SafeAreaProvider } from 'react-native-safe-area-context';
import {LinearGradient} from 'expo-linear-gradient';
import TopBar from '../components/TopBar'; import TopBar from '../components/TopBar';
import RecipeElementReduce from '../components/RecipeElementReduce'; 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) { 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 ( return (
<SafeAreaProvider> <SafeAreaProvider>
<TopBar title="Recipe Detail"/> <TopBar title="Recipe Detail"/>
<View style={styles.page}> <ScrollView>
<RecipeElementReduce <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
title={props.title} <View style={{marginTop: "6%"}}>
number={props.number} <RecipeElementReduce title="Meat Stick" number="63" duration="15 minutes"/>
duree={props.duree}/> </View>
<View style={styles.separator}/>
<View style={{height: 20}}></View> <View style={styles.background}>
<View style={styles.filterBar}>
<View style={styles.element}> <Text style={styles.filters}>Preparation</Text>
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}> </View>
<Text style={{fontSize: 20, color: '#ACA279'}}>Preparation</Text> <ListWithoutSelect title="Ingredients" content={ing}></ListWithoutSelect>
</View> <View style={{marginTop: "3%"}}/>
<View style={{margin: 20}}> <ListWithoutSelect title="Utensils" content={ute}></ListWithoutSelect>
<AllergiesTab title="Ingredient" content={props.ingredient}></AllergiesTab> <View style={{marginTop: "3%"}}/>
<View style={{height: 5}}></View> </View>
<AllergiesTab title="Ustensils" content={props.ustensils}></AllergiesTab> <View style={styles.separator}/>
</View> <View style={styles.background}>
</View > <View style={styles.filterBar}>
<Text style={styles.filters}>Cooking</Text>
<View style={{height: 20}}></View> </View>
<ListWithoutSelect title="Steps" content={ste}></ListWithoutSelect>
<View style={styles.element}> <View style={{marginTop: "3%"}}/>
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}> </View>
<Text style={{fontSize: 20, color: '#ACA279'}}>Cooking</Text> <View style={{marginBottom: "20%"}}/>
</View> </LinearGradient>
<View style={{margin: 20}}> </ScrollView>
<AllergiesTab title="Steps" content={props.steps}></AllergiesTab>
</View>
</View>
</View>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
page: { linearGradient: {
flex: 1, width: "100%",
backgroundColor: '#59BDCD', flex: 1,
alignItems: 'center', alignItems: "center",
display: 'flex', justifyContent: "flex-start"
flexWrap: 'wrap', },
padding: 20, 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: { nbSelected: {
backgroundColor:'#F2F0E4', fontSize: 11,
borderRadius: 30, color: "#3F3C42",
textAlign: "right",
}, },
horizontalAlignement: {
display: 'flex',
height: 30,
width: 350,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
marginTop: 10,
}
}); });

@ -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 containerStyle = { const [colorFilters, setColorFilters] = useState("#3F3C42");
backgroundColor: 'white',
height: 450,
width: 380,
};
const handleChildEvent = (value) => { const die = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Gluten free"}, {value: "Porkless"}]
setVisible(!visible) const all = []
const containerStyle = {
//minHeight: useWindowDimensions().height/2,
//width: useWindowDimensions().width,
height: "75%",
width: "100%",
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
}; };
const handleChildEventGoFilters = (value) => { const handleChildEvent = () => {
setVisible(!visible)
}
const handleChildEventGoFilters = () => {
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>
<SelectedIngredient <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
listeIngredient={props.list} <View style={{marginTop: "6%"}}/>
listeImage={imageList} <SelectedIngredient
onEvent={handleChildEvent} ingredientList={ingredientList}
/> onEvent={handleChildEvent}/>
<View style={{ marginTop: 100 }}> <ScrollView style={{marginTop: "6%"}} horizontal={true}>
<RecipeElement <View style={{marginHorizontal: 10}}/>
number="13" <RecipeElement
title="Pizza with Pineapples" number="63"
imageList={imageList} title="Meat Stick"
textList={props.list} textList={ingredientList}
description="delicious plate that will please you" description="Delicious stick with 4 meats. Accessible for beginners. 20 min or less to cook."/>
style={styles.element} <View style={{marginHorizontal: 10}}/>
/> <RecipeElement
</View> number="03"
</View> title="Vichyssoise"
<View style={styles.modal}> textList={ingredientListV2}
<PaperProvider> description="Cold soup of vegetables. Difficult recipe. Not advised to beginners. 1h or more."/>
<Portal> <View style={{marginHorizontal: 10}}/>
<Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}> </ScrollView>
<ParameterTopBar onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients}></ParameterTopBar> <View style={{marginBottom: "20%"}}/>
</LinearGradient>
{visibleIngredients && ( </ScrollView>
<View style={[styles.page, { justifyContent: 'space-between' }]}> <Portal>
{imageElements} <Modal visible={visible} onDismiss={handleChildEvent} contentContainerStyle={containerStyle} style={{marginTop: 0, justifyContent: "flex-end"}}>
<View id="IngredientList" style={[styles.horizontalAlignement, {marginTop: 10}]}> <ParameterTopBar onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients} colorFilters={colorFilters} colorIngredients={colorIngredients}/>
<Pressable onPress={decreaseCounter} id="GoLeft" > {visibleIngredients &&(
<Image source={bracketLeft} style={{ width: 20, height: 20 }} /> <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
</Pressable> {imageElements}
<View style={[styles.horizontalAlignment, {marginTop: "6%"}]}>
<Pressable onPress={increaseCounter} id="GoRight"> <Pressable onPress={decreaseCounter}>
<Image source={bracketRight} style={{ width: 20, height: 20 }} /> <Image source={bracketLeft} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: "#3F3C42"}}/>
</Pressable> </Pressable>
</View> <CustomButton title="Save"></CustomButton>
<Pressable onPress={increaseCounter}>
<View> <Image source={bracketRight} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: "#3F3C42"}}/>
<CustomButton title="Save"></CustomButton> </Pressable>
</View>
</View> </View>
)} </LinearGradient>
{visibleFilters &&( )}
<View style={[styles.page, { justifyContent: 'space-between', alignContent: 'center'}]}> {visibleFilters &&(
<ScrollView>
<View style={{backgroundColor: '#F2F0E4', zIndex: 2}}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 20}]}> <View style={{marginTop: "10%"}}/>
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text> <View style={styles.background}>
</View> <View style={styles.filterBar}>
<View style={{alignContent: 'center', justifyContent: 'space-between', margin: 10}}> <Text style={styles.filters}>Additional Filters</Text>
<DietsTab title="Diets" content={props.diets}></DietsTab> <Text style={styles.nbSelected}>{die.length} selected</Text>
<View style={{height: 5}}></View>
<DietsTab title="Allergy" content={props.allergy}></DietsTab>
</View>
</View> </View>
<View style={{zIndex: 1, position: 'absolute', marginTop: 300}} > <ListWithoutSelect title="Diets" content={die}></ListWithoutSelect>
<CustomButton title="Save"></CustomButton> <View style={{marginTop: "3%"}}/>
</View> <ListWithoutSelect title="Allergies" content={all}></ListWithoutSelect>
</View> <View style={{marginTop: "3%"}}/>
)} <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
</Modal> </View>
</Portal> <View style={{marginTop: "6%"}}/>
</PaperProvider> <View>
</View> <CustomButton title="Save"></CustomButton>
</View>
<View style={{marginTop: "43%"}}/>
</LinearGradient>
</ScrollView>
)}
</Modal>
</Portal>
</PaperProvider>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
page: { linearGradient: {
flex: 1, width: "100%",
backgroundColor: '#59BDCD', flex: 1,
alignItems: 'center', //padding: "2%",
display: 'flex', paddingTop: 0,
flexWrap: 'wrap', alignItems: "center",
padding: 20, justifyContent: "center"
}, },
element: {
marginTop: 20, 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",
}, },
backdrop: { filters: {
backgroundColor: 'rgba(0, 0, 0, 0.5)', fontSize: 20,
color: '#ACA279',
flex: 1,
}, },
nbSelected: {
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",
},
}); });

@ -0,0 +1,4 @@
{
"compilerOptions": {},
"extends": "expo/tsconfig.base"
}
Loading…
Cancel
Save