Open jamespakorn opened 7 years ago
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpModule } from '@angular/http';
import { MyApp } from './app.component';
import { RestProvider } from '../providers/rest/rest';
import { ChartModule } from 'angular2-highcharts';
import { KpiPage } from "../pages/kpi/kpi";
declare var require: any;
@NgModule({
declarations: [
MyApp,
KpiPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpModule,
ChartModule.forRoot(require('highcharts'))
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
KpiPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
RestProvider
]
})
export class AppModule {}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, App } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { RestProvider } from "../../providers/rest/rest";
import { LoadingController } from 'ionic-angular';
import { KpiPage } from "../kpi/kpi";
/**
* Generated class for the HomePage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
kpiAll: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public app: App,
public alertCtrl: AlertController,
public rest: RestProvider,
public loadingCtrl: LoadingController) {
} // end constructor
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
//call function feedKpiAll
this.feedKpiAll()
}
feedKpiAll() {
let loader = this.loadingCtrl.create({
// content: "กรุณารอ...",
spinner: 'dots'
});
loader.present();
this.rest.getKpiAll()
.subscribe((data: any) => {
console.log(data)
this.kpiAll = data.result
loader.dismiss()
}, (err) => {
console.log(err)
loader.dismiss()
alert('กรุณาตรวจสอบการเชื่อมต่อ')
})
} // end feedGroup
goKpi(id) {
this.navCtrl.push(KpiPage, { id: id })
} //end goPerson
logout() {
let confirm = this.alertCtrl.create({
title: 'ยืนยัน?',
message: 'คุณต้องการออกจากระบบหรือไม่?',
buttons: [
{
text: 'No',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Yes',
handler: () => {
localStorage.removeItem('dohkpi-token')
localStorage.removeItem('dohkpi-username')
this.app.getRootNav().setRoot('LoginPage')
}
}
]
});
confirm.present();
} //end logout
} //end class
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RestProvider } from "../../providers/rest/rest";
import { LoadingController } from 'ionic-angular';
/**
* Generated class for the KpiPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-kpi',
templateUrl: 'kpi.html',
})
export class KpiPage {
kpi_id: any;
kpi_name: string;
options: any;
region: Array<string> = [];
cdata: Array<number> = [];
constructor(public navCtrl: NavController,
public navParams: NavParams,
public rest: RestProvider,
public loadingCtrl: LoadingController) {
this.kpi_id = this.navParams.get('id');
this.kpi_name = this.navParams.get('kname')
}
ionViewDidLoad() {
console.log('ionViewDidLoad KpiPage');
//call function feedKpi
this.feedKpi()
}
feedKpi() {
let loader = this.loadingCtrl.create({
// content: "กรุณารอ...",
spinner:'dots'
});
loader.present();
this.rest.getKpi(this.kpi_id)
.subscribe((data: any) => {
// console.log(data)
// จัดรูปแบบข้อมูลเพื่อส่งให้กับ chart
data.result.forEach(v => {
// console.log(v);
this.region.push(v.areaname);
this.cdata.push(parseFloat(v.chart_value));
});
this.options = {
chart: {
type: 'column'
},
yAxis: {
min: 0,
title: {
text: 'ร้อยละ (%)'
}
},
xAxis: {
categories: this.region
},
title: { text: this.kpi_name },
series: [{
name: 'ข้อมูล',
data: this.cdata,
}]
};
loader.dismiss()
}, (err) => {
console.log(err)
loader.dismiss()
alert('กรุณาตรวจสอบการเชื่อมต่อ')
})
}
}
<!--
Generated template for the KpiPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="secondary">
<ion-title>{{kpi_name}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<chart [options]="options"></chart>
</ion-content>
page-kpi {
chart {
display: block;
width: auto;
}
}
<!--
Generated template for the HomePage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="secondary">
<ion-title>หน้าหลัก</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logout()" >
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content >
<ion-list >
<ion-item *ngFor="let k of kpiAll;let i=index" (click)="goKpi(k.id,k.kpi_name)" >
<p>[{{(i+1)}}] {{k.kpi_name}}</p>
</ion-item>
</ion-list>
</ion-content>
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:string;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
//call checktoken
this.checkToken();
// console.log('platform ready')
});
}
checkToken() {
let token = localStorage.getItem('dohkpi-token');
if (token) {
this.rootPage='HomePage'
} else {
this.rootPage='LoginPage'
}
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RestProvider } from "../../providers/rest/rest";
import { LoadingController } from 'ionic-angular';
/**
* Generated class for the LoginPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
username: string
password: string
constructor(public navCtrl: NavController,
public navParams: NavParams,
public rest: RestProvider,
public loadingCtrl: LoadingController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
// alert(localStorage.getItem('dohphone-token'))
}
login() {
let loader = this.loadingCtrl.create({
// content: "กรุณารอ...",
spinner:'dots'
});
loader.present();
this.rest.doLogin(this.username, this.password)
.subscribe((data: any) => {
console.log(data)
if (data.login == true) {
localStorage.setItem('dohkpi-token', data.token)
localStorage.setItem('dohkpi-username', data.username)
this.navCtrl.setRoot('HomePage')
} else {
alert('ตรวจสอบ รหัสผู้ใช้งาน/รหัสผ่าน อีกครั้ง')
}
loader.dismiss()
}, (err) => {
console.log(err)
alert('กรุณาตรวจสอบการเชื่อมต่อ')
loader.dismiss()
})
}
} //end class
import { Injectable } from '@angular/core';
import { Http,Headers,RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
/*
Generated class for the RestProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class RestProvider {
strUrl: string ='http://172.17.8.189/dohkpi-api/public';
constructor(public http: Http) {
console.log('Hello RestProvider Provider');
}
doLogin(u:string,p:string) {
let body: any = {username:u,password:p};
return this.http.post(this.strUrl+'/login', body)
.map(res=><any>res.json())
}
getKpiAll() {
let headers = new Headers({
'x-token': localStorage.getItem('dohkpi-token')
})
let options = new RequestOptions({ headers: headers })
return this.http.get(this.strUrl + '/kpi-all',options)
.map(res => <any>res.json())
}
getKpi(id) {
let headers = new Headers({
'x-token': localStorage.getItem('dohkpi-token')
})
let options = new RequestOptions({ headers: headers })
return this.http.get(this.strUrl + '/kpi/'+id+'?y=2559',options)
.map(res => <any>res.json())
}
}
DOH Phone ต่อ