diff --git a/src/app/api/weather_forecast.js b/src/app/api/weather_forecast.js
new file mode 100644
index 0000000..a332448
--- /dev/null
+++ b/src/app/api/weather_forecast.js
@@ -0,0 +1,58 @@
+/*
+ * Weather index mapping:
+ * 0: Sol
+ * 1: Sol entre nuvens
+ * 2: Chuva
+ * 3: Chuva forte
+ * 4: Nuvens
+ * 5: Céu limpo
+ *
+ */
+
+function getWeatherForecast() {
+ return {
+ city: "São Jose dos Campos",
+ state: "SP",
+ today_forecast: {
+ date: "18 de Março",
+ morning_weather_index: 1,
+ evening_weather_index: 1,
+ night_weather_index: 4,
+ rain_probability: 10,
+ },
+ next_forecast: [
+ {
+ week_day: "Segunda",
+ date: "19/03",
+ weather_index: 0,
+ rain_fall_mm: 0,
+ },
+ {
+ week_day: "Terça",
+ date: "20/03",
+ weather_index: 2,
+ rain_fall_mm: 5,
+ },
+ {
+ week_day: "Quarta",
+ date: "21/03",
+ weather_index: 2,
+ rain_fall_mm: 5,
+ },
+ {
+ week_day: "Quinta",
+ date: "22/03",
+ weather_index: 2,
+ rain_fall_mm: 5,
+ },
+ {
+ week_day: "Sexta",
+ date: "23/03",
+ weather_index: 1,
+ rain_fall_mm: 0,
+ },
+ ],
+ };
+}
+
+export default getWeatherForecast;
diff --git a/src/app/config/dimensions.js b/src/app/config/dimensions.js
index 0a445d2..e086177 100644
--- a/src/app/config/dimensions.js
+++ b/src/app/config/dimensions.js
@@ -8,7 +8,7 @@ const dimensions = {
header: 26,
secondary: 18,
default: 16,
- tertiary: 12,
+ tertiary: 14,
},
spacing: {
diff --git a/src/app/screens/ForecastScreen.js b/src/app/screens/ForecastScreen.js
index 26c45ab..ceba187 100644
--- a/src/app/screens/ForecastScreen.js
+++ b/src/app/screens/ForecastScreen.js
@@ -1,8 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
import Screen from "../components/Screen";
import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native";
import { dimensions } from "../config/dimensions";
import colors from "../config/colors";
+import { EventLocationContext } from "../context/EventLocationContext";
+import getWeatherForecast from "../api/weather_forecast";
+import assets from "../config/assets";
function forecastDay(day, setDay) {
return (
@@ -36,21 +39,142 @@ function forecastDay(day, setDay) {
);
}
-function renderTodayForecast() {
- return dia;
+function weatherIndexToString(weather_index) {
+ return [
+ "Sol",
+ "Sol entre nuvens",
+ "Chuva",
+ "Chuva forte",
+ "Nuvens",
+ "Céu limpo",
+ ][weather_index];
}
-function renderWeekForecast() {
+function WeatherInput(weather_index, weather_title) {
+ const SvgImage = assets.weather_icons[weather_index];
+ return (
+
+
+ {weather_title}
+
+
+
+ {weatherIndexToString(weather_index)}
+
+
+ );
+}
+
+function renderTodayForecast(forecast) {
+ return (
+
+ {WeatherInput(forecast.today_forecast.morning_weather_index, "Manhã")}
+
+ Probabilidade de chuva {forecast.today_forecast.rain_probability}%
+
+
+ {WeatherInput(forecast.today_forecast.evening_weather_index, "Tarde")}
+ {WeatherInput(forecast.today_forecast.night_weather_index, "Noite")}
+
+
+ );
+}
+
+function renderWeekForecast(forecast) {
return semana;
}
-function ForecastScreen(props) {
+function currentLocationAndDate(forecast, day) {
+ return (
+
+
+ {forecast.city}, {forecast.state}
+
+
+
+ {day == 0 ? forecast.today_forecast.date : "Próximos dias"}
+
+
+ );
+}
+
+function renderScreen(forecast) {
const [day, setDay] = useState(0);
return (
-
+
{forecastDay(day, setDay)}
- {day == 0 ? renderTodayForecast() : renderWeekForecast()}
+ {currentLocationAndDate(forecast, day)}
+
+ {day == 0 ? renderTodayForecast(forecast) : renderWeekForecast(forecast)}
+
+ );
+}
+
+function renderErrorScreen() {
+ return (
+
+ Previsão do tempo não disponível no momento
+
+ );
+}
+
+function ForecastScreen(props) {
+ const forecast = getWeatherForecast();
+
+ return (
+
+ {forecast ? renderScreen(forecast) : renderErrorScreen()}
);
}
@@ -59,10 +183,14 @@ const styles = StyleSheet.create({
container: {
padding: dimensions.spacing.normal_padding,
},
-
+ centered: {
+ flexDirection: "column",
+ alignItems: "center",
+ },
forecastDays: {
flexDirection: "row",
justifyContent: "space-between",
+ alignContent: "center",
},
forecastDayBtn: {