Sae_LeftOvers
/
LeftOvers
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

master #16

Merged
rayhan.hassou merged 9 commits from master into WORK-RHA 1 year ago
Conversation 0 Commits 9 Files Changed 28
28 changed files with 1081 additions and 130 deletions
Show Stats Download Patch File Download Diff File

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

1
LeftOvers/components/FoodElementText.tsx
Unescape View File

@ -44,7 +44,6 @@ const styles = StyleSheet.create({
color: 'black', color: 'black',
}, },
view: { view: {
alignItems: 'flex-start', alignItems: 'flex-start',
justifyContent: 'center', justifyContent: 'center',
marginRight: 5 // Centre le contenu horizontalement marginRight: 5 // Centre le contenu horizontalement

22
LeftOvers/components/DietsTab.tsx → LeftOvers/components/ListSelect.tsx
Unescape View File

@ -4,21 +4,13 @@ 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'
type DietsProps = { type ListProps = {
title: string title: string
content : list<string> content : list<string>
} }
export default function DietsTab(props: DietsProps) { export default function ListSelect(props: ListProps) {
const [selected, setSelected] = React.useState([]); const [selected, setSelected] = React.useState([]);
const data = [
{key:'1', value:'Dairy free'},
{key:'2', value:'Gluten free'},
{key:'3', value:'Porkless'},
{key:'4', value:'Vegan'},
{key:'5', value:'Vegetatian'},
{key:'6', value:'Pescatarian'},
]
return ( return (
<MultipleSelectList <MultipleSelectList
setSelected={(val) => setSelected(val)} setSelected={(val) => setSelected(val)}
@ -31,6 +23,8 @@ export default function DietsTab(props: DietsProps) {
dropdownStyles={styles.itemList} dropdownStyles={styles.itemList}
dropdownItemStyles={styles.itemCell} dropdownItemStyles={styles.itemCell}
dropdownTextStyles={styles.itemText} dropdownTextStyles={styles.itemText}
badgeStyles={styles.badges}
badgeTextStyles={styles.badgesText}
placeholder={props.title} placeholder={props.title}
label={props.title}/> label={props.title}/>
); );
@ -94,4 +88,12 @@ const styles = StyleSheet.create({
paddingLeft: 10, paddingLeft: 10,
color: "#3F3C42", color: "#3F3C42",
}, },
badges: {
backgroundColor: "#59BDCD"
},
badgesText: {
fontSize: 15,
color: "#F2F0E4",
},
}); });

80
LeftOvers/components/ListTab.tsx
Unescape View File

@ -1,80 +0,0 @@
import React from 'react';
import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
import ValidateButton from './ValidateButton';
import HeaderFlatList from './HeaderFlatList';
type ListProps = {
title: string
content : list<string>
}
type ItemProps = {value: string}
const Item = ({value}: ItemProps) => (
<View style={styles.itemList}>
<Text style={styles.itemText}>{value}</Text>
</View>
)
export default function ListTab(props: ListProps) {
return (
<View style={styles.background}>
<View>
<FlatList data={props.content} renderItem={({item}) => <Item value={item.value}/>} ListHeaderComponent={<HeaderFlatList title={props.title}/>}/>
</View>
</View>
);
}
const styles = StyleSheet.create({
background: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 15,
backgroundColor: '#E3DEC9',
marginBottom: 20,
},
titleBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "stretch",
backgroundColor: "#F2F0E4",
borderTopRightRadius: 15,
borderTopLeftRadius: 15,
borderWidth: 2,
borderColor: "#ACA279",
width: 250,
},
arrow: {
height: 20,
width: 20,
resizeMode: 'contain',
tintColor: "#3F3C42",
flex: 0.5,
},
title: {
fontSize: 15,
color: '#3F3C42',
alignItems: 'center',
justifyContent: 'left',
textAlign: "left",
flex: 0.5,
padding: 5,
},
itemList: {
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "stretch",
width: 330,
},
itemText: {
fontSize: 13,
textAlign: "left",
flex: 1,
padding: 5,
paddingLeft: 10,
color: "#3F3C42",
},
});

