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

Profiles Selection Components

Browse Source
pull/16/head^2
Louison PARANT 1 year ago
parent 29a50b3039
commit 36c5578d4e
8 changed files with 363 additions and 6 deletions
Show Stats Download Patch File Download Diff File

6
LeftOvers/App.tsx
Unescape View File

@ -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/>
);
}

10
LeftOvers/components/ListSelect.tsx
Unescape View File

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

98
LeftOvers/components/ProfileElement.tsx
Unescape View File

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

6
LeftOvers/components/ProfileModification.tsx
Unescape View File

@ -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}>

63
LeftOvers/components/ProfileSelection.tsx
Unescape View File

@ -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',
},
});

43
LeftOvers/screens/CreateProfile.tsx
Unescape View File

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

137
LeftOvers/screens/FiltersSelection.tsx
Unescape View File

@ -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,
},
});
Write Preview
Loading…
Cancel
Save