diff --git a/app/containers/CalendarModal.js b/app/containers/CalendarModal.js new file mode 100644 index 00000000..cdd90615 --- /dev/null +++ b/app/containers/CalendarModal.js @@ -0,0 +1,171 @@ +import React, {Component} from 'react'; +import { + Modal, + DatePickerIOS, + TouchableHighlight, + TouchableOpacity, + View, + StyleSheet, +} from 'react-native'; +import { + Toast, + Button, + Icon, + Body, + Left, + Right, + Title, + Container, + Header, + Content, + Form, + Item, + Input, + Label, + Text, +} from 'native-base'; + +class CalendarModal extends Component { + constructor(props) { + super(props); + this.state = { + modalVisible: false, + startVisible: false, + StartDate: new Date(), + EndDate: new Date(), + }; + this.setStartDate = this.setStartDate.bind(this); + this.setEndDate = this.setEndDate.bind(this); + } + setStartDate(newDate) { + this.setState({StartDate: newDate}); + } + setEndDate(newDate) { + this.setState({EndDate: newDate}); + } + toggleModal(visible) { + this.setState({modalVisible: visible}); + } + toggleStart(visible) { + this.setState({startVisible: visible}); + } + render() { + return ( + + { + console.log('Modal has been closed.'); + }}> + + +
+ + Edit Shift + + +
+ +
+ + Start + + + {!this.state.startVisible && ( + + )} + {this.state.startVisible && ( + + )} + {this.state.startVisible && ( + + )} + End + + + + + + + + + + + + + +
+ + {/* { + this.toggleModal(!this.state.modalVisible)}}> + + Close Modal + */} + + + + + + ); + } +} +export default CalendarModal; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + modal: { + justifyContent: 'center', + flex: 1, + alignItems: 'center', + width: '85%', + borderRadius: 10, + borderWidth: 1, + borderColor: '#fff', + marginTop: 70, + marginLeft: 40, + }, + text: { + color: '#3f2949', + marginTop: 10, + }, +}); + +export {CalendarModal}; diff --git a/app/containers/Dashboard.js b/app/containers/Dashboard.js index c9b9f303..48c7f312 100644 --- a/app/containers/Dashboard.js +++ b/app/containers/Dashboard.js @@ -1,10 +1,77 @@ // @flow import React, {Component} from 'react'; -import {View} from 'react-native'; +import {StyleSheet, View, Image, Text} from 'react-native'; +import {Card, Divider} from 'react-native-elements'; +import {CalendarModal} from './CalendarModal'; +import { WeatherWidget } from 'react-native-weather'; export default class Dashboard extends Component { + constructor(props) { + super(props); + + this.state = { + latitude: 0, + longitude: 0, + forecast: [], + error: '', + }; + } + getLocation() { + // Get the current position of the user + navigator.geolocation.getCurrentPosition( + position => { + this.setState( + prevState => ({ + latitude: position.coords.latitude, + longitude: position.coords.longitude, + }), + () => { + this.getWeather(); + }, + ); + }, + error => this.setState({forecast: error.message}), + {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}, + ); + } + + getWeather() { + // Construct the API url to call + let url = + 'https://api.openweathermap.org/data/2.5/forecast?lat=' + + this.state.latitude + + '&lon=' + + this.state.longitude + + '&units=metric&appid=734bff6c94faf86e71390520d5252983'; + + // Call the API, and set the state of the weather forecast + fetch(url) + .then(response => response.json()) + .then(data => { + this.setState((prevState, props) => ({ + forecast: data, + })); + }); + } + render() { - return ; + return ; } } + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + }, + modal: { + alignItems: 'center', + }, + text: { + color: '#3f2949', + }, +}); diff --git a/app/navigation/AppNavigator.js b/app/navigation/AppNavigator.js index 85fb985f..1221ba51 100644 --- a/app/navigation/AppNavigator.js +++ b/app/navigation/AppNavigator.js @@ -15,7 +15,7 @@ function AppNavigator() { ({ + options={({navigation}) => ({ title: 'GTHC', headerRight: () => ( navigation.navigate('Settings')} /> ), ...mainHeader, diff --git a/app/settings/TeamSettingsModal.js b/app/settings/TeamSettingsModal.js index d50c8084..f8d1a3c8 100644 --- a/app/settings/TeamSettingsModal.js +++ b/app/settings/TeamSettingsModal.js @@ -30,7 +30,7 @@ class TeamSettingsModal extends Component { return ( { diff --git a/app/settings/UserSettingsModal.js b/app/settings/UserSettingsModal.js index 58b3c171..5d3c0688 100644 --- a/app/settings/UserSettingsModal.js +++ b/app/settings/UserSettingsModal.js @@ -30,7 +30,7 @@ class UserSettingsModal extends Component { return ( { diff --git a/package-lock.json b/package-lock.json index def5052e..76c57cdc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1275,6 +1275,38 @@ "integrity": "sha512-u/SJDyXwuihpwjXy7hOOghagLEV1KdAST6syfnOk6QZAMzZuWZqXy5aYYZbh8Jdpd4escVFP0MvftHNDb9pruA==", "dev": true }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" + }, + "@types/react": { + "version": "16.9.17", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.17.tgz", + "integrity": "sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==", + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + }, + "@types/react-native": { + "version": "0.60.25", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.60.25.tgz", + "integrity": "sha512-827dIVvSTxSH5uTpsJJH7O4wpRuw0rm3yIzRL3a2yKawA0nyhgC1GPKTXHFIn2GfSdXn1Gty2dJ+k6uDZF3MWQ==", + "requires": { + "@types/prop-types": "*", + "@types/react": "*" + } + }, + "@types/react-native-vector-icons": { + "version": "6.4.5", + "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.5.tgz", + "integrity": "sha512-JBpcjWQE4n0GlE0p6HpDDclT+uXpFC453T5k4h+B38q0utlGJhvgNr8899BoJGc1xOktA2cgqFKmFMJd0h7YaA==", + "requires": { + "@types/react": "*", + "@types/react-native": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -2585,6 +2617,11 @@ "cssom": "0.3.x" } }, + "csstype": { + "version": "2.6.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.8.tgz", + "integrity": "sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==" + }, "damerau-levenshtein": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz", @@ -8389,6 +8426,14 @@ } } }, + "react-native-animatable": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz", + "integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-native-app-auth": { "version": "5.0.0-rc3", "resolved": "https://registry.npmjs.org/react-native-app-auth/-/react-native-app-auth-5.0.0-rc3.tgz", @@ -8426,6 +8471,31 @@ "lodash": "^4.17.15" } }, + "react-native-elements": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-1.2.7.tgz", + "integrity": "sha512-0S+0R1cbItl15i64qrkWnyMztwpw60d0SUsZGVDKRAMf0Jvq9Clgyh/MzxJx2sr42mbedQP1sg5Et4fZM7Fp1w==", + "requires": { + "@types/react-native-vector-icons": "^6.4.4", + "color": "^3.1.0", + "deepmerge": "^3.1.0", + "hoist-non-react-statics": "^3.1.0", + "opencollective-postinstall": "^2.0.0", + "prop-types": "^15.7.2", + "react-native-ratings": "^6.3.0", + "react-native-status-bar-height": "^2.2.0" + }, + "dependencies": { + "hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==", + "requires": { + "react-is": "^16.7.0" + } + } + } + }, "react-native-gesture-handler": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.5.2.tgz", @@ -8458,6 +8528,33 @@ "react-native-iphone-x-helper": "^1.0.3" } }, + "react-native-modal": { + "version": "11.5.3", + "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-11.5.3.tgz", + "integrity": "sha512-U6RghSkZUZ6c0LHMbwAnVscEwGoI58eXfBstVs18t50miV0GmLcJhIOu5OND+SDGVkBQFiGFRu/pTUJaA7wfGw==", + "requires": { + "prop-types": "^15.6.2", + "react-native-animatable": "1.3.3" + } + }, + "react-native-modal-datetime-picker": { + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-7.6.1.tgz", + "integrity": "sha512-Ovq0p20Tbw6uWGV0VIDcCQ5qTaHxC9gEcYmB2a4fD1ksCSwCil9RJBEhC7VirvplvAGCKOKs3bblaKFmhiOBkg==", + "requires": { + "prop-types": "^15.7.2", + "react-native-modal": "^11.0.2" + } + }, + "react-native-ratings": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-6.5.0.tgz", + "integrity": "sha512-YMcfQ7UQCmXGEc/WPlukHSHs5yvckTwjq5fTRk1FG8gaO7fZCNygEUGPuw4Dbvvp3IlsCUn0bOQd63RYsb7NDQ==", + "requires": { + "lodash": "^4.17.4", + "prop-types": "^15.5.10" + } + }, "react-native-reanimated": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.4.0.tgz", @@ -8476,6 +8573,11 @@ "debounce": "^1.2.0" } }, + "react-native-status-bar-height": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.4.0.tgz", + "integrity": "sha512-pWvZFlyIHiuxLugLioq97vXiaGSovFXEyxt76wQtbq0gxv4dGXMPqYow46UmpwOgeJpBhqL1E0EKxnfJRrFz5w==" + }, "react-native-vector-icons": { "version": "6.6.0", "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-6.6.0.tgz", @@ -8594,6 +8696,11 @@ } } }, + "react-native-weather": { + "version": "0.2.11", + "resolved": "https://registry.npmjs.org/react-native-weather/-/react-native-weather-0.2.11.tgz", + "integrity": "sha512-YWkCQVx8M1fW2pBPh/RtNAdBCGkdtL2+uDKnjJvmBCxvjhQl9F7zkQkzxbGUFe6R+rI6bqn4vQir4D+q74rDqQ==" + }, "react-redux": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.1.tgz", diff --git a/package.json b/package.json index 502d94b0..d09b6cfd 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,14 @@ "react-native-app-auth": "^5.0.0-rc3", "react-native-calendars": "^1.20.0", "react-native-config": "^0.12.0", + "react-native-elements": "^1.2.7", "react-native-gesture-handler": "^1.5.2", + "react-native-modal-datetime-picker": "^7.6.1", "react-native-reanimated": "^1.4.0", "react-native-safe-area-context": "^0.6.1", "react-native-screens": "^1.0.0-alpha.23", "react-native-vector-icons": "^6.6.0", + "react-native-weather": "^0.2.11", "react-redux": "^6.0.1", "react-router-redux": "^4.0.8", "redux": "^4.0.4",