Added club information
This commit is contained in:
parent
d7d6146245
commit
5e40e271b7
1 changed files with 163 additions and 56 deletions
|
|
@ -1,8 +1,10 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {ScrollView, StyleSheet} from "react-native";
|
import {FlatList, StyleSheet} from "react-native";
|
||||||
import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
|
import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
|
||||||
import AuthenticatedScreen from "../../components/AuthenticatedScreen";
|
import AuthenticatedScreen from "../../components/AuthenticatedScreen";
|
||||||
import {openBrowser} from "../../utils/WebBrowser";
|
import {openBrowser} from "../../utils/WebBrowser";
|
||||||
|
import ConnectionManager from "../../managers/ConnectionManager";
|
||||||
|
import HeaderButton from "../../components/HeaderButton";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
|
@ -17,71 +19,176 @@ class ProfileScreen extends React.Component<Props, State> {
|
||||||
|
|
||||||
colors: Object;
|
colors: Object;
|
||||||
|
|
||||||
|
data: Object;
|
||||||
|
|
||||||
|
flatListData: Array<Object>;
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.colors = props.theme.colors;
|
this.colors = props.theme.colors;
|
||||||
|
this.onClickDisconnect = this.onClickDisconnect.bind(this);
|
||||||
|
this.flatListData = [
|
||||||
|
{id: 0},
|
||||||
|
{id: 1},
|
||||||
|
{id: 2},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const rightButton = this.getHeaderButtons.bind(this);
|
||||||
|
this.props.navigation.setOptions({
|
||||||
|
headerRight: rightButton,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getHeaderButtons() {
|
||||||
|
return <HeaderButton icon={'logout'} onPress={this.onClickDisconnect}/>;
|
||||||
|
}
|
||||||
|
|
||||||
|
onClickDisconnect() {
|
||||||
|
ConnectionManager.getInstance().disconnect()
|
||||||
|
.then(() => {
|
||||||
|
this.props.navigation.reset({
|
||||||
|
index: 0,
|
||||||
|
routes: [{name: 'Main'}],
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
getScreen(data: Object) {
|
getScreen(data: Object) {
|
||||||
console.log(data);
|
this.data = data;
|
||||||
return (
|
return (
|
||||||
<ScrollView>
|
<FlatList
|
||||||
<Card style={styles.card}>
|
renderItem={item => this.getRenderItem(item)}
|
||||||
<Card.Title
|
keyExtractor={item => item.id}
|
||||||
title={data.first_name + ' ' + data.last_name}
|
data={this.flatListData}
|
||||||
subtitle={data.email}
|
/>
|
||||||
left={(props) => <Avatar.Icon
|
|
||||||
{...props}
|
|
||||||
icon="account"
|
|
||||||
color={this.colors.primary}
|
|
||||||
style={styles.icon}
|
|
||||||
/>}
|
|
||||||
/>
|
|
||||||
<Card.Content>
|
|
||||||
<Divider/>
|
|
||||||
<List.Section>
|
|
||||||
<List.Subheader>INFORMATIONS PERSONNELLES</List.Subheader>
|
|
||||||
<List.Item
|
|
||||||
title={this.getFieldValue(data.birthday)}
|
|
||||||
left={props => <List.Icon {...props} icon="cake-variant"/>}
|
|
||||||
/>
|
|
||||||
<List.Item
|
|
||||||
title={this.getFieldValue(data.phone)}
|
|
||||||
left={props => <List.Icon {...props} icon="phone"/>}
|
|
||||||
/>
|
|
||||||
<List.Item
|
|
||||||
title={this.getFieldValue(data.email)}
|
|
||||||
left={props => <List.Icon {...props} icon="email"/>}
|
|
||||||
/>
|
|
||||||
<List.Item
|
|
||||||
title={this.getFieldValue(data.branch)}
|
|
||||||
left={props => <List.Icon {...props} icon="school"/>}
|
|
||||||
/>
|
|
||||||
</List.Section>
|
|
||||||
<Divider/>
|
|
||||||
<Card.Actions>
|
|
||||||
<Button
|
|
||||||
icon="account-edit"
|
|
||||||
mode="contained"
|
|
||||||
onPress={() => openBrowser(data.link, this.colors.primary)}
|
|
||||||
style={styles.editButton}>
|
|
||||||
EDITER INFOS
|
|
||||||
</Button>
|
|
||||||
</Card.Actions>
|
|
||||||
</Card.Content>
|
|
||||||
</Card>
|
|
||||||
<Card style={styles.card}>
|
|
||||||
<Card.Content>
|
|
||||||
<List.Section>
|
|
||||||
<List.Subheader>ETAT COTISATION</List.Subheader>
|
|
||||||
{this.getMembershipItem(data.validity)}
|
|
||||||
</List.Section>
|
|
||||||
</Card.Content>
|
|
||||||
</Card>
|
|
||||||
</ScrollView>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getRenderItem({item}: Object) {
|
||||||
|
switch (item.id) {
|
||||||
|
case 0:
|
||||||
|
return this.getPersonalCard();
|
||||||
|
case 1:
|
||||||
|
return this.getClubCard();
|
||||||
|
case 2:
|
||||||
|
return this.getMembershipCar();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
getPersonalCard() {
|
||||||
|
return (
|
||||||
|
<Card style={styles.card}>
|
||||||
|
<Card.Title
|
||||||
|
title={this.data.first_name + ' ' + this.data.last_name}
|
||||||
|
subtitle={this.data.email}
|
||||||
|
left={(props) => <Avatar.Icon
|
||||||
|
{...props}
|
||||||
|
icon="account"
|
||||||
|
color={this.colors.primary}
|
||||||
|
style={styles.icon}
|
||||||
|
/>}
|
||||||
|
/>
|
||||||
|
<Card.Content>
|
||||||
|
<Divider/>
|
||||||
|
<List.Section>
|
||||||
|
<List.Subheader>INFORMATIONS PERSONNELLES</List.Subheader>
|
||||||
|
<List.Item
|
||||||
|
title={this.getFieldValue(this.data.birthday)}
|
||||||
|
left={props => <List.Icon {...props} icon="cake-variant"/>}
|
||||||
|
/>
|
||||||
|
<List.Item
|
||||||
|
title={this.getFieldValue(this.data.phone)}
|
||||||
|
left={props => <List.Icon {...props} icon="phone"/>}
|
||||||
|
/>
|
||||||
|
<List.Item
|
||||||
|
title={this.getFieldValue(this.data.email)}
|
||||||
|
left={props => <List.Icon {...props} icon="email"/>}
|
||||||
|
/>
|
||||||
|
<List.Item
|
||||||
|
title={this.getFieldValue(this.data.branch)}
|
||||||
|
left={props => <List.Icon {...props} icon="school"/>}
|
||||||
|
/>
|
||||||
|
</List.Section>
|
||||||
|
<Divider/>
|
||||||
|
<Card.Actions>
|
||||||
|
<Button
|
||||||
|
icon="account-edit"
|
||||||
|
mode="contained"
|
||||||
|
onPress={() => openBrowser(this.data.link, this.colors.primary)}
|
||||||
|
style={styles.editButton}>
|
||||||
|
EDITER INFOS
|
||||||
|
</Button>
|
||||||
|
</Card.Actions>
|
||||||
|
</Card.Content>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getClubCard() {
|
||||||
|
return (
|
||||||
|
<Card style={styles.card}>
|
||||||
|
<Card.Title
|
||||||
|
title="CLUBS"
|
||||||
|
subtitle="LISTE DE VOS CLUBS"
|
||||||
|
left={(props) => <Avatar.Icon
|
||||||
|
{...props}
|
||||||
|
icon="account-group"
|
||||||
|
color={this.colors.primary}
|
||||||
|
style={styles.icon}
|
||||||
|
/>}
|
||||||
|
/>
|
||||||
|
<Card.Content>
|
||||||
|
<Divider/>
|
||||||
|
{this.getClubList(this.data.clubs)}
|
||||||
|
</Card.Content>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getMembershipCar() {
|
||||||
|
return (
|
||||||
|
<Card style={styles.card}>
|
||||||
|
<Card.Title
|
||||||
|
title="ÉTAT COTISATION"
|
||||||
|
subtitle="CA PERMET D'ETRE COOL"
|
||||||
|
left={(props) => <Avatar.Icon
|
||||||
|
{...props}
|
||||||
|
icon="credit-card"
|
||||||
|
color={this.colors.primary}
|
||||||
|
style={styles.icon}
|
||||||
|
/>}
|
||||||
|
/>
|
||||||
|
<Card.Content>
|
||||||
|
<List.Section>
|
||||||
|
{this.getMembershipItem(this.data.validity)}
|
||||||
|
</List.Section>
|
||||||
|
</Card.Content>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getClubList(list: Array<string>) {
|
||||||
|
let dataset = [];
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
dataset.push({name: list[i]});
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<FlatList
|
||||||
|
renderItem={({item}) =>
|
||||||
|
<List.Item
|
||||||
|
title={item.name}
|
||||||
|
left={props => <List.Icon {...props} icon="chevron-right"/>}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
keyExtractor={item => item.name}
|
||||||
|
data={dataset}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
getMembershipItem(state: boolean) {
|
getMembershipItem(state: boolean) {
|
||||||
return (
|
return (
|
||||||
<List.Item
|
<List.Item
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue