Home Page

LeftOvers/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
+import HomePage from './screens/HomePage';
 import ModifyProfile from './screens/ModifyProfile';
 import Profiles from './screens/Profiles';
 import RecipeSuggestion from './screens/RecipeSuggestion';
@@ -8,10 +9,11 @@ import FiltersSelection from './screens/FiltersSelection';
 
 export default function App(props) {
   return(
+    <HomePage/>
     //<ModifyProfile/>
     //<Profiles/>
     //<RecipeSuggestion/>
     //<CreateProfile/>
-    <FiltersSelection/>
+    //<FiltersSelection/>
   );
 }

LeftOvers/components/FoodElementText.tsx

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

LeftOvers/components/ProfileElement.tsx

@@ -5,12 +5,16 @@ type Profile = {
   name: string
   avatar: string
   isActive: string
+  disableSelection: boolean
 }
 
 export default function ProfileElement(props : Profile) {
   const [waiting, setWaiting] = useState("none")
   const changeStatus = () => {
-      if (waiting == "flex"){
+      if (props.disableSelection){
+          setWaiting("none")
+      }
+      else if (waiting == "flex"){
           setWaiting("none")
       }
       else{

LeftOvers/components/ProfileSelection.tsx

@@ -5,14 +5,14 @@ import bracketRight from '../assets/images/angle_bracket_right.png';
 import ProfileElement from './ProfileElement'
 
 type ProfileSelectionProps = {
-  listProfile: Profile[];
+  listProfile: Profile[]
+  disableSelection: boolean
 }
 
 type Profile = {
     name: string
     avatar: string
     isActive: boolean
-    isWaiting: boolean
 }
 
 export default function ProfileSelection(props: ProfileSelectionProps) {
@@ -39,7 +39,7 @@ export default function ProfileSelection(props: ProfileSelectionProps) {
           <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}/>
+          <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>

LeftOvers/screens/FiltersSelection.tsx

@@ -33,11 +33,11 @@ export default function FiltersSelection(props) {
                 <View style={{marginTop: 20}}/>
                 <View style={styles.profilesSelection}>
                     <View style={styles.filterBar}>
-                        <Text style={styles.filters}>Filters</Text>
+                        <Text style={styles.filters}>Profiles</Text>
                         <Text style={styles.nbSelected}>2 selected, 1 waiting</Text>
                     </View>
                     <View style={{marginTop: 10}}/>
-                    <ProfileSelection listProfile={profiles}/>
+                    <ProfileSelection listProfile={profiles} disableSelection={false}/>
                     <View style={{marginTop: 20}}/>
                     <ValidateButton title="Change Selected Profiles" image="update.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
                 </View>

LeftOvers/screens/HomePage.tsx

@@ -0,0 +1,210 @@
+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}}>
+                             <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: 20}}/>
+                     <ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9"/>
+                     <View style={{marginTop: 5}}/>
+                     <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,
+        //flex: 0.2,
+        color: "#3F3C42",
+        textAlign: "right",
+  },
+
+  profilesSelection: {
+        //maxWidth: 370,
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,
+        backgroundColor: '#F2F0E4',
+        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,
+  },
+});