From 36c5578d4ec71a287cfb9890a061ed922208076f Mon Sep 17 00:00:00 2001 From: Louison PARANT Date: Mon, 20 Nov 2023 08:28:12 +0100 Subject: [PATCH] Profiles Selection Components --- LeftOvers/App.tsx | 6 +- LeftOvers/components/ListSelect.tsx | 10 ++ LeftOvers/components/ProfileElement.tsx | 98 +++++++++++++ LeftOvers/components/ProfileModification.tsx | 6 +- LeftOvers/components/ProfileSelection.tsx | 63 +++++++++ LeftOvers/screens/CreateProfile.tsx | 43 ++++++ LeftOvers/screens/FiltersSelection.tsx | 137 +++++++++++++++++++ LeftOvers/screens/IngredientSelection.tsx | 6 +- 8 files changed, 363 insertions(+), 6 deletions(-) create mode 100644 LeftOvers/components/ProfileElement.tsx create mode 100644 LeftOvers/components/ProfileSelection.tsx create mode 100644 LeftOvers/screens/CreateProfile.tsx create mode 100644 LeftOvers/screens/FiltersSelection.tsx diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index 0be1cc3..530740c 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -3,11 +3,15 @@ import {StyleSheet, View} from 'react-native'; import ModifyProfile from './screens/ModifyProfile'; import Profiles from './screens/Profiles'; import RecipeSuggestion from './screens/RecipeSuggestion'; +import CreateProfile from './screens/CreateProfile'; +import FiltersSelection from './screens/FiltersSelection'; export default function App(props) { return( // - + // // + // + ); } \ No newline at end of file diff --git a/LeftOvers/components/ListSelect.tsx b/LeftOvers/components/ListSelect.tsx index e5fa336..5b2a354 100644 --- a/LeftOvers/components/ListSelect.tsx +++ b/LeftOvers/components/ListSelect.tsx @@ -23,6 +23,8 @@ export default function ListSelect(props: ListProps) { dropdownStyles={styles.itemList} dropdownItemStyles={styles.itemCell} dropdownTextStyles={styles.itemText} + badgeStyles={styles.badges} + badgeTextStyles={styles.badgesText} placeholder={props.title} label={props.title}/> ); @@ -86,4 +88,12 @@ const styles = StyleSheet.create({ paddingLeft: 10, color: "#3F3C42", }, + + badges: { + backgroundColor: "#59BDCD" + }, + badgesText: { + fontSize: 15, + color: "#F2F0E4", + }, }); \ No newline at end of file diff --git a/LeftOvers/components/ProfileElement.tsx b/LeftOvers/components/ProfileElement.tsx new file mode 100644 index 0000000..8b158a2 --- /dev/null +++ b/LeftOvers/components/ProfileElement.tsx @@ -0,0 +1,98 @@ +import {React, useState} from 'react'; +import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; + +type Profile = { + name: string + avatar: string + isActive: string +} + +export default function ProfileElement(props : Profile) { + const [waiting, setWaiting] = useState("none") + const changeStatus = () => { + if (waiting == "flex"){ + setWaiting("none") + } + else{ + setWaiting("flex") + } + console.log(waiting, props.name) + }; + return ( + + + + + {props.name} + + + + Activated + + + + Waiting... + + + + + ); +} + +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", + }, +}); \ No newline at end of file diff --git a/LeftOvers/components/ProfileModification.tsx b/LeftOvers/components/ProfileModification.tsx index cd0fd0f..7f66760 100644 --- a/LeftOvers/components/ProfileModification.tsx +++ b/LeftOvers/components/ProfileModification.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import {React, useState} from 'react'; import {StyleSheet, Text, TextInput, View, Image} from 'react-native'; import ValidateButton from './ValidateButton'; import ListSelect from './ListSelect'; @@ -12,11 +12,13 @@ type ProfileProps = { } export default function ProfileModification(props: ProfileProps) { + const [name, onChangeName] = useState(props.name); + return ( - + diff --git a/LeftOvers/components/ProfileSelection.tsx b/LeftOvers/components/ProfileSelection.tsx new file mode 100644 index 0000000..6f824e8 --- /dev/null +++ b/LeftOvers/components/ProfileSelection.tsx @@ -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[]; +} + +type Profile = { + name: string + avatar: string + isActive: boolean + isWaiting: 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 ( + + + + + + + + + + ); +} + +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', + }, +}); \ No newline at end of file diff --git a/LeftOvers/screens/CreateProfile.tsx b/LeftOvers/screens/CreateProfile.tsx new file mode 100644 index 0000000..8d4b3e4 --- /dev/null +++ b/LeftOvers/screens/CreateProfile.tsx @@ -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 ( + + + + + + + + + + + + ); +} + +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, + }, +}); \ No newline at end of file diff --git a/LeftOvers/screens/FiltersSelection.tsx b/LeftOvers/screens/FiltersSelection.tsx new file mode 100644 index 0000000..d2c351f --- /dev/null +++ b/LeftOvers/screens/FiltersSelection.tsx @@ -0,0 +1,137 @@ +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 = [] + const allAdd = [] + + return ( + + + + + + + + Filters + 2 selected, 1 waiting + + + + + + + + + + Filters from Profiles + + + + + + + + + Additional Filters + 3 selected + + + + + + + + + + + + + ); +} + +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', + padding: 10, + //paddingBottom: 0, + marginHorizontal: 10, + }, +}); \ No newline at end of file diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx index 39e61f9..99fd407 100644 --- a/LeftOvers/screens/IngredientSelection.tsx +++ b/LeftOvers/screens/IngredientSelection.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { View, StyleSheet, Text, Image, Pressable,ScrollView} from 'react-native'; -import { SafeAreaProvider } from 'react-native-safe-area-context'; +import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native'; +import {SafeAreaProvider} from 'react-native-safe-area-context'; 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 FoodElementText from '../components/FoodElementText'; import CustomButton from '../components/CustomButton';