Weather

ionic/components/app/test/weather/current-weather.html

@@ -0,0 +1,8 @@
+<div id="current-weather" *ng-if="current">
+  <h5><weather-icon icon="current.icon" id="current-icon"></weather-icon> {{current.currently.summary}}</h5>
+  <h5>
+    <span id="temp-hi"><i class="icon ion-arrow-up-c"></i> <span ng-bind="highTemp"></span>&deg;</span>
+    <span id="temp-lo"><i class="icon ion-arrow-down-c"></i> <span ng-bind="lowTemp"></span>&deg;</span>
+  </h5>
+  <h1 class="current-temp"><span ng-bind="currentTemp"></span>&deg;</h1>
+</div>

ionic/components/app/test/weather/index.js

@@ -1,4 +1,6 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {NgIf} from 'angular2/angular2';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
 import {IonicView, Animation, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic';
@@ -14,7 +16,8 @@ console.log('Imported', Geo, Weather, Flickr);
   appInjector: [Modal]
 })
 @IonicView({
-  templateUrl: 'main.html'
+  templateUrl: 'main.html',
+  directives: [CurrentWeather]
 })
 class WeatherApp {
   constructor(Modal: Modal) {
@@ -62,7 +65,7 @@ class WeatherApp {
 
   getCurrent(lat, lng, locString) {
     Weather.getAtLocation(lat, lng).then((resp) => {
-      this.current = resp.data;
+      this.current = resp;
       console.log('GOT CURRENT', this.current);
     }, (error) => {
       alert('Unable to get current conditions');
@@ -121,3 +124,238 @@ export class SettingsModal extends Modal {}
 export function main(ionicBootstrap) {
   ionicBootstrap(WeatherApp);
 }
+
+
+let WEATHER_ICONS = {
+  'partlycloudy': 'ion-ios7-partlysunny-outline',
+  'mostlycloudy': 'ion-ios7-partlysunny-outline',
+  'cloudy': 'ion-ios7-cloudy-outline',
+  'rain': 'ion-ios7-rainy-outline',
+  'tstorms': 'ion-ios7-thunderstorm-outline',
+  'sunny': 'ion-ios7-sunny-outline',
+  'clear-day': 'ion-ios7-sunny-outline',
+  'nt_clear': 'ion-ios7-moon-outline',
+  'clear-night': 'ion-ios7-moon-outline'
+};
+
+@Component({
+  selector: 'weather-icon',
+  properties: [
+    'icon'
+  ]
+})
+@View({
+  template: '<i class="icon" [class]="weatherIcon"></i>',
+})
+export class WeatherIcon {
+  constructor() {
+  }
+  onChange(data) {
+    console.log('Weather icon onchange', data);
+
+    /*
+    var icon = v;
+
+    if(icon in WEATHER_ICONS) {
+      $scope.weatherIcon = WEATHER_ICONS[icon];
+    } else {
+      $scope.weatherIcon = WEATHER_ICONS['cloudy'];
+    }
+    */
+  }
+}
+
+@Component({
+  selector: 'current-time',
+  properties: [
+    'localtz'
+  ]
+})
+@View({
+  template: '<span class="current-time">{{currentTime}}</span>',
+})
+export class CurrentTime {
+  constructor() {
+  }
+  onInit() {
+    if(this.localtz) {
+      this.currentTime = new Date();
+      //this.currentTime = //$filter('date')(+(new Date), 'h:mm') + $scope.localtz;
+    }
+  }
+}
+
+@Component({
+  selector: 'current-weather',
+  properties: [
+    'current'
+  ]
+})
+@View({
+  templateUrl: 'current-weather.html',
+  directives: [NgIf]
+})
+export class CurrentWeather {
+  constructor() {
+    /*
+    $rootScope.$on('settings.changed', function(settings) {
+      var units = Settings.get('tempUnits');
+
+      if($scope.forecast) {
+
+        var forecast = $scope.forecast;
+        var current = $scope.current;
+
+        if(units == 'f') {
+          $scope.highTemp = forecast.forecastday[0].high.fahrenheit;
+          $scope.lowTemp = forecast.forecastday[0].low.fahrenheit;
+          $scope.currentTemp = Math.floor(current.temp_f);
+        } else {
+          $scope.highTemp = forecast.forecastday[0].high.celsius;
+          $scope.lowTemp = forecast.forecastday[0].low.celsius;
+          $scope.currentTemp = Math.floor(current.temp_c);
+        }
+      }
+    });
+    */
+
+      // Delay so we are in the DOM and can calculate sizes
+      /*
+      $timeout(function() {
+        var windowHeight = window.innerHeight;
+        var thisHeight = $element[0].offsetHeight;
+        var headerHeight = document.querySelector('#header').offsetHeight;
+        $element[0].style.paddingTop = (windowHeight - (thisHeight)) + 'px';
+        angular.element(document.querySelector('.content')).css('-webkit-overflow-scrolling', 'auto');
+        $timeout(function() {
+          angular.element(document.querySelector('.content')).css('-webkit-overflow-scrolling', 'touch');
+        }, 50);
+      });
+      */
+  }
+
+  onAllChangesDone() {
+    var units = 'f';//Settings.get('tempUnits');
+
+    let current = this.current;
+
+    console.log('ALL CHANGES DONE', current);
+
+    if(current) {
+      if(units == 'f') {
+        this.currentTemp = Math.floor(current.currently.temperature);
+      } else {
+        this.currentTemp = Math.floor(current.currently.temperature);
+      }
+      if(units == 'f') {
+        this.highTemp = Math.floor(current.daily.data[0].temperatureMax);
+        this.lowTemp = Math.floor(current.daily.data[0].temperatureMin);
+      } else {
+        this.highTemp = Math.floor(current.daily.data[0].temperatureMax);
+        this.lowTemp = Math.floor(current.daily.data[0].temperatureMin);
+      }
+    }
+  }
+}
+
+/*
+.directive('forecast', function($timeout) {
+  return {
+    restrict: 'E',
+    replace: true,
+    templateUrl: 'templates/forecast.html',
+    link: function($scope, $element, $attr) {
+    }
+  }
+})
+
+.directive('weatherBox', function($timeout) {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: {
+      title: '@'
+    },
+    template: '<div class="weather-box"><h4 class="title">{{title}}</h4><div ng-transclude></div></div>',
+    link: function($scope, $element, $attr) {
+    }
+  }
+})
+
+.directive('scrollEffects', function() {
+  return {
+    restrict: 'A',
+    link: function($scope, $element, $attr) {
+      var amt, st, header;
+      var bg = document.querySelector('.bg-image');
+      $element.bind('scroll', function(e) {
+        if(!header) {
+          header = document.getElementById('header');
+        }
+        st = e.detail.scrollTop;
+        if(st >= 0) {
+          header.style.webkitTransform = 'translate3d(0, 0, 0)';
+        } else if(st < 0) {
+          header.style.webkitTransform = 'translate3d(0, ' + -st + 'px, 0)';
+        }
+        amt = Math.min(0.6, st / 1000);
+
+        ionic.requestAnimationFrame(function() {
+          header.style.opacty = 1 - amt;
+          if(bg) {
+            bg.style.opacity = 1 - amt;
+          }
+        });
+      });
+    }
+  }
+})
+
+.directive('backgroundCycler', function($compile, $animate) {
+  var animate = function($scope, $element, newImageUrl) {
+    var child = $element.children()[0];
+
+    var scope = $scope.$new();
+    scope.url = newImageUrl;
+    var img = $compile('<background-image></background-image>')(scope);
+
+    $animate.enter(img, $element, null, function() {
+      console.log('Inserted');
+    });
+    if(child) {
+      $animate.leave(angular.element(child), function() {
+        console.log('Removed');
+      });
+    }
+  };
+
+  return {
+    restrict: 'E',
+    link: function($scope, $element, $attr) {
+      $scope.$watch('activeBgImage', function(v) {
+        if(!v) { return; }
+        console.log('Active bg image changed', v);
+        var item = v;
+        var url = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret + "_z.jpg";
+        animate($scope, $element, url);
+      });
+    }
+  }
+})
+
+.directive('backgroundImage', function($compile, $animate) {
+  return {
+    restrict: 'E',
+    template: '<div class="bg-image"></div>',
+    replace: true,
+    scope: true,
+    link: function($scope, $element, $attr) {
+      if($scope.url) {
+        $element[0].style.backgroundImage = 'url(' + $scope.url + ')';
+      }
+    }
+  }
+});
+
+*/

ionic/components/app/test/weather/weather.js

@@ -7,6 +7,8 @@ let FORECASTIO_KEY = '4cd3c5673825a361eb5ce108103ee84a';
 export class Weather {
   static getAtLocation(lat, lng) {
     let url = 'https://api.forecast.io/forecast/' + FORECASTIO_KEY + '/';
-    return Http.get(url + lat + ',' + lng);
+    return Http.get(url + lat + ',' + lng + '?callback=JSON_CALLBACK', {
+      method: 'jsonp'
+    });
   }
 }