Add forecast details

appinfo/info.xml

@@ -5,7 +5,7 @@
     <description>Watch the weather directly on your ownCloud</description>
     <licence>AGPL</licence>
     <author>Loic Blot</author>
-    <version>1.0.2</version>
+    <version>1.1.0</version>
     <requiremin>7</requiremin>
 
     <ocsid>170605</ocsid>

controller/weathercontroller.php

@@ -49,7 +49,56 @@ class WeatherController extends Controller {
 			return null;
 		}
 
+		$cityDatas["forecast"] = array(); 
+		$forecast = json_decode(file_get_contents("http://api.openweathermap.org/data/2.5/forecast?q=$name&mode=json&units=metric"), true);
+		if ($forecast['cod'] == '200' && isset($forecast['cnt']) && is_numeric($forecast['cnt'])) {
+			// Show only 8 values max
+			// @TODO: setting ?
+			$maxFC = $forecast['cnt'] > 8 ? 8 : $forecast['cnt'];
+			for ($i = 0; $i < $maxFC; $i++) {
+				$cityDatas['forecast'][] = array(
+					'hour' => $forecast['list'][$i]['dt'],
+					'weather' => $forecast['list'][$i]['weather'][0]['description'],
+					'temperature' => $forecast['list'][$i]['main']['temp'],
+					'pressure' => $forecast['list'][$i]['main']['pressure'],
+					'wind' => array(
+						'speed' => $forecast['list'][$i]['wind']['speed'],
+						'desc' => $this->windDegToString($forecast['list'][$i]['wind']['deg'])
+					)
+				);
+			}
+		}
+
+
 		return $cityDatas;
 	}
+
+	private function windDegToString($deg) {
+		if ($deg > 0 && $deg < 23 ||
+			$deg > 333) {
+			return "North";
+		}
+		else if ($deg > 22 && $deg < 67) {
+			return "North-East";
+		}
+		else if ($deg > 66 && $deg < 113) {
+			return "East";
+		}
+		else if ($deg > 112 && $deg < 157) {
+			return "South-East";
+		}
+		else if ($deg > 156 && $deg < 201) {
+			return "South";
+		}
+		else if ($deg > 200 && $deg < 245) {
+			return "South-West";
+		}
+		else if ($deg > 244 && $deg < 289) {
+			return "West";
+		}
+		else if ($deg > 288 && $deg < 334) {
+			return "North-West";
+		}
+	}
 };
 ?>

css/style.css

@@ -124,7 +124,7 @@
         font-weight: bold;
 }
 
-#create-city h2 {
+#create-city h2, #city-forecast-panel th {
         font-weight: bold;
 }
 
@@ -142,10 +142,19 @@
 	font-size: 1.5em;
 }
 
-#city-weather-panel {
+#city-weather-panel, #city-forecast-panel {
 	border-radius: 3px;
 	padding: 30px;
 	padding-top: 20px;
 	background-color: rgba(50, 50, 50, 0.5);
 	display: inline-block;
 }
+
+#city-forecast-panel {
+	float: right;
+	font-size: 1.3em;
+}
+
+#city-forecast-panel td, #city-forecast-panel th {
+	padding: 10px;
+}

templates/main.php

@@ -40,5 +40,17 @@
 			<div class="city-current-wind">Wind: {{ currentCity.wind.speed }} m/s - {{ currentCity.wind.desc }}</div>
 			<div class="city-current-sunrise">Sunrise: {{ currentCity.sys.sunrise * 1000 | date:'HH:mm' }} Sunset: {{ currentCity.sys.sunset * 1000 | date:'HH:mm' }}</div>
 		</div>
+		<div id="city-forecast-panel">
+			<table>
+				<tr><th>Hour</th><th>Temperature</th><th>Weather</th><th>Pressure</th><th>Wind</th></tr>
+				<tr ng-repeat="forecast in currentCity.forecast">
+					<td>{{ forecast.hour * 1000 | date:'HH:mm'}}</td>
+					<td>{{ forecast.temperature }}°C</td>
+					<td>{{ forecast.weather }}</td>
+					<td>{{ forecast.pressure }}</td>
+					<td>{{ forecast.wind.speed }} m/s - {{ forecast.wind.desc }}</td>
+				</tr>
+			</table>
+		</div>
 	</div>
 </div>