Sae_LeftOvers
/
LeftOvers
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Ingredient Selection Page (Need merge)

Browse Source
pull/20/head
Louison PARANT 2 years ago
parent 65d4cf7cd1
commit 6b0565bf94
9 changed files with 234 additions and 192 deletions
Show Stats Download Patch File Download Diff File

8
LeftOvers/App.tsx
Unescape View File

@ -6,7 +6,8 @@ import ModifyProfile from './screens/ModifyProfile';
import CreateProfile from './screens/CreateProfile';
import FiltersSelection from './screens/FiltersSelection';
import RecipeSuggestion from './screens/RecipeSuggestion';
import RecipeDetail from './screens/RecipeSuggestion';
import RecipeDetails from './screens/RecipeDetails';
import IngredientSelection from './screens/IngredientSelection';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {LinearGradient} from 'expo-linear-gradient';
@ -17,7 +18,8 @@ export default function App(props) {
//<ModifyProfile/>
//<CreateProfile/>
//<FiltersSelection/>
<RecipeSuggestion/>
//<RecipeDetail/>
//<RecipeSuggestion/>
//<RecipeDetails/>
<IngredientSelection/>
);
}

BIN
LeftOvers/assets/images/fruit_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 941 B

BIN
LeftOvers/assets/images/meat_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
LeftOvers/assets/images/vegetable_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 939 B

2
LeftOvers/components/RecipeElement.tsx
Unescape View File

