From 65d4cf7cd13a438938d4e1983145539b8f704ba9 Mon Sep 17 00:00:00 2001 From: Louison PARANT Date: Tue, 28 Nov 2023 13:36:56 +0100 Subject: [PATCH] Update Recipe Suggestion Page --- LeftOvers/App.tsx | 6 +- LeftOvers/components/CustomButton.tsx | 15 +- LeftOvers/components/FoodElementText.tsx | 29 +- .../components/FoodElementTextSimple.tsx | 50 +++ LeftOvers/components/ParameterTopBar.tsx | 30 +- LeftOvers/components/ProfileSelection.tsx | 4 +- LeftOvers/components/RecipeElement.tsx | 104 +++---- LeftOvers/components/SelectedIngredient.tsx | 75 ++--- LeftOvers/components/TopBar.tsx | 9 +- LeftOvers/screens/Profiles.tsx | 2 +- LeftOvers/screens/RecipeSuggestion.tsx | 286 +++++++++++------- 11 files changed, 346 insertions(+), 264 deletions(-) create mode 100644 LeftOvers/components/FoodElementTextSimple.tsx diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index 131b093..359a60c 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -6,6 +6,7 @@ import ModifyProfile from './screens/ModifyProfile'; import CreateProfile from './screens/CreateProfile'; import FiltersSelection from './screens/FiltersSelection'; import RecipeSuggestion from './screens/RecipeSuggestion'; +import RecipeDetail from './screens/RecipeSuggestion'; import {SafeAreaProvider} from 'react-native-safe-area-context'; import {LinearGradient} from 'expo-linear-gradient'; @@ -15,7 +16,8 @@ export default function App(props) { // // // - - // + // + + // ); } \ No newline at end of file diff --git a/LeftOvers/components/CustomButton.tsx b/LeftOvers/components/CustomButton.tsx index 60528ad..1a0a2bf 100644 --- a/LeftOvers/components/CustomButton.tsx +++ b/LeftOvers/components/CustomButton.tsx @@ -23,25 +23,22 @@ const styles = StyleSheet.create({ width : 150, height: 40, borderRadius: 4, - elevation: 3, - backgroundColor: 'rgba(0, 0, 0, 0.7)', + backgroundColor: '#F2F0E4', }, text: { fontSize: 15, - lineHeight: 21, fontWeight: 'bold', - letterSpacing: 0.25, - color: 'white', + color: '#ACA279', }, view: { width : 145, height: 35, borderRadius: 4, - elevation: 3, borderWidth: 1, - borderColor: 'grey', - alignItems: 'center', // Centre le contenu verticalement - justifyContent: 'center', // Centre le contenu horizontalement + borderColor: '#ACA279', + alignItems: 'center', + justifyContent: 'center', + margin: "1%", }, }); diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx index e1d3ea3..12c645d 100644 --- a/LeftOvers/components/FoodElementText.tsx +++ b/LeftOvers/components/FoodElementText.tsx @@ -1,20 +1,20 @@ import React from 'react'; import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; import Separator from '../components/Separator'; +import plus from '../assets/images/plus.png'; +import moins from '../assets/images/minus.png'; - - -interface foodElementImageProps { +interface foodElementTextProps { title : string } - -export default function FoodElementText(props : any) { +export default function FoodElementText(props : foodElementTextProps) { return ( {props.title} + @@ -25,26 +25,31 @@ const styles = StyleSheet.create({ button: { alignItems: 'center', justifyContent: 'center', - width: "80%", + width : "80%", borderRadius: 5, backgroundColor: '#E3DEC9', + marginHorizontal: "3%", }, text: { - fontSize: 10, + fontSize: 15, + lineHeight: 20, fontWeight: 'bold', - padding : "2%", + padding : "3%", color: 'black', }, view: { alignItems: 'flex-start', justifyContent: 'center', + marginRight: "3%", + width: "100%" }, container: { width: "100%", + height: 50, borderRadius: 5, - borderWidth: 1, + borderWidth: 2, borderColor: '#3F3C42', - flexDirection: 'column', - justifyContent: 'center', + flexDirection: 'row', + justifyContent: 'space-between', }, -}); +}); \ No newline at end of file diff --git a/LeftOvers/components/FoodElementTextSimple.tsx b/LeftOvers/components/FoodElementTextSimple.tsx new file mode 100644 index 0000000..e527d1f --- /dev/null +++ b/LeftOvers/components/FoodElementTextSimple.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; +import Separator from '../components/Separator'; + + + +interface foodElementTextProps { + title: string +} + + +export default function FoodElementTextSimple(props: foodElementTextProps) { + return ( + + + + {props.title} + + + + ); +} + +const styles = StyleSheet.create({ + button: { + alignItems: 'center', + justifyContent: 'center', + width: "80%", + borderRadius: 5, + backgroundColor: '#E3DEC9', + }, + text: { + fontSize: 10, + fontWeight: 'bold', + padding : "2%", + color: 'black', + }, + view: { + alignItems: 'flex-start', + justifyContent: 'center', + }, + container: { + width: "100%", + borderRadius: 5, + borderWidth: 1, + borderColor: '#3F3C42', + flexDirection: 'column', + justifyContent: 'center', + }, +}); diff --git a/LeftOvers/components/ParameterTopBar.tsx b/LeftOvers/components/ParameterTopBar.tsx index 6f84163..603ddb7 100644 --- a/LeftOvers/components/ParameterTopBar.tsx +++ b/LeftOvers/components/ParameterTopBar.tsx @@ -1,27 +1,19 @@ import React from 'react'; import { Appbar } from 'react-native-paper'; -interface TopBarProps{ - source : string - firstImage : string - lastImage : string - } +interface ParameterTopBarProps{ + onEventIngredient: () => void + onEventFilter: () => void + colorIngredients: string + colorFilters: string +} - export default function ParameterTopBar(props : any) { - - const goFilter = () =>{ - props.onEventFilter('Hello'); - } - - const goIngredients = () =>{ - props.onEventIngredient('Hello'); - } - + export default function ParameterTopBar(props : ParameterTopBarProps) { return ( - - - - + + + + ); } \ No newline at end of file diff --git a/LeftOvers/components/ProfileSelection.tsx b/LeftOvers/components/ProfileSelection.tsx index 60ee2c8..1399b03 100644 --- a/LeftOvers/components/ProfileSelection.tsx +++ b/LeftOvers/components/ProfileSelection.tsx @@ -37,11 +37,11 @@ export default function ProfileSelection(props: ProfileSelectionProps) { return ( - + - + ); diff --git a/LeftOvers/components/RecipeElement.tsx b/LeftOvers/components/RecipeElement.tsx index efd854c..096b1f3 100644 --- a/LeftOvers/components/RecipeElement.tsx +++ b/LeftOvers/components/RecipeElement.tsx @@ -6,63 +6,40 @@ import Union_right from '../assets/images/Union_right.png'; import background from '../assets/images/Background.png'; interface recipeElementProps { - number : number - title : string - description : string - imageList : string[] - image : string + number: string + title: string + textList: string[] + description: string } -export default function RecipeElement(props : any) { - - const totalContentCount = props.imageList.length + 11; - const dynamicHeight = totalContentCount * 40; - const scrollViewHeight = 100; - - - +export default function RecipeElement(props: recipeElementProps) { return ( - - + + {props.number} {props.title} - - - + + + Ingredients - - - - - {props.imageList.length > 0 && props.imageList.map((source, index) => ( - - ))} + + + + {props.textList.length > 0 && props.textList.map((source, index) => ( + - {source.title} - + ))} - - - {props.imageList.length <= 0 ? ( - - {props.textList.length > 0 && props.textList.map((source, index) => ( - {source} - ))} - - ) : null} - - - - - - Description - + + + Description + - - {props.description} + + {props.description} - - - + ); @@ -73,54 +50,47 @@ const styles = StyleSheet.create({ button: { alignItems: 'center', justifyContent: 'center', - width : 300, + width: 300, + height: "90%", borderRadius: 40, - elevation: 3, backgroundColor: '#E3DEC9', }, text: { - fontSize: 14, - lineHeight: 21, + fontSize: 15, fontWeight: 'bold', - letterSpacing: 0.25, color: '#756C28', - marginTop: 10, + marginTop: "4%", }, smallText: { fontSize: 12, - lineHeight: 21, - fontWeight: 'bold', - letterSpacing: 0.25, color: '#71662A', textAlign: "center", - margin : 5 + margin : "2%" }, title:{ fontSize: 18, - lineHeight: 21, fontWeight: 'bold', - letterSpacing: 0.25, color: '#524B1A', }, view: { - width : 290, + width : "95%", + height: "96.5%", borderRadius: 40, - elevation: 3, borderWidth: 2, - borderColor: 'grey', - alignItems: 'center', // Centre le contenu verticalement - display: "flex", - flexWrap: "wrap", + padding: "5%", + borderColor: '#3F3C42', + alignItems: 'center', + justifyContent: "center", }, - horizontalAlignement: { + horizontalAlignment: { display: "flex", flexDirection : 'row', alignItems: 'center', justifyContent: 'space-between', - marginTop : 5, + marginTop : "2%", flexWrap: 'wrap', }, scrollViewContainer: { - flex: 1, // Assurez-vous que le reste du contenu occupe l'espace restant + flex: 1, }, }); \ No newline at end of file diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx index 26e690c..8dd1681 100644 --- a/LeftOvers/components/SelectedIngredient.tsx +++ b/LeftOvers/components/SelectedIngredient.tsx @@ -1,58 +1,51 @@ import React, { useState } from 'react'; -import { View, StyleSheet, Pressable, Image, Text } from 'react-native'; +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 parameter from '../assets/images/parameter.png'; import FoodElementText from './FoodElementText'; interface SelectedIngredientProps { - listeIngredient: string[]; - listeImage: string[]; - onEvent: (value: string) => void; + ingredientList: string[] + onEvent: () => void } export default function SelectedIngredient(props: SelectedIngredientProps) { const [cpt, setCpt] = useState(0); const decreaseCounter = () => { - if (cpt > 0) { + if(cpt > 0){ setCpt(cpt - 1); - } else { - setCpt(props.listeIngredient.length - 1); + } + else{ + setCpt(props.ingredientList.length - 1); } }; - const increaseCounter = () => { - if (cpt < props.listeIngredient.length - 1) { + if(cpt < props.ingredientList.length - 1){ setCpt(cpt + 1); - } else { + } + else{ setCpt(0); } }; - const handlePress = () => { - // Supposons que vous voulez envoyer la valeur 'Hello' au parent - props.onEvent('Hello'); - }; - return ( - + Selected ingredients - - + + - - - + + + - - - - - + + + @@ -61,30 +54,26 @@ export default function SelectedIngredient(props: SelectedIngredientProps) { const styles = StyleSheet.create({ view: { - width: 350, - height: 110, + width: "90%", + paddingBottom: "5%", borderRadius: 15, - elevation: 3, - borderWidth: 1, - borderColor: 'black', - display: 'flex', - flexWrap: 'wrap', + borderColor: '#3F3C42', backgroundColor: '#E3DEC9', + alignItems: "center", + justifyContent: "center", }, - horizontalAlignement: { - display: 'flex', - height: 30, - width: 350, + horizontalAlignment: { + width: "90%", flexDirection: 'row', - justifyContent: 'space-around', + justifyContent: 'space-evenly', alignItems: 'center', - marginTop: 10, + marginTop: "3%", }, text: { - fontSize: 14, - lineHeight: 21, + fontSize: 15, fontWeight: 'bold', - letterSpacing: 0.25, - color: 'black', + color: '#3F3C42', + flex: 1, + marginLeft: "8%", }, }); diff --git a/LeftOvers/components/TopBar.tsx b/LeftOvers/components/TopBar.tsx index 5a7f0c0..7c8d240 100644 --- a/LeftOvers/components/TopBar.tsx +++ b/LeftOvers/components/TopBar.tsx @@ -13,12 +13,11 @@ export default function TopBar(props) { return ( - - - + + {props.isVisible &&( - <> - + <> + )} diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx index fb34736..34d8e6b 100644 --- a/LeftOvers/screens/Profiles.tsx +++ b/LeftOvers/screens/Profiles.tsx @@ -94,7 +94,7 @@ const styles = StyleSheet.create({ height: "100%", width: "100%", flex: 1, - padding: 10, + padding: "2%", paddingTop: 0, }, separator: { diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index 969469d..e190c6b 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/LeftOvers/screens/RecipeSuggestion.tsx @@ -1,162 +1,240 @@ import React, { useState } from 'react'; -import { View, StyleSheet, Text, Image, Pressable} from 'react-native'; -import { SafeAreaProvider } from 'react-native-safe-area-context'; -import { Modal, Portal, PaperProvider} from 'react-native-paper'; +import {View, StyleSheet, Text, Image, Pressable, useWindowDimensions, ScrollView} from 'react-native'; +import {SafeAreaProvider } from 'react-native-safe-area-context'; +import {Modal, Portal, PaperProvider} from 'react-native-paper'; +import {LinearGradient} from 'expo-linear-gradient'; import TopBar from '../components/TopBar'; import RecipeElement from '../components/RecipeElement'; import SelectedIngredient from '../components/SelectedIngredient'; +import FoodElementTextSimple from '../components/FoodElementTextSimple'; import FoodElementText from '../components/FoodElementText'; import brochette from '../assets/images/brochette.png'; import ParameterTopBar from '../components/ParameterTopBar'; +import ListSelect from '../components/ListSelect'; +import ListWithoutSelect from '../components/ListWithoutSelect'; +import ValidateButton from '../components/ValidateButton'; import bracketLeft from '../assets/images/angle_bracket_left.png'; import bracketRight from '../assets/images/angle_bracket_right.png'; import CustomButton from '../components/CustomButton'; +import plus from '../assets/images/plus_small.png'; +import minus from '../assets/images/minus.png'; export default function RecipeSuggestion(props) { - - const imageList = []; - const [visible, setVisible] = React.useState(false); + const [visible, setVisible] = React.useState(true); const [visibleFilters, setVisibleFilters] = React.useState(false); const [visibleIngredients, setVisibleIngredients] = React.useState(true); const [minCpt, setMinCpt] = useState(0); const [maxCpt, setMaxCpt] = useState(4); - const listeIngredient = props.list; - const limitedList = listeIngredient.slice(minCpt, maxCpt); - const showModal = () => setVisible(true); - const hideModal = () => setVisible(false); + const ingredientList = [{title: "Steak"}, {title: "Sheep Ribs"}, {title: "Rabbit Thigh"}, {title: "Ham"}, {title: "Cream (Liquid)"}, {title: "Pepper Bell"}] + const ingredientListV2 = [{title: "Smoked Salmon"}, {title: "Tomato"}, {title: "Carrot"}] + const limitedList = ingredientList.slice(minCpt, maxCpt); + const [colorIngredients, setColorIngredients] = useState("#59BDCD"); + const [colorFilters, setColorFilters] = useState("#3F3C42"); + + const die = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Gluten free"}, {value: "Porkless"}] + const all = [] + const containerStyle = { - backgroundColor: 'white', - height: 450, - width: 380, + //minHeight: useWindowDimensions().height/2, + //width: useWindowDimensions().width, + height: "75%", + width: "100%", + borderTopLeftRadius: 20, + borderTopRightRadius: 20, }; - const handleChildEvent = (value) => { - setVisible(!visible) - }; - - const handleChildEventGoFilters = (value) => { + const handleChildEvent = () => { + setVisible(!visible) + } + const handleChildEventGoFilters = () => { setVisibleIngredients(false); setVisibleFilters(true); + setColorFilters("#59BDCD") + setColorIngredients("#3F3C42") } - - const handleChildEventGoIngredients = (value) => { + const handleChildEventGoIngredients = () => { setVisibleFilters(false); setVisibleIngredients(true); - console.log("jai change pour iingredient"); + setColorFilters("#3F3C42") + setColorIngredients("#59BDCD") } const decreaseCounter = () => { if (minCpt > 0) { setMinCpt(minCpt - 4); setMaxCpt(maxCpt - 4) - } - }; - + } + else{ + setMaxCpt(ingredientList.length+ingredientList.length%4) + var cpt=ingredientList.length-(ingredientList.length%4) + setMinCpt(cpt) + } + } const increaseCounter = () => { - if (maxCpt < listeIngredient.length) { + if (maxCpt < ingredientList.length) { setMinCpt(minCpt + 4); setMaxCpt(maxCpt + 4) - } - }; + } + else{ + setMinCpt(0) + setMaxCpt(4) + } + } const imageElements = limitedList.map((source, index) => ( - - - - + + + + )); return ( - + + - - - - - - - - - - - - - {visibleIngredients && ( - - {imageElements} - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + {visibleIngredients &&( + + {imageElements} + + + + + + + + - )} + - {visibleFilters &&( - - HEHEHEHEHEHEHE - - - - - )} - - - - + )} + {visibleFilters &&( + + + + + + Additional Filters + {die.length} selected + + + + + + + + + + + + + + + )} + + + ); } const styles = StyleSheet.create({ - page: { - flex: 1, - backgroundColor: '#59BDCD', - alignItems: 'center', - display: 'flex', - flexWrap: 'wrap', - padding: 20, + linearGradient: { + width: "100%", + flex: 1, + //padding: "2%", + paddingTop: 0, + alignItems: "center", + justifyContent: "center" + }, + + background: { + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 20, + backgroundColor: '#F2F0E4', + padding: "3%", + marginHorizontal: "3%", + }, + + filterBar: { + flexDirection: "row", + width: "85%", + paddingTop: "3%", + paddingBottom: "2%", + alignItems: "flex-end", + justifyContent: "center", }, - element: { - marginTop: 20, + filters: { + fontSize: 20, + color: '#ACA279', + flex: 1, }, - backdrop: { - backgroundColor: 'rgba(0, 0, 0, 0.5)', + nbSelected: { + fontSize: 11, + color: "#3F3C42", + textAlign: "right", }, + + page: { + flex: 1, + backgroundColor: '#59BDCD', + alignItems: 'center', + paddingHorizontal: "3%", + }, + modal :{ position: 'absolute', - top: '50%', // Centre verticalement - left: '50%', // Centre horizontalement - transform: [{ translateX: -185 }, { translateY: -90 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur + top: '50%', + height: "50%", + width: "100%", + borderWidth: 1, + borderColor: "red", + borderTopLeftRadius: 20, + borderTopRightRadius: 20, }, - horizontalAlignement: { + horizontalAlignment: { display: 'flex', - height: 30, - width: 350, + height: "10%", + width: "100%", flexDirection: 'row', - justifyContent: 'space-around', + justifyContent: 'space-between', alignItems: 'center', - marginTop: 10, - } + }, + + recipes: { + flexDirection: "row", + overflow: "scroll", + alignItems: "flex-start", + justifyContent: "center", + }, }); \ No newline at end of file