Belajar Async

plan.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { Storage } from '@ionic/storage';
import { SettingsPage } from '../settings/settings';

import { HelperProvider } from '../../providers/helper/helper';

/**
 * Generated class for the PlanPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-plan',
  templateUrl: 'plan.html',
})
export class PlanPage {
  pit: any;
  pits: any=[];
  temp: any=[];
  fleet: any=[];
  fleets: any=[];
  detail: any=[];
  summary: any=[];
  local_date: any=[];
  currentDate: String;



  loading: Boolean = true;
  loading_text: String = 'Loading...';

  loading_detail: Boolean = true;
  loading_detail_text: String = 'Loading...';
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    private http: HttpClient, 
    private storage: Storage,
    private helper: HelperProvider
  ) {
    this.callPit();
  }

  async callPit() {
    this.storage.get('area').then(async (pit) => {
      if(pit == "ALL") {
        pit = "";
        this.pits.push({id: "", name: "ALL", alias: "ADMO"});
      }
      pit = pit.split(',');
      for (let index = 0; index < pit.length; index++) {
        const area = pit[index];
        
        const data = await this.http.get(this.helper.globalUrl + 'v2/Api/enum/pit/' + area).toPromise();
        for (let i = 0; i < data["data"].length; i++) {          
          await this.storage.set('pit', data["data"][i]['id']);
          this.pit = data["data"][i]['id'];
          this.pits.push(data["data"][i]);
        }
      }
      this._getData(await this.pit);
      return this.pits;
    });
  }

  async _getData(pit, refresh = '') {
    const val = await this.storage.get('date');
    if(val != null) {
      this.local_date       = val;
    } else {
      this.local_date       = new Date().toISOString()
    }
    // const pit = await this.storage.get('pit');
    var url = this.helper.globalUrl + 'v2/Api/daily_setting_fleet/' + this.local_date + '/' + pit ;
    let fleet = await this.http.get(url).toPromise();
    if(fleet["data"] != 'empty') {
      this.fleet = fleet["loader"][0].id;
      this.fleets = fleet;
      this._getDetail(fleet["loader"][0].id);
      this._getSummary();
    } else {
      this.fleets = [''];
      this.fleet = '';
      this.loading_detail       = true;
      this.loading_detail_text  = ' Can\'t find data';
    }
  }

  async _getDetail(id) {
    this.loading_detail       = true;
    this.loading_detail_text  = 'Loading...';
    this.http.get(this.helper.globalUrl + 'v2/Api/detail_setting_fleet/' + id).subscribe(data => {      
      this.temp = data;     
      if (this.temp.data[0].id == null) {
        this.loading_detail       = true;
        this.loading_detail_text  = ' Can\'t find data';
      } else {
        this.loading_detail       = false;
      }
      this.detail = this.temp.data[0];
    });
  }

  async _getSummary() {    
    this.loading = true;
    this.loading_text  = 'Loading...';
    this.http.get(this.helper.globalUrl + 'v2/Api/summary_setting_fleet/' + this.local_date + '/' + this.pit).subscribe(data => {      
      this.temp = data;     
      if (this.temp.data != 'empty') {
        this.loading          = false;
        this.summary          = this.temp.data;
        this.currentDate      = 'Last updated ' + this.temp.date;
      } else {
        this.loading_text     = ' Can\'t find data';
        this.loading          = true;
        this.summary          = [''];
      }
    });
  }

  _changeDate():void {
    this.storage.set('date', this.local_date);
    this.getRefresh(this.pit);
  }

  _changePit():void {
    this.storage.set('pit', this.pit);
    this.getRefresh();
  }

  getRefresh(refresher:any = '') {
    if(refresher) {
      refresher.complete();
      this._getData(this.pit, refresher);
    }
  }

  // to go account page
  goToAccount() {
    this.navCtrl.push(SettingsPage);
  }

}