@ -78,7 +78,7 @@ const styles = StyleSheet.create({
borderRadius: 40,
borderWidth: 2,
padding: "5%",
borderColor: '#3F3C42',
borderColor: '#73692A',
alignItems: 'center',
justifyContent: "center",
},

74
LeftOvers/components/RecipeElementReduce.tsx
Unescape View File

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

233
LeftOvers/screens/IngredientSelection.tsx
Unescape View File

@ -1,144 +1,147 @@
import React from 'react';
import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native';
import {View, StyleSheet, Text, Image, Pressable, ScrollView, useWindowDimensions} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import TopBar from '../components/TopBar';
import {LinearGradient} from 'expo-linear-gradient';
import {Searchbar} from 'react-native-paper';
import brochette from '../assets/images/brochette.png';
import brochette from '../assets/images/brochette.png';
import FoodElementText from '../components/FoodElementText';
import CustomButton from '../components/CustomButton';
export default function IngredientSelection() {
const [searchQuery, setSearchQuery] = React.useState('');
const onChangeSearch = query => setSearchQuery(query);
return (
<SafeAreaProvider>
<TopBar title="Ingredient selection" />
<View style={styles.page}>
<View style={styles.element}>
<View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
<Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} />
</Pressable>
<Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} />
</Pressable>
<Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} />
</Pressable>
<Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} />
</Pressable>
</View>
<View>
<Searchbar
placeholder="Search"
onChangeText={onChangeSearch}
value={searchQuery}
style={{margin: 10,
backgroundColor: '#F2F0E4',
borderWidth : 1,
borderColor: "#ACA279",
borderRadius: 15,
height: 50,
}}/>
</View>
<View style={{ flex: 1}} >
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
<TopBar title="Ingredient selection"/>
<ScrollView>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: "6%"}}/>
<View style={styles.element}>
<View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
<Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} />
</Pressable>
<Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} />
</Pressable>
<Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} />
</Pressable>
<Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} />
</Pressable>
</View>
<View>
<Searchbar
placeholder="Search"
onChangeText={onChangeSearch}
value={searchQuery}
style={{margin: 10,
backgroundColor: '#F2F0E4',
borderWidth : 1,
borderColor: "#ACA279",
borderRadius: 15,
height: 50,
}}/>
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
<View style={{ flex: 1}} >
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
</ScrollView>
</View>
<View style={{ height: 30 }}></View>
</ScrollView>
</View>
<View style={{ height: 20 }}></View>
</View>
<View style={[styles.element, {marginTop: 40}]}>
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
<View style={{ height: 20 }}></View>
</View>
<View style={{ height: 5 }}></View>
<View style={{ flex: 1}} >
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
<View style={[styles.element, {marginTop: 40}]}>
<View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: 10}]}>
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
</View>
<View style={{ height: 5 }}></View>
<View style={{ flex: 1}} >
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
</ScrollView>
</View>
<View style={{ height: 30 }}></View>
<View style={{ height: 20 }}></View>
</View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
</ScrollView>
</View>
<View style={{ height: 20 }}></View>
</View>
<View style={{ height: 15 }}></View>
<CustomButton title="Find a recipe"/>
</View>
</SafeAreaProvider>
<View style={{ height: 15 }}></View>
<CustomButton title="Find a recipe"/>
</LinearGradient>
</ScrollView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
page: {
flex: 1,
backgroundColor: '#59BDCD',
alignItems: 'center',
display: 'flex',
flexWrap: 'wrap',
padding: 20,
},
linearGradient: {
width: "100%",
flex: 1,
padding: "2%",
paddingTop: 0,
alignItems: "center",
justifyContent: "center"
},
element: {
backgroundColor:'#F2F0E4',
borderRadius: 30,
width: "100%",
backgroundColor:'#F2F0E4',
borderRadius: 25,
},
horizontalAlignement: {
horizontalAlignment: {
display: 'flex',
height: 30,
width: 350,

103
LeftOvers/screens/RecipeDetails.tsx
Unescape View File

@ -1,44 +1,93 @@
import React from 'react';
import { View, StyleSheet} from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {View, StyleSheet, ScrollView, useWindowDimensions, Text} from 'react-native';
import {SafeAreaProvider } from 'react-native-safe-area-context';
import {LinearGradient} from 'expo-linear-gradient';
import TopBar from '../components/TopBar';
import RecipeElementReduce from '../components/RecipeElementReduce';
import ListWithoutSelect from '../components/ListWithoutSelect';
import ValidateButton from '../components/ValidateButton';
export default function RecipeDetails(props) {
const ing = [{value: "Chocolate"}, {value: "Milk"}, {value: "Eggs"}, {value: "Flour"}]
const ute = [{value: "Spoon (3cl)"}, {value: "Whisk"}, {value: "Oven"}]
const ste = [
{value: "1. Break the eggs and whisk them. Add the flour."},
{value: "2. Melt the chocolate in the microwave. Add it to the eggs."},
{value: "3. Put the cake in the oven. 40 minutes, 180 degrees."},
{value: "4. Clean the utensils."}
]
return (
<SafeAreaProvider>
<TopBar title="Recipe Detail"/>
<View style={styles.page}>
<RecipeElementReduce
title={props.title}
number={props.number}
duree={props.duree}/>
</View>
<ScrollView>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: "6%"}}>
<RecipeElementReduce title="Meat Stick" number="63" duration="15 minutes"/>
</View>
<View style={styles.separator}/>
<View style={styles.background}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Preparation</Text>
</View>
<ListWithoutSelect title="Ingredients" content={ing}></ListWithoutSelect>
<View style={{marginTop: "3%"}}/>
<ListWithoutSelect title="Utensils" content={ute}></ListWithoutSelect>
<View style={{marginTop: "3%"}}/>
</View>
<View style={styles.separator}/>
<View style={styles.background}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Cooking</Text>
</View>
<ListWithoutSelect title="Steps" content={ste}></ListWithoutSelect>
<View style={{marginTop: "3%"}}/>
</View>
<View style={{marginBottom: "20%"}}/>
</LinearGradient>
</ScrollView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
page: {
flex: 1,
backgroundColor: '#59BDCD',
alignItems: 'center',
display: 'flex',
flexWrap: 'wrap',
padding: 20,
linearGradient: {
width: "100%",
flex: 1,
alignItems: "center",
justifyContent: "flex-start"
},
separator: {
marginTop: "6%",
},
background: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#F2F0E4',
padding: "3%",
marginHorizontal: "3%",
},
filterBar: {
flexDirection: "row",
width: "85%",
paddingTop: "3%",
paddingBottom: "2%",
alignItems: "flex-end",
justifyContent: "center",
},
filters: {
fontSize: 20,
color: '#ACA279',
flex: 1,
},
element: {
marginTop: 20,
nbSelected: {
fontSize: 11,
color: "#3F3C42",
textAlign: "right",
},
horizontalAlignement: {
display: 'flex',
height: 30,
width: 350,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
marginTop: 10,
}
});

6
LeftOvers/screens/RecipeSuggestion.tsx
Unescape View File

@ -21,7 +21,7 @@ import minus from '../assets/images/minus.png';
export default function RecipeSuggestion(props) {
const [visible, setVisible] = React.useState(true);
const [visible, setVisible] = React.useState(false);
const [visibleFilters, setVisibleFilters] = React.useState(false);
const [visibleIngredients, setVisibleIngredients] = React.useState(true);
const [minCpt, setMinCpt] = useState(0);
@ -149,8 +149,8 @@ export default function RecipeSuggestion(props) {
<View style={{marginTop: "3%"}}/>
<ListWithoutSelect title="Allergies" content={all}></ListWithoutSelect>
<View style={{marginTop: "3%"}}/>
<ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
</View>
<ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
</View>
<View style={{marginTop: "6%"}}/>
<View>
<CustomButton title="Save"></CustomButton>

Write Preview
Loading…
Cancel
Save