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

Modification Ingredient Selection Page
continuous-integration/drone/push Build is passing Details

Browse Source
pull/20/head
Louison PARANT 2 years ago
parent 3ba2783ae8
commit e1eb67da1c
14 changed files with 200 additions and 158 deletions
Show Stats Download Patch File Download Diff File

1
LeftOvers/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver
Unescape View File

@ -0,0 +1 @@
1023.922.9182.0

30
LeftOvers/components/CustomButton.tsx
Unescape View File

@ -1,5 +1,6 @@
import React from 'react'; import React, {useContext} from 'react';
import {StyleSheet, Pressable, Text, View} from 'react-native'; import {StyleSheet, Pressable, Text, View} from 'react-native';
import ColorContext from '../theme/ColorContext';
interface CustomButtonProps { interface CustomButtonProps {
@ -7,38 +8,39 @@ interface CustomButtonProps {
} }
export default function CustomButton(props: CustomButtonProps) { export default function CustomButton(props: CustomButtonProps) {
return ( const {colors} = useContext(ColorContext)
<Pressable style={styles.button}>
<View style={styles.view}>
<Text style={styles.text}>{props.title}</Text>
</View>
</Pressable>
);
}
const styles = StyleSheet.create({ const styles = StyleSheet.create({
button: { button: {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
width : 150, width : 150,
height: 40, height: 40,
borderRadius: 4, borderRadius: 4,
backgroundColor: '#F2F0E4', backgroundColor: colors.cardBackground,
}, },
text: { text: {
fontSize: 15, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
color: '#ACA279', color: colors.cardElementBorder,
}, },
view: { view: {
width : 145, width : 145,
height: 35, height: 35,
borderRadius: 4, borderRadius: 4,
borderWidth: 1, borderWidth: 1,
borderColor: '#ACA279', borderColor: colors.cardElementBorder,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
margin: "1%", margin: "1%",
}, },
}); });
return (
<Pressable style={styles.button}>
<View style={styles.view}>
<Text style={styles.text}>{props.title}</Text>
</View>
</Pressable>
);
}

4
LeftOvers/components/ListSelect.tsx
Unescape View File

@ -76,6 +76,9 @@ export default function ListSelect(props: ListProps) {
fontSize: 15, fontSize: 15,
color: colors.cardElementText, color: colors.cardElementText,
}, },
box: {
borderColor: "#3F3C42"
}
}); });
return ( return (
@ -92,6 +95,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}
checkBoxStyles={styles.box}
notFoundText="All Diets Already Selected" notFoundText="All Diets Already Selected"
placeholder={props.title} placeholder={props.title}
label={props.title}/> label={props.title}/>

2
LeftOvers/components/ListWithoutSelect.tsx
Unescape View File

@ -5,7 +5,7 @@ import ColorContext from '../theme/ColorContext';
type ListProps = { type ListProps = {
title: string title: string
content: string[] content: {title: string}[]
} }
export default function ListWithoutSelect(props: ListProps) { export default function ListWithoutSelect(props: ListProps) {

66
LeftOvers/components/ProfileDelete.tsx
Unescape View File

@ -1,15 +1,17 @@
import {React, useState} from 'react'; import React, {useContext, useState} from 'react';
import {StyleSheet, Text, View, Image, Pressable} from 'react-native'; import {StyleSheet, Text, View, Image, Pressable} from 'react-native';
import ListWithoutSelect from './ListWithoutSelect'; import ListWithoutSelect from './ListWithoutSelect';
import ColorContext from '../theme/ColorContext';
type ProfileProps = { type ProfileProps = {
name: string name: string
avatar: string avatar: string
diets: list<string> diets: {title: string}[]
allergies: list<string> allergies: {title: string}[]
} }
export default function ProfileDelete(props: ProfileProps) { export default function ProfileDelete(props: ProfileProps) {
const {colors} = useContext(ColorContext)
const [display, setDisplay] = useState("flex") const [display, setDisplay] = useState("flex")
const changeListVisibility = () => { const changeListVisibility = () => {
if (display == "none"){ if (display == "none"){
@ -31,37 +33,18 @@ export default function ProfileDelete(props: ProfileProps) {
imageSource = require('../assets/images/logo.png') imageSource = require('../assets/images/logo.png')
} }
return ( const styles = StyleSheet.create({
<View style={styles.background}>
<View style={styles.pseudoBar}>
<Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text>
</View>
<Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
<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: "3%"}}/>
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
</View>
</View>
);
}
const styles = StyleSheet.create({
background: { background: {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: 15, borderRadius: 15,
backgroundColor: '#F2F0E4', backgroundColor: colors.cardBackground,
padding: "3%", padding: "3%",
marginHorizontal: "3%", marginHorizontal: "3%",
height: "100%", height: "100%",
borderWidth: 1,
borderColor: colors.blocBorder,
}, },
pseudoBar: { pseudoBar: {
@ -76,7 +59,7 @@ const styles = StyleSheet.create({
padding: "5%", padding: "5%",
resizeMode: 'contain', resizeMode: 'contain',
borderWidth: 2, borderWidth: 2,
borderColor: "#ACA279", borderColor: colors.cardElementBorder,
borderRadius: 45, borderRadius: 45,
height: "100%", height: "100%",
flex: 0.03, flex: 0.03,
@ -84,7 +67,7 @@ const styles = StyleSheet.create({
text: { text: {
flex: 1, flex: 1,
fontSize: 20, fontSize: 20,
color: '#ACA279', color: colors.cardElementBorder,
alignItems: 'center', alignItems: 'center',
textAlign: 'left', textAlign: 'left',
marginLeft: "10%", marginLeft: "10%",
@ -101,7 +84,7 @@ const styles = StyleSheet.create({
}, },
filters: { filters: {
fontSize: 20, fontSize: 20,
color: '#ACA279', color: colors.cardElementBackground,
flex: 1, flex: 1,
padding: "2%", padding: "2%",
paddingLeft: 0, paddingLeft: 0,
@ -110,7 +93,28 @@ const styles = StyleSheet.create({
arrow: { arrow: {
height: "100%", height: "100%",
resizeMode: 'contain', resizeMode: 'contain',
tintColor: "#3F3C42", tintColor: colors.cardDetail,
flex: 0.1, flex: 0.1,
}, },
}); });
return (
<View style={styles.background}>
<View style={styles.pseudoBar}>
<Image source={imageSource} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text>
</View>
<Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
<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: "3%"}}/>
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
</View>
</View>
);
}

2
LeftOvers/components/ProfileDetails.tsx
Unescape View File

@ -136,7 +136,7 @@ export default function ProfileDetails(props) {
<Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}> <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
<View style={styles.filterBar}> <View style={styles.filterBar}>
<Text style={styles.filters}>Filters</Text> <Text style={styles.filters}>Filters</Text>
<Text style={styles.nbSelected}>{props.diets.length} selected</Text> <Text style={styles.nbSelected}>{props.diets.length} diets selected</Text>
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image> <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
</View> </View>
</Pressable> </Pressable>

2
LeftOvers/components/ProfileModification.tsx
Unescape View File

@ -108,7 +108,7 @@ export default function ProfileModification(props: ProfileProps) {
</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}>0 diets selected</Text>
</View> </View>
<ListSelect title="Diets" content={props.diets}></ListSelect> <ListSelect title="Diets" content={props.diets}></ListSelect>
<View style={{marginTop: "6%"}}/> <View style={{marginTop: "6%"}}/>

2
LeftOvers/components/RecipeElement.tsx
Unescape View File

@ -8,7 +8,7 @@ import background from '../assets/images/Background.png';
interface RecipeElementProps { interface RecipeElementProps {
number: string number: string
title: string title: string
textList: string[] textList: {title: string}[]
description: string description: string
} }

2
LeftOvers/components/SelectedIngredient.tsx
Unescape View File

@ -6,7 +6,7 @@ import parameter from '../assets/images/parameter.png';
import FoodElementText from './FoodElementText'; import FoodElementText from './FoodElementText';
interface SelectedIngredientProps { interface SelectedIngredientProps {
ingredientList: string[] ingredientList: {title: string}[]
onEvent: () => void onEvent: () => void
} }

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

@ -28,6 +28,7 @@
"react-native-safe-area-context": "^4.6.3", "react-native-safe-area-context": "^4.6.3",
"react-native-screens": "^3.22.0", "react-native-screens": "^3.22.0",
"react-native-splash-screen": "^3.3.0", "react-native-splash-screen": "^3.3.0",
"react-native-virtualized-view": "^1.0.0",
"react-native-web": "~0.19.6", "react-native-web": "~0.19.6",
"typescript": "^5.1.3" "typescript": "^5.1.3"
}, },
@ -15215,6 +15216,15 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/react-native-virtualized-view": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-native-virtualized-view/-/react-native-virtualized-view-1.0.0.tgz",
"integrity": "sha512-7YyFMMkNzJ787/giGkKcm0JEx0IcLEE/XHREGz2I4K1RISQGFjEDe6iWsapOnHSR/e1vhebZJ8VmqhSpg5YPzg==",
"peerDependencies": {
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-web": { "node_modules/react-native-web": {
"version": "0.19.9", "version": "0.19.9",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",
@ -28947,6 +28957,12 @@
} }
} }
}, },
"react-native-virtualized-view": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-native-virtualized-view/-/react-native-virtualized-view-1.0.0.tgz",
"integrity": "sha512-7YyFMMkNzJ787/giGkKcm0JEx0IcLEE/XHREGz2I4K1RISQGFjEDe6iWsapOnHSR/e1vhebZJ8VmqhSpg5YPzg==",
"requires": {}
},
"react-native-web": { "react-native-web": {
"version": "0.19.9", "version": "0.19.9",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",

1
LeftOvers/package.json
Unescape View File

@ -29,6 +29,7 @@
"react-native-safe-area-context": "^4.6.3", "react-native-safe-area-context": "^4.6.3",
"react-native-screens": "^3.22.0", "react-native-screens": "^3.22.0",
"react-native-splash-screen": "^3.3.0", "react-native-splash-screen": "^3.3.0",
"react-native-virtualized-view": "^1.0.0",
"react-native-web": "~0.19.6", "react-native-web": "~0.19.6",
"typescript": "^5.1.3" "typescript": "^5.1.3"
}, },

26
LeftOvers/screens/IngredientSelection.tsx
Unescape View File

@ -1,5 +1,5 @@
import React, { useEffect, useState, useContext } from 'react'; import React, { useEffect, useState, useContext } from 'react';
import { View, StyleSheet, Text, Image, Pressable, ActivityIndicator, FlatList, ScrollView, useWindowDimensions } from 'react-native'; import { View, StyleSheet, Text, Image, Pressable, ActivityIndicator, FlatList, useWindowDimensions, ScrollView } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context'; import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Searchbar } from 'react-native-paper'; import { Searchbar } from 'react-native-paper';
import FoodElementText from '../components/FoodElementText'; import FoodElementText from '../components/FoodElementText';
@ -11,6 +11,7 @@ import Ingredient from '../Models/Ingredient';
import IngredientService from '../Services/Ingredients/IngredientsServices'; import IngredientService from '../Services/Ingredients/IngredientsServices';
import { LinearGradient } from 'expo-linear-gradient'; import { LinearGradient } from 'expo-linear-gradient';
import ColorContext from '../theme/ColorContext'; import ColorContext from '../theme/ColorContext';
import ValidateButton from '../components/ValidateButton';
export default function IngredientSelection(props) { export default function IngredientSelection(props) {
const alphabetArray: Array<string> = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]; const alphabetArray: Array<string> = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
@ -121,13 +122,12 @@ const loadIngredients = async () => {
element: { element: {
width: "100%", width: "100%",
backgroundColor:'#F2F0E4', backgroundColor: colors.cardBackground,
borderRadius: 30, borderRadius: 30,
borderWidth: 1, borderWidth: 1,
borderColor: colors.blocBorder, borderColor: colors.blocBorder,
}, },
horizontalAlignment: { horizontalAlignment: {
width: "100%",
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-around', justifyContent: 'space-around',
alignItems: 'center', alignItems: 'center',
@ -137,14 +137,13 @@ const loadIngredients = async () => {
return ( return (
<SafeAreaProvider style={{flex: 1}}> <SafeAreaProvider style={{flex: 1}}>
<ScrollView> <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: "6%"}}/> <View style={{marginTop: "6%"}}/>
<View style={styles.element}> <View style={styles.element}>
<View style={[styles.horizontalAlignment, { margin: 10 }]}> <View style={[styles.horizontalAlignment, { margin: "2%" }]}>
{alphabetArray.map((source, index) => ( {alphabetArray.map((source, index) => (
<Pressable key={index} onPress={() => handleLetterPress(source)}> <Pressable key={index} onPress={() => handleLetterPress(source)}>
<Text style={{ color: "blue" }}>{source}</Text> <Text style={{ color: colors.letterFilter }}>{source}</Text>
</Pressable> </Pressable>
))} ))}
</View> </View>
@ -154,13 +153,13 @@ const loadIngredients = async () => {
onChangeText={handleSearch} onChangeText={handleSearch}
value={searchQuery} value={searchQuery}
style={{margin: "3%", style={{margin: "3%",
backgroundColor: '#F2F0E4', backgroundColor: colors.cardBackground,
borderWidth : 1, borderWidth : 1,
borderColor: "#ACA279", borderColor: colors.cardElementBorder,
borderRadius: 15, borderRadius: 15,
}}/> }}/>
</View> </View>
<View style={{flex: 1, maxHeight: 300}}> <View style={{height: 280}}>
<FlatList <FlatList
data={response ? response : []} data={response ? response : []}
renderItem={({ item }) => ( renderItem={({ item }) => (
@ -178,9 +177,9 @@ const loadIngredients = async () => {
<View style={{marginTop: "6%"}}/> <View style={{marginTop: "6%"}}/>
<View style={styles.element}> <View style={styles.element}>
<View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}> <View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}>
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text> <Text style={{fontSize: 20, color: colors.cardElementBorder}}>Available</Text>
</View> </View>
<View style={{flex: 1, maxHeight: 300}}> <View style={{flex: 1, maxHeight: 280}}>
<FlatList <FlatList
data={selectedIngredients} data={selectedIngredients}
renderItem={({ item }) => ( renderItem={({ item }) => (
@ -193,10 +192,9 @@ const loadIngredients = async () => {
</View> </View>
</View> </View>
<View style={{marginTop: "8%"}}></View> <View style={{marginTop: "8%"}}></View>
<CustomButton title="Find a recipe"/> <ValidateButton title="Find a recipe" image="validate.png" colour={colors.buttonMain} backColour={colors.cardBackground}/>
<View style={{marginBottom: "20%"}}></View> <View style={{marginBottom: "20%"}}></View>
</LinearGradient> </LinearGradient>
</ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }

34
LeftOvers/screens/Profiles.tsx
Unescape View File

@ -1,5 +1,7 @@
import React, { useContext, useState } from 'react'; import React, { useContext, useState } from 'react';
import { StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions } from 'react-native'; import { StyleSheet, View, Pressable, Text, Image, ScrollView, useWindowDimensions } from 'react-native';
import {Modal, Portal, PaperProvider} from 'react-native-paper';
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';
@ -44,6 +46,12 @@ export default function Profiles({navigation, props}) {
// ... Ajoutez d'autres profils ici de la même manière // ... Ajoutez d'autres profils ici de la même manière
]; ];
const containerStyle = {
//minHeight: useWindowDimensions().height/2,
//width: useWindowDimensions().width,
height: "75%",
width: "100%",
};
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -96,11 +104,13 @@ export default function Profiles({navigation, props}) {
borderRadius: 15, borderRadius: 15,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
backgroundColor: "#F2F0E4", backgroundColor: colors.cardBackground,
borderWidth: 1,
borderColor: colors.blocBorder,
}, },
validationQuestion: { validationQuestion: {
fontSize: 20, fontSize: 20,
color: '#ACA279', color: colors.cardElementBorder,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flex: 0.3, flex: 0.3,
@ -123,7 +133,7 @@ export default function Profiles({navigation, props}) {
borderRadius: 20, borderRadius: 20,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
backgroundColor: "#59BDCD", backgroundColor: colors.yesButton,
}, },
yesText: { yesText: {
fontSize: 20, fontSize: 20,
@ -168,13 +178,16 @@ export default function Profiles({navigation, props}) {
return ( return (
<SafeAreaProvider style={{flex: 1}}> <SafeAreaProvider style={{flex: 1}}>
<PaperProvider>
<ScrollView> <ScrollView>
<View style={{opacity: opacity, height: "100%", width: "100%", flex: 1}}>
<LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}> <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={styles.separator}/> <View style={styles.separator}/>
{profileComponents} {profileComponents}
<View style={styles.modal}> <View style={{marginBottom: "20%"}}/>
<Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}> </LinearGradient>
</ScrollView>
<Portal>
<Modal visible={visible} onDismiss={erasePopUp} contentContainerStyle={containerStyle} style={{marginTop: 0, justifyContent: "flex-start"}}>
<View style={styles.modal}> <View style={styles.modal}>
<View style={styles.viewModal}> <View style={styles.viewModal}>
<View style={styles.profileValidation}> <View style={styles.profileValidation}>
@ -200,11 +213,8 @@ export default function Profiles({navigation, props}) {
</View> </View>
</View> </View>
</Modal> </Modal>
</View> </Portal>
<View style={{marginBottom: "20%"}}/> </PaperProvider>
</LinearGradient>
</View>
</ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
); );
} }

6
LeftOvers/theme/colors.ts
Unescape View File

@ -34,6 +34,8 @@ export interface Theme {
textBottomBarFocussed: string, textBottomBarFocussed: string,
blocBorder: string, blocBorder: string,
buttonMain: string, buttonMain: string,
yesButton: string,
letterFilter: string,
} }
export const LightTheme : Theme = { export const LightTheme : Theme = {
@ -60,6 +62,8 @@ export const LightTheme : Theme = {
textBottomBarFocussed: Moonstone, textBottomBarFocussed: Moonstone,
blocBorder: Alabaster, blocBorder: Alabaster,
buttonMain: Ecru, buttonMain: Ecru,
yesButton: Moonstone,
letterFilter: Moonstone,
} }
export const DarkTheme : Theme = { export const DarkTheme : Theme = {
@ -86,5 +90,7 @@ export const DarkTheme : Theme = {
textBottomBarFocussed: SteelBlue, textBottomBarFocussed: SteelBlue,
blocBorder: EerieBlack, blocBorder: EerieBlack,
buttonMain: CarolinaBlue, buttonMain: CarolinaBlue,
yesButton: CarolinaBlue,
letterFilter: CarolinaBlue,
} }

Write Preview
Loading…
Cancel
Save