mirror of https://github.com/akveo/blur-admin
fix junior mistakes
alex
parent
0b6f4d4033
commit
385ad9bc67
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,45 @@
|
||||||
<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>
|
||||||
</h5>
|
{{geoData.geoplugin_city}} - {{geoData.geoplugin_countryName | uppercase}}
|
||||||
<table class="font-x1dot5">
|
</div>
|
||||||
<tr>
|
<div>
|
||||||
<td><i class="font-x3 {{weatherIcons[weather.days[weather.current].icon]}}"></i></td>
|
{{ weather.days[weather.current].date | date : 'EEEE h:mm'}}
|
||||||
<td>
|
</div>
|
||||||
<span class="weather-info">{{weather.days[weather.current].main}} - {{weather.days[weather.current].description}}</span>
|
</h5>
|
||||||
</td>
|
<div class="weather-description font-x1dot5">
|
||||||
</tr>
|
<i class="font-x3 {{weatherIcons[weather.days[weather.current].icon]}}"></i>
|
||||||
<tr>
|
|
||||||
<td class="center"><i class="font-x2 ion-thermometer"></i></td>
|
<div class="weather-info">{{weather.days[weather.current].main}} -
|
||||||
<td>
|
{{weather.days[weather.current].description}}
|
||||||
<span class="weather-info" ng-switch on="units">
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="weather-temp font-x1dot5">
|
||||||
|
<i class="font-x2 ion-thermometer"></i>
|
||||||
|
|
||||||
|
<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>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="tempChart" class="temp-by-time"></div>
|
</div>
|
||||||
<div class="select-day">
|
<div id="tempChart" class="temp-by-time"></div>
|
||||||
<div class="day" ng-repeat="day in weather.days" ng-click="switchDay($index)">
|
<div class="select-day">
|
||||||
<div>
|
<div class="day" ng-repeat="day in weather.days" ng-click="switchDay($index)">
|
||||||
<span class="font-x1dot25">{{day.temp}}</span>
|
<div>
|
||||||
</div>
|
<span class="font-x1dot25">{{day.temp}}</span>
|
||||||
<div>
|
</div>
|
||||||
<i class="weatherIcon font-x2 {{weatherIcons[day.icon]}}"></i></td>
|
<div>
|
||||||
<span>{{day.main}}</span>
|
<i class="weatherIcon font-x2 {{weatherIcons[day.icon]}}"></i></td>
|
||||||
</div>
|
<span class="select-day-info">{{day.main}}</span>
|
||||||
<div>
|
</div>
|
||||||
<span>{{day.date | date : 'EEE'}}</span>
|
<div>
|
||||||
</div>
|
<span>{{day.date | date : 'EEE'}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,139 +1,141 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
blurAdminApp.directive('blurWeather', function () {
|
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';
|
||||||
$scope.units = 'metric';
|
var middleOfTheDay = 15;
|
||||||
$scope.date = new Date();
|
$scope.units = 'metric';
|
||||||
$scope.weatherIcons = {
|
$scope.weatherIcons = {
|
||||||
'01d': 'ion-ios-sunny-outline',
|
'01d': 'ion-ios-sunny-outline',
|
||||||
'02d': 'ion-ios-partlysunny-outline',
|
'02d': 'ion-ios-partlysunny-outline',
|
||||||
'03d': 'ion-ios-cloud-outline',
|
'03d': 'ion-ios-cloud-outline',
|
||||||
'04d': 'ion-ios-cloud',
|
'04d': 'ion-ios-cloud',
|
||||||
'09d': 'ion-ios-rainy',
|
'09d': 'ion-ios-rainy',
|
||||||
'10d': 'ion-ios-rainy-outline',
|
'10d': 'ion-ios-rainy-outline',
|
||||||
'11d': 'ion-ios-thunderstorm-outline',
|
'11d': 'ion-ios-thunderstorm-outline',
|
||||||
'13d': 'ion-ios-snowy',
|
'13d': 'ion-ios-snowy',
|
||||||
'50d': 'ion-ios-cloudy-outline',
|
'50d': 'ion-ios-cloudy-outline',
|
||||||
'01n': 'ion-ios-cloudy-night-outline',
|
'01n': 'ion-ios-cloudy-night-outline',
|
||||||
'02n': 'ion-ios-cloudy-night',
|
'02n': 'ion-ios-cloudy-night',
|
||||||
'03n': 'ion-ios-cloud-outline',
|
'03n': 'ion-ios-cloud-outline',
|
||||||
'04n': 'ion-ios-cloud',
|
'04n': 'ion-ios-cloud',
|
||||||
'09n': 'ion-ios-rainy',
|
'09n': 'ion-ios-rainy',
|
||||||
'10n': 'ion-ios-rainy-outline',
|
'10n': 'ion-ios-rainy-outline',
|
||||||
'11n': 'ion-ios-thunderstorm',
|
'11n': 'ion-ios-thunderstorm',
|
||||||
'13n': 'ion-ios-snowy',
|
'13n': 'ion-ios-snowy',
|
||||||
'50n': 'ion-ios-cloudy-outline'
|
'50n': 'ion-ios-cloudy-outline'
|
||||||
};
|
};
|
||||||
$scope.weather = {};
|
$scope.weather = {};
|
||||||
|
|
||||||
$scope.switchUnits = function (name) {
|
$scope.switchUnits = function (name) {
|
||||||
$scope.units = name;
|
$scope.units = name;
|
||||||
$scope.updateWeather();
|
$scope.updateWeather();
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.switchDay = function (day) {
|
$scope.switchDay = function (day) {
|
||||||
$scope.weather.current = day;
|
$scope.weather.current = day;
|
||||||
makeChart($scope.weather.days[$scope.weather.current].timeTemp)
|
makeChart($scope.weather.days[$scope.weather.current].timeTemp)
|
||||||
};
|
};
|
||||||
|
|
||||||
$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() {
|
console.log("WEATHER FAILED")
|
||||||
console.log("WEATHER FAILED")
|
});
|
||||||
});
|
};
|
||||||
};
|
|
||||||
|
|
||||||
$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 () {
|
function makeChart(data) {
|
||||||
$scope.updateGeoData();
|
AmCharts.makeChart('tempChart', {
|
||||||
}, 100);
|
type: 'serial',
|
||||||
|
theme: 'blur',
|
||||||
function makeChart(data) {
|
handDrawn: true,
|
||||||
AmCharts.makeChart('tempChart', {
|
categoryField: 'time',
|
||||||
type: 'serial',
|
dataProvider: data,
|
||||||
theme: 'blur',
|
valueAxes: [
|
||||||
handDrawn: true,
|
{
|
||||||
categoryField: 'time',
|
axisAlpha: 0.3,
|
||||||
dataProvider: data,
|
gridAlpha: 0
|
||||||
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 saveWeatherData(data) {
|
graphs: [
|
||||||
var weather = {
|
{
|
||||||
days: [{
|
bullet: 'square',
|
||||||
date: new Date(data.list[0].dt_txt),
|
fillAlphas: 0.3,
|
||||||
timeTemp: [],
|
fillColorsField: 'lineColor',
|
||||||
main: data.list[0].weather[0].main,
|
legendValueText: '[[value]]',
|
||||||
description: data.list[0].weather[0].description,
|
lineColorField: 'lineColor',
|
||||||
icon: data.list[0].weather[0].icon,
|
title: 'Temp',
|
||||||
temp: data.list[0].main.temp
|
valueField: '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;
|
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
categoryAxis: {
|
||||||
|
gridAlpha: 0,
|
||||||
|
axisAlpha: 0.3
|
||||||
|
}
|
||||||
|
}).write('tempChart');
|
||||||
|
}
|
||||||
|
|
||||||
}],
|
function saveWeatherData(data) {
|
||||||
templateUrl: 'app/pages/dashboard/widgets/weather/weather.html'
|
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'
|
||||||
|
};
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue