# <center>22^nd^ July, 2019</center>

###### tags: `Daily Internship Documentation`
---
## 14^th^ Day of Internship

## Summary

Today, I created a new repository for Repairman App. I also edited the router module in detailed-information page and gave a loading screen.

URL:
* [**NTUST_SmartDispenser Github ver 2019.07.22**](https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/7ed9d270e09f3d749cef04871b2b0830076dd900)
* [**NTUST_RepairmanApp Github ver 2019.07.22**](https://github.com/ianjoseph2204/NTUST_RepairmanApp/tree/854a12151b54d43a490ce32829bd71f99844ab55)

---
## Documentation

### 1. Dashboard page
* [**Github Dashboard page version 2019.07.23**](https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/7ed9d270e09f3d749cef04871b2b0830076dd900/src/app/pages/dashboard)
#### 1.1 dashboard.page.ts

1. Rename method *setLoginPref()* to be *checkLoginPref()*

  async checkLoginPref(){
    // check if user has report something
    let email = await this.pref.getData(StaticVariable.KEY__SESSION_ID);
    if (email !== "" || email !== null || email !== undefined) {
      this.hasReportSubmitted = await this.api.checkAnyReportSubmitted(email, this.device_id);
    }
  }

### 2. Detailed Information page
#### 2.1 detailed-information.page.ts

* [**Github Detailed Information page version 2019.07.23**](https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/7ed9d270e09f3d749cef04871b2b0830076dd900/src/app/pages/detailed-information)

1. Import NavController & LoadingController libraries.

import { NavController } from '@ionic/angular';
import { LoadingController } from '@ionic/angular';

2. Create a variable to store the loading screen component.

await this.showLoadScreen();

3. Modify the method *ngOnInit()*, show the loading screen after getting the device screen and dismiss the loading screen after loaded all the detailed-information datas.

  async ngOnInit() {

    this.detectDevice();

    if(this.isDesktopType)
      this.adjustDynamicDesktopScreen();
    else
      this.adjustDynamicMobileScreen();

    await this.showLoadScreen();

    await this.getPrefsData();
    await this.setAPIsData();

    this.setCelsiusTemperatures();
    this.setFahrenheitTemperatures();
    this.setDispenserDetail();
    this.setTemperatureDisplay();

    await this.dismissLoadScreen();
  }
 }

4. Create two methods to show and dismiss the load screen.

  // first function
  async showLoadScreen () {

    // create the loading screen
    this.loadScreen = await this.loadCtrl.create({
      message: 'Loading data ...',
      spinner: 'crescent'
    })

    // show the loading screen
    this.loadScreen.present();
  }

  // second function
  async dismissLoadScreen () {

    // dismiss/remove the loading screen
    this.loadScreen.dismiss();
  }

---
## Result

There will be a loading screen when opening the Detailed information until the data is fully loaded: