Merge remote-tracking branch 'origin/master' into zmiguel

This commit is contained in:
José Valdiviesso 2019-02-23 17:23:40 +00:00
commit 478a27a39f
144 changed files with 12207 additions and 3131 deletions

View File

@ -149,6 +149,8 @@ android {
}
dependencies {
compile project(':react-native-material-shadows')
compile project(':react-native-linear-gradient')
compile project(':react-native-camera')
compile project(':react-native-vector-icons')
compile project(':react-native-gesture-handler')

0
App/android/app/src/main/assets/fonts/AntDesign.ttf Executable file → Normal file
View File

0
App/android/app/src/main/assets/fonts/Entypo.ttf Executable file → Normal file
View File

0
App/android/app/src/main/assets/fonts/EvilIcons.ttf Executable file → Normal file
View File

0
App/android/app/src/main/assets/fonts/FontAwesome.ttf Executable file → Normal file
View File

View File

View File

View File

0
App/android/app/src/main/assets/fonts/Foundation.ttf Executable file → Normal file
View File

View File

View File

0
App/android/app/src/main/assets/fonts/Octicons.ttf Executable file → Normal file
View File

View File

0
App/android/app/src/main/assets/fonts/Zocial.ttf Executable file → Normal file
View File

View File

@ -3,6 +3,8 @@ package com.app;
import android.app.Application;
import com.facebook.react.ReactApplication;
import ui.materialshadows.RNMaterialShadowsPackage;
import com.BV.LinearGradient.LinearGradientPackage;
import org.reactnative.camera.RNCameraPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
@ -26,6 +28,8 @@ public class MainApplication extends Application implements ReactApplication {
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNMaterialShadowsPackage(),
new LinearGradientPackage(),
new RNCameraPackage(),
new VectorIconsPackage(),
new RNGestureHandlerPackage()

View File

@ -3,7 +3,7 @@
buildscript {
ext {
buildToolsVersion = "27.0.3"
minSdkVersion = 16
minSdkVersion = 21
compileSdkVersion = 27
targetSdkVersion = 26
supportLibVersion = "27.1.1"

View File

@ -22,4 +22,4 @@ android.enableAapt2=false
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=aspire98H
MYAPP_RELEASE_KEY_PASSWORD=encontroINFORMATICA2019
MYAPP_RELEASE_KEY_PASSWORD=aspire98H

View File

@ -1,4 +1,8 @@
rootProject.name = 'app'
include ':react-native-material-shadows'
project(':react-native-material-shadows').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-material-shadows/android')
include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
include ':react-native-vector-icons'

View File

@ -10,7 +10,13 @@ import {
ActivityIndicator,
Button,
TouchableHighlight,
Keyboard
Keyboard,
ImageBackground,
LinearGradient,
TouchableOpacity,
TextInput,
NetInfo,
Animated
} from 'react-native';
@ -20,7 +26,7 @@ import {connect} from 'react-redux';
import QRCodeScanner from 'react-native-qrcode-scanner';
import {UtilStyles} from './assets/styles'
import * as Actions from './store/actions'; //Import your actions
import * as Actions from './store/actions';
import {RkButton, RkTheme, RkText, RkTextInput} from 'react-native-ui-kitten';
@ -33,7 +39,11 @@ import Icon from "react-native-vector-icons/Ionicons"
const SCREEN_HEIGHT = Dimensions.get("window").height;
const SCREEN_WIDTH = Dimensions.get("window").width;
import Swiper from 'react-native-swiper';
function handleConnectivityChange() {
console.log("asdasd");
}
class App extends Component {
_activate=()=>{
@ -42,12 +52,16 @@ class App extends Component {
this.scanner.reactivate();
}
_scanQr=()=>{
this.props.openScannerLogin()
console.log(this.props.UI_loginScannerActive)
}
_tryLogin=()=>{
console.log(this.state.text)
this.scanner.reactivate();
//console.log(this.state.text)
//this.scanner.reactivate();
this.props.login(this.state.username, this.state.text);
}
@ -67,9 +81,10 @@ class App extends Component {
logged: false,
isModalVisible: false,
state : {text: ''},
username:'',
username:'QR code',
failedAttempt: false,
push:4
push:4,
UI_loginScannerActive:false
};
@ -81,7 +96,15 @@ class App extends Component {
checkValue=(e)=>{
console.log("check"+e)
}
_handleConnectionChange = (isConnected) => {
this.props.connectionState(true);
};
componentDidMount() {
NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
this.setState({isModalVisible: false})
//verifica se o utilizador tem token guardado
this.props.checkUser();
@ -90,6 +113,10 @@ class App extends Component {
}
componentWillUnmount() {
NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
}
_keyboardDidShow () {
//alert('Keyboard Shown');
// this.setState({push:0})
@ -103,141 +130,155 @@ class App extends Component {
}
onSuccess = (e) => {
this.setState({ isModalVisible: !this.state.isModalVisible });
// this.setState({ isModalVisible: !this.state.isModalVisible });
// this.props.login(e.data, 'f8908cc0');
this.props.closeLoginQRScan();
this.setState({username:e.data})
console.log("tentativa de login");
console.log("QR code lido");
};
render() {
if (this.props.onHold && !this.props.logged) {
if (!this.props.logged) {
return (
<View style={UtilStyles.containerLoading}>
<Text>CARREGANDO {this.props.onHold}</Text>
<ActivityIndicator size="large" color="#0000ff"/>
<ActivityIndicator size="large" color="red"/>
</View>
)
}
else
{
//console.log('token... '+ this.props.logged)
// console.log('token... '+ this.props.logged)
//se existir token
if (this.props.logged) {
if (this.props.logged ) {
return (
<Router></Router>
)
}
else {
return (
<View style={styles.slide2}>
<Modal isVisible={this.props.UI_loginScannerActive}>
<View style={{ flex: 1 , backgroundColor:'white'}}>
<Button onPress={this.props.closeLoginQRScan} title={"Fechar scanner"}> </Button>
<QRCodeScanner
onRead={this.onSuccess}
cameraStyle={ styles.cameraContainer}
/>
</View>
</Modal>
<View style={{ width:'100%',
justifyContent: 'center',
alignItems: 'center',}}>
<Image style={styles.logo2} source={require('./assets/img/logo2.png')}/>
</View>
<View styles={styles.loginContainer}>
//se não existir vai para o ecrã de scan QR
return (
<QRCodeScanner
ref={(node) => { this.scanner = node }}
showMarker
<View style={styles.inputSection}>
<TextInput
style={styles.input}
placeholder={this.state.username}
onChangeText={(searchString) => {this.setState({searchString})}}
maxLength={15}
underlineColorAndroid="transparent"
/>
<TouchableOpacity onPress={this._scanQr}>
<View style={styles.scanQR}>
<Icon style={styles.searchIcon} name="ios-qr-scanner" size={30} color="#000"/>
<Text>Scan QR</Text>
</View>
</TouchableOpacity>
</View>
onRead={this.onSuccess.bind(this)}
cameraStyle={{height: SCREEN_HEIGHT}}
<TextInput style={styles.passwordInput}
onFocus={this._print}
maxLength={10}
blurOnSubmit ={true}
secureTextEntry={true}
onChangeText={(text) => this.setState({text})}
clearButtonMode='always'
value={this.state.text}
clearTextOnFocus={true}
onSubmitEditing={Keyboard.dismiss}
placeholder='Password' />
<RkButton rkType='dark' style={styles.loginBtn} onPress={this._tryLogin}>Entrar</RkButton>
customMarker={
<View style={styles.rectangleContainer}>
<Modal
isVisible={this.state.isModalVisible}
style={
{
backgroundColor:'#E8E8E8',
borderRadius:10,
marginTop:SCREEN_HEIGHT /this.state.push,
height:SCREEN_HEIGHT/2
}
}
animationInTiming={1000}
animationOutTiming={1000}
>
<View style={{ flex: 1}}>
<Text></Text>
<Text> Introduza a password</Text>
<RkTextInput
onFocus={this._print}
maxLength={10}
blurOnSubmit ={true}
secureTextEntry={true}
rkType='rounded'
onChangeText={(text) => this.setState({text})}
clearButtonMode='always'
value={this.state.text}
clearTextOnFocus={true}
onSubmitEditing={Keyboard.dismiss}
/>
<Button onPress={this._tryLogin} title="Login" color="#841584" />
{ this.props.failedAttempt &&
<Text> Password ou QR incorrecto</Text>
}
<Text></Text>
<Button onPress={this._activate} title="Scan again!" color="green" accessibilityLabel="Learn more about this purple button"/>
</View>
</Modal>
<View style={styles.logo}>
<Image style={UtilStyles.loginImage}
source={require('./assets/img/logo.png')}
/>
</View>
<View style={{flexDirection: "row"}}>
<View style={styles.leftAndRightOverlay}>
</View>
<View style={styles.rectangle}>
</View>
<View style={styles.leftAndRightOverlay}>
</View>
</View>
<View style={styles.bottomOverlay}>
<View style={{flex: 1, alignItems: 'center', alignContent: 'center'}}>
<RkText rkType='primary' style={styles.recover}>Recuperar pin de acesso</RkText>
<RkButton rkType='dark' style={styles.manual}>lols</RkButton>
</View>
</View>
</View>
}
/>
)
}
</View>
<View style={ styles.buttons }>
<TouchableOpacity
style={styles.button}>
<Icon name="logo-facebook" size={40}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}>
<Icon name="logo-instagram" size={40}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}>
<Icon name="md-heart" size={40}/>
</TouchableOpacity>
</View>
<View style={styles.footer}>
<View style={styles.textRow}>
<RkText rkType='primary3'>Não sabes a password?</RkText>
<RkButton rkType='clear' onPress={this.onSignUpButtonPressed}>
<TouchableOpacity>
<RkText style={{color:'red'}} kType='header6'>Recuperar Password</RkText>
</TouchableOpacity>
</RkButton>
</View>
</View>
</View>
);
}
}
}
@ -258,7 +299,162 @@ const rectDimensions = SCREEN_WIDTH * 0.85; // this is equivalent to 255 from a
const overlayColor = 'rgba(0,0,0,0.30)';
const styles = {
cameraContainer:{
// height: Dimensions.get('window').height ,
},
passwordInput:{
borderRadius: 90,
borderColor:'#bfbdbd',
borderWidth: 1,
marginTop:20,
marginBottom:20,
width:SCREEN_WIDTH*0.8,
backgroundColor: 'white',
borderRadius: 90,
height: SCREEN_HEIGHT*0.08,
borderColor:'#bfbdbd',
borderWidth: 1,
paddingLeft:SCREEN_WIDTH*0.05,
},
scanQRText:{
paddingTop:50
// paddingTop:20,
},
scanQR:{
//flexDirection: 'row',
paddingTop:5,
backgroundColor:10,
width:80,
paddingLeft:10,
backgroundColor:'#f24b4b',
borderBottomRightRadius:90,
borderTopRightRadius:90,
height:'100%',
},
inputSection: {
flexDirection: 'row',
backgroundColor: '#fff',
backgroundColor: 'white',
borderRadius: 90,
height: SCREEN_HEIGHT*0.08,
borderColor:'#bfbdbd',
borderWidth: 1,
},
searchIcon: {
paddingLeft:10
},
input: {
flex: 1,
paddingRight: 10,
paddingLeft: 0,
paddingLeft:SCREEN_WIDTH*0.05,
color: '#424242',
},
textRow:{
marginBottom:40
},
loginContainer:{
width: '100%',
height: '30%',
justifyContent: 'center',
alignItems: 'center'
},
loginBtn:{
marginTop:10,
marginBottom:20,
marginLeft: '25%',
},
button: {
borderWidth:1,
borderColor:'rgba(0,0,0,0.2)',
alignItems:'center',
justifyContent:'center',
width:60,
height:60,
backgroundColor:'#fff',
borderRadius:100,
marginRight: 10,
marginLeft:10
},
footer: {},
buttons: {
flexDirection: 'row',
marginBottom: 24,
marginHorizontal: 24,
marginTop:24,
justifyContent: 'space-around',
},
logoContainer:{
width:'100%',
justifyContent: 'center',
alignItems: 'center',
marginTop:200
},
logo2:{
// flex: 1,
// resizeMode: 'contain',
width: 200, height: 200,
},
wrapper: {
},
slide1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
color:'black',
backgroundColor: 'white',
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
},
recover: {
paddingTop: 10,
color: "red",
@ -334,6 +530,7 @@ mapStateToProps = (state, props) => {
onHold: state.apiReducer.onHold,
logged: state.apiReducer.logged,
failedAttempt:state.apiReducer.failedAttempt,
UI_loginScannerActive: state.uiReducer.UI_loginScannerActive
}
};

View File

@ -1,5 +1,9 @@
import React from 'react';
import {TouchableOpacity} from 'react-native';
import {
TouchableOpacity,
Text,
View
} from 'react-native';
import {
createStackNavigator,
createAppContainer,
@ -26,21 +30,24 @@ import Icon from "react-native-vector-icons/Ionicons"
import IconF from "react-native-vector-icons/Foundation"
import IconFA from "react-native-vector-icons/FontAwesome5"
import Profile from "./screens/Profile";
import editCalendar from './screens/editCalendar';
import choosePath from './screens/choosePath';
import calendarDetail from './screens/calendarDetail';
const AppStack = createBottomTabNavigator(
{
Home: {
screen: Home,
Calendar: {
screen: Calendar,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<Icon name="md-home" color={tintColor} size={30}/>
<IconF name="calendar" color={tintColor} size={30}/>
)
},
},
Social: {
screen: Social,
@ -57,23 +64,13 @@ const AppStack = createBottomTabNavigator(
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<Icon name="ios-qr-scanner" color={tintColor} size={45}/>
<Icon name="ios-qr-scanner" color={tintColor} size={30}/>
),
},
},
Calendar: {
screen: Calendar,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<IconF name="calendar" color={tintColor} size={30}/>
)
},
},
Eventos: {
Eventos: {
screen: Eventos,
navigationOptions: {
@ -83,6 +80,17 @@ const AppStack = createBottomTabNavigator(
)
},
},
Home: {
screen: Home,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<Icon name="ios-person" color={tintColor} size={30}/>
)
},
},
},
@ -90,8 +98,8 @@ const AppStack = createBottomTabNavigator(
initialRouteName: 'Home',
tabBarOptions: {
showLabel: false, // hide labels
activeTintColor: '#858683', // active icon color
showLabel: true, // hide labels
activeTintColor: '#CC1A17', // active icon color
inactiveTintColor: '#d8d6c9', // inactive icon color
style: {
backgroundColor: '#fff' // TabBar background
@ -106,16 +114,39 @@ const Stack = createStackNavigator({
navigationOptions: ({navigation}) => {
const index = navigation.state.index;
if (navigation.state.routes[index].routeName !== 'Scan') {
if (navigation.state.routes[index].routeName == 'Home') {
return {
headerTitle: `${navigation.state.routes[index].routeName}`,
headerRight: (
<TouchableOpacity style={{marginRight: 20}} onPress={() => navigation.navigate('Profile')}>
<TouchableOpacity style={{marginRight: 20, flex:1, flexDirection:'row'}} onPress={() => navigation.navigate('Profile')}>
<Text>editar</Text>
<IconFA name="user-edit" size={22}/>
</TouchableOpacity>
)
}
} else {
}
else if(navigation.state.routes[index].routeName == 'Calendar'){
return {
headerTitle: 'Calendário',
headerRight: (
<View style={{flex:1, flexDirection:'row'}}>
<TouchableOpacity style={{marginRight: 20, flex:1, flexDirection:'row'}} onPress={() => navigation.navigate('Edit')}>
<Text>FAQ</Text>
</TouchableOpacity>
<TouchableOpacity style={{marginRight: 20, flex:1, flexDirection:'row'}} onPress={() => navigation.navigate('choosePath')}>
<Text>Escolher</Text>
<IconFA name="user-edit" size={22}/>
</TouchableOpacity></View>
)
}
}
else {
return {
header: null
}
@ -124,8 +155,19 @@ const Stack = createStackNavigator({
},
Profile: {
screen: Profile
},
Edit:{
screen: editCalendar
},
choosePath:{
screen: choosePath
},
calendarDetail:{
screen:calendarDetail
}
});

BIN
App/app/assets/img/bg_3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

BIN
App/app/assets/img/bg_coimbra.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -14,7 +14,7 @@ export const UtilStyles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
backgroundColor: 'white',
},
titleText: {
fontSize: 20,

62
App/app/components/Email.js Executable file
View File

@ -0,0 +1,62 @@
import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { Icon } from 'react-native-elements'
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginBottom: 25,
marginTop: 25,
},
emailColumn: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginBottom: 5,
},
emailIcon: {
color: '#CC6666',
fontSize: 30,
},
emailNameText: {
color: 'gray',
fontSize: 14,
fontWeight: '200',
},
emailRow: {
flex: 8,
flexDirection: 'column',
justifyContent: 'center',
},
emailText: {
fontSize: 16,
},
iconRow: {
flex: 2,
justifyContent: 'center',
},
});
const Email = ({ containerStyle, onPressEmail, name, email, key}) => (
<TouchableOpacity onPress={() => onPressEmail(email)}>
<View style={[styles.container, containerStyle]}>
<View style={styles.iconRow}>
<Icon
name="email"
underlayColor="transparent"
iconStyle={styles.emailIcon}
onPress={() => onPressEmail()}
/>
</View>
<View style={styles.emailRow}>
<View style={styles.emailColumn}>
<Text style={styles.emailText}>{email}</Text>
</View>
</View>
</View>
</TouchableOpacity>
)
export default Email

27
App/app/components/Separator.js Executable file
View File

@ -0,0 +1,27 @@
import React from 'react'
import { StyleSheet, View } from 'react-native'
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
separatorOffset: {
flex: 2,
flexDirection: 'row',
},
separator: {
flex: 8,
flexDirection: 'row',
borderColor: '#EDEDED',
borderWidth: 0.8,
},
})
const Separator = () => (
<View style={styles.container}>
<View style={styles.separatorOffset} />
<View style={styles.separator} />
</View>
)
export default Separator

91
App/app/components/Telephone.js Executable file
View File

@ -0,0 +1,91 @@
import React from 'react'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {Icon} from 'react-native-elements'
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginBottom: 25,
marginTop: 25,
},
iconRow: {
flex: 2,
justifyContent: 'center',
},
smsIcon: {
color: 'gray',
fontSize: 30,
},
smsRow: {
flex: 2,
justifyContent: 'flex-start',
},
telIcon: {
color: '#CC6666',
fontSize: 30,
},
telNameColumn: {
flexDirection: 'row',
justifyContent: 'flex-start',
},
telNameText: {
color: 'gray',
fontSize: 14,
fontWeight: '200',
},
telNumberColumn: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginBottom: 5,
},
telNumberText: {
fontSize: 16,
},
telRow: {
flex: 6,
flexDirection: 'column',
justifyContent: 'center',
},
})
const Tel = ({
containerStyle,
name,
number,
onPressSms,
onPressTel,
}) => {
return (
<TouchableOpacity onPress={() => onPressTel(number)}>
<View style={[styles.container, containerStyle]}>
<View style={styles.iconRow}>
<Icon
name="call"
underlayColor="transparent"
iconStyle={styles.telIcon}
onPress={() => onPressTel(number)}
/>
</View>
<View style={styles.telRow}>
<View style={styles.telNumberColumn}>
<Text style={styles.telNumberText}>{number}</Text>
</View>
</View>
<View style={styles.smsRow}>
<Icon
name="textsms"
underlayColor="transparent"
iconStyle={styles.smsIcon}
onPress={() => onPressSms(number)}
/>
</View>
</View>
</TouchableOpacity>
)
};
export default Tel

View File

@ -0,0 +1,42 @@
import React from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {
RkButton,
RkText,
RkComponent,
} from 'react-native-ui-kitten';
export class GradientButton extends RkComponent {
componentName = 'GradientButton';
typeMapping = {
button: {},
gradient: {},
text: {},
};
renderContent = (textStyle) => {
const hasText = this.props.text === undefined;
return hasText ? this.props.children : this.renderText(textStyle);
};
renderText = (textStyle) => (
<RkText style={textStyle}>{this.props.text}</RkText>
);
render() {
const { button, gradient, text: textStyle } = this.defineStyles();
const { style, rkType, ...restProps } = this.props;
const colors = this.props.colors || this.extractNonStyleValue(gradient, 'colors');
return (
<RkButton
rkType='stretch'
style={[button, style]}
{...restProps}>
<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#4c669f', '#3b5998', '#192f6a']} style={{}}>
</LinearGradient>
</RkButton>
);
}
}

View File

@ -0,0 +1,48 @@
import { scaleVertical } from '../../utils/scale';
export const GradientButtonTypes = (theme) => ({
_base: {
button: {
alignItems: 'stretch',
paddingVertical: 0,
paddingHorizontal: 0,
height: scaleVertical(40),
borderRadius: 20,
},
gradient: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
colors: theme.colors.gradients.base,
},
text: {
backgroundColor: 'transparent',
color: theme.colors.text.inverse,
},
},
large: {
button: {
alignSelf: 'stretch',
height: scaleVertical(56),
borderRadius: 28,
},
gradient: {
borderRadius: 28,
},
},
statItem: {
button: {
flex: 1,
borderRadius: 5,
marginHorizontal: 10,
height: null,
alignSelf: 'auto',
},
gradient: {
flex: 1,
borderRadius: 5,
padding: 10,
},
},
});

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,
@ -39,14 +39,14 @@ const FourthRoute = () => (
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},
],
};
@ -58,49 +58,40 @@ class Calendar extends React.Component {
console.log(this.props.events);
}
_openDetails=()=>{
console.log("los");
}
renderDetail = ({item, index}) => {
const {navigate} = this.props.navigation;
// <Image source={{ uri:item.imageUrl, width:'100%' , height:100 }} style={{borderRadius:0}}/>
return (
<TouchableOpacity onPress={() => navigate('calendarDetail', { info: item })} >
<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>
</View>
</View>
</TouchableOpacity>
);
}
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});
@ -108,11 +99,46 @@ 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()
const archeryImgSource = require('../assets/img/archery.png');
const badmintonImgSource = require('../assets/img/badminton.png');
const lunchImgSource = require('../assets/img/lunch.png');
@ -129,40 +155,6 @@ class Calendar extends React.Component {
this.data = [
{
time: '09:30',
title: 'Sessão de Check-In',
description: 'Os participantes devem fazer o check-in e recolher o kit fornecido pela organização',
lineColor: '#009688',
icon: ArcheryImage,
imageUrl: 'https://blogsimages.adobe.com/conversations/files/2014/03/Check_In-1.jpg'
},
{
time: '17:45',
title: 'Sessão de Abertura',
lineColor: '#009688',
description: 'Bem vindo a Coimbra, a cidade dos estudantes! Obrigado por participares na 13ª edição do ENEI.',
icon: BadmintonImage,
imageUrl: 'https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/Vjkyj2hBg/welcome-white-sign-with-falling-colorful-confetti-animation-on-white-background_sglmmh3qm__F0013.png'
},
{
time: '19:30',
title: 'Jantar',
lineColor: '#009688',
description: 'Time to eat',
icon: BadmintonImage,
imageUrl: 'https://www.retailmenot.com/blog/wp-content/uploads/2016/08/kids-eat-free-hero1-1471459190.jpg'
},
{
time: '23:30',
title: 'Festarola',
lineColor: '#009688',
description: 'Sabes beber? Se não sabes, aprende com os da casa!',
icon: BadmintonImage,
imageUrl: 'http://www.revistaversatille.com.br/wp-content/uploads/Party.jpg'
},
]
}
@ -171,28 +163,36 @@ class Calendar extends React.Component {
const FirstRoute = () => (
<ScrollView contentContainerStyle={styles.contentContainer}>
<Button onPress={this._update} title="LOGOUT"/>
<Timeline
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: {
@ -210,30 +210,38 @@ class Calendar extends React.Component {
</ScrollView>
)
const SecondRoute = () => (
<ScrollView contentContainerStyle={styles.contentContainer}>
<Timeline
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',