Day 4

[jamespakorn]

DOH Phone ต่อ

[jamespakorn]

ติดตั้ง Plugin highchair

https://www.npmjs.com/package/angular2-highcharts

[jamespakorn]

Project dohkpi app.module.ts

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 {}

[jamespakorn]

home.ts

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

[jamespakorn]

kpi.ts

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('กรุณาตรวจสอบการเชื่อมต่อ')
      })
  }

}

[jamespakorn]

kpi.html

<!--
  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>

[jamespakorn]

kpi.scss

page-kpi {
chart {
        display: block;
        width: auto;
    }
}

[jamespakorn]

home.html

<!--
  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>

[jamespakorn]

app.component.ts

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'
    }

  }  

}

[jamespakorn]

login.ts

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

[jamespakorn]

provider rest.ts

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())

  }

}

[jamespakorn]

web หลัก Highcharts

https://www.highcharts.com/

[jamespakorn]

kpi url

http://172.17.8.189/dohkpi-api/public/kpi/2?y=2559