Sae_LeftOvers
/
LeftOvers
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Ingredient Selection Page
continuous-integration/drone/push Build is passing Details

Browse Source
pull/20/head
Louison PARANT 2 years ago
parent e1eb67da1c
commit e38cfc8ce4
4 changed files with 115 additions and 46 deletions
Show Stats Download Patch File Download Diff File

2
LeftOvers/components/ListWithoutSelect.tsx
Unescape View File

@ -5,7 +5,7 @@ import ColorContext from '../theme/ColorContext';
type ListProps = {
title: string
content: {title: string}[]
content: {value: string}[]
}
export default function ListWithoutSelect(props: ListProps) {

6
LeftOvers/components/ProfileDelete.tsx
Unescape View File

@ -6,8 +6,8 @@ import ColorContext from '../theme/ColorContext';
type ProfileProps = {
name: string
avatar: string
diets: {title: string}[]
allergies: {title: string}[]
diets: {value: string}[]
allergies: {value: string}[]
}
export default function ProfileDelete(props: ProfileProps) {
@ -84,7 +84,7 @@ export default function ProfileDelete(props: ProfileProps) {
},
filters: {
fontSize: 20,
color: colors.cardElementBackground,
color: colors.cardElementBorder,
flex: 1,
padding: "2%",
paddingLeft: 0,

151
LeftOvers/screens/IngredientSelection.tsx
Unescape View File

@ -21,7 +21,9 @@ export default function IngredientSelection(props) {
const [selectedIngredients, setSelectedIngredients] = useState([]);
const ingredientService = new IngredientService();
const {colors} = useContext(ColorContext);
const [availableSize, setAvailableSize] = useState(0);
const [listVisibility, setListVisibility] = useState("none");
const [availableVisibility, setAvailableVisibility] = useState("none");
const [searchQuery, setSearchQuery] = useState('');
const filterIngredients = async (query) => {
@ -67,10 +69,10 @@ const loadIngredients = async () => {
<View style={styles.horizontalAlignment}>
<FoodElementText title={value.name} />
<Pressable onPress={() => SelectIngredient(value)}>
<Image source={plus} style={{ width: 20, height: 20 }} />
<Image source={plus} style={{ width: 20, height: 20, tintColor: colors.cardDetail }} />
</Pressable>
</View>
<View style={{ height: 30 }}></View>
<View style={{ height: 20 }}></View>
</>
);
@ -79,26 +81,65 @@ const loadIngredients = async () => {
<View style={styles.horizontalAlignment}>
<FoodElementText title={value.name} />
<Pressable onPress={() => RemoveIngredient(value.id)}>
<Image source={moins} style={{ width: 20, height: 20 }} />
<Image source={moins} style={{ width: 20, height: 20, tintColor: colors.cardDetail }} />
</Pressable>
</View>
<View style={{ height: 30 }}></View>
<View style={{ height: 20 }}></View>
</>
);
const SelectIngredient = (newIngredient: Ingredient) => {
const exists = selectedIngredients.find((ingredient) => ingredient.id === newIngredient.id);
console.log("Test 1: ", selectedIngredients.length)
if (!exists) {
setSelectedIngredients([...selectedIngredients, newIngredient]);
}
console.log("Test 2: ", selectedIngredients.length)
ChangeAvailableSize(false)
};
const RemoveIngredient = (idIngredient: number) => {
console.log("Test 1 Remove: ", selectedIngredients.length)
const updatedIngredients = selectedIngredients.filter((ingredient) => ingredient.id !== idIngredient);
setSelectedIngredients(updatedIngredients);
console.log("Test 2 Remove: ", selectedIngredients.length)
ChangeAvailableSize(true)
};
const ChangeAvailableSize = (remove: boolean) => {
if(remove){
if (selectedIngredients.length == 1){
setAvailableSize(0)
}
else if (selectedIngredients.length == 2){
setAvailableSize(90)
}
else if (selectedIngredients.length == 3){
setAvailableSize(180)
}
else if (selectedIngredients.length == 4){
setAvailableSize(260)
}
else{
setAvailableSize(280)
}
}
else{
if (selectedIngredients.length == 0){
setAvailableSize(90)
}
else if (selectedIngredients.length == 1){
setAvailableSize(180)
}
else if (selectedIngredients.length == 2){
setAvailableSize(260)
}
else{
setAvailableSize(280)
}
}
}
const handleLetterPress = async (letter: string) => {
try {
const ingredientsByLetter = await ingredientService.getIngredientByLetter(letter);
@ -110,6 +151,24 @@ const loadIngredients = async () => {
}
};
const changeListVisibility = () => {
if(listVisibility == "none"){
setListVisibility("flex")
}
else{
setListVisibility("none")
}
};
const changeAvailableVisibility = () => {
if(availableVisibility == "none"){
setAvailableVisibility("flex")
}
else{
setAvailableVisibility("none")
}
};
const styles = StyleSheet.create({
linearGradient: {
width: "100%",
@ -140,46 +199,56 @@ const loadIngredients = async () => {
<LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: "6%"}}/>
<View style={styles.element}>
<View style={[styles.horizontalAlignment, { margin: "2%" }]}>
{alphabetArray.map((source, index) => (
<Pressable key={index} onPress={() => handleLetterPress(source)}>
<Text style={{ color: colors.letterFilter }}>{source}</Text>
</Pressable>
))}
</View>
<View>
<Searchbar
placeholder="Search"
onChangeText={handleSearch}
value={searchQuery}
style={{margin: "3%",
backgroundColor: colors.cardBackground,
borderWidth : 1,
borderColor: colors.cardElementBorder,
borderRadius: 15,
}}/>
<View style={{justifyContent: "center"}}>
<Pressable onPress={changeListVisibility} style={{alignItems: "center"}}>
<Image source={require("../assets/images/arrow.png")} style={{tintColor: colors.cardDetail}}/>
</Pressable>
</View>
<View style={{height: 280}}>
<FlatList
data={response ? response : []}
renderItem={({ item }) => (
<AvailableItem value={item} />
)}
keyExtractor={(item, index) => index.toString()}
ListEmptyComponent={() => (
isLoading ? <ActivityIndicator size="large" /> : <Text>Erreur lors du traitement des données</Text>
)}
style={{ flex: 1 }}
/>
<View style={{ marginTop: '6%' }}></View>
<View style={{display: listVisibility}}>
<View style={[styles.horizontalAlignment, { margin: "2%" }]}>
{alphabetArray.map((source, index) => (
<Pressable key={index} onPress={() => handleLetterPress(source)}>
<Text style={{ color: colors.letterFilter }}>{source}</Text>
</Pressable>
))}
</View>
<View>
<Searchbar
placeholder="Search"
onChangeText={handleSearch}
value={searchQuery}
style={{margin: "3%",
backgroundColor: colors.cardBackground,
borderWidth : 1,
borderColor: colors.cardElementBorder,
borderRadius: 15,
}}/>
</View>
<View style={{height: 280}}>
<FlatList
data={response ? response : []}
renderItem={({ item }) => (
<AvailableItem value={item} />
)}
keyExtractor={(item, index) => index.toString()}
ListEmptyComponent={() => (
isLoading ? <ActivityIndicator size="large" /> : <Text>Erreur lors du traitement des données</Text>
)}
style={{ flex: 1 }}
/>
<View style={{ marginTop: '6%' }}></View>
</View>
</View>
</View>
<View style={{marginTop: "6%"}}/>
<View style={styles.element}>
<View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}>
<Text style={{fontSize: 20, color: colors.cardElementBorder}}>Available</Text>
</View>
<View style={{flex: 1, maxHeight: 280}}>
<Pressable onPress={changeAvailableVisibility}>
<View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginHorizontal: "5%", marginBottom: "4%"}]}>
<Text style={{fontSize: 20, color: colors.cardElementBorder, flex: 1}}>Available</Text>
<Image source={require("../assets/images/arrow.png")} style={{tintColor: colors.cardDetail}}/>
</View>
</Pressable>
<View style={{height: availableSize, display: availableVisibility}}>
<FlatList
data={selectedIngredients}
renderItem={({ item }) => (

2
LeftOvers/screens/Profiles.tsx
Unescape View File

@ -76,7 +76,7 @@ export default function Profiles({navigation, props}) {
modal: {
position: 'absolute',
top: '8%',
top: '0%',
justifyContent: "center",
alignItems: "center",
width: "100%",

Write Preview
Loading…
Cancel
Save