From f2e613a081cd24d4f0f4ccdfed826d91e5d9c930 Mon Sep 17 00:00:00 2001 From: henrydays Date: Sun, 10 Mar 2019 20:17:58 +0000 Subject: [PATCH] calendar --- App/app/screens/Calendar.js | 762 +++++++++++++++++----------------- App/app/screens/choosePath.js | 5 +- App/app/store/actions/api.js | 81 +++- App/app/store/reducers/api.js | 6 +- 4 files changed, 469 insertions(+), 385 deletions(-) diff --git a/App/app/screens/Calendar.js b/App/app/screens/Calendar.js index 47834c8a..b68a44a0 100644 --- a/App/app/screens/Calendar.js +++ b/App/app/screens/Calendar.js @@ -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 = () => ( - -); - - -const FourthRoute = () => ( - -); - - 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; - // - return ( - navigate('calendarDetail', { info: item })} > - - - - {item.name} - Local: 1 - - - - - - {item.description} - - - {item.Enrolled} / {item.MaxAttendees} - - - - - - - ); - } - - - - _update = () => { - this.setState({user: this.props.user}); - console.log(this.props.events); - } - - - _renderTabBar = props => { - const inputRange = props.navigationState.routes.map((x, i) => i); - - return ( - - {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 ( - this.setState({ index: i })}> - - {route.weekDay} - {route.day} - - - ); - })} + renderDetail = ({ item, index }) => { + const { navigate } = this.props.navigation; + // + return ( + navigate("calendarDetail", { info: item })} + > + + + {item.name} + Local: 1 - ); - }; - - - 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) => ; - const BadmintonImage = (props) => ; - const LunchImage = (props) => ; - const SoccerImage = (props) => ; - const DumbbellImage = (props) => ; - const VectorIconImage = (props) => ; - - this.data = [ - - - - ] - } - - render() { - - const FirstRoute = () => ( - - - - index.toString()} - - - /> - - - - - ) - const SecondRoute = () => ( - - - - index.toString()} - - - /> - - - - - ) - - - return ( - - - { this.props.careerPath!=undefined && - {this.props.careerPath.name} - - } - - this.setState({index})} - initialLayout={{width: Dimensions.get('window').width, height: Dimensions.get('window').height}} - style={{backgroundColor:"#F2F2F2"}} - indicatorStyle={{ backgroundColor: 'pink' }} - /> + + {item.description} + + + + {item.Enrolled} / {item.MaxAttendees} + - ); - } + + + + ); + }; + + _update = () => { + this.setState({ user: this.props.user }); + console.log(this.props.events); + }; + + _renderTabBar = props => { + const inputRange = props.navigationState.routes.map((x, i) => i); + + return ( + + {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 ( + this.setState({ index: i })} + > + + {route.weekDay} + + + {route.day} + + + ); + })} + + ); + }; + + constructor() { + super(); + } + + render() { + const ThirdRoute = () => ( + + {this.props.events != undefined && ( + index.toString()} + /> + )} + + ); + + const FourthRoute = () => ( + + {this.props.events != undefined && ( + index.toString()} + /> + )} + + ); + const FirstRoute = () => ( + + {this.props.events != undefined && ( + index.toString()} + /> + )} + + ); + const SecondRoute = () => ( + + {this.props.events != undefined && ( + index.toString()} + /> + )} + + ); + + return ( + + + {this.props.careerPath != undefined && ( + + {this.props.careerPath.name} + + )} + + 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, - 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); \ No newline at end of file +export default connect( + mapStateToProps, + mapDispatchToProps +)(Calendar); diff --git a/App/app/screens/choosePath.js b/App/app/screens/choosePath.js index 52abb7ba..ce320784 100644 --- a/App/app/screens/choosePath.js +++ b/App/app/screens/choosePath.js @@ -287,9 +287,8 @@ class choosePath extends React.Component { - { this.state.guest==0 && chosse one} - - {!this.props.changingGuest && this.state.guest!=0 && ( + + {!this.props.changingGuest && ( ( diff --git a/App/app/store/actions/api.js b/App/app/store/actions/api.js index 7be47230..6abd9bc1 100644 --- a/App/app/store/actions/api.js +++ b/App/app/store/actions/api.js @@ -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 + }); }; } diff --git a/App/app/store/reducers/api.js b/App/app/store/reducers/api.js index b1623278..855df7f1 100644 --- a/App/app/store/reducers/api.js +++ b/App/app/store/reducers/api.js @@ -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;