Add right template

appinfo/application.php

@@ -16,6 +16,7 @@ use \OCP\AppFramework\App;
 use \OCP\IContainer;
 
 use \OCA\Weather\Controller\CityController;
+use \OCA\Weather\Controller\WeatherController;
 
 use \OCA\Weather\Db\CityMapper;
 
@@ -51,5 +52,14 @@ class Application extends App {
 				$c->query('CityMapper')
 			);
 		});
+
+		$container->registerService('WeatherController', function(IContainer $c) {
+			return new WeatherController(
+				$c->query('AppName'),
+				$c->query('Request'),
+				$c->query('UserId'),
+				$c->query('CityMapper')
+			);
+		});
 	}
 }

css/style.css

@@ -59,7 +59,7 @@
 }
 
 #city-right {
-	padding: 15px;
+	padding: 45px;
 	height: 100%;
 	overflow-y: hidden;
 	overflow-x: auto;
@@ -67,10 +67,39 @@
 	bottom: 0;
 	right: 0;
 	left: 250px;
-	display: flex;
+	background: black;
-	flex-direction: row;
+	color: #EEE;
-	position: absolute;
+}
-	align-items: flex-start;
+
+#city-right .city-name {
+	font-size: 6em;
+	line-height: 1em;
+}
+
+
+#city-right .city-current-temp {
+	font-size: 4em;
+	line-height: 1em;
+}
+
+#city-right .city-current-pressure, #city-right .city-current-wind {
+	font-size: 3em;
+	line-height: 1em;
+}
+
+#city-right .city-current-humidity {
+	font-size: 3em;
+	line-height: 1em;
+}
+
+#city-right .city-current-weather {
+	font-size: 3em;
+	line-height: 1em;
+}
+
+#city-right .city-current-sunrise {
+	font-size: 3em;
+	line-height: 1em;
 }
 
 .city-list hr {

js/public/app.js

@@ -25,11 +25,11 @@ app.controller('WeatherController', ['$scope', '$interval', '$timeout', '$compil
 	function ($scope, $interval, $timeout, $compile, $http) {
 		$scope.userId = '';
 		$scope.cities = [];
-		$scope.selectedCityId = 0;
 		$scope.showAddCity = false;
 		$scope.addCityError = '';
 
 		$scope.cityLoadError = '';
+		$scope.currentCity = null;
 
 		$timeout(function () {
 			$scope.loadCities();
@@ -57,9 +57,10 @@ app.controller('WeatherController', ['$scope', '$interval', '$timeout', '$compil
 				return;
 			}
 
-			$http.get(OC.generateUrl('/apps/weather/weather/get'), {'name': city.name}).
+			$http.get(OC.generateUrl('/apps/weather/weather/get?name=' + city.name)).
 			success(function (data, status, headers, config) {
-				if (data != null && !undef(data['id'])) {
+				if (data != null) {
+					$scope.currentCity = data;
 				}
 				else {
 					$scope.cityLoadError = 'Failed to get city weather informations. Please contact your administrator';

templates/main.php

@@ -30,6 +30,13 @@
 	<div id="city-right" ng-show="cityLoadError != ''">
 		<span class="city-load-error">{{ cityLoadError }}</span>
 	</div>
-	<div id="city-right" ng-show="selectedCityId != 0">
+	<div id="city-right" ng-show="currentCity != null" style="background-image: url('/apps/weather/images/{{ currentCity.image }}');">
+		<div class="city-name">{{ currentCity.name }}, {{ currentCity.sys.country }}</div>
+		<div class="city-current-temp">{{ currentCity.main.temp }}°C</div>
+		<div class="city-current-pressure">Pressure: {{ currentCity.main.pressure }} hpa</div>
+		<div class="city-current-humidity">Humidity: {{ currentCity.main.humidity}}%</div>
+		<div class="city-current-weather">Cloudiness: {{ currentCity.weather[0].description }}</div>
+		<div class="city-current-wind">Wind: {{ currentCity.wind.speed }} {{ currentCity.wind.deg }}</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>