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

calendar

This commit is contained in:
henrydays 2019-03-10 20:17:58 +00:00
parent 4d10f614ac
commit f2e613a081
4 changed files with 469 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,409 +1,415 @@
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 * as React from "react";
import {
RkButton, RkCard, RkText,
RkTheme
} from 'react-native-ui-kitten';
import Timeline from 'react-native-timeline-feed'
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 * as Progress from "react-native-progress";
import { connect } from "react-redux";
import {connect} from 'react-redux';
import { bindActionCreators } from "redux";
import {bindActionCreators} from 'redux';
import * as Actions from "../store/actions"; //Import your actionss
import * as Actions from '../store/actions'; //Import your actionss
const formatObj = obj => {
let a = {};
a.push({});
const formatObj = (obj) => {
let a = {};
a.push({})
return a
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},
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 }
],
CP: "SEM",
cpColor: "white",
careerPath: { name: "", color: "" }
};
],
CP:'SEM',
cpColor:'white',
careerPath:{name:'', color:''}
};
componentDidMount() {
this.props.getEvents(this.props.user);
componentDidMount() {
this.props.getSessions(this.props.userDetails.token);
}
this.props.getEvents(this.props.user);
_openDetails = () => {
console.log("los");
};
this.props.getSessions(this.props.userDetails.token)
}
_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>
);
})}
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>
);
};
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
}
}}
circleSize={0}
dotColor={'#CC1A17'}
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>
{ this.props.careerPath!=undefined &&
<Text style={{
backgroundColor:this.props.careerPath.color,
color:'white',
fontWeight:'bold',
fontSize:15,
textAlign:'center',
}}>{this.props.careerPath.name}
</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>
<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 })}
>
<Text style={{ color: "#7A7B7B" }}>
{route.weekDay}
</Text>
<Animated.Text
style={{
backgroundColor: bgcolor,
borderRadius: 0,
padding: 10,
marginTop: 5,
color: color,
fontSize: 15
}}
>
{route.day}
</Animated.Text>
</TouchableOpacity>
);
})}
</View>
);
};
constructor() {
super();
}
render() {
const ThirdRoute = () => (
<ScrollView contentContainerStyle={styles.contentContainer}>
{this.props.events != undefined && (
<Timeline
data={this.props.c}
timeContainerStyle={{ marginTop: 0 }}
timeStyle={{
textAlign: "center",
height: 100,
color: "#CC1A17",
padding: 5,
fontSize: 23
}}
descriptionStyle={{ color: "red" }}
renderDetail={this.renderDetail}
lineColor="rgba(0,0,0,0)"
lineWidth={1}
separator={false}
flatListProps={{
style: {
margin: 15
}
}}
circleSize={0}
dotColor={"#CC1A17"}
keyExtractor={(item, index) => index.toString()}
/>
)}
</ScrollView>
);
const FourthRoute = () => (
<ScrollView contentContainerStyle={styles.contentContainer}>
{this.props.events != undefined && (
<Timeline
data={this.props.d}
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
}
}}
circleSize={0}
dotColor={"#CC1A17"}
keyExtractor={(item, index) => index.toString()}
/>
)}
</ScrollView>
);
const FirstRoute = () => (
<ScrollView contentContainerStyle={styles.contentContainer}>
{this.props.events != undefined && (
<Timeline
data={this.props.a}
timeContainerStyle={{ marginTop: 0 }}
timeStyle={{
textAlign: "center",
height: 100,
color: "#CC1A17",
padding: 5,
fontSize: 23
}}
descriptionStyle={{ color: "red" }}
renderDetail={this.renderDetail}
lineColor="rgba(0,0,0,0)"
lineWidth={1}
separator={false}
flatListProps={{
style: {
margin: 15
}
}}
circleSize={0}
dotColor={"#CC1A17"}
keyExtractor={(item, index) => index.toString()}
/>
)}
</ScrollView>
);
const SecondRoute = () => (
<ScrollView contentContainerStyle={styles.contentContainer}>
{this.props.events != undefined && (
<Timeline
data={this.props.b}
timeContainerStyle={{ marginTop: 0 }}
timeStyle={{
textAlign: "center",
height: 100,
color: "#CC1A17",
padding: 5,
fontSize: 23
//borderRadius: 13
}}
descriptionStyle={{ color: "red" }}
renderDetail={this.renderDetail}
lineColor="rgba(0,0,0,0)"
lineWidth={1}
separator={false}
flatListProps={{
style: {
margin: 15
}
}}
circleSize={0}
dotColor={"#CC1A17"}
keyExtractor={(item, index) => index.toString()}
/>
)}
</ScrollView>
);
return (
<View style={{ flex: 1 }}>
<View>
{this.props.careerPath != undefined && (
<Text
style={{
backgroundColor: this.props.careerPath.color,
color: "white",
fontWeight: "bold",
fontSize: 15,
textAlign: "center",
padding:15
}}
>
{this.props.careerPath.name}
</Text>
)}
</View>
<TabView
navigationState={this.state}
renderScene={SceneMap({
first: FirstRoute,
second: SecondRoute,
third: ThirdRoute,
fourth: FourthRoute
})}
renderTabBar={this._renderTabBar}
useNativeDriver={false}
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,
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'
}
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'
}
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,
userDetails: state.apiReducer.userDetails,
sessions: state.apiReducer.sessions,
careerPath: state.apiReducer.careerPath
}
return {
token: state.apiReducer.token,
user: state.apiReducer.user,
logged: state.apiReducer.logged,
events: state.apiReducer.events,
userDetails: state.apiReducer.userDetails,
sessions: state.apiReducer.sessions,
careerPath: state.apiReducer.careerPath,
a: state.apiReducer.a,
b: state.apiReducer.b,
c: state.apiReducer.c,
d: state.apiReducer.d
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Actions, dispatch);
return bindActionCreators(Actions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Calendar);
export default connect(
mapStateToProps,
mapDispatchToProps
)(Calendar);

5
App/app/screens/choosePath.js
View File

@ -287,9 +287,8 @@ class choosePath extends React.Component {
</Picker>
</View>
<View style={{ width: SCREEN_WIDTH }}>
{ this.state.guest==0 && <View><Text>chosse one</Text><View>}
{!this.props.changingGuest && this.state.guest!=0 && (
{!this.props.changingGuest && (
<FlatList
data={this.props.Blocks}
renderItem={({ item, index }) => (

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

@ -424,9 +424,10 @@ export function getEvents(user) {
return dispatch => {
let events = [];
console.log("chegou aqui");
var i=0
for (let key in user.Sessions) {
events.push({
key:i++,
time: moment(user.Sessions[key].SessionStart).format("HH:mm"),
timeEnd: moment(user.Sessions[key].SessionEnd).format("HH:mm"),
//lineColor:'#009688',
@ -435,13 +436,87 @@ export function getEvents(user) {
description: user.Sessions[key].Description,
name: user.Sessions[key].Name,
Enrolled: user.Sessions[key].Enrolled,
MaxAttendees: user.Sessions[key].MaxAttendees
MaxAttendees: user.Sessions[key].MaxAttendees,
day: moment(user.Sessions[key].SessionStart).format("DD")
});
}
const result = flow(
groupBy("day")
)(events);
var cenas=[];
for (let key in result) {
cenas.push(result[key]);
console.log();
}
console.log(".--------")
console.log(cenas);
console.log(".--------")
var a=[], b=[],c=[],d=[]
for (let key in cenas[0]) {
a.push({
time:cenas[0][key].time ,
timeEnd: cenas[0][key].timeEnd,
imageUrl:cenas[0][key].imageUrl,
description: cenas[0][key].description,
name:cenas[0][key].name,
Enrolled: cenas[0][key].Enrolled,
MaxAttendees: cenas[0][key].MaxAttendees,
day: cenas[0][key].day
});
}
for (let key in cenas[1]) {
b.push({
time:cenas[1][key].time ,
timeEnd: cenas[1][key].timeEnd,
imageUrl:cenas[1][key].imageUrl,
description: cenas[1][key].description,
name:cenas[1][key].name,
Enrolled: cenas[1][key].Enrolled,
MaxAttendees: cenas[1][key].MaxAttendees,
day: cenas[1][key].day
});
}
for (let key in cenas[2]) {
c.push({
time:cenas[2][key].time ,
timeEnd: cenas[2][key].timeEnd,
imageUrl:cenas[2][key].imageUrl,
description: cenas[2][key].description,
name:cenas[2][key].name,
Enrolled: cenas[2][key].Enrolled,
MaxAttendees: cenas[2][key].MaxAttendees,
day: cenas[2][key].day
});
}
for (let key in cenas[3]) {
d.push({
time:cenas[3][key].time ,
timeEnd: cenas[3][key].timeEnd,
imageUrl:cenas[3][key].imageUrl,
description: cenas[3][key].description,
name:cenas[3][key].name,
Enrolled: cenas[3][key].Enrolled,
MaxAttendees: cenas[3][key].MaxAttendees,
day: cenas[3][key].day
});
}
dispatch({
type: GET_EVENTS,
events: events
events:a,
day1:a,
day2:b,
day3:c,
day4:d
});
};
}

6
App/app/store/reducers/api.js
View File

@ -40,6 +40,10 @@ let apiState = {
Blocks: {},
onHoldBlocks: true,
careerPath:{name:'Sem Career Path', color:'#eeeeee'},
a:{},
b:{},
c:{},
d:{}
};
@ -138,7 +142,7 @@ const apiReducer = (state = apiState, action) => {
return state;
case GET_EVENTS:
state = Object.assign({}, state, { events: action.events });
state = Object.assign({}, state, { events: action.events , a:action.day1, b:action.day2, c:action.day3, d:action.day4});
return state;