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

Update Home and ModifyProfile Pages

Browse Source
pull/20/head
Louison PARANT 1 year ago
parent 1e71f981f6
commit 70d0808290
16 changed files with 284 additions and 213 deletions
Show Stats Download Patch File Download Diff File

8
LeftOvers/App.tsx
Unescape View File

@ -1,19 +1,21 @@
import React from 'react'; import React from 'react';
import {StyleSheet, View} from 'react-native'; import {StyleSheet, View, SafeAreaView, ScrollView, Text} from 'react-native';
import HomePage from './screens/HomePage'; import HomePage from './screens/HomePage';
import ModifyProfile from './screens/ModifyProfile'; import ModifyProfile from './screens/ModifyProfile';
import Profiles from './screens/Profiles'; import Profiles from './screens/Profiles';
import RecipeSuggestion from './screens/RecipeSuggestion'; import RecipeSuggestion from './screens/RecipeSuggestion';
import CreateProfile from './screens/CreateProfile'; import CreateProfile from './screens/CreateProfile';
import FiltersSelection from './screens/FiltersSelection'; import FiltersSelection from './screens/FiltersSelection';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {LinearGradient} from 'expo-linear-gradient';
export default function App(props) { export default function App(props) {
return( return(
//<HomePage/> //<HomePage/>
//<ModifyProfile/> <ModifyProfile/>
//<Profiles/> //<Profiles/>
//<RecipeSuggestion/> //<RecipeSuggestion/>
//<CreateProfile/> //<CreateProfile/>
<FiltersSelection/> //<FiltersSelection/>
); );
} }

27
LeftOvers/components/FoodElementText.tsx
Unescape View File

@ -1,13 +1,10 @@
import React from 'react'; import React from 'react';
import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
import Separator from '../components/Separator'; import Separator from '../components/Separator';
import plus from '../assets/images/plus.png';
import moins from '../assets/images/minus.png';
interface foodElementImageProps { interface foodElementImageProps {
source : string
title : string title : string
} }
@ -18,7 +15,6 @@ export default function FoodElementText(props : any) {
<View style={styles.container}> <View style={styles.container}>
<View style={styles.view}> <View style={styles.view}>
<Text style={styles.text}>{props.title}</Text> <Text style={styles.text}>{props.title}</Text>
<Separator/>
</View> </View>
</View> </View>
</Pressable> </Pressable>
@ -29,33 +25,26 @@ 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',
}, },
text: { text: {
fontSize: 15, fontSize: 10,
lineHeight: 21,
fontWeight: 'bold', fontWeight: 'bold',
letterSpacing: 0.25, padding : "2%",
padding : 7,
color: 'black', color: 'black',
}, },
view: { view: {
alignItems: 'flex-start', alignItems: 'flex-start',
justifyContent: 'center', justifyContent: 'center',
marginRight: 5 // Centre le contenu horizontalement
}, },
container: { container: {
width :260, width: "100%",
height: 50,
borderRadius: 5, borderRadius: 5,
elevation: 3, borderWidth: 1,
borderWidth: 2, borderColor: '#3F3C42',
borderColor: 'black', flexDirection: 'column',
flexDirection: 'row', justifyContent: 'center',
justifyContent: 'space-between',
}, },
}); });

27
LeftOvers/components/ListSelect.tsx
Unescape View File

@ -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,

50
LeftOvers/components/ListWithoutSelect.tsx
Unescape View File

@ -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,

14
LeftOvers/components/ProfileDelete.tsx
Unescape View File

@ -21,10 +21,22 @@ 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: 20, marginTop: 20,}}>

16
LeftOvers/components/ProfileDetails.tsx
Unescape View File

@ -22,10 +22,22 @@ 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}>
@ -79,7 +91,7 @@ const styles = StyleSheet.create({
fontSize: 20, fontSize: 20,
color: '#ACA279', color: '#ACA279',
alignItems: 'center', alignItems: 'center',
justifyContent: 'left', textAlign: 'left',
flex: 0.8, flex: 0.8,
marginLeft: 20, marginLeft: 20,
padding: 5, padding: 5,

53
LeftOvers/components/ProfileElement.tsx
Unescape View File

@ -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,

61
LeftOvers/components/ProfileModification.tsx
Unescape View File

@ -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,69 @@ 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, flex: 0.9,
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",
} }

13
LeftOvers/components/ProfileSelection.tsx
Unescape View File

@ -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"}}/>
</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"}}/>
</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',

8
LeftOvers/components/Separator.tsx
Unescape View File

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

59
LeftOvers/components/ValidateButton.tsx
Unescape View File

@ -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>

10
LeftOvers/screens/CreateProfile.tsx
Unescape View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {StyleSheet, View} from 'react-native'; import {StyleSheet, View, ScrollView} 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,16 @@ 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"/> <ScrollView>
<View style={styles.container}> <TopBar title="Create Profile" isVisible="true"/>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<View style={{marginTop: 20}}/> <View style={{marginTop: 20}}/>
<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: 20}}/>
<ValidateButton title="Create Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton> <ValidateButton title="Create Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
</LinearGradient> </LinearGradient>
</View> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }

10
LeftOvers/screens/FiltersSelection.tsx
Unescape View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {StyleSheet, View, Text} from 'react-native'; import {StyleSheet, View, Text, ScrollView} 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';
@ -26,9 +26,9 @@ export default function FiltersSelection(props) {
const allAdd = [] const allAdd = []
return ( return (
<SafeAreaProvider> <SafeAreaProvider style={{flex: 1}}>
<TopBar title="Filters Selection" isVisible="true"/> <ScrollView>
<View style={styles.container}> <TopBar title="Filters Selection" isVisible="true"/>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<View style={{marginTop: 20}}/> <View style={{marginTop: 20}}/>
<View style={styles.profilesSelection}> <View style={styles.profilesSelection}>
@ -65,7 +65,7 @@ export default function FiltersSelection(props) {
<View style={{marginTop: 20}}/> <View style={{marginTop: 20}}/>
<ValidateButton title="Save Filters" image="save.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton> <ValidateButton title="Save Filters" image="save.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
</LinearGradient> </LinearGradient>
</View> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }

113
LeftOvers/screens/HomePage.tsx
Unescape View File

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

17
LeftOvers/screens/ModifyProfile.tsx
Unescape View File

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

11
LeftOvers/screens/Profiles.tsx
Unescape View File

@ -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} 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"}]
@ -31,8 +31,8 @@ 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}>
@ -75,7 +75,7 @@ export default function ModifyProfile(props) {
</View> </View>
</LinearGradient> </LinearGradient>
</View> </View>
</View> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }
@ -88,6 +88,7 @@ const styles = StyleSheet.create({
backgroundColor: '#3F3C42', backgroundColor: '#3F3C42',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
marginBottom: 10,
}, },
linearGradient: { linearGradient: {
height: "100%", height: "100%",

Write Preview
Loading…
Cancel
Save