parent
10473811cd
commit
f8bc096ed6
@ -1,38 +1,13 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {StyleSheet, View} from 'react-native';
|
import {StyleSheet, View} from 'react-native';
|
||||||
import ProfileModification from './components/ProfileModification';
|
import ModifyProfile from './screens/ModifyProfile';
|
||||||
import ValidateButton from './components/ValidateButton';
|
import Profiles from './screens/Profiles';
|
||||||
import { LinearGradient } from 'expo-linear-gradient';
|
import RecipeSuggestion from './screens/RecipeSuggestion';
|
||||||
|
|
||||||
export default function App() {
|
export default function App(props) {
|
||||||
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"}]
|
|
||||||
return(
|
return(
|
||||||
<View style={styles.container}>
|
//<ModifyProfile/>
|
||||||
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
|
<Profiles/>
|
||||||
<ProfileModification name="Johnny Silverhand" avatar="plus.png" diets={die} allergies={all}></ProfileModification>
|
//<RecipeSuggestion/>
|
||||||
<View style={{marginTop: 10}}/>
|
|
||||||
<ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
|
|
||||||
</LinearGradient>
|
|
||||||
</View>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
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',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -1,80 +0,0 @@
|
|||||||
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,133 @@
|
|||||||
|
import {React, useState} from 'react';
|
||||||
|
import {StyleSheet, Text, TextInput, View, Image, Pressable} from 'react-native';
|
||||||
|
import ValidateButton from './ValidateButton';
|
||||||
|
import ListWithoutSelect from './ListWithoutSelect';
|
||||||
|
|
||||||
|
type ProfileProps = {
|
||||||
|
name: string
|
||||||
|
avatar: string
|
||||||
|
diets: list<string>
|
||||||
|
allergies: list<string>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProfileDetails(props: ProfileProps) {
|
||||||
|
const [display, setDisplay] = useState("none");
|
||||||
|
const changeListVisibility = () => {
|
||||||
|
if (display == "none"){
|
||||||
|
setDisplay("flex")
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
setDisplay("none")
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.background}>
|
||||||
|
<View style={styles.pseudoBar}>
|
||||||
|
<Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
|
||||||
|
<Text style={styles.text}>{props.name}</Text>
|
||||||
|
<Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
|
||||||
|
<Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
|
||||||
|
</View>
|
||||||
|
<Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
|
||||||
|
<View style={styles.filterBar}>
|
||||||
|
<Text style={styles.filters}>Filters</Text>
|
||||||
|
<Text style={styles.nbSelected}>3 selected</Text>
|
||||||
|
<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
|
||||||
|
</View>
|
||||||
|
</Pressable>
|
||||||
|
<View style={{display: display}}>
|
||||||
|
<ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
|
||||||
|
<View style={{marginTop: 10}}/>
|
||||||
|
<ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
|
||||||
|
<View style={{marginTop: 10}}/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
background: {
|
||||||
|
//maxWidth: 370,
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
borderRadius: 15,
|
||||||
|
backgroundColor: '#F2F0E4',
|
||||||
|
padding: 10,
|
||||||
|
marginHorizontal: 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,
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
fontSize: 20,
|
||||||
|
color: '#ACA279',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'left',
|
||||||
|
flex: 0.8,
|
||||||
|
marginLeft: 20,
|
||||||
|
padding: 5,
|
||||||
|
},
|
||||||
|
modify: {
|
||||||
|
height: 20,
|
||||||
|
width: 20,
|
||||||
|
tintColor: "#ACA279",
|
||||||
|
resizeMode: 'contain',
|
||||||
|
flex: 0.05,
|
||||||
|
marginLeft: 15,
|
||||||
|
},
|
||||||
|
delete: {
|
||||||
|
height: 20,
|
||||||
|
width: 20,
|
||||||
|
tintColor: "#ACA279",
|
||||||
|
resizeMode: 'contain',
|
||||||
|
flex: 0.05,
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
arrow: {
|
||||||
|
height: 20,
|
||||||
|
width: 20,
|
||||||
|
resizeMode: 'contain',
|
||||||
|
tintColor: "#3F3C42",
|
||||||
|
flex: 0.1,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -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 ModifyProfile(props) {
|
||||||
|
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"}]
|
||||||
|
return (
|
||||||
|
<SafeAreaProvider>
|
||||||
|
<TopBar title="Modify Profile" isVisible="true"/>
|
||||||
|
<View style={styles.container}>
|
||||||
|
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
|
||||||
|
<View style={{marginTop: 10}}/>
|
||||||
|
<ProfileModification name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
|
||||||
|
<View style={{marginTop: 10}}/>
|
||||||
|
<ValidateButton title="Update Profile" image="update.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,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {StyleSheet, View} from 'react-native';
|
||||||
|
import ProfileModification from '../components/ProfileModification';
|
||||||
|
import ProfileDetails from '../components/ProfileDetails';
|
||||||
|
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 ModifyProfile(props) {
|
||||||
|
const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
|
||||||
|
const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
|
||||||
|
|
||||||
|
const allJackie = [{value: "Tomato"}, {value: "Relic"}]
|
||||||
|
const dieJackie = [{value: "Porkless"}, {value: "Vegetarian"}]
|
||||||
|
|
||||||
|
const allGoro = []
|
||||||
|
const dieGoro = [{value: "Pescatarian"}]
|
||||||
|
|
||||||
|
const allViktor = [{value: "Pasta"}, {value: "Fish"}]
|
||||||
|
const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaProvider>
|
||||||
|
<TopBar title="Profiles" isVisible="true"/>
|
||||||
|
<View style={styles.container}>
|
||||||
|
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
|
||||||
|
<View style={{marginTop: 10}}/>
|
||||||
|
<ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny}></ProfileDetails>
|
||||||
|
<View style={{marginTop: 10}}/>
|
||||||
|
<ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie}></ProfileDetails>
|
||||||
|
<View style={{marginTop: 10}}/>
|
||||||
|
<ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro}></ProfileDetails>
|
||||||
|
<View style={{marginTop: 10}}/>
|
||||||
|
<ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor}></ProfileDetails>
|
||||||
|
<View style={{marginTop: 10}}/>
|
||||||
|
</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,
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in new issue