/
piggybanks.ts
70 lines (60 loc) · 1.69 KB
/
piggybanks.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Component, ViewChild } from '@angular/core';
import { NavController, LoadingController, NavParams } from 'ionic-angular';
import { PiggybankModel } from '../../models/piggybank.model';
import { PiggybankRepository } from '../../repositories/piggybank.repository';
import { Chart } from 'chart.js';
@Component({
selector: 'page-home',
templateUrl: 'piggybanks.html'
})
export class PiggyBanksPage {
private loader: any;
private piggyBanks: PiggybankModel[] = [];
constructor(
public navCtrl: NavController,
private loadingCtrl: LoadingController,
private piggyRepo: PiggybankRepository)
{
this.loader = this.loadingCtrl.create({
content: "Loading..."
});
this.loader.present();
this.piggyRepo.getAll(true, false).then( (piggyBanks) => {
this.piggyBanks = piggyBanks;
this.loader.dismiss();
});
}
doRefresh(refresher){
this.piggyRepo.getAll(true, true).then( (piggyBanks) => {
refresher.complete();
});
}
showDetails(piggy){
this.navCtrl.push(PiggyBankDetailPage, { piggy: piggy });
}
}
@Component({
templateUrl: 'detail.html'
})
export class PiggyBankDetailPage {
private piggy;
private chart: any;
@ViewChild('progressChart') progressChart;
constructor(private navParams: NavParams)
{
this.piggy = this.navParams.get('piggy');
}
ionViewDidLoad(){
this.chart = new Chart(this.progressChart.nativeElement, {
type: 'doughnut',
data: {
datasets: [{
data: [this.piggy.percentage, 100 - this.piggy.percentage],
backgroundColor: [
"#00FF00"
]
}],
}
});
}
}