5 Day weather forecast

skiser · Nov 13, 2019 · d5c331f · d5c331f
1 parent 7e0aefa
commit d5c331f
Show file tree

Hide file tree

Showing 4 changed files with 254 additions and 7 deletions.
diff --git a/Routinely/app/navigation.js b/Routinely/app/navigation.js
@@ -11,6 +11,7 @@ import MenuScreen from './screens/menu';
 import EditEventScreen from './screens/editEvent';
 import EditTaskScreen from './screens/editTask';
 import NotesScreen from './screens/notes';
+import WeatherScreen from './screens/weather';
 
 const AuthStack = createStackNavigator(
   {
@@ -34,6 +35,7 @@ const AppStack = createStackNavigator(
     EditEvent: EditEventScreen,
     EditTask: EditTaskScreen,
     Notes: NotesScreen,
+    Weather: WeatherScreen,
   },
   {
     initialRouteName: 'Calendar',

diff --git a/Routinely/app/screens/alarmRinging.js b/Routinely/app/screens/alarmRinging.js
@@ -118,14 +118,14 @@ class AlarmRingingScreen extends Component {
           </View>
         </View>
         <AwesomeButtonRick
-          width={200}
+          width={250}
           title="DisableAlarm"
           style={styles.TurnOff}
           onPress={() => this.props.navigation.navigate('Calendar')}>
           Turn Off
         </AwesomeButtonRick>
         <AwesomeButtonBlue
-          width={200}
+          width={250}
           title="DisableAlarm"
           style={styles.TurnOff}
           onPress={() => this.props.navigation.navigate('Alarm')}>
@@ -143,30 +143,34 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     textAlign: 'center',
+    marginLeft: 30,
+    marginRight: 30,
   },
   forecast: {
     textAlign: 'center',
     flexDirection: 'column',
     padding: 5,
-    margin: 10,
+    marginLeft: 15,
+    marginRight: 15,
+    marginTop: 10,
     borderWidth: 1,
     borderRadius: 15,
   },
   time: {
     textAlign: 'center',
-    fontSize: 12,
+    fontSize: 14,
   },
   temp: {
     textAlign: 'center',
-    fontSize: 14,
+    fontSize: 16,
   },
   rain: {
     textAlign: 'center',
-    fontSize: 14,
+    fontSize: 16,
   },
   conditions: {
     textAlign: 'center',
-    fontSize: 12,
+    fontSize: 14,
     paddingBottom: 3,
   },
   img: {

diff --git a/Routinely/app/screens/menu.js b/Routinely/app/screens/menu.js
@@ -52,6 +52,17 @@ class MenuScreen extends Component {
             </TouchableHighlight>
           </View>
         </View>
+        <View style={styles.row}>
+          <View>
+            <TouchableHighlight
+              onPress={() => this.props.navigation.navigate('Weather')}>
+              <Image
+                style={styles.icon}
+                source={require('../components/img/DailyToDoButton.png')}
+              />
+            </TouchableHighlight>
+          </View>
+        </View>
       </View>
     );
   }

diff --git a/Routinely/app/screens/weather.js b/Routinely/app/screens/weather.js
@@ -0,0 +1,230 @@
+import React, {Component} from 'react';
+import {View, StyleSheet, Button, Text, Image} from 'react-native';
+import DisplayTime from '../components/alarmRinging_components/DisplayTime';
+import AwesomeButtonBlue from 'react-native-really-awesome-button/src/themes/c137';
+import AwesomeButtonRick from 'react-native-really-awesome-button/src/themes/rick';
+
+class WeatherScreen extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: [],
+      loading: true,
+      relativePath: 'https://www.weatherbit.io/static/img/icons/',
+      png: '.png',
+    };
+  }
+
+  componentDidMount(): void {
+    fetch(
+      'https://weatherbit-v1-mashape.p.rapidapi.com/forecast/3hourly?units=I&lang=en&lat=39.9625984&lon=-76.727745',
+      {
+        method: 'GET',
+        headers: {
+          'x-rapidapi-host': 'weatherbit-v1-mashape.p.rapidapi.com',
+          'x-rapidapi-key':
+            '9f78f19a5fmshb5fb8f8cf101477p17766bjsne3fe3b3d556f',
+        },
+      },
+    )
+      .then(response => response.json())
+      .then(responseJson => {
+        console.log(responseJson.city_name);
+        this.setState({
+          loading: false,
+          dataSource: responseJson,
+          city: responseJson.city_name,
+          state: responseJson.state_code,
+          temperature1Day: responseJson.data[0].temp,
+          temperature1Night: responseJson.data[3].temp,
+          precipitation1: responseJson.data[0].precip,
+          weatherConditions1: responseJson.data[0].weather.description,
+          weatherConditions1Code: responseJson.data[0].weather.icon,
+          weather1IconLink:
+            this.state.relativePath +
+            responseJson.data[0].weather.icon +
+            this.state.png,
+          temperature2Day: responseJson.data[8].temp,
+          temperature2Night: responseJson.data[11].temp,
+          precipitation2: responseJson.data[8].precip,
+          weatherConditions2: responseJson.data[8].weather.description,
+          weatherConditions2Code: responseJson.data[8].weather.icon,
+          weather2IconLink:
+            this.state.relativePath +
+            responseJson.data[8].weather.icon +
+            this.state.png,
+          temperature3Day: responseJson.data[16].temp,
+          temperature3Night: responseJson.data[19].temp,
+          precipitation3: responseJson.data[16].precip,
+          weatherConditions3: responseJson.data[16].weather.description,
+          weatherConditions3Code: responseJson.data[16].weather.icon,
+          weather3IconLink:
+            this.state.relativePath +
+            responseJson.data[16].weather.icon +
+            this.state.png,
+          temperature4Day: responseJson.data[24].temp,
+          temperature4Night: responseJson.data[27].temp,
+          precipitation4: responseJson.data[24].precip,
+          weatherConditions4: responseJson.data[24].weather.description,
+          weatherConditions4Code: responseJson.data[24].weather.icon,
+          weather4IconLink:
+            this.state.relativePath +
+            responseJson.data[24].weather.icon +
+            this.state.png,
+          temperature5Day: responseJson.data[32].temp,
+          temperature5Night: responseJson.data[35].temp,
+          precipitation5: responseJson.data[32].precip,
+          weatherConditions5: responseJson.data[32].weather.description,
+          weatherConditions5Code: responseJson.data[32].weather.icon,
+          weather5IconLink:
+            this.state.relativePath +
+            responseJson.data[32].weather.icon +
+            this.state.png,
+        });
+      })
+      .catch(error => console.log(error)); //to catch the errors if any
+  }
+  render() {
+    return (
+      <View>
+        <View style={styles.row}>
+          <Image
+            style={styles.img}
+            source={{uri: this.state.weather1IconLink}}
+          />
+          <View>
+            <Text style={styles.conditions}>
+              {this.state.weatherConditions1}
+            </Text>
+            <View style={{flexDirection: 'row', marginTop: 10}}>
+              <Text style={styles.temp}>Day: {this.state.temperature1Day}</Text>
+              <Text style={styles.temp}>
+                Night: {this.state.temperature1Night}
+              </Text>
+              <Text style={styles.rain}>
+                Rain: {this.state.precipitation1}%
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View style={styles.row}>
+          <Image
+            style={styles.img}
+            source={{uri: this.state.weather2IconLink}}
+          />
+          <View>
+            <Text style={styles.conditions}>
+              {this.state.weatherConditions2}
+            </Text>
+            <View style={{flexDirection: 'row', marginTop: 10}}>
+              <Text style={styles.temp}>Day: {this.state.temperature2Day}</Text>
+              <Text style={styles.temp}>
+                Night: {this.state.temperature2Night}
+              </Text>
+              <Text style={styles.rain}>
+                Rain: {this.state.precipitation2}%
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View style={styles.row}>
+          <Image
+            style={styles.img}
+            source={{uri: this.state.weather3IconLink}}
+          />
+          <View>
+            <Text style={styles.conditions}>
+              {this.state.weatherConditions3}
+            </Text>
+            <View style={{flexDirection: 'row', marginTop: 10}}>
+              <Text style={styles.temp}>Day: {this.state.temperature3Day}</Text>
+              <Text style={styles.temp}>
+                Night: {this.state.temperature3Night}
+              </Text>
+              <Text style={styles.rain}>
+                Rain: {this.state.precipitation3}%
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View style={styles.row}>
+          <Image
+            style={styles.img}
+            source={{uri: this.state.weather4IconLink}}
+          />
+          <View>
+            <Text style={styles.conditions}>
+              {this.state.weatherConditions4}
+            </Text>
+            <View style={{flexDirection: 'row', marginTop: 10}}>
+              <Text style={styles.temp}>Day: {this.state.temperature4Day}</Text>
+              <Text style={styles.temp}>
+                Night: {this.state.temperature4Night}
+              </Text>
+              <Text style={styles.rain}>
+                Rain: {this.state.precipitation4}%
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View style={styles.row}>
+          <Image
+            style={styles.img}
+            source={{uri: this.state.weather5IconLink}}
+          />
+          <View>
+            <Text style={styles.conditions}>
+              {this.state.weatherConditions5}
+            </Text>
+            <View style={{flexDirection: 'row', marginTop: 10}}>
+              <Text style={styles.temp}>Day: {this.state.temperature5Day}</Text>
+              <Text style={styles.temp}>
+                Night: {this.state.temperature5Night}
+              </Text>
+              <Text style={styles.rain}>
+                Rain: {this.state.precipitation5}%
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  location: {
+    textAlign: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    textAlign: 'center',
+    marginRight: 15,
+    marginLeft: 15,
+    marginTop: 10,
+    borderWidth: 1,
+    borderRadius: 15,
+  },
+  forecast: {},
+  temp: {
+    fontSize: 16,
+    paddingLeft: 20,
+  },
+  rain: {
+    fontSize: 16,
+    paddingLeft: 20,
+  },
+  conditions: {
+    fontSize: 16,
+    fontStyle: 'italic',
+    marginTop: 5,
+    paddingLeft: 20,
+  },
+  img: {
+    marginTop: 5,
+    width: 50,
+    height: 50,
+  },
+});
+
+export default WeatherScreen;