|
|
|
@ -3,6 +3,7 @@ import { StyleSheet, View, Text, Pressable, Image, ScrollView } from 'react-nati
|
|
|
|
|
import {LinearGradient} from 'expo-linear-gradient';
|
|
|
|
|
import {SafeAreaProvider} from 'react-native-safe-area-context';
|
|
|
|
|
|
|
|
|
|
import ValidateButton from '../components/ValidateButton';
|
|
|
|
|
import ProfileSelection from '../components/ProfileSelection';
|
|
|
|
|
import FoodElementText from '../components/FoodElementText';
|
|
|
|
|
import ColorContext from '../theme/ColorContext';
|
|
|
|
@ -23,92 +24,23 @@ export default function HomePage({ navigation, props }) {
|
|
|
|
|
|
|
|
|
|
const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}]
|
|
|
|
|
|
|
|
|
|
const [cpt, setCpt] = useState(0);
|
|
|
|
|
const decreaseCounter = () => {
|
|
|
|
|
if (cpt > 0) {
|
|
|
|
|
setCpt(cpt - 1);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
setCpt(ingredientList.length - 1);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const increaseCounter = () => {
|
|
|
|
|
if (cpt < ingredientList.length - 1) {
|
|
|
|
|
setCpt(cpt + 1);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
setCpt(0);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<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={styles.separator}/>
|
|
|
|
|
<View style={styles.welcome}>
|
|
|
|
|
<View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
|
|
|
|
|
<View style={{flexDirection: "row"}}>
|
|
|
|
|
<Text style={styles.text}>Welcome </Text>
|
|
|
|
|
<Text style={styles.name}>Rayhân</Text>
|
|
|
|
|
<Text style={styles.text}>,</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<Text style={styles.text}>Glad to see you again!</Text>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<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: "3%"}}/>
|
|
|
|
|
<ProfileSelection listProfile={profiles} disableSelection={true}/>
|
|
|
|
|
<View style={{marginTop: "4%"}}/>
|
|
|
|
|
<ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9"/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
|
|
<View style={styles.profilesSelection}>
|
|
|
|
|
<View style={styles.filterBar}>
|
|
|
|
|
<Text style={styles.filters}>Ingredient Stocks</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginTop: "4%"}}/>
|
|
|
|
|
<ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9"/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
|
|
<View style={styles.profilesSelection}>
|
|
|
|
|
<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"/>
|
|
|
|
|
<View style={{marginTop: "3%"}}/>
|
|
|
|
|
<ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9"/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginBottom: "20%"}}/>
|
|
|
|
|
</LinearGradient>
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</SafeAreaProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
const [cpt, setCpt] = useState(0);
|
|
|
|
|
const decreaseCounter = () => {
|
|
|
|
|
if (cpt > 0) {
|
|
|
|
|
setCpt(cpt - 1);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
setCpt(ingredientList.length - 1);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const increaseCounter = () => {
|
|
|
|
|
if (cpt < ingredientList.length - 1) {
|
|
|
|
|
setCpt(cpt + 1);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
setCpt(0);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
|
container: {
|
|
|
|
@ -139,10 +71,7 @@ export default function HomePage({ navigation, props }) {
|
|
|
|
|
filters: {
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
color: colors.cardTitle,
|
|
|
|
|
padding: 5,
|
|
|
|
|
paddingLeft: 0,
|
|
|
|
|
paddingBottom: 0,
|
|
|
|
|
flex: 1,
|
|
|
|
|
flex: 1,
|
|
|
|
|
},
|
|
|
|
|
nbSelected: {
|
|
|
|
|
fontSize: 11,
|
|
|
|
@ -252,3 +181,4 @@ export default function HomePage({ navigation, props }) {
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</SafeAreaProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|