13
LeftOvers/components/AllergiesTab.tsx → LeftOvers/components/ListWithoutSelect.tsx
Unescape View File

@ -4,21 +4,13 @@ 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'
type AllergiesProps = { type ListProps = {
title: string title: string
content : list<string> content : list<string>
} }
export default function AllergiesTab(props: AllergiesProps) { export default function ListWithoutSelect(props: ListProps) {
const [selected, setSelected] = React.useState([]); const [selected, setSelected] = React.useState([]);
const data = [
{key:'1', value:'Dairy free'},
{key:'2', value:'Gluten free'},
{key:'3', value:'Porkless'},
{key:'4', value:'Vegan'},
{key:'5', value:'Vegetatian'},
{key:'6', value:'Pescatarian'},
]
return ( return (
<MultipleSelectList <MultipleSelectList
data={props.content} data={props.content}
@ -31,6 +23,7 @@ export default function AllergiesTab(props: AllergiesProps) {
dropdownItemStyles={styles.itemCell} dropdownItemStyles={styles.itemCell}
dropdownTextStyles={styles.itemText} dropdownTextStyles={styles.itemText}
checkBoxStyles={styles.box} checkBoxStyles={styles.box}
notFoundText="None"
placeholder={props.title} placeholder={props.title}
label={props.title}/> label={props.title}/>
); );

115
LeftOvers/components/ProfileDelete.tsx
Unescape View File

@ -0,0 +1,115 @@
import {React, useState} from 'react';
import {StyleSheet, Text, TextInput, View, Image, Pressable} from 'react-native';
import ValidateButton from './ValidateButton';
import ListWithoutSelect from './ListWithoutSelect';
type ProfileProps = {
name: string
avatar: string
diets: list<string>
allergies: list<string>
}
export default function ProfileDelete(props: ProfileProps) {
const [display, setDisplay] = useState("flex")
const changeListVisibility = () => {
if (display == "none"){
setDisplay("flex")
}
else{
setDisplay("none")
}
};
return (
<View style={styles.background}>
<View style={styles.pseudoBar}>
<Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text>
</View>
<Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Filters</Text>
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
</View>
</Pressable>
<View style={{display: display}}>
<ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
<View style={{marginTop: 10}}/>
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
<View style={{marginTop: 10}}/>
</View>
</View>
);
}
const styles = StyleSheet.create({
background: {
//maxWidth: 370,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 15,
backgroundColor: '#F2F0E4',
padding: 10,
marginHorizontal: 10,
},
pseudoBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
flex: 0.7,
width: 330,
marginBottom: 10,
},
avatar: {
padding: 20,
resizeMode: 'contain',
borderWidth: 2,
borderColor: "#ACA279",
borderRadius: 45,
},
text: {
fontSize: 20,
color: '#ACA279',
alignItems: 'center',
justifyContent: 'left',
flex: 0.8,
marginLeft: 20,
padding: 5,
},
filterBar: {
flexDirection: "row",
width: 300,
paddingTop: 10,
paddingBottom: 5,
alignItems: "flex-end",
justifyContent: "center",
flex: 0.2,
},
filters: {
flex: 0.5,
fontSize: 20,
color: '#ACA279',
flex: 1,
padding: 5,
paddingLeft: 0,
paddingBottom: 0,
},
nbSelected: {
fontSize: 11,
flex: 1,
color: "#3F3C42",
textAlign: "right",
},
arrow: {
height: 20,
width: 20,
resizeMode: 'contain',
tintColor: "#3F3C42",
flex: 0.1,
},
});

136
LeftOvers/components/ProfileDetails.tsx
Unescape View File

@ -0,0 +1,136 @@
import {React, useState} from 'react';
import {StyleSheet, Text, TextInput, View, Image, Pressable} from 'react-native';
import ValidateButton from './ValidateButton';
import ListWithoutSelect from './ListWithoutSelect';
type ProfileProps = {
name: string
avatar: string
diets: list<string>
allergies: list<string>
onDeleteProfile: () => void
}
export default function ProfileDetails(props: ProfileProps) {
const [display, setDisplay] = useState("none")
const changeListVisibility = () => {
if (display == "none"){
setDisplay("flex")
}
else{
setDisplay("none")
}
};
return (
<View style={styles.background}>
<View style={styles.pseudoBar}>
<Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text>
<Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
<Pressable onPress={props.onDeleteProfile}>
<Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
</Pressable>
</View>
<Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Filters</Text>
<Text style={styles.nbSelected}>3 selected</Text>
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
</View>
</Pressable>
<View style={{display: display}}>
<ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
<View style={{marginTop: 10}}/>
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
<View style={{marginTop: 10}}/>
</View>
</View>
);
}
const styles = StyleSheet.create({
background: {
//maxWidth: 370,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 15,
backgroundColor: '#F2F0E4',
padding: 10,
marginHorizontal: 10,
},
pseudoBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
flex: 0.7,
width: 330,
marginBottom: 10,
},
avatar: {
padding: 20,
resizeMode: 'contain',
borderWidth: 2,
borderColor: "#ACA279",
borderRadius: 45,
},
text: {
fontSize: 20,
color: '#ACA279',
alignItems: 'center',
justifyContent: 'left',
flex: 0.8,
marginLeft: 20,
padding: 5,
},
modify: {
height: 20,
width: 20,
tintColor: "#ACA279",
resizeMode: 'contain',
flex: 0.05,
marginLeft: 15,
},
delete: {
height: 20,
width: 20,
tintColor: "#ACA279",
resizeMode: 'contain',
flex: 0.05,
},
filterBar: {
flexDirection: "row",
width: 300,
paddingTop: 10,
paddingBottom: 5,
alignItems: "flex-end",
justifyContent: "center",
flex: 0.2,
},
filters: {
flex: 0.5,
fontSize: 20,
color: '#ACA279',
flex: 1,
padding: 5,
paddingLeft: 0,
paddingBottom: 0,
},
nbSelected: {
fontSize: 11,
flex: 1,
color: "#3F3C42",
textAlign: "right",
},
arrow: {
height: 20,
width: 20,
resizeMode: 'contain',
tintColor: "#3F3C42",
flex: 0.1,
},
});

109
LeftOvers/components/ProfileElement.tsx
Unescape View File

@ -0,0 +1,109 @@
import {React, useState} from 'react';
import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
type Profile = {
name: string
avatar: string
isActive: string
disableSelection: boolean
}
export default function ProfileElement(props : Profile) {
const [waiting, setWaiting] = useState("none")
const [separator, setSeparator] = useState("none")
const changeStatus = () => {
if (props.disableSelection){
setWaiting("none")
}
else if (waiting == "flex"){
setWaiting("none")
}
else{
setWaiting("flex")
}
if (props.isActive == "flex" && waiting == "none"){
setSeparator("flex")
}
else{
setSeparator("none")
}
console.log(waiting, separator, props.name)
};
return (
<Pressable onPress={changeStatus} style={styles.button}>
<View style={{flexDirection: "column"}}>
<View style={styles.pseudoBar}>
<Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text>
</View>
<View style={styles.pseudoBar}>
<View style={[styles.active, {display: props.isActive}]}>
<Text style={styles.textActive}>Activated</Text>
</View>
<View style={{flex: 0.3, display: separator}}/>
<View style={[styles.waiting, {display: waiting}]}>
<Text style={styles.textWaiting}>Waiting...</Text>
</View>
</View>
</View>
</Pressable>
);
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
justifyContent: 'flex-start',
height: 80,
//width: "75%",
marginVertical: 15,
},
pseudoBar: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
//width: "120%",
width: 225,
marginHorizontal: 10,
marginBottom: 10,
},
avatar: {
padding: 20,
resizeMode: 'contain',
borderWidth: 2,
borderColor: "#ACA279",
borderRadius: 45,
},
text: {
fontSize: 15,
color: '#ACA279',
alignItems: 'center',
justifyContent: 'left',
flex: 0.8,
marginLeft: 20,
padding: 5,
width: "100%"
},
active: {
borderWidth: 1,
borderRadius: 20,
borderColor: "#59BDCD",
padding: 5,
},
textActive: {
fontSize: 10,
color: "#59BDCD",
},
waiting: {
borderWidth: 1,
borderRadius: 20,
borderColor: "#ACA279",
padding: 5,
},
textWaiting: {
fontSize: 10,
color: "#ACA279",
},
});

