weather widget

src/app/pages/dashboard/dashboard.html

@@ -49,9 +49,9 @@
 </div>
 
 <div class="row">
-  <div class="col-lg-3 col-sm-6 col-xs-12">
+  <div class="col-lg-4 col-sm-6 col-xs-12">
     <blur-panel title="Weather" class-container="medium-panel with-scroll">
-      <blur-weather></blur-weather>
+      <blur-weather forecast="5"></blur-weather>
     </blur-panel>
   </div>
 </div>

src/app/pages/dashboard/widgets/weather/_weather.scss

@@ -1,28 +1,71 @@
-.rightHeading{
+.weather-wrapper {
-  display:block;
-  float:right;
-}
 
-.center{
+  height: 100%;
-  text-align: center;
-}
 
-.weather-info{
+  .weather-main-info {
-  padding-left: 15px;
+    height: 140px;
-}
+  }
 
-.font50up{
+  .temp-by-time {
+    min-height: 120px;
+    height: calc(100% - 210px);
+  }
+
+  .select-day {
+    display: table;
+    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;
+      }
+    }
+
+    .day:hover {
+      i.weatherIcon {
+        color: #40BDE8;
+      }
+    }
+  }
+
+  .rightHeading {
+    display: block;
+    float: right;
+  }
+
+  .center {
+    text-align: center;
+  }
+
+  .weather-info {
+    padding-left: 15px;
+  }
+
+  .font-x1dot25 {
     font-size: 1.5em;
-}
+  }
 
-.font-x2{
+  .font-x1dot5 {
+    font-size: 1.5em;
+  }
+
+  .font-x2 {
     font-size: 2em;
+  }
+
+  .font-x3 {
+    font-size: 3em;
+  }
+
+  .font-x4 {
+    font-size: 4em;
+  }
 }
 
-.font-x3{
-  font-size: 3em;
-}
 
-.font-x4{
-  font-size: 4em;
-}

src/app/pages/dashboard/widgets/weather/weather.html

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

src/app/pages/dashboard/widgets/weather/weather.js

@@ -3,44 +3,57 @@
 blurAdminApp.directive('blurWeather', function () {
     return {
         restrict: 'EA',
-        controller: ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
+        controller: ['$scope', '$http', '$timeout', '$element', function ($scope, $http, $timeout, $element) {
-            $scope.url = 'http://api.openweathermap.org/data/2.5/weather';
+            $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',
+                '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.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.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
+                        units: $scope.units
                     }
                 }).then(function success(response) {
                     $scope.weatherData = response.data;
-                    console.log(response.data);
+                    saveWeatherData(response.data);
-                }, function error(response) {
+                    makeChart($scope.weather.days[$scope.weather.current].timeTemp)
+                }, function error() {
                     console.log("WEATHER FAILED")
                 });
             };
@@ -48,7 +61,6 @@ blurAdminApp.directive('blurWeather', function () {
             $scope.updateGeoData = function () {
                 $http.jsonp('http://www.geoplugin.net/json.gp?jsoncallback=JSON_CALLBACK').then(function success(response) {
                     $scope.geoData = response.data;
-                    console.log(response.data);
                     $scope.updateWeather();
                 }, function error() {
                     console.log("GEO FAILED")
@@ -59,6 +71,68 @@ blurAdminApp.directive('blurWeather', 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 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;
+            }
+
         }],
         templateUrl: 'app/pages/dashboard/widgets/weather/weather.html'
     };