From 385ad9bc67d4841ddf656a7c3dd2f193b29c1f18 Mon Sep 17 00:00:00 2001 From: alex Date: Thu, 26 Nov 2015 13:03:58 +0300 Subject: [PATCH] fix junior mistakes --- .../dashboard/widgets/weather/_weather.scss | 34 ++- .../dashboard/widgets/weather/weather.html | 73 ++--- .../dashboard/widgets/weather/weather.js | 256 +++++++++--------- 3 files changed, 189 insertions(+), 174 deletions(-) diff --git a/src/app/pages/dashboard/widgets/weather/_weather.scss b/src/app/pages/dashboard/widgets/weather/_weather.scss index 654fd66..cdb3eee 100644 --- a/src/app/pages/dashboard/widgets/weather/_weather.scss +++ b/src/app/pages/dashboard/widgets/weather/_weather.scss @@ -3,11 +3,22 @@ height: 100%; .weather-main-info { - height: 140px; + min-height: 140px; + + div i { + display: inline-block; + width: 48px; + text-align: center; + } + + .city-date { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } } .temp-by-time { - min-height: 120px; height: calc(100% - 210px); } @@ -16,14 +27,19 @@ table-layout: fixed; width: 100%; height: 70px; + .day { display: table-cell; - padding: 5px; line-height: 1; text-align: center; cursor: pointer; + i.weatherIcon { - transition: all 0.5s ease; + transition: color 0.5s ease; + } + + .select-day-info { + vertical-align: super; } } @@ -39,12 +55,9 @@ float: right; } - .center { - text-align: center; - } - .weather-info { - padding-left: 15px; + display: inline-block; + vertical-align: super; } .font-x1dot25 { @@ -63,9 +76,6 @@ font-size: 3em; } - .font-x4 { - font-size: 4em; - } } diff --git a/src/app/pages/dashboard/widgets/weather/weather.html b/src/app/pages/dashboard/widgets/weather/weather.html index bab36ee..ba78a4c 100644 --- a/src/app/pages/dashboard/widgets/weather/weather.html +++ b/src/app/pages/dashboard/widgets/weather/weather.html @@ -1,42 +1,45 @@
-
-
- {{geoData.geoplugin_city}} - {{geoData.geoplugin_countryName | uppercase}}{{ date | date : 'EEEE h:mm'}} -
- - - - - - - - - -
- {{weather.days[weather.current].main}} - {{weather.days[weather.current].description}} -
- +
+
+
+ {{geoData.geoplugin_city}} - {{geoData.geoplugin_countryName | uppercase}} +
+
+ {{ weather.days[weather.current].date | date : 'EEEE h:mm'}} +
+
+
+ + +
{{weather.days[weather.current].main}} - + {{weather.days[weather.current].description}} +
+
+
+ + +
{{weather.days[weather.current].temp}} °C | °F + ng-click="switchUnits('imperial')" href>°F {{weather.days[weather.current].temp}} °F | °C - -
+ ng-click="switchUnits('metric')" href>°C +
-
-
-
-
- {{day.temp}} -
-
- - {{day.main}} -
-
- {{day.date | date : 'EEE'}} -
-
+
+
+
+
+
+ {{day.temp}} +
+
+ + {{day.main}} +
+
+ {{day.date | date : 'EEE'}} +
+
diff --git a/src/app/pages/dashboard/widgets/weather/weather.js b/src/app/pages/dashboard/widgets/weather/weather.js index 7bde071..7ed73bc 100644 --- a/src/app/pages/dashboard/widgets/weather/weather.js +++ b/src/app/pages/dashboard/widgets/weather/weather.js @@ -1,139 +1,141 @@ 'use strict'; blurAdminApp.directive('blurWeather', function () { - return { - restrict: 'EA', - controller: ['$scope', '$http', '$timeout', '$element', function ($scope, $http, $timeout, $element) { - $scope.url = 'http://api.openweathermap.org/data/2.5/forecast'; - $scope.method = 'GET'; - $scope.key = '2de143494c0b295cca9337e1e96b00e0'; - $scope.units = 'metric'; - $scope.date = new Date(); - $scope.weatherIcons = { - '01d': 'ion-ios-sunny-outline', - '02d': 'ion-ios-partlysunny-outline', - '03d': 'ion-ios-cloud-outline', - '04d': 'ion-ios-cloud', - '09d': 'ion-ios-rainy', - '10d': 'ion-ios-rainy-outline', - '11d': 'ion-ios-thunderstorm-outline', - '13d': 'ion-ios-snowy', - '50d': 'ion-ios-cloudy-outline', - '01n': 'ion-ios-cloudy-night-outline', - '02n': 'ion-ios-cloudy-night', - '03n': 'ion-ios-cloud-outline', - '04n': 'ion-ios-cloud', - '09n': 'ion-ios-rainy', - '10n': 'ion-ios-rainy-outline', - '11n': 'ion-ios-thunderstorm', - '13n': 'ion-ios-snowy', - '50n': 'ion-ios-cloudy-outline' - }; - $scope.weather = {}; + return { + restrict: 'EA', + controller: ['$scope', '$http', '$timeout', '$element', function ($scope, $http, $timeout, $element) { + var url = 'http://api.openweathermap.org/data/2.5/forecast'; + var method = 'GET'; + var key = '2de143494c0b295cca9337e1e96b00e0'; + var middleOfTheDay = 15; + $scope.units = 'metric'; + $scope.weatherIcons = { + '01d': 'ion-ios-sunny-outline', + '02d': 'ion-ios-partlysunny-outline', + '03d': 'ion-ios-cloud-outline', + '04d': 'ion-ios-cloud', + '09d': 'ion-ios-rainy', + '10d': 'ion-ios-rainy-outline', + '11d': 'ion-ios-thunderstorm-outline', + '13d': 'ion-ios-snowy', + '50d': 'ion-ios-cloudy-outline', + '01n': 'ion-ios-cloudy-night-outline', + '02n': 'ion-ios-cloudy-night', + '03n': 'ion-ios-cloud-outline', + '04n': 'ion-ios-cloud', + '09n': 'ion-ios-rainy', + '10n': 'ion-ios-rainy-outline', + '11n': 'ion-ios-thunderstorm', + '13n': 'ion-ios-snowy', + '50n': 'ion-ios-cloudy-outline' + }; + $scope.weather = {}; - $scope.switchUnits = function (name) { - $scope.units = name; - $scope.updateWeather(); - }; + $scope.switchUnits = function (name) { + $scope.units = name; + $scope.updateWeather(); + }; - $scope.switchDay = function (day) { - $scope.weather.current = day; - makeChart($scope.weather.days[$scope.weather.current].timeTemp) - }; + $scope.switchDay = function (day) { + $scope.weather.current = day; + makeChart($scope.weather.days[$scope.weather.current].timeTemp) + }; - $scope.updateWeather = function () { - $http({ - method: $scope.method, url: $scope.url, params: { - appid: $scope.key, - lat: $scope.geoData.geoplugin_latitude, - lon: $scope.geoData.geoplugin_longitude, - units: $scope.units - } - }).then(function success(response) { - $scope.weatherData = response.data; - saveWeatherData(response.data); - makeChart($scope.weather.days[$scope.weather.current].timeTemp) - }, function error() { - console.log("WEATHER FAILED") - }); - }; + $scope.updateWeather = function () { + $http({ + method: method, url: url, params: { + appid: key, + lat: $scope.geoData.geoplugin_latitude, + lon: $scope.geoData.geoplugin_longitude, + units: $scope.units + } + }).then(function success(response) { + saveWeatherData(response.data); + makeChart($scope.weather.days[$scope.weather.current].timeTemp) + }, function error() { + console.log("WEATHER FAILED") + }); + }; - $scope.updateGeoData = function () { - $http.jsonp('http://www.geoplugin.net/json.gp?jsoncallback=JSON_CALLBACK').then(function success(response) { - $scope.geoData = response.data; - $scope.updateWeather(); - }, function error() { - console.log("GEO FAILED") - }); - }; + function updateGeoData() { + $http.jsonp('http://www.geoplugin.net/json.gp?jsoncallback=JSON_CALLBACK').then(function success(response) { + $scope.geoData = response.data; + $scope.updateWeather(); + }, function error() { + console.log("GEO FAILED") + }); + } - $timeout(function () { - $scope.updateGeoData(); - }, 100); - - function makeChart(data) { - AmCharts.makeChart('tempChart', { - type: 'serial', - theme: 'blur', - handDrawn: true, - categoryField: 'time', - dataProvider: data, - valueAxes: [ - { - axisAlpha: 0.3, - gridAlpha: 0 - } - ], - graphs: [ - { - bullet: 'square', - fillAlphas: 0.3, - fillColorsField: 'lineColor', - legendValueText: '[[value]]', - lineColorField: 'lineColor', - title: 'Temp', - valueField: 'temp' - } - ], - categoryAxis: { - gridAlpha: 0, - axisAlpha: 0.3 - } - }).write('tempChart'); + function makeChart(data) { + AmCharts.makeChart('tempChart', { + type: 'serial', + theme: 'blur', + handDrawn: true, + categoryField: 'time', + dataProvider: data, + valueAxes: [ + { + axisAlpha: 0.3, + gridAlpha: 0 } - - function saveWeatherData(data) { - var weather = { - days: [{ - date: new Date(data.list[0].dt_txt), - timeTemp: [], - main: data.list[0].weather[0].main, - description: data.list[0].weather[0].description, - icon: data.list[0].weather[0].icon, - temp: data.list[0].main.temp - }], current: 0 - }; - data.list.forEach(function (item, i) { - var itemDate = new Date(item.dt_txt); - if (itemDate.getDate() !== weather.days[weather.days.length - 1].date.getDate()) { - weather.days.push({date: itemDate, timeTemp: []}); - } - weather.days[weather.days.length - 1].timeTemp.push({ - time: itemDate.getHours(), - temp: item.main.temp - }); - if ((i && itemDate.getHours() == 15) || i == data.list.length - 1) { - weather.days[weather.days.length - 1].main = item.weather[0].main; - weather.days[weather.days.length - 1].description = item.weather[0].description; - weather.days[weather.days.length - 1].icon = item.weather[0].icon; - weather.days[weather.days.length - 1].temp = item.main.temp; - } - }); - weather.days = weather.days.slice(0, $element.attr('forecast') || 5); - $scope.weather = weather; + ], + graphs: [ + { + bullet: 'square', + fillAlphas: 0.3, + fillColorsField: 'lineColor', + legendValueText: '[[value]]', + lineColorField: 'lineColor', + title: 'Temp', + valueField: 'temp' } + ], + categoryAxis: { + gridAlpha: 0, + axisAlpha: 0.3 + } + }).write('tempChart'); + } + + function saveWeatherData(data) { + var firstItem = data.list[0]; + var weather = { + days: [{ + date: new Date(), + timeTemp: [], + main: firstItem.weather[0].main, + description: firstItem.weather[0].description, + icon: firstItem.weather[0].icon, + temp: firstItem.main.temp + }], current: 0 + }; + data.list.forEach(function (item, i) { + var itemDate = new Date(item.dt_txt); + if (itemDate.getDate() !== weather.days[weather.days.length - 1].date.getDate()) { + weather.days.push({date: itemDate, timeTemp: []}); + } + var lastItem = weather.days[weather.days.length - 1]; + lastItem.timeTemp.push({ + time: itemDate.getHours(), + temp: item.main.temp + }); + if ((weather.days.length > 1 && itemDate.getHours() == middleOfTheDay) || i == data.list.length - 1) { + lastItem.main = item.weather[0].main; + lastItem.description = item.weather[0].description; + lastItem.icon = item.weather[0].icon; + lastItem.temp = item.main.temp; + lastItem.date.setHours(i == data.list.length - 1 ? 0 : middleOfTheDay); + lastItem.date.setMinutes(0); + } + }); + console.log(weather.days[weather.current].date); + weather.days = weather.days.slice(0, $element.attr('forecast') || 5); + $scope.weather = weather; + } + + updateGeoData(); - }], - templateUrl: 'app/pages/dashboard/widgets/weather/weather.html' - }; + }], + templateUrl: 'app/pages/dashboard/widgets/weather/weather.html' + }; }); \ No newline at end of file