20
LeftOvers/components/ProfileModification.tsx
Unescape View File

@ -1,9 +1,8 @@
import React from 'react'; import {React, useState} from 'react';
import {StyleSheet, Text, TextInput, View, Image} from 'react-native'; import {StyleSheet, Text, TextInput, View, Image} from 'react-native';
import ValidateButton from './ValidateButton'; import ValidateButton from './ValidateButton';
import ListTab from './ListTab'; import ListSelect from './ListSelect';
import DietsTab from './DietsTab'; import ListWithoutSelect from './ListWithoutSelect';
import AllergiesTab from './AllergiesTab';
type ProfileProps = { type ProfileProps = {
name: string name: string
@ -13,23 +12,23 @@ type ProfileProps = {
} }
export default function ProfileModification(props: ProfileProps) { export default function ProfileModification(props: ProfileProps) {
const [name, onChangeName] = useState(props.name);
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={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
<TextInput style={styles.textInput} value={props.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>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Filters</Text> <Text style={styles.filters}>Filters</Text>
<Text style={styles.nbSelected}>3 selected</Text> <Text style={styles.nbSelected}>3 selected</Text>
</View> </View>
<DietsTab title="Diets" content={props.diets}></DietsTab> <ListSelect title="Diets" content={props.diets}></ListSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: 10}}/>
<AllergiesTab title="Allergies" content={props.allergies}></AllergiesTab> <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
<View style={{marginTop: 10}}/> <View style={{marginTop: 10}}/>
<ListTab title="Diets" content={props.diets}></ListTab>
<ListTab title="Allergies" content={props.allergies}></ListTab>
<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>
); );
@ -37,13 +36,14 @@ export default function ProfileModification(props: ProfileProps) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background: {
width: 370, //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: 10,
marginHorizontal: 10,
}, },
pseudoBar: { pseudoBar: {
flexDirection: "row", flexDirection: "row",

63
LeftOvers/components/ProfileSelection.tsx
Unescape View File

@ -0,0 +1,63 @@
import {React, useState} from 'react';
import {View, StyleSheet, Pressable, Image, Text} from 'react-native';
import bracketLeft from '../assets/images/angle_bracket_left.png';
import bracketRight from '../assets/images/angle_bracket_right.png';
import ProfileElement from './ProfileElement'
type ProfileSelectionProps = {
listProfile: Profile[]
disableSelection: boolean
}
type Profile = {
name: string
avatar: string
isActive: boolean
}
export default function ProfileSelection(props: ProfileSelectionProps) {
const [cpt, setCpt] = useState(0);
const decreaseCounter = () => {
if (cpt > 0) {
setCpt(cpt - 1);
}
else {
setCpt(props.listProfile.length - 1);
}
};
const increaseCounter = () => {
if (cpt < props.listProfile.length - 1) {
setCpt(cpt + 1);
}
else {
setCpt(0);
}
};
return (
<View style={styles.background}>
<Pressable onPress={decreaseCounter} style={{}}>
<Image source={bracketLeft} style={{ width: 40, height: 40 }} />
</Pressable>
<ProfileElement name={props.listProfile[cpt].name} avatar={props.listProfile[cpt].avatar} isActive={props.listProfile[cpt].isActive} disableSelection={props.disableSelection}/>
<Pressable onPress={increaseCounter} style={{}}>
<Image source={bracketRight} style={{ width: 40, height: 40 }} />
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
background: {
//height: 120,
height: 100,
borderRadius: 20,
marginHorizontal: 10,
borderWidth: 2,
borderColor: '#ACA279',
backgroundColor: '#E3DEC9',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
});

13
LeftOvers/components/TopBar.tsx
Unescape View File

@ -4,16 +4,13 @@ import { Appbar } from 'react-native-paper';
interface TopBarProps{ interface TopBarProps{
title : string title : string
isVisible : boolean isVisible : boolean
} }
export default function TopBar(props) {
export default function TopBar(props) {
const _goBack = () => console.log('Went back'); const _goBack = () => console.log('Went back');
const _handleSearch = () => console.log('Searching'); const _handleSearch = () => console.log('Searching');
const _handleMore = () => console.log('Shown more'); const _handleMore = () => console.log('Shown more');
return ( return (
<Appbar.Header style={{backgroundColor: '#F2F0E4'}} > <Appbar.Header style={{backgroundColor: '#F2F0E4'}} >
<Appbar.BackAction onPress={_goBack} /> <Appbar.BackAction onPress={_goBack} />
@ -24,8 +21,6 @@ interface TopBarProps{
<Appbar.Action icon="dots-vertical" onPress={_handleMore} /> <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
</> </>
)} )}
</Appbar.Header> </Appbar.Header>
); );
} }

