javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Weather

Browse Source
This commit is contained in:
Max Lynch
2015-07-02 17:38:45 -05:00
parent a69041b0f3
commit 84cd195c1c
4 changed files with 33 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/app/test/weather/current-weather.html
View File

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

49
ionic/components/app/test/weather/index.js
View File

@@ -1,6 +1,6 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {NgIf, NgFor, ElementRef} from 'angular2/angular2';
import {NgIf, NgFor, CSSClass, ElementRef} from 'angular2/angular2';
import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
import {IonicView, Animation, Content, Scroll, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic';
@@ -17,7 +17,7 @@ console.log('Imported', Geo, Weather, Flickr);
})
@View({
templateUrl: 'main.html',
directives: [NgIf, NgFor, Content, Scroll, CurrentWeather]
directives: [NgIf, NgFor, Content, Scroll, CurrentWeather, WeatherIcon]
})
class WeatherApp {
constructor(Modal: Modal) {
@@ -65,15 +65,21 @@ class WeatherApp {
this.current = resp;
// TODO: This should be in a custom pipe
let c, d;
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);
c = this.current.hourly.data[i];
let t = c.temperature;
d = new Date(c.time * 1000);
c.temperature = Math.floor(t);
c.time_date = d.getHours() % 12 + ' ' + (d.getHours() < 12 ? 'AM' : 'PM');
}
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);
c = this.current.daily.data[i];
let max = c.temperatureMax;
let min = c.temperatureMin;
c.temperatureMax = Math.floor(max);
c.temperatureMin = Math.floor(min);
c.time_date = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][new Date(c.time*1000).getDay()];
}
console.log('GOT CURRENT', this.current);
}, (error) => {
@@ -136,15 +142,15 @@ export function main(ionicBootstrap) {
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'
'partlycloudy': 'ion-ios-partlysunny-outline',
'mostlycloudy': 'ion-ios-partlysunny-outline',
'cloudy': 'ion-ios-cloudy-outline',
'rain': 'ion-ios-rainy-outline',
'tstorms': 'ion-ios-thunderstorm-outline',
'sunny': 'ion-ios-sunny-outline',
'clear-day': 'ion-ios-sunny-outline',
'nt_clear': 'ion-ios-moon-outline',
'clear-night': 'ion-ios-moon-outline'
};
@Component({
@@ -155,6 +161,7 @@ let WEATHER_ICONS = {
})
@View({
template: '<i class="icon" [class]="weatherIcon"></i>',
directives: [CSSClass]
})
export class WeatherIcon {
constructor() {
@@ -162,15 +169,13 @@ export class WeatherIcon {
onChange(data) {
console.log('Weather icon onchange', data);
/*
var icon = v;
var icon = this.icon;
if(icon in WEATHER_ICONS) {
$scope.weatherIcon = WEATHER_ICONS[icon];
this.weatherIcon = WEATHER_ICONS[icon];
} else {
$scope.weatherIcon = WEATHER_ICONS['cloudy'];
this.weatherIcon = WEATHER_ICONS['cloudy'];
}
*/
}
}

8
ionic/components/app/test/weather/main.html
View File

@@ -18,16 +18,16 @@
<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="time" [inner-html]="hour.time_date"></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 [inner-html]="day.time_date"></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>

2
ionic/components/app/test/weather/style.css
View File

@@ -52,7 +52,7 @@ h1,h2,h3,h4,h5 {
padding: 10px;
}
.ion-ios7-sunny-outline {
.ion-ios-sunny-outline {
color: yellow;
}