Profiles Selection Components

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(
     //<ModifyProfile/>
-    <Profiles/>
+    //<Profiles/>
     //<RecipeSuggestion/>
+    //<CreateProfile/>
+    <FiltersSelection/>
   );
 }

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

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 (
+      <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: waiting}}/>
+                  <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",
+  },
+});

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 (
     <View style={styles.background}>
         <View style={styles.pseudoBar}>
             <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>
         </View>
         <View style={styles.filterBar}>

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 (
+      <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}/>
+          <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',
+  },
+});

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

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 (
+    <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}>Filters</Text>
+                        <Text style={styles.nbSelected}>2 selected, 1 waiting</Text>
+                    </View>
+                    <View style={{marginTop: 10}}/>
+                    <ProfileSelection listProfile={profiles}/>
+                    <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',
+        padding: 10,
+        //paddingBottom: 0,
+        marginHorizontal: 10,
+  },
+});