From 05e406733e462698d69406d932a39deb6dae5f4d Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 2 Jul 2015 09:28:11 -0500 Subject: [PATCH] Weather --- .../app/test/weather/current-weather.html | 8 + ionic/components/app/test/weather/index.js | 242 +++++++++++++++++- ionic/components/app/test/weather/weather.js | 4 +- 3 files changed, 251 insertions(+), 3 deletions(-) create mode 100644 ionic/components/app/test/weather/current-weather.html diff --git a/ionic/components/app/test/weather/current-weather.html b/ionic/components/app/test/weather/current-weather.html new file mode 100644 index 0000000000..422e265ba9 --- /dev/null +++ b/ionic/components/app/test/weather/current-weather.html @@ -0,0 +1,8 @@ +
+
{{current.currently.summary}}
+
+ ° + ° +
+

°

+
diff --git a/ionic/components/app/test/weather/index.js b/ionic/components/app/test/weather/index.js index 01d0cdda66..085d6e2dda 100644 --- a/ionic/components/app/test/weather/index.js +++ b/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: '', +}) +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: '{{currentTime}}', +}) +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: '

{{title}}

', + 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('')(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: '
', + replace: true, + scope: true, + link: function($scope, $element, $attr) { + if($scope.url) { + $element[0].style.backgroundImage = 'url(' + $scope.url + ')'; + } + } + } +}); + +*/ diff --git a/ionic/components/app/test/weather/weather.js b/ionic/components/app/test/weather/weather.js index 0cefbe41c7..e68102427e 100644 --- a/ionic/components/app/test/weather/weather.js +++ b/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' + }); } }