397 lines
10 KiB
JavaScript
397 lines
10 KiB
JavaScript
import * as React from 'react';
|
|
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,
|
|
RkTheme
|
|
} from 'react-native-ui-kitten';
|
|
import Timeline from 'react-native-timeline-feed'
|
|
|
|
import * as Progress from 'react-native-progress';
|
|
|
|
|
|
import {connect} from 'react-redux';
|
|
|
|
import {bindActionCreators} from 'redux';
|
|
|
|
import * as Actions from '../store/actions'; //Import your actionss
|
|
|
|
|
|
const formatObj = (obj) => {
|
|
|
|
let a = {};
|
|
|
|
a.push({})
|
|
|
|
return a
|
|
|
|
};
|
|
|
|
|
|
const ThirdRoute = () => (
|
|
<View style={[styles.scene, {backgroundColor: '#efc44a'}]}/>
|
|
);
|
|
|
|
|
|
const FourthRoute = () => (
|
|
<View style={[styles.scene, {backgroundColor: '#49ef97'}]}/>
|
|
);
|
|
|
|
|
|
class Calendar extends React.Component {
|
|
|
|
state = {
|
|
index: 0,
|
|
routes: [
|
|
{key: 'first', weekDay: 'sex', day:12},
|
|
{key: 'second', weekDay: 'sab',day:13},
|
|
{key: 'third', weekDay: 'dom', day:14},
|
|
{key: 'fourth', weekDay: 'seg', day:15},
|
|
|
|
],
|
|
};
|
|
|
|
componentDidMount() {
|
|
|
|
this.props.getEvents(this.props.user);
|
|
console.log('didMount');
|
|
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={'#000000'} progress={item.Enrolled/item.MaxAttendees} unfilledColor={'white'} width={210}/>
|
|
<Text>{item.Enrolled} / {item.MaxAttendees}</Text>
|
|
</View>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
_update = () => {
|
|
this.setState({user: this.props.user});
|
|
console.log(this.props.events);
|
|
}
|
|
|
|
|
|
_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');
|
|
const soccerImgSource = require('../assets/img/soccer.png');
|
|
const dumbbellImgSource = require('../assets/img/dumbbell.png');
|
|
|
|
const ArcheryImage = (props) => <Image source={archeryImgSource} {...props} />;
|
|
const BadmintonImage = (props) => <Image source={badmintonImgSource} {...props} />;
|
|
const LunchImage = (props) => <Image source={lunchImgSource} {...props} />;
|
|
const SoccerImage = (props) => <Image source={soccerImgSource} {...props} />;
|
|
const DumbbellImage = (props) => <Image source={dumbbellImgSource} {...props} />;
|
|
const VectorIconImage = (props) => <Image source={vectorIconImgSource} {...props} />;
|
|
|
|
this.data = [
|
|
|
|
|
|
|
|
]
|
|
}
|
|
|
|
render() {
|
|
|
|
const FirstRoute = () => (
|
|
|
|
<ScrollView contentContainerStyle={styles.contentContainer}>
|
|
|
|
<Timeline
|
|
|
|
data={this.props.events}
|
|
|
|
timeContainerStyle={{ marginTop: 0}}
|
|
|
|
timeStyle={{
|
|
|
|
textAlign: 'center',
|
|
// backgroundColor: 'red',
|
|
|
|
height:100,
|
|
color:"#CC1A17",
|
|
padding: 5,
|
|
//marginTop:10,
|
|
// fontWeight:'bold',
|
|
fontSize:23,
|
|
|
|
//borderRadius: 13
|
|
}}
|
|
|
|
descriptionStyle={{color: 'red'}}
|
|
|
|
renderDetail={this.renderDetail}
|
|
|
|
lineColor='rgba(0,0,0,0)'
|
|
lineWidth={1}
|
|
separator={false}
|
|
flatListProps={{
|
|
style: {
|
|
|
|
margin: 15
|
|
}
|
|
|
|
|
|
}}
|
|
keyExtractor={(item, index) => index.toString()}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</ScrollView>
|
|
|
|
)
|
|
const SecondRoute = () => (
|
|
|
|
<ScrollView contentContainerStyle={styles.contentContainer}>
|
|
|
|
<Timeline
|
|
|
|
data={this.props.events}
|
|
|
|
timeContainerStyle={{ marginTop: 0}}
|
|
|
|
timeStyle={{
|
|
|
|
textAlign: 'center',
|
|
// backgroundColor: 'red',
|
|
|
|
height:100,
|
|
color:"#CC1A17",
|
|
padding: 5,
|
|
//marginTop:10,
|
|
// fontWeight:'bold',
|
|
fontSize:23,
|
|
|
|
//borderRadius: 13
|
|
}}
|
|
|
|
descriptionStyle={{color: 'red'}}
|
|
|
|
renderDetail={this.renderDetail}
|
|
|
|
lineColor='rgba(0,0,0,0)'
|
|
lineWidth={1}
|
|
separator={false}
|
|
flatListProps={{
|
|
style: {
|
|
|
|
margin: 15
|
|
}
|
|
|
|
|
|
}}
|
|
keyExtractor={(item, index) => index.toString()}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</ScrollView>
|
|
|
|
)
|
|
|
|
|
|
return (
|
|
<View style={{flex:1}}>
|
|
<View>
|
|
<Text style={{
|
|
backgroundColor:"#CC1A17",
|
|
color:'white',
|
|
fontWeight:'bold',
|
|
fontSize:15,
|
|
textAlign:'center',
|
|
|
|
}}>
|
|
WEB DEVELOPMENT
|
|
</Text>
|
|
</View>
|
|
<TabView
|
|
navigationState={this.state}
|
|
renderScene={SceneMap({
|
|
first: FirstRoute,
|
|
second: SecondRoute,
|
|
third: ThirdRoute,
|
|
fourth: FourthRoute
|
|
})}
|
|
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' }}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
tabBar: {
|
|
flexDirection: 'row',
|
|
paddingTop:0,
|
|
marginTop:0,
|
|
backgroundColor:'white',
|
|
borderWidth: 1,
|
|
borderRadius: 2,
|
|
borderColor: '#ddd',
|
|
borderBottomWidth: 0,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.8,
|
|
shadowRadius: 2,
|
|
elevation: 2,
|
|
|
|
|
|
},
|
|
tabItem: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
padding: 10,
|
|
},
|
|
details: {
|
|
backgroundColor: "#FFFFFF",
|
|
borderBottomRightRadius: 10,
|
|
borderBottomLeftRadius: 10,
|
|
padding: 10,
|
|
paddingTop:0
|
|
|
|
},
|
|
description: {
|
|
padding: 10,
|
|
paddingLeft:0,
|
|
paddingTop:0
|
|
|
|
},
|
|
title: {
|
|
color: '#212121',
|
|
fontWeight: 'bold',
|
|
fontSize: 15,
|
|
|
|
},
|
|
titleContainer:{
|
|
padding: 10
|
|
},
|
|
event: {
|
|
borderRadius: 5,
|
|
backgroundColor: "#FFFFFF",
|
|
marginLeft:-25,
|
|
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2,},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 1,
|
|
elevation: 2,
|
|
marginRight:2
|
|
|
|
|
|
},
|
|
scene: {
|
|
flex: 1,
|
|
},
|
|
contentContainer: {
|
|
//paddingVertical: 20,
|
|
backgroundColor:'#F2F2F2'
|
|
}
|
|
});
|
|
RkTheme.setType('RkCard', 'story', {
|
|
img: {
|
|
height: 100,
|
|
opacity: 0.7
|
|
},
|
|
header: {
|
|
alignSelf: 'center'
|
|
},
|
|
content: {
|
|
alignSelf: 'center'
|
|
}
|
|
});
|
|
|
|
|
|
function mapStateToProps(state, props) {
|
|
|
|
return {
|
|
|
|
token: state.apiReducer.token,
|
|
user: state.apiReducer.user,
|
|
logged: state.apiReducer.logged,
|
|
events: state.apiReducer.events
|
|
|
|
}
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch) {
|
|
|
|
return bindActionCreators(Actions, dispatch);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Calendar); |