|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import { 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 ValidateButton from '../components/ValidateButton';
|
|
|
|
|
import TopBar from '../components/TopBar';
|
|
|
|
@ -42,10 +42,15 @@ export default function HomePage({ navigation , props}) {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<SafeAreaProvider>
|
|
|
|
|
<View style={styles.container}>
|
|
|
|
|
<SafeAreaProvider style={{flex: 1}}>
|
|
|
|
|
<ScrollView>
|
|
|
|
|
<View style={styles.topBar}>
|
|
|
|
|
<Image source={require("../assets/images/logo.png")} style={{width: "100%", height: "100%", flex: 0.1, marginLeft: "5%", resizeMode: "contain"}}/>
|
|
|
|
|
<Text style={styles.appName}>LeftOvers</Text>
|
|
|
|
|
<Image source={require("../assets/images/logo.png")} style={{width: "100%", height: "100%", flex: 0.1, marginRight: "5%", resizeMode: "contain"}}/>
|
|
|
|
|
</View>
|
|
|
|
|
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
|
|
|
|
|
<View style={{marginTop: 20}}/>
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
|
|
<View style={styles.welcome}>
|
|
|
|
|
<View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
|
|
|
|
|
<View style={{flexDirection: "row"}}>
|
|
|
|
@ -56,113 +61,111 @@ export default function HomePage({ navigation , props}) {
|
|
|
|
|
<Text style={styles.text}>Glad to see you again!</Text>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginTop: 20}}/>
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
|
|
<View style={styles.profilesSelection}>
|
|
|
|
|
<View style={styles.filterBar}>
|
|
|
|
|
<Text style={styles.filters}>Profiles</Text>
|
|
|
|
|
<Text style={styles.nbSelected}>2 selected</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginTop: 10}}/>
|
|
|
|
|
<View style={{marginTop: "3%"}}/>
|
|
|
|
|
<ProfileSelection listProfile={profiles} disableSelection={true}/>
|
|
|
|
|
<View style={{marginTop: 20}}/>
|
|
|
|
|
<View style={{marginTop: "4%"}}/>
|
|
|
|
|
<ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => navigation.navigate('Profiles')}/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginTop: 20}}/>
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
|
|
<View style={styles.profilesSelection}>
|
|
|
|
|
<View style={styles.filterBar}>
|
|
|
|
|
<Text style={styles.filters}>Ingredient Stocks</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginTop: 10}}/>
|
|
|
|
|
<View style={{marginTop: "4%"}}/>
|
|
|
|
|
<ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => console.log('ManageStocks')}/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginTop: 20}}/>
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
|
|
<View style={styles.profilesSelection}>
|
|
|
|
|
<View style={styles.filterBar}>
|
|
|
|
|
<Text style={styles.filters}>Cooking</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginTop: 10}}/>
|
|
|
|
|
<View style={styles.ingredientSelection}>
|
|
|
|
|
<Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
|
|
|
|
|
<View style={{flexDirection: "row", padding: 10, justifyContent: "center", alignItems: "center"}}>
|
|
|
|
|
<Pressable onPress={decreaseCounter}>
|
|
|
|
|
<Image source={bracketLeft} style={{ width: 40, height: 40 }} />
|
|
|
|
|
</Pressable>
|
|
|
|
|
<FoodElementText title={ingredientList[cpt].title}/>
|
|
|
|
|
<Pressable onPress={increaseCounter}>
|
|
|
|
|
<Image source={bracketRight} style={{ width: 40, height: 40 }} />
|
|
|
|
|
</Pressable>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginTop: 15}}/>
|
|
|
|
|
<ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Chnge Selected Ingredient')}/>
|
|
|
|
|
<View style={{marginTop: 10}}/>
|
|
|
|
|
<ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Go and search for recipe')}/>
|
|
|
|
|
<View style={styles.filterBar}>
|
|
|
|
|
<Text style={styles.filters}>Cooking</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginTop: "3%"}}/>
|
|
|
|
|
<View style={styles.ingredientSelection}>
|
|
|
|
|
<Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
|
|
|
|
|
<View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
|
|
|
|
|
<Pressable onPress={decreaseCounter}>
|
|
|
|
|
<Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} />
|
|
|
|
|
</Pressable>
|
|
|
|
|
<FoodElementText title={ingredientList[cpt].title}/>
|
|
|
|
|
<Pressable onPress={increaseCounter}>
|
|
|
|
|
<Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
|
|
|
|
|
</Pressable>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginTop: "4%"}}/>
|
|
|
|
|
<ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Chnge Selected Ingredient')}/>
|
|
|
|
|
<View style={{marginTop: "3%"}}/>
|
|
|
|
|
<ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Go and search for recipe')}/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginBottom: "20%"}}/>
|
|
|
|
|
</LinearGradient>
|
|
|
|
|
</View>
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</SafeAreaProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
|
container: {
|
|
|
|
|
height: "100%",
|
|
|
|
|
width: "100%",
|
|
|
|
|
flex: 1,
|
|
|
|
|
backgroundColor: '#3F3C42',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
},
|
|
|
|
|
linearGradient: {
|
|
|
|
|
height: "100%",
|
|
|
|
|
width: "100%",
|
|
|
|
|
flex: 1,
|
|
|
|
|
padding: 10,
|
|
|
|
|
paddingTop: 0,
|
|
|
|
|
},
|
|
|
|
|
filterBar: {
|
|
|
|
|
container: {
|
|
|
|
|
width: "100%",
|
|
|
|
|
flex: 1,
|
|
|
|
|
backgroundColor: '#3F3C42',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
},
|
|
|
|
|
linearGradient: {
|
|
|
|
|
width: "100%",
|
|
|
|
|
flex: 1,
|
|
|
|
|
padding: "2%",
|
|
|
|
|
paddingTop: 0,
|
|
|
|
|
},
|
|
|
|
|
separator: {
|
|
|
|
|
marginTop: "6%"
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
filterBar: {
|
|
|
|
|
flexDirection: "row",
|
|
|
|
|
width: 300,
|
|
|
|
|
paddingTop: 10,
|
|
|
|
|
paddingBottom: 5,
|
|
|
|
|
width: "85%",
|
|
|
|
|
paddingTop: "3%",
|
|
|
|
|
paddingBottom: "2%",
|
|
|
|
|
alignItems: "flex-end",
|
|
|
|
|
justifyContent: "center",
|
|
|
|
|
flex: 0.2,
|
|
|
|
|
},
|
|
|
|
|
filters: {
|
|
|
|
|
flex: 0.8,
|
|
|
|
|
},
|
|
|
|
|
filters: {
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
color: '#ACA279',
|
|
|
|
|
flex: 1,
|
|
|
|
|
padding: 5,
|
|
|
|
|
paddingLeft: 0,
|
|
|
|
|
paddingBottom: 0,
|
|
|
|
|
},
|
|
|
|
|
nbSelected: {
|
|
|
|
|
},
|
|
|
|
|
nbSelected: {
|
|
|
|
|
fontSize: 11,
|
|
|
|
|
color: "#3F3C42",
|
|
|
|
|
textAlign: "right",
|
|
|
|
|
},
|
|
|
|
|
profilesSelection: {
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
profilesSelection: {
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
borderRadius: 20,
|
|
|
|
|
backgroundColor: '#F2F0E4',
|
|
|
|
|
paddingTop: 5,
|
|
|
|
|
marginHorizontal: 10,
|
|
|
|
|
},
|
|
|
|
|
welcome: {
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
marginHorizontal: "3%",
|
|
|
|
|
paddingBottom: "3%",
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
welcome: {
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
borderRadius: 20,
|
|
|
|
|
backgroundColor: '#F2F0E4',
|
|
|
|
|
paddingVertical: 10,
|
|
|
|
|
paddingHorizontal: 25,
|
|
|
|
|
marginHorizontal: 10,
|
|
|
|
|
},
|
|
|
|
|
text: {
|
|
|
|
|
paddingVertical: "3%",
|
|
|
|
|
paddingHorizontal: "7%",
|
|
|
|
|
marginHorizontal: "3%",
|
|
|
|
|
},
|
|
|
|
|
text: {
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
color: '#ACA279',
|
|
|
|
|
},
|
|
|
|
@ -170,10 +173,9 @@ const styles = StyleSheet.create({
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
color: '#59BDCD',
|
|
|
|
|
textAlign: "left",
|
|
|
|
|
},
|
|
|
|
|
ingredientSelection: {
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ingredientSelection: {
|
|
|
|
|
width: "90%",
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
@ -181,7 +183,23 @@ const styles = StyleSheet.create({
|
|
|
|
|
backgroundColor: '#E3DEC9',
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
borderColor: "#ACA279",
|
|
|
|
|
marginHorizontal: 10,
|
|
|
|
|
padding: 5
|
|
|
|
|
},
|
|
|
|
|
padding: "2%"
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
appName: {
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
color: '#3F3C42',
|
|
|
|
|
textAlign: "center",
|
|
|
|
|
flex: 0.8,
|
|
|
|
|
},
|
|
|
|
|
topBar: {
|
|
|
|
|
flexDirection: 'row',
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: "11%",
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
backgroundColor: '#F2F0E4',
|
|
|
|
|
paddingTop: "8%",
|
|
|
|
|
},
|
|
|
|
|
});
|