Weather magic

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

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

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

@@ -1,9 +1,9 @@
 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 {NgIf, NgFor, ElementRef} from 'angular2/angular2';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
-import {IonicView, Animation, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic';
+import {IonicView, Animation, Content, Scroll, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic';
 
 import {Geo} from './geo';
 import {Weather} from './weather';
@@ -15,18 +15,15 @@ console.log('Imported', Geo, Weather, Flickr);
   selector: 'ion-app',
   appInjector: [Modal]
 })
-@IonicView({
+@View({
   templateUrl: 'main.html',
-  directives: [CurrentWeather]
+  directives: [NgIf, NgFor, Content, Scroll, CurrentWeather]
 })
 class WeatherApp {
   constructor(Modal: Modal) {
     this.Modal = Modal;
 
     this.currentLocationString = 'Madison, WI';
-    this.current = {
-      local_tz_short: 'CDT'
-    };
 
     this.activeBgImageIndex = 0;
 
@@ -66,6 +63,18 @@ class WeatherApp {
   getCurrent(lat, lng, locString) {
     Weather.getAtLocation(lat, lng).then((resp) => {
       this.current = resp;
+
+      // TODO: This should be in a custom pipe
+      for(let i = 0; i < this.current.hourly.data.length; i++) {
+        let t = this.current.hourly.data[i].temperature;
+        this.current.hourly.data[i].temperature = Math.floor(t);
+      }
+      for(let i = 0; i < this.current.daily.data.length; i++) {
+        let max = this.current.daily.data[i].temperatureMax;
+        let min = this.current.daily.data[i].temperatureMin;
+        this.current.daily.data[i].temperatureMax = Math.floor(max);
+        this.current.daily.data[i].temperatureMin = Math.floor(min);
+      }
       console.log('GOT CURRENT', this.current);
     }, (error) => {
       alert('Unable to get current conditions');
@@ -196,7 +205,9 @@ export class CurrentTime {
   directives: [NgIf]
 })
 export class CurrentWeather {
-  constructor() {
+  constructor(elementRef: ElementRef) {
+    this.elementRef = elementRef;
+
     /*
     $rootScope.$on('settings.changed', function(settings) {
       var units = Settings.get('tempUnits');
@@ -220,20 +231,20 @@ export class CurrentWeather {
     */
 
       // 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);
-      });
-      */
   }
 
+  onInit() {
+    var windowHeight = window.innerHeight;
+    var thisHeight = this.elementRef.nativeElement.offsetHeight;
+    var headerHeight = document.querySelector('#header').offsetHeight;
+    this.elementRef.nativeElement.style.paddingTop = (windowHeight - 250) + 'px';
+    /*
+    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');
 
@@ -257,18 +268,7 @@ export class CurrentWeather {
     }
   }
 }
-
 /*
-.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',

ionic/components/app/test/weather/main.html

@@ -12,7 +12,62 @@
   <ion-content>
     <div id="main-content">
       <current-weather [current]="current"></current-weather>
-      <forecast></forecast>
+
+      <div id="forecast" class="weather-box">
+        <h4 class="title">Forecast</h4>
+        <ion-scroll scroll-x="true" id="forecast-scroll">
+          <div id="hourly-forecast" *ng-if="current">
+            <div class="hourly-hour" *ng-for="#hour of current.hourly.data">
+              <div class="time" inner-html="hour.time"></div><!-- * 1000 | date:'h a'"></div>-->
+              <weather-icon icon="hour.icon"></weather-icon>
+              <div class="temp">{{hour.temperature}}&deg;</div>
+            </div>
+          </div>
+        </ion-scroll>
+        <div *ng-if="current">
+          <div class="row" *ng-for="#day of current.daily.data">
+            <div class="col"><span inner-html="day.time * 1000 | date:'EEE'"></span></div>
+            <div class="col"><weather-icon icon="day.icon"></weather-icon></div>
+            <div class="col">
+              <span class="temp-high">{{day.temperatureMax}}&deg;</span>
+              <span class="temp-low">{{day.temperatureMin}}&deg;</span>
+            </div>
+          </div>
+        </div>
+        <div class="clearfix">
+          <div class="credit">
+            Powered by <a href="http://forecast.io" target="_blank">forecast.io</a>
+          </div>
+        </div>
+      </div>
+
     </div>
   </ion-content>
 </ion-view>
+
+<style>
+.row {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 5px;
+  width: 100%; }
+
+.row + .row {
+  margin-top: -5px;
+  padding-top: 0; }
+
+.col {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: block;
+  padding: 5px;
+  width: 100%; }
+</style>

ionic/components/app/test/weather/style.css

@@ -100,14 +100,15 @@ h1,h2,h3,h4,h5 {
  * Current weather
  */
 
-#current-weather {
+current-weather {
+  display: block;
   height: 180px;
   box-sizing: content-box;
 }
-#current-weather > * {
+current-weather > * {
   color: #fff;
 }
-#current-weather .current-temp {
+current-weather .current-temp {
   font-size: 100px;
   font-weight: 100;
   margin: 0;
@@ -190,6 +191,7 @@ h1,h2,h3,h4,h5 {
 
 #forecast-scroll {
   margin: 10px 0px;
+  height: 150px;
 }
 #hourly-forecast {
   width: 2250px;

ionic/components/scroll/scroll.scss

@@ -1,7 +1,6 @@
 ion-scroll {
   position: relative;
   display: block;
-  background-color: $content-background-color;
   &.scroll-x .scroll-content {
     overflow-x: auto;
   }

ionic/components/toolbar/extensions/ios.scss

@@ -19,7 +19,7 @@ $toolbar-ios-button-background-color:       transparent !default;
 $toolbar-ios-padding: 0px 15px;
 
 
-.platform-ios ion-toolbar {
+.mode-ios ion-toolbar {
 
   padding: $toolbar-ios-padding;
 

ionic/net/http.js

@@ -108,12 +108,10 @@ export class Http {
 
       var callbackId = '_' + (callbacks.counter++).toString(36);
       callbacks[callbackId] = function(data) {
-        console.log('CALLBACK DATA', data);
         callbacks[callbackId].data = data;
         callbacks[callbackId].called = true;
       };
 
-      console.log('Set up callbacks', callbacks);
 
       /*
       var jsonpDone = jsonpReq(url.replace('JSON_CALLBACK', 'angular.callbacks.' + callbackId),