Merge pull request 'master' (#13) from master into WORK-RRE
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
Reviewed-on: #13pull/20/head
commit
8cec5a7c77
@ -0,0 +1,32 @@
|
||||
kind: pipeline
|
||||
type: docker
|
||||
name: LeftOvers
|
||||
|
||||
trigger:
|
||||
event:
|
||||
- push
|
||||
|
||||
steps:
|
||||
- name: app-build
|
||||
image: node:latest
|
||||
commands:
|
||||
- cd ./LeftOvers/
|
||||
- npm install
|
||||
- npm run
|
||||
|
||||
- name: code-analysis
|
||||
image: node:latest
|
||||
environment:
|
||||
SONAR_TOKEN:
|
||||
from_secret: SONAR_TOKEN
|
||||
settings:
|
||||
sources: ./LeftOvers/
|
||||
commands:
|
||||
- export SONAR_SCANNER_VERSION=4.7.0.2747
|
||||
- export SONAR_SCANNER_HOME=$HOME/.sonar/sonar-scanner-$SONAR_SCANNER_VERSION-linux
|
||||
- curl --create-dirs -sSLo $HOME/.sonar/sonar-scanner.zip https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/sonar-scanner-cli-$SONAR_SCANNER_VERSION-linux.zip
|
||||
- unzip -o $HOME/.sonar/sonar-scanner.zip -d $HOME/.sonar/
|
||||
- export PATH=$SONAR_SCANNER_HOME/bin:$PATH
|
||||
- export SONAR_SCANNER_OPTS="-server"
|
||||
- sonar-scanner -D sonar.projectKey=LeftOvers -D sonar.sources=. -D sonar.host.url=https://codefirst.iut.uca.fr/sonar
|
||||
depends_on: [ app-build ]
|
||||
@ -1,21 +0,0 @@
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>Open up App.js to start working on your app!</Text>
|
||||
<StatusBar style="auto" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, View } from 'react-native';
|
||||
import ProfileModification from './components/ProfileModification';
|
||||
import ValidateButton from './components/ValidateButton';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import RecipeSuggestion from './screens/RecipeSuggestion';
|
||||
import RecipeDetails from './screens/RecipeDetails';
|
||||
import IngredientSelection from './screens/IngredientSelection';
|
||||
|
||||
export default function App() {
|
||||
const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
|
||||
const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
|
||||
const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}]
|
||||
const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}]
|
||||
const steps = [{value: "Chauffer chocolat"},
|
||||
{value: "1. Casser oeuf"},
|
||||
{value: "2. Melanger la farine, le lait et les oeufs"},
|
||||
{value: "3. Battre fort"},
|
||||
{value: "4. Voler la montre de Louison"},
|
||||
{value: "5. Melanger avec le chocolat"},
|
||||
{value: "6. Mettre au four"},
|
||||
]
|
||||
|
||||
function generateList() {
|
||||
const list = [];
|
||||
list.push("Meat");
|
||||
list.push("Meat");
|
||||
list.push("Meat");
|
||||
list.push("Meat");
|
||||
list.push("Teat");
|
||||
list.push("Meat");
|
||||
list.push("Meat");
|
||||
list.push("Meat");
|
||||
return list;
|
||||
}
|
||||
|
||||
const ingredients = generateList();
|
||||
|
||||
return (
|
||||
<IngredientSelection listIngredient={ingredients}></IngredientSelection>
|
||||
/*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/
|
||||
/*<RecipeDetails ingredient={ingredient}
|
||||
ustensils={ustensils}
|
||||
steps={steps}
|
||||
title="Chocolat Cake"
|
||||
number="63"
|
||||
duree="30 minutes"
|
||||
></RecipeDetails>*/
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#3F3C42',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
linearGradient: {
|
||||
//height: 844,
|
||||
//width: 390,
|
||||
flex: 1,
|
||||
padding: 10,
|
||||
paddingTop: 0,
|
||||
//backgroundColor: "#59BDCD",
|
||||
//alignItems: 'center',
|
||||
//justifyContent: 'flex-start',
|
||||
},
|
||||
});
|
||||
|
Before Width: | Height: | Size: 752 B After Width: | Height: | Size: 752 B |
|
After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 409 B |
|
After Width: | Height: | Size: 397 B |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 323 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 941 B |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 410 B |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 221 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 939 B |
|
After Width: | Height: | Size: 525 B |
@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
|
||||
import ValidateButton from './ValidateButton';
|
||||
import HeaderFlatList from './HeaderFlatList';
|
||||
import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
|
||||
|
||||
type AllergiesProps = {
|
||||
title: string
|
||||
content : list<string>
|
||||
}
|
||||
|
||||
export default function AllergiesTab(props: AllergiesProps) {
|
||||
const [selected, setSelected] = React.useState([]);
|
||||
const data = [
|
||||
{key:'1', value:'Dairy free'},
|
||||
{key:'2', value:'Gluten free'},
|
||||
{key:'3', value:'Porkless'},
|
||||
{key:'4', value:'Vegan'},
|
||||
{key:'5', value:'Vegetatian'},
|
||||
{key:'6', value:'Pescatarian'},
|
||||
]
|
||||
return (
|
||||
<MultipleSelectList
|
||||
data={props.content}
|
||||
save="value"
|
||||
search={false}
|
||||
arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
|
||||
boxStyles={styles.titleBar}
|
||||
inputStyles={styles.title}
|
||||
dropdownStyles={styles.itemList}
|
||||
dropdownItemStyles={styles.itemCell}
|
||||
dropdownTextStyles={styles.itemText}
|
||||
checkBoxStyles={styles.box}
|
||||
placeholder={props.title}
|
||||
label={props.title}/>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
titleBar: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "stretch",
|
||||
minHeight: 25,
|
||||
backgroundColor: "#F2F0E4",
|
||||
borderTopRightRadius: 15,
|
||||
borderTopLeftRadius: 15,
|
||||
borderBottomRightRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderWidth: 2,
|
||||
borderColor: "#ACA279",
|
||||
width: 330,
|
||||
marginBottom: 0,
|
||||
overflow: "hidden",
|
||||
},
|
||||
arrow: {
|
||||
height: 20,
|
||||
width: 20,
|
||||
resizeMode: 'contain',
|
||||
tintColor: "#3F3C42",
|
||||
flex: 0.1,
|
||||
},
|
||||
title: {
|
||||
fontSize: 15,
|
||||
color: '#3F3C42',
|
||||
alignItems: 'center',
|
||||
textAlign: "left",
|
||||
flex: 0.9,
|
||||
},
|
||||
|
||||
itemList: {
|
||||
//flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
//justifyContent: "stretch",
|
||||
borderWidth: 0,
|
||||
borderTopRightRadius: 0,
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomRightRadius: 15,
|
||||
borderBottomLeftRadius: 15,
|
||||
backgroundColor: "#E3DEC9",
|
||||
width: 330,
|
||||
},
|
||||
itemCell: {
|
||||
maxHeight: 30,
|
||||
flex: 1,
|
||||
padding: 0,
|
||||
paddingLeft: 10,
|
||||
},
|
||||
itemText: {
|
||||
fontSize: 13,
|
||||
textAlign: "left",
|
||||
flex: 1,
|
||||
padding: 5,
|
||||
paddingLeft: 10,
|
||||
color: "#3F3C42",
|
||||
},
|
||||
|
||||
box: {
|
||||
borderWidth: 0,
|
||||
flex: 0,
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Pressable, Text, View} from 'react-native';
|
||||
|
||||
|
||||
interface CustomButtonProps {
|
||||
title : string
|
||||
}
|
||||
|
||||
export default function CustomButton(props: CustomButtonProps) {
|
||||
return (
|
||||
<Pressable style={styles.button}>
|
||||
<View style={styles.view}>
|
||||
<Text style={styles.text}>{props.title}</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width : 150,
|
||||
height: 40,
|
||||
borderRadius: 4,
|
||||
elevation: 3,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
},
|
||||
text: {
|
||||
fontSize: 15,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
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
|
||||
},
|
||||
});
|
||||
|
||||
@ -0,0 +1,97 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
|
||||
import ValidateButton from './ValidateButton';
|
||||
import HeaderFlatList from './HeaderFlatList';
|
||||
import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
|
||||
|
||||
type DietsProps = {
|
||||
title: string
|
||||
content : list<string>
|
||||
}
|
||||
|
||||
export default function DietsTab(props: DietsProps) {
|
||||
const [selected, setSelected] = React.useState([]);
|
||||
const data = [
|
||||
{key:'1', value:'Dairy free'},
|
||||
{key:'2', value:'Gluten free'},
|
||||
{key:'3', value:'Porkless'},
|
||||
{key:'4', value:'Vegan'},
|
||||
{key:'5', value:'Vegetatian'},
|
||||
{key:'6', value:'Pescatarian'},
|
||||
]
|
||||
return (
|
||||
<MultipleSelectList
|
||||
setSelected={(val) => setSelected(val)}
|
||||
data={props.content}
|
||||
save="value"
|
||||
search={false}
|
||||
arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
|
||||
boxStyles={styles.titleBar}
|
||||
inputStyles={styles.title}
|
||||
dropdownStyles={styles.itemList}
|
||||
dropdownItemStyles={styles.itemCell}
|
||||
dropdownTextStyles={styles.itemText}
|
||||
placeholder={props.title}
|
||||
label={props.title}/>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
titleBar: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "stretch",
|
||||
minHeight: 25,
|
||||
backgroundColor: "#F2F0E4",
|
||||
borderTopRightRadius: 15,
|
||||
borderTopLeftRadius: 15,
|
||||
borderBottomRightRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderWidth: 2,
|
||||
borderColor: "#ACA279",
|
||||
width: 330,
|
||||
marginBottom: 0,
|
||||
overflow: "hidden",
|
||||
},
|
||||
arrow: {
|
||||
height: 20,
|
||||
width: 20,
|
||||
resizeMode: 'contain',
|
||||
tintColor: "#3F3C42",
|
||||
flex: 0.1,
|
||||
},
|
||||
title: {
|
||||
fontSize: 15,
|
||||
color: '#3F3C42',
|
||||
alignItems: 'center',
|
||||
textAlign: "left",
|
||||
flex: 0.9,
|
||||
},
|
||||
|
||||
itemList: {
|
||||
//flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
//justifyContent: "stretch",
|
||||
borderWidth: 0,
|
||||
borderTopRightRadius: 0,
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomRightRadius: 15,
|
||||
borderBottomLeftRadius: 15,
|
||||
backgroundColor: "#E3DEC9",
|
||||
width: 330,
|
||||
},
|
||||
itemCell: {
|
||||
maxHeight: 30,
|
||||
flex: 1,
|
||||
padding: 0,
|
||||
paddingLeft: 10,
|
||||
},
|
||||
itemText: {
|
||||
fontSize: 13,
|
||||
textAlign: "left",
|
||||
flex: 1,
|
||||
padding: 5,
|
||||
paddingLeft: 10,
|
||||
color: "#3F3C42",
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,62 @@
|
||||
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 {
|
||||
source : string
|
||||
title : string
|
||||
}
|
||||
|
||||
|
||||
export default function FoodElementText(props : any) {
|
||||
return (
|
||||
<Pressable style={styles.button}>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.view}>
|
||||
<Text style={styles.text}>{props.title}</Text>
|
||||
<Separator/>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width : 270,
|
||||
height: 60,
|
||||
borderRadius: 5,
|
||||
elevation: 3,
|
||||
backgroundColor: '#E3DEC9',
|
||||
},
|
||||
text: {
|
||||
fontSize: 15,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
padding : 7,
|
||||
color: 'black',
|
||||
},
|
||||
view: {
|
||||
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
marginRight: 5 // Centre le contenu horizontalement
|
||||
},
|
||||
container: {
|
||||
width :260,
|
||||
height: 50,
|
||||
borderRadius: 5,
|
||||
elevation: 3,
|
||||
borderWidth: 2,
|
||||
borderColor: 'black',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
|
||||
|
||||
type TitleProps = {
|
||||
title: string
|
||||
}
|
||||
|
||||
export default function ListTab(props: TitleProps) {
|
||||
return (
|
||||
<View style={styles.titleBar}>
|
||||
<Text style={styles.title}>{props.title}</Text>
|
||||
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
titleBar: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "stretch",
|
||||
backgroundColor: "#F2F0E4",
|
||||
borderTopRightRadius: 15,
|
||||
borderTopLeftRadius: 15,
|
||||
borderWidth: 2,
|
||||
borderColor: "#ACA279",
|
||||
width: 330,
|
||||
},
|
||||
arrow: {
|
||||
height: 20,
|
||||
width: 20,
|
||||
resizeMode: 'contain',
|
||||
tintColor: "#3F3C42",
|
||||
flex: 0.1,
|
||||
},
|
||||
title: {
|
||||
fontSize: 12,
|
||||
color: '#3F3C42',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'left',
|
||||
textAlign: "left",
|
||||
flex: 0.9,
|
||||
padding: 5,
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
|
||||
import ValidateButton from './ValidateButton';
|
||||
import HeaderFlatList from './HeaderFlatList';
|
||||
|
||||
type ListProps = {
|
||||
title: string
|
||||
content : list<string>
|
||||
}
|
||||
|
||||
type ItemProps = {value: string}
|
||||
|
||||
const Item = ({value}: ItemProps) => (
|
||||
<View style={styles.itemList}>
|
||||
<Text style={styles.itemText}>{value}</Text>
|
||||
</View>
|
||||
)
|
||||
|
||||
export default function ListTab(props: ListProps) {
|
||||
return (
|
||||
<View style={styles.background}>
|
||||
<View>
|
||||
<FlatList data={props.content} renderItem={({item}) => <Item value={item.value}/>} ListHeaderComponent={<HeaderFlatList title={props.title}/>}/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
background: {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 15,
|
||||
backgroundColor: '#E3DEC9',
|
||||
marginBottom: 20,
|
||||
},
|
||||
titleBar: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "stretch",
|
||||
backgroundColor: "#F2F0E4",
|
||||
borderTopRightRadius: 15,
|
||||
borderTopLeftRadius: 15,
|
||||
borderWidth: 2,
|
||||
borderColor: "#ACA279",
|
||||
width: 250,
|
||||
},
|
||||
arrow: {
|
||||
height: 20,
|
||||
width: 20,
|
||||
resizeMode: 'contain',
|
||||
tintColor: "#3F3C42",
|
||||
flex: 0.5,
|
||||
},
|
||||
title: {
|
||||
fontSize: 15,
|
||||
color: '#3F3C42',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'left',
|
||||
textAlign: "left",
|
||||
flex: 0.5,
|
||||
padding: 5,
|
||||
},
|
||||
|
||||
itemList: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "stretch",
|
||||
width: 330,
|
||||
},
|
||||
itemText: {
|
||||
fontSize: 13,
|
||||
textAlign: "left",
|
||||
flex: 1,
|
||||
padding: 5,
|
||||
paddingLeft: 10,
|
||||
color: "#3F3C42",
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,17 @@
|
||||
import { Dimensions, Platform, PixelRatio } from 'react-native';
|
||||
|
||||
const {
|
||||
width: SCREEN_WIDTH,
|
||||
} = Dimensions.get('window');
|
||||
|
||||
const scale = SCREEN_WIDTH / 480;
|
||||
|
||||
// @ts-ignore
|
||||
export default function normalize(size) {
|
||||
const newSize = size * scale
|
||||
if (Platform.OS === 'ios') {
|
||||
return Math.round(PixelRatio.roundToNearestPixel(newSize))
|
||||
} else {
|
||||
return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 3
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { Appbar } from 'react-native-paper';
|
||||
|
||||
interface TopBarProps{
|
||||
source : string
|
||||
firstImage : string
|
||||
lastImage : string
|
||||
}
|
||||
|
||||
|
||||
export default function ParameterTopBar(props : any) {
|
||||
|
||||
const goFilter = () =>{
|
||||
props.onEventFilter('Hello');
|
||||
}
|
||||
|
||||
const goIngredients = () =>{
|
||||
props.onEventIngredient('Hello');
|
||||
}
|
||||
|
||||
return (
|
||||
<Appbar.Header style={{backgroundColor: '#F2F0E4', justifyContent: 'center'}} >
|
||||
<Appbar.Action icon="magnify" onPress={goIngredients} />
|
||||
<Appbar.Action icon="dots-vertical" onPress={goFilter} />
|
||||
</Appbar.Header>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,113 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text, TextInput, View, Image} from 'react-native';
|
||||
import ValidateButton from './ValidateButton';
|
||||
import ListTab from './ListTab';
|
||||
import DietsTab from './DietsTab';
|
||||
import AllergiesTab from './AllergiesTab';
|
||||
|
||||
type ProfileProps = {
|
||||
name: string
|
||||
avatar: string
|
||||
diets: list<string>
|
||||
allergies: list<string>
|
||||
}
|
||||
|
||||
export default function ProfileModification(props: ProfileProps) {
|
||||
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>
|
||||
<Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
|
||||
</View>
|
||||
<View style={styles.filterBar}>
|
||||
<Text style={styles.filters}>Filters</Text>
|
||||
<Text style={styles.nbSelected}>3 selected</Text>
|
||||
</View>
|
||||
<DietsTab title="Diets" content={props.diets}></DietsTab>
|
||||
<View style={{marginTop: 10}}/>
|
||||
<AllergiesTab title="Allergies" content={props.allergies}></AllergiesTab>
|
||||
<View style={{marginTop: 10}}/>
|
||||
<ListTab title="Diets" content={props.diets}></ListTab>
|
||||
<ListTab title="Allergies" content={props.allergies}></ListTab>
|
||||
<ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
background: {
|
||||
width: 370,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 15,
|
||||
backgroundColor: '#F2F0E4',
|
||||
padding: 10,
|
||||
},
|
||||
pseudoBar: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flex: 0.7,
|
||||
width: 330,
|
||||
marginBottom: 10,
|
||||
},
|
||||
avatar: {
|
||||
padding: 20,
|
||||
resizeMode: 'contain',
|
||||
borderWidth: 2,
|
||||
borderColor: "#ACA279",
|
||||
borderRadius: 45,
|
||||
},
|
||||
textInput: {
|
||||
flex: 0.5,
|
||||
fontSize: 15,
|
||||
color: '#ACA279',
|
||||
width : 150,
|
||||
borderRadius: 10,
|
||||
borderWidth: 2,
|
||||
borderStyle: 'dashed',
|
||||
borderColor: '#ACA279',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'left',
|
||||
flex: 0.8,
|
||||
marginLeft: 20,
|
||||
padding: 5,
|
||||
},
|
||||
modify: {
|
||||
height: 20,
|
||||
width: 20,
|
||||
tintColor: "#ACA279",
|
||||
resizeMode: 'contain',
|
||||
flex: 0.1,
|
||||
marginLeft: 5,
|
||||
},
|
||||
|
||||
|
||||
|
||||
filterBar: {
|
||||
flexDirection: "row",
|
||||
width: 300,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 5,
|
||||
alignItems: "flex-end",
|
||||
justifyContent: "center",
|
||||
flex: 0.2,
|
||||
},
|
||||
filters: {
|
||||
flex: 0.5,
|
||||
fontSize: 20,
|
||||
color: '#ACA279',
|
||||
flex: 1,
|
||||
padding: 5,
|
||||
paddingLeft: 0,
|
||||
paddingBottom: 0,
|
||||
},
|
||||
nbSelected: {
|
||||
fontSize: 11,
|
||||
flex: 1,
|
||||
color: "#3F3C42",
|
||||
textAlign: "right",
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,126 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet,Pressable, Text, View, Image, SafeAreaView, ScrollView} from 'react-native';
|
||||
import brochette from '../assets/images/brochette.png';
|
||||
import Union_left from '../assets/images/Union_left.png';
|
||||
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
|
||||
}
|
||||
|
||||
export default function RecipeElement(props : any) {
|
||||
|
||||
const totalContentCount = props.imageList.length + 11;
|
||||
const dynamicHeight = totalContentCount * 40;
|
||||
const scrollViewHeight = 100;
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Pressable style={[styles.button, { height: dynamicHeight }]}>
|
||||
<View style={[styles.view, { height: dynamicHeight - 10}]}>
|
||||
<Text style={styles.text}>{props.number}</Text>
|
||||
<Text style={styles.title}>{props.title}</Text>
|
||||
<Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/>
|
||||
<View style={styles.horizontalAlignement}>
|
||||
<Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
|
||||
<Text style={styles.text}>Ingredients</Text>
|
||||
<Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
|
||||
</View>
|
||||
|
||||
<View style={styles.horizontalAlignement}>
|
||||
{props.imageList.length > 0 && props.imageList.map((source, index) => (
|
||||
<Image key={index} source={source} style={{ width: 40, height: 40 }} />
|
||||
))}
|
||||
</View>
|
||||
|
||||
|
||||
{props.imageList.length <= 0 ? (
|
||||
<View style={styles.horizontalAlignement}>
|
||||
{props.textList.length > 0 && props.textList.map((source, index) => (
|
||||
<Text key={index} style={styles.smallText}>{source}</Text>
|
||||
))}
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
|
||||
<View style={styles.scrollViewContainer}>
|
||||
<SafeAreaView>
|
||||
<View style={styles.horizontalAlignement}>
|
||||
<Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
|
||||
<Text style={styles.text}>Description</Text>
|
||||
<Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
|
||||
</View>
|
||||
<ScrollView style={{ marginTop: 5, height: scrollViewHeight }}>
|
||||
<Text style={styles.smallText}>{props.description}</Text>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
|
||||
<Image source={background} style={{width: 210, height: 20, marginTop: dynamicHeight - 50, position: 'absolute'}}></Image>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width : 300,
|
||||
borderRadius: 40,
|
||||
elevation: 3,
|
||||
backgroundColor: '#E3DEC9',
|
||||
},
|
||||
text: {
|
||||
fontSize: 14,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: '#756C28',
|
||||
marginTop: 10,
|
||||
},
|
||||
smallText: {
|
||||
fontSize: 12,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: '#71662A',
|
||||
textAlign: "center",
|
||||
margin : 5
|
||||
},
|
||||
title:{
|
||||
fontSize: 18,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: '#524B1A',
|
||||
},
|
||||
view: {
|
||||
width : 290,
|
||||
borderRadius: 40,
|
||||
elevation: 3,
|
||||
borderWidth: 2,
|
||||
borderColor: 'grey',
|
||||
alignItems: 'center', // Centre le contenu verticalement
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
horizontalAlignement: {
|
||||
display: "flex",
|
||||
flexDirection : 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginTop : 5,
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
scrollViewContainer: {
|
||||
flex: 1, // Assurez-vous que le reste du contenu occupe l'espace restant
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,84 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
|
||||
import brochette from '../assets/images/brochette.png';
|
||||
import background from '../assets/images/Background.png';
|
||||
|
||||
|
||||
interface recipeElementReduceProps {
|
||||
number : number
|
||||
title : string
|
||||
image : string
|
||||
duree : string
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default function RecipeElementReduce(props : any) {
|
||||
return (
|
||||
<Pressable style={styles.button}>
|
||||
<View style={styles.view}>
|
||||
<Text style={styles.text}>{props.number}</Text>
|
||||
<Text style={styles.title}>{props.title}</Text>
|
||||
<Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/>
|
||||
<View style={{marginTop: 200, position: 'absolute'}}>
|
||||
<Image source={background} style={{width: 210, height: 20}}></Image>
|
||||
<Text style={styles.smallText}>{props.duree}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width : 250,
|
||||
height: 250,
|
||||
borderRadius: 40,
|
||||
elevation: 3,
|
||||
backgroundColor: '#E3DEC9',
|
||||
},
|
||||
text: {
|
||||
fontSize: 14,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: '#756C28',
|
||||
marginTop: 10,
|
||||
},
|
||||
smallText: {
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
left: 0,
|
||||
right: 0,
|
||||
marginHorizontal: 'auto',
|
||||
color: '#E3DEC9',
|
||||
|
||||
},
|
||||
title:{
|
||||
fontSize: 18,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: '#524B1A',
|
||||
},
|
||||
view: {
|
||||
width : 240,
|
||||
height: 240,
|
||||
borderRadius: 40,
|
||||
elevation: 3,
|
||||
borderWidth: 2,
|
||||
borderColor: 'grey',
|
||||
alignItems: 'center', // Centre le contenu verticalement
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
horizontalAlignement: {
|
||||
display: "flex",
|
||||
flexDirection : 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,90 @@
|
||||
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 parameter from '../assets/images/parameter.png';
|
||||
import FoodElementText from './FoodElementText';
|
||||
|
||||
interface SelectedIngredientProps {
|
||||
listeIngredient: string[];
|
||||
listeImage: string[];
|
||||
onEvent: (value: string) => void;
|
||||
}
|
||||
|
||||
export default function SelectedIngredient(props: SelectedIngredientProps) {
|
||||
const [cpt, setCpt] = useState(0);
|
||||
|
||||
const decreaseCounter = () => {
|
||||
if (cpt > 0) {
|
||||
setCpt(cpt - 1);
|
||||
} else {
|
||||
setCpt(props.listeIngredient.length - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const increaseCounter = () => {
|
||||
if (cpt < props.listeIngredient.length - 1) {
|
||||
setCpt(cpt + 1);
|
||||
} else {
|
||||
setCpt(0);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePress = () => {
|
||||
// Supposons que vous voulez envoyer la valeur 'Hello' au parent
|
||||
props.onEvent('Hello');
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.view}>
|
||||
<View id="Top" style={styles.horizontalAlignement}>
|
||||
<Text style={styles.text}>Selected ingredients</Text>
|
||||
<Pressable onPress={handlePress}>
|
||||
<Image source={parameter} style={{ width: 15, height: 15 }} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<View id="IngredientList" style={styles.horizontalAlignement}>
|
||||
<Pressable onPress={decreaseCounter} id="GoLeft" style={{}}>
|
||||
<Image source={bracketLeft} style={{ width: 40, height: 40 }} />
|
||||
</Pressable>
|
||||
|
||||
<FoodElementText title={props.listeIngredient[cpt]} />
|
||||
|
||||
<Pressable onPress={increaseCounter} id="GoRight" style={{}}>
|
||||
<Image source={bracketRight} style={{ width: 40, height: 40 }} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
view: {
|
||||
width: 350,
|
||||
height: 110,
|
||||
borderRadius: 15,
|
||||
elevation: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: 'black',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
backgroundColor: '#E3DEC9',
|
||||
},
|
||||
horizontalAlignement: {
|
||||
display: 'flex',
|
||||
height: 30,
|
||||
width: 350,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
},
|
||||
text: {
|
||||
fontSize: 14,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'black',
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, View} from 'react-native';
|
||||
|
||||
export default function Separator (){
|
||||
return <View style={styles.separator} />;
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
separator: {
|
||||
width: 200, // Largeur de la ligne
|
||||
backgroundColor: 'black', // Couleur de la ligne
|
||||
borderWidth : 1,
|
||||
marginLeft : 10,
|
||||
marginRight : 10,
|
||||
},
|
||||
});
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import { Appbar } from 'react-native-paper';
|
||||
|
||||
interface TopBarProps{
|
||||
title : string
|
||||
isVisible : boolean
|
||||
}
|
||||
|
||||
|
||||
export default function TopBar(props) {
|
||||
|
||||
const _goBack = () => console.log('Went back');
|
||||
|
||||
const _handleSearch = () => console.log('Searching');
|
||||
|
||||
const _handleMore = () => console.log('Shown more');
|
||||
return (
|
||||
<Appbar.Header style={{backgroundColor: '#F2F0E4'}} >
|
||||
<Appbar.BackAction onPress={_goBack} />
|
||||
<Appbar.Content title={props.title} />
|
||||
|
||||
{props.isVisible &&(
|
||||
<><Appbar.Action icon="magnify" onPress={_handleSearch} />
|
||||
<Appbar.Action icon="dots-vertical" onPress={_handleMore} />
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
</Appbar.Header>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, Pressable, Text, View, Image} from 'react-native';
|
||||
|
||||
|
||||
type ValidateButtonProps = {
|
||||
title: string
|
||||
image: string
|
||||
colour: string
|
||||
backColour: string
|
||||
}
|
||||
|
||||
export default function ValidateButton(props: ValidateButtonProps) {
|
||||
return (
|
||||
<Pressable style={{
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 20,}}>
|
||||
<View style={{
|
||||
borderRadius: 30,
|
||||
borderWidth: 2,
|
||||
borderColor: props.colour,
|
||||
backgroundColor: props.backColour,
|
||||
alignItems: 'center',
|
||||
flexDirection: "row",
|
||||
padding: 5,
|
||||
paddingRight: 10,}}>
|
||||
<Image source={require('../assets/images/'+props.image)} style={{
|
||||
height: 20,
|
||||
width: 20,
|
||||
marginLeft: 5,
|
||||
marginRight: 10,
|
||||
resizeMode: "center",
|
||||
tintColor: props.colour,}}>
|
||||
</Image>
|
||||
<Text style={{
|
||||
fontSize: 20,
|
||||
color: props.colour,
|
||||
}}>{props.title}</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
//width : 150,
|
||||
//height: 35,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#F2F0E4',
|
||||
},
|
||||
text: {
|
||||
fontSize: 20,
|
||||
color: '#ACA279',
|
||||
paddingLeft: 15,
|
||||
flex: 0.7,
|
||||
},
|
||||
view: {
|
||||
//width: 150,
|
||||
//height: 35,
|
||||
borderRadius: 20,
|
||||
borderWidth: 2,
|
||||
borderColor: '#ACA279',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
paddingLeft: 25,
|
||||
paddingRight: 30,
|
||||
paddingTop: 5,
|
||||
paddingBottom: 5,
|
||||
},
|
||||
image:{
|
||||
height: 20,
|
||||
width: 20,
|
||||
flex: 0.3,
|
||||
resizeMode: "center",
|
||||
tintColor: "#ACA279",
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,4 @@
|
||||
declare module "*.png";
|
||||
declare module "*.svg";
|
||||
declare module "*.jpeg";
|
||||
declare module "*.jpg";
|
||||
@ -0,0 +1,128 @@
|
||||
import React from 'react';
|
||||
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 brochette from '../assets/images/brochette.png';
|
||||
import FoodElementText from '../components/FoodElementText';
|
||||
import CustomButton from '../components/CustomButton';
|
||||
import plus from '../assets/images/plus.png';
|
||||
import moins from '../assets/images/minus.png';
|
||||
import meat from '../assets/images/meat_icon.png';
|
||||
import vegetable from '../assets/images/vegetable_icon.png';
|
||||
import fruit from '../assets/images/fruit_icon.png';
|
||||
|
||||
|
||||
export default function IngredientSelection(props) {
|
||||
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
|
||||
const onChangeSearch = query => setSearchQuery(query);
|
||||
|
||||
type ItemProps = {value: string}
|
||||
|
||||
const AvailaibleItem = ({value}: ItemProps) => (
|
||||
<><View style={styles.horizontalAlignement}>
|
||||
<FoodElementText title={value} />
|
||||
<Pressable>
|
||||
<Image source={plus} style={{ width: 20, height: 20 }} />
|
||||
</Pressable>
|
||||
</View><View style={{ height: 30 }}></View></>
|
||||
)
|
||||
|
||||
const ChooseItem = ({value}: ItemProps) => (
|
||||
<><View style={styles.horizontalAlignement}>
|
||||
<FoodElementText title={value} />
|
||||
<Pressable>
|
||||
<Image source={moins} style={{ width: 20, height: 20 }} />
|
||||
</Pressable>
|
||||
</View><View style={{ height: 30 }}></View></>
|
||||
)
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<TopBar title="Ingredient selection" />
|
||||
<View style={styles.page}>
|
||||
|
||||
<View style={styles.element}>
|
||||
<View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
|
||||
<Pressable>
|
||||
<Image source={meat} style={{ width: 30, height: 30 }} />
|
||||
</Pressable>
|
||||
<Pressable>
|
||||
<Image source={vegetable} style={{ width: 30, height: 30 }} />
|
||||
</Pressable>
|
||||
<Pressable>
|
||||
<Image source={fruit} style={{ width: 30, height: 30 }} />
|
||||
</Pressable>
|
||||
</View>
|
||||
<View>
|
||||
<Searchbar
|
||||
placeholder="Search"
|
||||
onChangeText={onChangeSearch}
|
||||
value={searchQuery}
|
||||
style={{margin: 10,
|
||||
backgroundColor: '#F2F0E4',
|
||||
borderWidth : 1,
|
||||
borderColor: "#ACA279",
|
||||
borderRadius: 15,
|
||||
height: 50,
|
||||
}}/>
|
||||
</View>
|
||||
<View style={{ flex: 1}} >
|
||||
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
|
||||
{props.listIngredient.map((source, index) => (
|
||||
<AvailaibleItem key={index} value={source}></AvailaibleItem>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<View style={{ height: 20 }}></View>
|
||||
</View>
|
||||
|
||||
<View style={[styles.element, {marginTop: 40}]}>
|
||||
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
|
||||
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
|
||||
</View>
|
||||
|
||||
<View style={{ height: 5 }}></View>
|
||||
|
||||
<View style={{ flex: 1}} >
|
||||
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
|
||||
{props.listIngredient.map((source, index) => (
|
||||
<ChooseItem key={index} value={source}></ChooseItem>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<View style={{ height: 20 }}></View>
|
||||
</View>
|
||||
|
||||
<View style={{ height: 15 }}></View>
|
||||
<CustomButton title="Find a recipe"/>
|
||||
</View>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
flex: 1,
|
||||
backgroundColor: '#59BDCD',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
padding: 20,
|
||||
},
|
||||
element: {
|
||||
backgroundColor:'#F2F0E4',
|
||||
borderRadius: 30,
|
||||
},
|
||||
horizontalAlignement: {
|
||||
display: 'flex',
|
||||
height: 30,
|
||||
width: 350,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
marginTop: 15,
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import { View, StyleSheet, Text} from 'react-native';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
import TopBar from '../components/TopBar';
|
||||
import RecipeElementReduce from '../components/RecipeElementReduce';
|
||||
import AllergiesTab from '../components/AllergiesTab';
|
||||
|
||||
|
||||
export default function RecipeDetails(props) {
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<TopBar title="Recipe Detail"/>
|
||||
<View style={styles.page}>
|
||||
<RecipeElementReduce
|
||||
title={props.title}
|
||||
number={props.number}
|
||||
duree={props.duree}/>
|
||||
|
||||
<View style={{height: 20}}></View>
|
||||
|
||||
<View style={styles.element}>
|
||||
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
|
||||
<Text style={{fontSize: 20, color: '#ACA279'}}>Preparation</Text>
|
||||
</View>
|
||||
<View style={{margin: 20}}>
|
||||
<AllergiesTab title="Ingredient" content={props.ingredient}></AllergiesTab>
|
||||
<View style={{height: 5}}></View>
|
||||
<AllergiesTab title="Ustensils" content={props.ustensils}></AllergiesTab>
|
||||
</View>
|
||||
</View >
|
||||
|
||||
<View style={{height: 20}}></View>
|
||||
|
||||
<View style={styles.element}>
|
||||
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
|
||||
<Text style={{fontSize: 20, color: '#ACA279'}}>Cooking</Text>
|
||||
</View>
|
||||
<View style={{margin: 20}}>
|
||||
<AllergiesTab title="Steps" content={props.steps}></AllergiesTab>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
flex: 1,
|
||||
backgroundColor: '#59BDCD',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
padding: 20,
|
||||
},
|
||||
element: {
|
||||
backgroundColor:'#F2F0E4',
|
||||
borderRadius: 30,
|
||||
},
|
||||
horizontalAlignement: {
|
||||
display: 'flex',
|
||||
height: 30,
|
||||
width: 350,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
}
|
||||
});
|
||||
|
||||
@ -0,0 +1,178 @@
|
||||
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 TopBar from '../components/TopBar';
|
||||
import RecipeElement from '../components/RecipeElement';
|
||||
import SelectedIngredient from '../components/SelectedIngredient';
|
||||
import FoodElementText from '../components/FoodElementText';
|
||||
import brochette from '../assets/images/brochette.png';
|
||||
import ParameterTopBar from '../components/ParameterTopBar';
|
||||
import bracketLeft from '../assets/images/angle_bracket_left.png';
|
||||
import bracketRight from '../assets/images/angle_bracket_right.png';
|
||||
import CustomButton from '../components/CustomButton';
|
||||
import DietsTab from '../components/DietsTab';
|
||||
|
||||
|
||||
export default function RecipeSuggestion(props) {
|
||||
|
||||
const imageList = [];
|
||||
const [visible, setVisible] = React.useState(false);
|
||||
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 containerStyle = {
|
||||
backgroundColor: 'white',
|
||||
height: 450,
|
||||
width: 380,
|
||||
};
|
||||
|
||||
const handleChildEvent = (value) => {
|
||||
setVisible(!visible)
|
||||
};
|
||||
|
||||
const handleChildEventGoFilters = (value) => {
|
||||
setVisibleIngredients(false);
|
||||
setVisibleFilters(true);
|
||||
}
|
||||
|
||||
const handleChildEventGoIngredients = (value) => {
|
||||
setVisibleFilters(false);
|
||||
setVisibleIngredients(true);
|
||||
console.log("jai change pour iingredient");
|
||||
}
|
||||
|
||||
const decreaseCounter = () => {
|
||||
if (minCpt > 0) {
|
||||
setMinCpt(minCpt - 4);
|
||||
setMaxCpt(maxCpt - 4)
|
||||
}
|
||||
};
|
||||
|
||||
const increaseCounter = () => {
|
||||
if (maxCpt < listeIngredient.length) {
|
||||
setMinCpt(minCpt + 4);
|
||||
setMaxCpt(maxCpt + 4)
|
||||
}
|
||||
};
|
||||
|
||||
const imageElements = limitedList.map((source, index) => (
|
||||
<View style={[styles.horizontalAlignement, { marginBottom: 10 }]}>
|
||||
<FoodElementText key={index} title={source} />
|
||||
<Image source={brochette} style={{ width: 20, height: 20 }} />
|
||||
<Image source={brochette} style={{ width: 20, height: 20 }} />
|
||||
</View>
|
||||
));
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<TopBar title="Recipes" isVisible="true"/>
|
||||
<View style={styles.page}>
|
||||
<SelectedIngredient
|
||||
listeIngredient={props.list}
|
||||
listeImage={imageList}
|
||||
onEvent={handleChildEvent}
|
||||
/>
|
||||
<View style={{ marginTop: 100 }}>
|
||||
<RecipeElement
|
||||
number="13"
|
||||
title="Pizza with Pineapples"
|
||||
imageList={imageList}
|
||||
textList={props.list}
|
||||
description="delicious plate that will please you"
|
||||
style={styles.element}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.modal}>
|
||||
<PaperProvider>
|
||||
<Portal>
|
||||
<Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
|
||||
<ParameterTopBar onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients}></ParameterTopBar>
|
||||
|
||||
{visibleIngredients && (
|
||||
<View style={[styles.page, { justifyContent: 'space-between' }]}>
|
||||
{imageElements}
|
||||
<View id="IngredientList" style={[styles.horizontalAlignement, {marginTop: 10}]}>
|
||||
<Pressable onPress={decreaseCounter} id="GoLeft" >
|
||||
<Image source={bracketLeft} style={{ width: 20, height: 20 }} />
|
||||
</Pressable>
|
||||
|
||||
<Pressable onPress={increaseCounter} id="GoRight">
|
||||
<Image source={bracketRight} style={{ width: 20, height: 20 }} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<CustomButton title="Save"></CustomButton>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{visibleFilters &&(
|
||||
<View style={[styles.page, { justifyContent: 'space-between', alignContent: 'center'}]}>
|
||||
|
||||
<View style={{backgroundColor: '#F2F0E4', zIndex: 2}}>
|
||||
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 20}]}>
|
||||
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
|
||||
</View>
|
||||
<View style={{alignContent: 'center', justifyContent: 'space-between', margin: 10}}>
|
||||
<DietsTab title="Diets" content={props.diets}></DietsTab>
|
||||
<View style={{height: 5}}></View>
|
||||
<DietsTab title="Allergy" content={props.allergy}></DietsTab>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
<View style={{zIndex: 1, position: 'absolute', marginTop: 300}} >
|
||||
<CustomButton title="Save"></CustomButton>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
)}
|
||||
|
||||
|
||||
</Modal>
|
||||
</Portal>
|
||||
</PaperProvider>
|
||||
</View>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
flex: 1,
|
||||
backgroundColor: '#59BDCD',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
padding: 20,
|
||||
},
|
||||
element: {
|
||||
marginTop: 20,
|
||||
},
|
||||
backdrop: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
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
|
||||
},
|
||||
horizontalAlignement: {
|
||||
display: 'flex',
|
||||
height: 30,
|
||||
width: 350,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"compilerOptions": {},
|
||||
"extends": "expo/tsconfig.base"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"@eva-design/eva": "^2.2.0",
|
||||
"@ui-kitten/components": "^5.3.1",
|
||||
"expo": "^49.0.17",
|
||||
"react-native-svg": "^13.14.0",
|
||||
"typescript": "^5.1.3",
|
||||
"@types/react": "~18.2.14",
|
||||
"react-native-web": "~0.19.6",
|
||||
"react-dom": "18.2.0",
|
||||
"@expo/webpack-config": "^19.0.0"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue