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 CreateProfile from './screens/CreateProfile';
import FiltersSelection from './screens/FiltersSelection'; import FiltersSelection from './screens/FiltersSelection';
import RecipeSuggestion from './screens/RecipeSuggestion'; 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 {SafeAreaProvider} from 'react-native-safe-area-context';
import {LinearGradient} from 'expo-linear-gradient'; import {LinearGradient} from 'expo-linear-gradient';
@ -17,7 +18,8 @@ export default function App(props) {
//<ModifyProfile/> //<ModifyProfile/>
//<CreateProfile/> //<CreateProfile/>
//<FiltersSelection/> //<FiltersSelection/>
<RecipeSuggestion/> //<RecipeSuggestion/>
//<RecipeDetail/> //<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, borderRadius: 40,
borderWidth: 2, borderWidth: 2,
padding: "5%", padding: "5%",
borderColor: '#3F3C42', borderColor: '#73692A',
alignItems: 'center', alignItems: 'center',
justifyContent: "center", justifyContent: "center",
}, },

74
LeftOvers/components/RecipeElementReduce.tsx
Unescape View File

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

229
LeftOvers/screens/IngredientSelection.tsx
Unescape View File

@ -1,7 +1,8 @@
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 {LinearGradient} from 'expo-linear-gradient';
import {Searchbar} from 'react-native-paper'; 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 FoodElementText from '../components/FoodElementText';
@ -9,136 +10,138 @@ import CustomButton from '../components/CustomButton';
export default function IngredientSelection() { export default function IngredientSelection() {
const [searchQuery, setSearchQuery] = React.useState(''); const [searchQuery, setSearchQuery] = React.useState('');
const onChangeSearch = query => setSearchQuery(query); const onChangeSearch = query => setSearchQuery(query);
return ( return (
<SafeAreaProvider> <SafeAreaProvider>
<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.horizontalAlignement, {justifyContent: 'center'}]}>
<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> </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 }} />
</View> </Pressable>
<View> </View>
<Searchbar <View>
placeholder="Search" <Searchbar
onChangeText={onChangeSearch} placeholder="Search"
value={searchQuery} onChangeText={onChangeSearch}
style={{margin: 10, value={searchQuery}
backgroundColor: '#F2F0E4', style={{margin: 10,
borderWidth : 1, backgroundColor: '#F2F0E4',
borderColor: "#ACA279", borderWidth : 1,
borderRadius: 15, borderColor: "#ACA279",
height: 50, 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>
<View style={{ height: 30 }}></View> <View style={{ flex: 1}} >
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" /> <View style={styles.horizontalAlignment}>
<Image source={brochette} style={{ width: 20, height: 20 }} /> <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>
<View style={{ height: 30 }}></View> <View style={{ height: 20 }}></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>
</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> </View>
<View style={{ height: 5 }}></View> <View style={[styles.element, {marginTop: 40}]}>
<View style={{ flex: 1}} > <View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: 10}]}>
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}> <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
<View style={styles.horizontalAlignement}> </View>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} /> <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>
<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>
<View style={styles.horizontalAlignement}> <View style={{ height: 15 }}></View>
<FoodElementText title="test" /> <CustomButton title="Find a recipe"/>
<Image source={brochette} style={{ width: 20, height: 20 }} /> </LinearGradient>
</View> </ScrollView>
<View style={{ height: 30 }}></View> </SafeAreaProvider>
</ScrollView>
</View>
<View style={{ height: 20 }}></View>
</View>
<View style={{ height: 15 }}></View>
<CustomButton title="Find a recipe"/>
</View>
</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: { element: {
width: "100%",
backgroundColor:'#F2F0E4', backgroundColor:'#F2F0E4',
borderRadius: 30, borderRadius: 25,
}, },
horizontalAlignement: { horizontalAlignment: {
display: 'flex', display: 'flex',
height: 30, height: 30,
width: 350, width: 350,

103
LeftOvers/screens/RecipeDetails.tsx
Unescape View File

@ -1,44 +1,93 @@
import React from 'react'; import React from 'react';
import { View, StyleSheet} 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 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> <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> </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: {
marginTop: 20, 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) { export default function RecipeSuggestion(props) {
const [visible, setVisible] = React.useState(true); 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);
@ -149,8 +149,8 @@ export default function RecipeSuggestion(props) {
<View style={{marginTop: "3%"}}/> <View style={{marginTop: "3%"}}/>
<ListWithoutSelect title="Allergies" content={all}></ListWithoutSelect> <ListWithoutSelect title="Allergies" content={all}></ListWithoutSelect>
<View style={{marginTop: "3%"}}/> <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: "6%"}}/> <View style={{marginTop: "6%"}}/>
<View> <View>
<CustomButton title="Save"></CustomButton> <CustomButton title="Save"></CustomButton>

Write Preview
Loading…
Cancel
Save