zmiguel
/
ENEI2019-Public
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

calendar

This commit is contained in:
henrydays 2019-02-18 19:55:53 +00:00
parent c5a43f6420
commit 30ed051c9f
3 changed files with 135 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
App/app/screens/Calendar.js
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import {View, StyleSheet, Dimensions, Image, ScrollView, Text, Button} from 'react-native';
import {View, StyleSheet, Dimensions, Image, ScrollView, Text, Button, TouchableOpacity, Animated} from 'react-native';
import {TabView, TabBar, SceneMap} from 'react-native-tab-view';
import {
RkButton, RkCard, RkText,
@ -43,10 +43,10 @@ class Calendar extends React.Component {
state = {
index: 0,
routes: [
{key: 'first', title: 'Sex 12'},
{key: 'second', title: 'Sab 13'},
{key: 'third', title: 'Dom 14'},
{key: 'fourth', title: 'Seg 15'},
{key: 'first', weekDay: 'sex', day:12},
{key: 'second', weekDay: 'sab',day:13},
{key: 'third', weekDay: 'dom', day:14},
{key: 'fourth', weekDay: 'seg', day:15},
],
};
@ -65,13 +65,17 @@ class Calendar extends React.Component {
<View style={styles.event}>
<View style={styles.titleContainer}>
<Text style={[styles.title]}>{item.name}</Text>
<Text style={{color:'black'}}>Local: 1</Text>
</View>
<View>
<Text style={styles.description}>{item.description}</Text>
<View style={styles.details}>
<Progress.Bar color={'#42a5f5'} progress={0.3} unfilledColor={'white'} width={210}/>
<Progress.Bar color={'#000000'} progress={item.Enrolled/item.MaxAttendees} unfilledColor={'white'} width={210}/>
<Text>{item.Enrolled} / {item.MaxAttendees}</Text>
</View>
@ -82,26 +86,6 @@ class Calendar extends React.Component {
}
renderEvents = ({item, index}) => {
return (
<View style={styles.event}>
<Text style={[styles.title]}>{item.title}</Text>
<View>
<Image source={{uri: item.imageUrl, width: '100%', height: 100}} style={{borderRadius: 0}}/>
<Text style={styles.description}>{item.description}</Text>
<View style={styles.details}>
<Progress.Bar color={'#42a5f5'} progress={0.3} unfilledColor={'white'} width={210}/>
<Text>1/50</Text>
</View>
</View>
</View>
);
}
_update = () => {
this.setState({user: this.props.user});
@ -109,6 +93,42 @@ class Calendar extends React.Component {
}
_renderTabBar = props => {
const inputRange = props.navigationState.routes.map((x, i) => i);
return (
<View style={styles.tabBar}>
{props.navigationState.routes.map((route, i) => {
const bgcolor = props.position.interpolate({
inputRange,
outputRange: inputRange.map(
inputIndex => (inputIndex === i ? '#CC1A17' : 'rgba(0,0,0,0)')
),
});
const color = props.position.interpolate({
inputRange,
outputRange: inputRange.map(
inputIndex => (inputIndex === i ? 'white' : 'black')
),
});
return (
<TouchableOpacity
style={styles.tabItem}
onPress={() => this.setState({ index: i })}>
<Animated.Text style={{ color :'#7A7B7B' }}>{route.weekDay}</Animated.Text>
<Animated.Text style={{ backgroundColor: bgcolor, borderRadius:90 , padding:10, marginTop:5, color:color, fontSize:15}}>{route.day}</Animated.Text>
</TouchableOpacity>
);
})}
</View>
);
};
constructor() {
super()
@ -147,19 +167,30 @@ class Calendar extends React.Component {
data={this.props.events}
timeContainerStyle={{minWidth: 52, marginTop: 5}}
timeContainerStyle={{ marginTop: 0}}
timeStyle={{
textAlign: 'center',
backgroundColor: '#ff9797',
color: 'white',
// backgroundColor: 'red',
height:100,
color:"#CC1A17",
padding: 5,
borderRadius: 13
//marginTop:10,
// fontWeight:'bold',
fontSize:23,
//borderRadius: 13
}}
descriptionStyle={{color: 'gray'}}
descriptionStyle={{color: 'red'}}
renderDetail={this.renderDetail}
lineColor='rgba(0,0,0,0)'
lineWidth={1}
separator={false}
flatListProps={{
style: {
@ -188,7 +219,8 @@ class Calendar extends React.Component {
data={this.props.events}
timeContainerStyle={{minWidth: 52, marginTop: 5}}
timeContainerStyle={{minWidth: 52, marginTop: 0}}
timeStyle={{
textAlign: 'center',
backgroundColor: '#ff9797',
@ -196,19 +228,26 @@ class Calendar extends React.Component {
padding: 5,
borderRadius: 13
}}
descriptionStyle={{color: 'gray'}}
// descriptionStyle={{color: 'gray'}}
lineWidth={0}
renderDetail={this.renderDetail}
lineColor={'red'}
flatListProps={{
style: {
margin: 15
// margin: 15
}
}}
keyExtractor={(item, index) => index.toString()}
@ -219,7 +258,7 @@ class Calendar extends React.Component {
)
return (
<TabView
navigationState={this.state}
renderScene={SceneMap({
@ -228,40 +267,66 @@ class Calendar extends React.Component {
third: ThirdRoute,
fourth: FourthRoute
})}
useNativeDriver
renderTabBar={this._renderTabBar}
useNativeDriver={true}
onIndexChange={index => this.setState({index})}
initialLayout={{width: Dimensions.get('window').width, height: Dimensions.get('window').height}}
style={{backgroundColor:"#F2F2F2"}}
indicatorStyle={{ backgroundColor: 'pink' }}
/>
);
}
}
const styles = StyleSheet.create({
tabBar: {
flexDirection: 'row',
paddingTop:0,
backgroundColor:'white'
},
tabItem: {
flex: 1,
alignItems: 'center',
padding: 16,
},
details: {
backgroundColor: "#e0e0e0",
backgroundColor: "#FFFFFF",
borderBottomRightRadius: 10,
borderBottomLeftRadius: 10,
padding: 10
padding: 10,
paddingTop:0
},
description: {
padding: 10
padding: 10,
paddingLeft:0,
paddingTop:0
},
title: {
color: '#212121',
fontWeight: 'bold',
fontSize: 15,
},
titleContainer:{
padding: 10
},
event: {
borderRadius: 10,
backgroundColor: '#eeeeee',
borderRadius: 5,
backgroundColor: "#FFFFFF",
marginLeft:-25
},
scene: {
flex: 1,
},
contentContainer: {
paddingVertical: 20
//paddingVertical: 20,
backgroundColor:'#F2F2F2'
}
});
RkTheme.setType('RkCard', 'story', {

46
App/app/screens/Home.js
View File

@ -160,7 +160,25 @@ shadowOpacity: 1.0
</ImageBackground>
<View style={styles.userStats}>
<Text style={styles.userStatsTitle}>O meu saldo:</Text>
<View style={styles.userStatsBox}>
<View style={styles.userBox}>
<Icon name="ios-beer" style={styles.userStatsBoxIcon} size={50}/>
<Text style={styles.userBoxText}>0 Fino(s)</Text>
</View>
<View style={styles.userBox}>
<Icon name="ios-beer" style={styles.userStatsBoxIcon} size={50}/>
<Text style={styles.userBoxText}>0 Fino(s)</Text>
</View>
<View style={styles.userBox}>
<Icon name="ios-beer" style={styles.userStatsBoxIcon} size={50}/>
<Text style={styles.userBoxText}>0 Fino(s)</Text>
</View>
</View>
</View>
<View style={styles.userBio}>
@ -193,25 +211,7 @@ shadowOpacity: 1.0
</View>
<View style={styles.userStats}>
<Text style={styles.userStatsTitle}>O meu saldo:</Text>
<View style={styles.userStatsBox}>
<View style={styles.userBox}>
<Icon name="ios-beer" style={styles.userStatsBoxIcon} size={50}/>
<Text style={styles.userBoxText}>0 Fino(s)</Text>
</View>
<View style={styles.userBox}>
<Icon name="ios-beer" style={styles.userStatsBoxIcon} size={50}/>
<Text style={styles.userBoxText}>0 Fino(s)</Text>
</View>
<View style={styles.userBox}>
<Icon name="ios-beer" style={styles.userStatsBoxIcon} size={50}/>
<Text style={styles.userBoxText}>0 Fino(s)</Text>
</View>
</View>
</View>
@ -317,9 +317,11 @@ userBox:{
backgroundColor:'#CC1A17',
height: SCREEN_HEIGHT*0.2,
padding:10,
margin:9,
margin:10,
borderRadius:5,
marginTop:0,
marginTop:10,
marginBottom:0
},
userStatsTitle:{

2
App/app/store/actions/api.js
View File

@ -15,7 +15,7 @@ export function getEvents(user){
events.push({
time: moment(user.Sessions[key].SessionStart).format('h:mm'),
timeEnd: moment(user.Sessions[key].SessionEnd).format('h:mm'),
lineColor:'#009688',
//lineColor:'#009688',
imageUrl: 'https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/Vjkyj2hBg/welcome-white-sign-with-falling-colorful-confetti-animation-on-white-background_sglmmh3qm__F0013.png',
description:user.Sessions[key].Description,
name:user.Sessions[key].Name,