jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

fix junior mistakes

pull/3/head
alex 2015-11-26 13:03:58 +03:00
parent 0b6f4d4033
commit 385ad9bc67
3 changed files with 189 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/pages/dashboard/widgets/weather/_weather.scss
View File

@ -3,11 +3,22 @@
height: 100%; height: 100%;
.weather-main-info { .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 { .temp-by-time {
min-height: 120px;
height: calc(100% - 210px); height: calc(100% - 210px);
} }
@ -16,14 +27,19 @@
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
height: 70px; height: 70px;
.day { .day {
display: table-cell; display: table-cell;
padding: 5px;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
i.weatherIcon { i.weatherIcon {
transition: all 0.5s ease; transition: color 0.5s ease;
}
.select-day-info {
vertical-align: super;
} }
} }
@ -39,12 +55,9 @@
float: right; float: right;
} }
.center {
text-align: center;
}
.weather-info { .weather-info {
padding-left: 15px; display: inline-block;
vertical-align: super;
} }
.font-x1dot25 { .font-x1dot25 {
@ -63,9 +76,6 @@
font-size: 3em; font-size: 3em;
} }
.font-x4 {
font-size: 4em;
}
} }

39
src/app/pages/dashboard/widgets/weather/weather.html
View File

@ -1,27 +1,30 @@
<div class="weather-wrapper"> <div class="weather-wrapper">
<div class="weather-main-info"> <div class="weather-main-info">
<h5 class="font-x1dot5"> <h5 class="city-date font-x1dot5">
{{geoData.geoplugin_city}} - {{geoData.geoplugin_countryName | uppercase}}<span class="rightHeading">{{ date | date : 'EEEE h:mm'}}</span> <div>
{{geoData.geoplugin_city}} - {{geoData.geoplugin_countryName | uppercase}}
</div>
<div>
{{ weather.days[weather.current].date | date : 'EEEE h:mm'}}
</div>
</h5> </h5>
<table class="font-x1dot5"> <div class="weather-description font-x1dot5">
<tr> <i class="font-x3 {{weatherIcons[weather.days[weather.current].icon]}}"></i>
<td><i class="font-x3 {{weatherIcons[weather.days[weather.current].icon]}}"></i></td>
<td> <div class="weather-info">{{weather.days[weather.current].main}} -
<span class="weather-info">{{weather.days[weather.current].main}} - {{weather.days[weather.current].description}}</span> {{weather.days[weather.current].description}}
</td> </div>
</tr> </div>
<tr> <div class="weather-temp font-x1dot5">
<td class="center"><i class="font-x2 ion-thermometer"></i></td> <i class="font-x2 ion-thermometer"></i>
<td>
<span class="weather-info" ng-switch on="units"> <div class="weather-info" ng-switch on="units">
<span ng-switch-when="metric">{{weather.days[weather.current].temp}} °C | <a <span ng-switch-when="metric">{{weather.days[weather.current].temp}} °C | <a
ng-click="switchUnits('imperial')" href>°F</a></span> ng-click="switchUnits('imperial')" href>°F</a></span>
<span ng-switch-when="imperial">{{weather.days[weather.current].temp}} °F | <a <span ng-switch-when="imperial">{{weather.days[weather.current].temp}} °F | <a
ng-click="switchUnits('metric')" href>°C</a></span> ng-click="switchUnits('metric')" href>°C</a></span>
</span> </div>
</td> </div>
</tr>
</table>
</div> </div>
<div id="tempChart" class="temp-by-time"></div> <div id="tempChart" class="temp-by-time"></div>
<div class="select-day"> <div class="select-day">
@ -31,7 +34,7 @@
</div> </div>
<div> <div>
<i class="weatherIcon font-x2 {{weatherIcons[day.icon]}}"></i></td> <i class="weatherIcon font-x2 {{weatherIcons[day.icon]}}"></i></td>
<span>{{day.main}}</span> <span class="select-day-info">{{day.main}}</span>
</div> </div>
<div> <div>
<span>{{day.date | date : 'EEE'}}</span> <span>{{day.date | date : 'EEE'}}</span>

50
src/app/pages/dashboard/widgets/weather/weather.js
View File

@ -4,11 +4,11 @@ blurAdminApp.directive('blurWeather', function () {
return { return {
restrict: 'EA', restrict: 'EA',
controller: ['$scope', '$http', '$timeout', '$element', function ($scope, $http, $timeout, $element) { controller: ['$scope', '$http', '$timeout', '$element', function ($scope, $http, $timeout, $element) {
$scope.url = 'http://api.openweathermap.org/data/2.5/forecast'; var url = 'http://api.openweathermap.org/data/2.5/forecast';
$scope.method = 'GET'; var method = 'GET';
$scope.key = '2de143494c0b295cca9337e1e96b00e0'; var key = '2de143494c0b295cca9337e1e96b00e0';
var middleOfTheDay = 15;
$scope.units = 'metric'; $scope.units = 'metric';
$scope.date = new Date();
$scope.weatherIcons = { $scope.weatherIcons = {
'01d': 'ion-ios-sunny-outline', '01d': 'ion-ios-sunny-outline',
'02d': 'ion-ios-partlysunny-outline', '02d': 'ion-ios-partlysunny-outline',
@ -43,14 +43,13 @@ blurAdminApp.directive('blurWeather', function () {
$scope.updateWeather = function () { $scope.updateWeather = function () {
$http({ $http({
method: $scope.method, url: $scope.url, params: { method: method, url: url, params: {
appid: $scope.key, appid: key,
lat: $scope.geoData.geoplugin_latitude, lat: $scope.geoData.geoplugin_latitude,
lon: $scope.geoData.geoplugin_longitude, lon: $scope.geoData.geoplugin_longitude,
units: $scope.units units: $scope.units
} }
}).then(function success(response) { }).then(function success(response) {
$scope.weatherData = response.data;
saveWeatherData(response.data); saveWeatherData(response.data);
makeChart($scope.weather.days[$scope.weather.current].timeTemp) makeChart($scope.weather.days[$scope.weather.current].timeTemp)
}, function error() { }, function error() {
@ -58,18 +57,14 @@ blurAdminApp.directive('blurWeather', function () {
}); });
}; };
$scope.updateGeoData = function () { function updateGeoData() {
$http.jsonp('http://www.geoplugin.net/json.gp?jsoncallback=JSON_CALLBACK').then(function success(response) { $http.jsonp('http://www.geoplugin.net/json.gp?jsoncallback=JSON_CALLBACK').then(function success(response) {
$scope.geoData = response.data; $scope.geoData = response.data;
$scope.updateWeather(); $scope.updateWeather();
}, function error() { }, function error() {
console.log("GEO FAILED") console.log("GEO FAILED")
}); });
}; }
$timeout(function () {
$scope.updateGeoData();
}, 100);
function makeChart(data) { function makeChart(data) {
AmCharts.makeChart('tempChart', { AmCharts.makeChart('tempChart', {
@ -103,14 +98,15 @@ blurAdminApp.directive('blurWeather', function () {
} }
function saveWeatherData(data) { function saveWeatherData(data) {
var firstItem = data.list[0];
var weather = { var weather = {
days: [{ days: [{
date: new Date(data.list[0].dt_txt), date: new Date(),
timeTemp: [], timeTemp: [],
main: data.list[0].weather[0].main, main: firstItem.weather[0].main,
description: data.list[0].weather[0].description, description: firstItem.weather[0].description,
icon: data.list[0].weather[0].icon, icon: firstItem.weather[0].icon,
temp: data.list[0].main.temp temp: firstItem.main.temp
}], current: 0 }], current: 0
}; };
data.list.forEach(function (item, i) { data.list.forEach(function (item, i) {
@ -118,21 +114,27 @@ blurAdminApp.directive('blurWeather', function () {
if (itemDate.getDate() !== weather.days[weather.days.length - 1].date.getDate()) { if (itemDate.getDate() !== weather.days[weather.days.length - 1].date.getDate()) {
weather.days.push({date: itemDate, timeTemp: []}); weather.days.push({date: itemDate, timeTemp: []});
} }
weather.days[weather.days.length - 1].timeTemp.push({ var lastItem = weather.days[weather.days.length - 1];
lastItem.timeTemp.push({
time: itemDate.getHours(), time: itemDate.getHours(),
temp: item.main.temp temp: item.main.temp
}); });
if ((i && itemDate.getHours() == 15) || i == data.list.length - 1) { if ((weather.days.length > 1 && itemDate.getHours() == middleOfTheDay) || i == data.list.length - 1) {
weather.days[weather.days.length - 1].main = item.weather[0].main; lastItem.main = item.weather[0].main;
weather.days[weather.days.length - 1].description = item.weather[0].description; lastItem.description = item.weather[0].description;
weather.days[weather.days.length - 1].icon = item.weather[0].icon; lastItem.icon = item.weather[0].icon;
weather.days[weather.days.length - 1].temp = item.main.temp; 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); weather.days = weather.days.slice(0, $element.attr('forecast') || 5);
$scope.weather = weather; $scope.weather = weather;
} }
updateGeoData();
}], }],
templateUrl: 'app/pages/dashboard/widgets/weather/weather.html' templateUrl: 'app/pages/dashboard/widgets/weather/weather.html'
}; };