1
LeftOvers/components/ValidateButton.tsx
Unescape View File

@ -21,6 +21,7 @@ export default function ValidateButton(props: ValidateButtonProps) {
borderColor: props.colour, borderColor: props.colour,
backgroundColor: props.backColour, backgroundColor: props.backColour,
alignItems: 'center', alignItems: 'center',
justifyContent: "center",
flexDirection: "row", flexDirection: "row",
padding: 5, padding: 5,
paddingRight: 10,}}> paddingRight: 10,}}>

2
LeftOvers/package-lock.json generated
Unescape View File

@ -19,7 +19,6 @@
"react-native": "0.72.6", "react-native": "0.72.6",
"react-native-dropdown-select-list": "^2.0.5", "react-native-dropdown-select-list": "^2.0.5",
"react-native-paper": "^5.11.1", "react-native-paper": "^5.11.1",
"react-native-safe-area-context": "^4.7.4",
"react-native-splash-screen": "^3.3.0", "react-native-splash-screen": "^3.3.0",
"react-native-web": "~0.19.6", "react-native-web": "~0.19.6",
"typescript": "^5.1.3" "typescript": "^5.1.3"
@ -14878,6 +14877,7 @@
"version": "4.7.4", "version": "4.7.4",
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz",
"integrity": "sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==", "integrity": "sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==",
"peer": true,
"peerDependencies": { "peerDependencies": {
"react": "*", "react": "*",
"react-native": "*" "react-native": "*"

1
LeftOvers/package.json
Unescape View File

@ -20,7 +20,6 @@
"react-native": "0.72.6", "react-native": "0.72.6",
"react-native-dropdown-select-list": "^2.0.5", "react-native-dropdown-select-list": "^2.0.5",
"react-native-paper": "^5.11.1", "react-native-paper": "^5.11.1",
"react-native-safe-area-context": "^4.7.4",
"react-native-splash-screen": "^3.3.0", "react-native-splash-screen": "^3.3.0",
"react-native-web": "~0.19.6", "react-native-web": "~0.19.6",
"typescript": "^5.1.3" "typescript": "^5.1.3"

43
LeftOvers/screens/CreateProfile.tsx
Unescape View File

@ -0,0 +1,43 @@
import React from 'react';
import {StyleSheet, View} from 'react-native';
import ProfileModification from '../components/ProfileModification';
import ValidateButton from '../components/ValidateButton';
import TopBar from '../components/TopBar';
import { LinearGradient } from 'expo-linear-gradient';
import { SafeAreaProvider } from 'react-native-safe-area-context';
export default function CreateProfile(props) {
const all = []
const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
return (
<SafeAreaProvider>
<TopBar title="Create Profile" isVisible="true"/>
<View style={styles.container}>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<View style={{marginTop: 20}}/>
<ProfileModification name="" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
<View style={{marginTop: 20}}/>
<ValidateButton title="Create Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
</LinearGradient>
</View>
</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,
},
});

135
LeftOvers/screens/FiltersSelection.tsx
Unescape View File

@ -0,0 +1,135 @@
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import ProfileModification from '../components/ProfileModification';
import ValidateButton from '../components/ValidateButton';
import TopBar from '../components/TopBar';
import ListSelect from '../components/ListSelect';
import ListWithoutSelect from '../components/ListWithoutSelect';
import ProfileSelection from '../components/ProfileSelection';
import {LinearGradient} from 'expo-linear-gradient';
import {SafeAreaProvider} from 'react-native-safe-area-context';
export default function FiltersSelection(props) {
const profiles = [
{name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
{name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
{name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"},
{name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
]
const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
const allProfiles = [{value: "Skimmed Milk"}, {value: "Nuts"}]
const dieProfiles = [{value: "Porkless"}, {value: "Pescatarian"}]
const dieAdd = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Vegan"}, {value: "Vegetarian"}]
const allAdd = []
return (
<SafeAreaProvider>
<TopBar title="Filters Selection" isVisible="true"/>
<View style={styles.container}>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<View style={{marginTop: 20}}/>
<View style={styles.profilesSelection}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Profiles</Text>
<Text style={styles.nbSelected}>2 selected, 1 waiting</Text>
</View>
<View style={{marginTop: 10}}/>
<ProfileSelection listProfile={profiles} disableSelection={false}/>
<View style={{marginTop: 20}}/>
<ValidateButton title="Change Selected Profiles" image="update.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
</View>
<View style={{marginTop: 20}}/>
<View style={styles.background}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Filters from Profiles</Text>
</View>
<ListWithoutSelect title="Diets" content={dieProfiles}></ListWithoutSelect>
<View style={{marginTop: 10}}/>
<ListWithoutSelect title="Allergies" content={allProfiles}></ListWithoutSelect>
</View>
<View style={{marginTop: 20}}/>
<View style={styles.background}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Additional Filters</Text>
<Text style={styles.nbSelected}>3 selected</Text>
</View>
<ListSelect title="Diets" content={dieAdd}></ListSelect>
<View style={{marginTop: 10}}/>
<ListWithoutSelect title="Allergies" content={allAdd}></ListWithoutSelect>
<View style={{marginTop: 10}}/>
<ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
</View>
<View style={{marginTop: 20}}/>
<ValidateButton title="Save Filters" image="save.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
</LinearGradient>
</View>
</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,
},
background: {
//maxWidth: 370,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#F2F0E4',
padding: 10,
paddingBottom: 0,
marginHorizontal: 10,
},
filterBar: {
flexDirection: "row",
width: 300,
paddingTop: 10,
paddingBottom: 5,
alignItems: "flex-end",
justifyContent: "center",
flex: 0.2,
},
filters: {
flex: 0.8,
fontSize: 20,
color: '#ACA279',
flex: 1,
padding: 5,
paddingLeft: 0,
paddingBottom: 0,
},
nbSelected: {
fontSize: 11,
//flex: 0.2,
color: "#3F3C42",
textAlign: "right",
},
profilesSelection: {
//maxWidth: 370,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#F2F0E4',
marginHorizontal: 10,
},
});

209
LeftOvers/screens/HomePage.tsx
Unescape View File

@ -0,0 +1,209 @@
import {React, useState} from 'react';
import {StyleSheet, View, Text, Pressable, Image} from 'react-native';
import ProfileModification from '../components/ProfileModification';
import ValidateButton from '../components/ValidateButton';
import TopBar from '../components/TopBar';
import ListSelect from '../components/ListSelect';
import ListWithoutSelect from '../components/ListWithoutSelect';
import ProfileSelection from '../components/ProfileSelection';
import FoodElementText from '../components/FoodElementText';
import {LinearGradient} from 'expo-linear-gradient';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import bracketLeft from '../assets/images/angle_bracket_left.png';
import bracketRight from '../assets/images/angle_bracket_right.png';
export default function HomePage(props) {
const profiles = [
{name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
{name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
{name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"},
{name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
]
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>
<View style={styles.topBar}>
<Image source={require("../assets/images/logo.png")} style={{width: 40, height: 40, flex: 0.1, marginLeft: 10}}/>
<Text style={styles.appName}>LeftOvers</Text>
<Image source={require("../assets/images/logo.png")} style={{width: 40, height: 40, flex: 0.1, marginRight: 10}}/>
</View>
<View style={styles.container}>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<View style={{marginTop: 20}}/>
<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={{marginTop: 20}}/>
<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}}/>
<ProfileSelection listProfile={profiles} disableSelection={true}/>
<View style={{marginTop: 20}}/>
<ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9"/>
</View>
<View style={{marginTop: 20}}/>
<View style={styles.profilesSelection}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Ingredient Stocks</Text>
</View>
<View style={{marginTop: 10}}/>
<ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9"/>
</View>
<View style={{marginTop: 20}}/>
<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"/>
<View style={{marginTop: 10}}/>
<ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9"/>
</View>
</LinearGradient>
</View>
</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: {
flexDirection: "row",
width: 300,
paddingTop: 10,
paddingBottom: 5,
alignItems: "flex-end",
justifyContent: "center",
flex: 0.2,
},
filters: {
flex: 0.8,
fontSize: 20,
color: '#ACA279',
flex: 1,
padding: 5,
paddingLeft: 0,
paddingBottom: 0,
},
nbSelected: {
fontSize: 11,
color: "#3F3C42",
textAlign: "right",
},
profilesSelection: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#F2F0E4',
paddingTop: 5,
marginHorizontal: 10,
},
welcome: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#F2F0E4',
paddingVertical: 10,
paddingHorizontal: 25,
marginHorizontal: 10,
},
text: {
fontSize: 20,
color: '#ACA279',
},
name: {
fontSize: 20,
fontWeight: "bold",
color: '#59BDCD',
textAlign: "left",
},
ingredientSelection: {
flexDirection: 'column',
width: "90%",
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#E3DEC9',
borderWidth: 2,
borderColor: "#ACA279",
marginHorizontal: 10,
padding: 5
},
appName: {
fontSize: 20,
fontWeight: "bold",
color: '#3F3C42',
textAlign: "center",
flex: 0.8,
},
topBar: {
flexDirection: 'row',
width: "100%",
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#F2F0E4',
padding: 5,
},
});

6
LeftOvers/screens/IngredientSelection.tsx
Unescape View File

@ -1,8 +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} 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 { 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';
import CustomButton from '../components/CustomButton'; import CustomButton from '../components/CustomButton';

43
LeftOvers/screens/ModifyProfile.tsx
Unescape View File

@ -0,0 +1,43 @@
import React from 'react';
import {StyleSheet, View} from 'react-native';
import ProfileModification from '../components/ProfileModification';
import ValidateButton from '../components/ValidateButton';
import TopBar from '../components/TopBar';
import { LinearGradient } from 'expo-linear-gradient';
import { SafeAreaProvider } from 'react-native-safe-area-context';
export default function ModifyProfile(props) {
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"}]
return (
<SafeAreaProvider>
<TopBar title="Modify Profile" isVisible="true"/>
<View style={styles.container}>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<View style={{marginTop: 20}}/>
<ProfileModification name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
<View style={{marginTop: 10}}/>
<ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
</LinearGradient>
</View>
</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,
},
});

193
LeftOvers/screens/Profiles.tsx
Unescape View File

@ -0,0 +1,193 @@
import {React, useState} from 'react';
import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native';
import ProfileDetails from '../components/ProfileDetails';
import ProfileDelete from '../components/ProfileDelete';
import TopBar from '../components/TopBar';
import {LinearGradient} from 'expo-linear-gradient';
import {SafeAreaProvider} from 'react-native-safe-area-context';
export default function ModifyProfile(props) {
const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
const allJackie = [{value: "Tomato"}, {value: "Relic"}]
const dieJackie = [{value: "Porkless"}, {value: "Vegetarian"}]
const allGoro = []
const dieGoro = [{value: "Pescatarian"}]
const allViktor = [{value: "Pasta"}, {value: "Fish"}]
const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}]
const [visible, setVisible] = useState(false);
const [opacity, setOpacity] = useState(1);
const raisePopUp = () => {
setVisible(true)
setOpacity(0.4)
}
const erasePopUp = () => {
setVisible(false)
setOpacity(1)
}
return (
<SafeAreaProvider>
<View style={styles.container}>
<View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
<TopBar title="Profiles" isVisible="true"/>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<View style={{marginTop: 10}}/>
<ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/>
<ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/>
<ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/>
<ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails>
<View style={{marginTop: 10}}/>
<View style={styles.modal}>
<Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
<View style={styles.modal}>
<View style={styles.viewModal}>
<View style={styles.profileValidation}>
<ProfileDelete name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny}></ProfileDelete>
</View>
<View style={styles.decisionBarVertical}>
<Text style={styles.validationQuestion}>Do you really want to delete this profile?</Text>
<View style={styles.decisionBar}>
<Pressable onPress={erasePopUp} style={{flex:0.5}}>
<View style={styles.yesButton}>
<Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: 30, width: 30, flex: 0.2, margin: 10}}/>
<Text style={styles.yesText}>Yes</Text>
</View>
</Pressable>
<Pressable onPress={erasePopUp} style={{flex:0.5}}>
<View style={styles.noButton}>
<Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: 30, width: 30, flex: 0.2, margin: 10}}/>
<Text style={styles.noText}>No</Text>
</View>
</Pressable>
</View>
</View>
</View>
</View>
</Modal>
</View>
</LinearGradient>
</View>
</View>
</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,
},
modal: {
position: 'absolute',
top: '50%',
left: '50%',
justifyContent: "center",
alignItems: "center",
width: "100%",
transform: [{ translateX: -207 }, { translateY: -140 }],
},
viewModal: {
flexDirection: "column",
padding: 10,
alignItems: "center",
justifyContent: "center",
width: "100%",
height: 200,
},
profileValidation: {
width: "100%",
alignItems: "center",
justifyContent: "center",
paddingBottom: 20,
},
decisionBarVertical: {
flexDirection: "column",
width: "100%",
padding: 10,
height: "100%",
borderRadius: 15,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#F2F0E4",
},
validationQuestion: {
fontSize: 20,
color: '#ACA279',
alignItems: 'center',
justifyContent: 'center',
flex: 0.3,
padding: 5,
},
decisionBar: {
flexDirection: "row",
flex: 0.7,
width: "100%",
height: "20%",
borderRadius: 15,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#F2F0E4",
},
yesButton: {
flexDirection: "row",
flex: 0.5,
padding: 10,
marginHorizontal: 10,
width: "90%",
borderRadius: 20,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#59BDCD",
},
yesText: {
fontSize: 20,
color: '#3F3C42',
alignItems: 'center',
justifyContent: 'center',
flex: 0.7,
padding: 5,
},
noButton: {
flexDirection: "row",
flex: 0.5,
padding: 10,
marginHorizontal: 10,
width: "90%",
borderRadius: 20,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#8A0000",
},
noText: {
fontSize: 20,
color: '#F2F0E4',
alignItems: 'center',
justifyContent: 'center',
flex: 0.7,
padding: 5,
},
});

6
LeftOvers/screens/RecipeSuggestion.tsx
Unescape View File

@ -132,11 +132,7 @@ export default function RecipeSuggestion(props) {
<CustomButton title="Save"></CustomButton> <CustomButton title="Save"></CustomButton>
</View> </View>
</View> </View>
)} )}
</Modal> </Modal>
</Portal> </Portal>
</PaperProvider> </PaperProvider>
@ -175,4 +171,4 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
marginTop: 10, marginTop: 10,
} }
}); });

0
LeftOvers/screens/home.tsx
Unescape View File

Write Preview
Loading…
Cancel
Save