# 15th August Report

## Progress

Time: **09:00**
Event: Entering the lab

---

### Generating the repairman profile into Home page and Profile page

Time: **11:18**

- From API now we can get data about the repairman information include the name, email, id, and the profile picture.
- Add function to Dispenser API service to get data from API and being called from any pages that needed.
- In **dispenser-api.service.ts**:

    async getRepairmanProfile (employee_id: string) {

      let url = this.urlGetRepairmanProfile + employee_id;

      let returnValue = {
        "FullName": "",
        "Email": "",
        "EmployeeID": "",
        "Picture": "",
      };

      await this.http.get(url).toPromise()
        .then((result) => {
          returnValue = result['Data'];
        }, () => {
          console.error("Promise rejected: unable to get repairman profile!");
        })
        .catch((e) => {
          console.error("Function error: on getRepairmanProfile => " + e);
        });

      return returnValue;
    }

- Using the employee ID, the API will return the JSON object of repairman information.
- This function need employee ID and will return the data/repairman information.

- Implement the function into repairman profile page.
- In **profile.page.html**:

        <ion-content>

          ...

          <!-- profile picture -->
          <div class="user--profile-picture">
            <img *ngIf="employee_picture_string === null" src="assets\upload-image\profile-empty.png" alt="profile-image" />
            <img *ngIf="employee_picture_string !== null" [src]="employee_picture_string" alt="profile-image" />
          </div>

          <!-- name -->
          <div class="user--full-name">
            <div *ngIf="employee_name === null">No data</div>
            <div *ngIf="employee_name !== null">{{employee_name}}</div>
          </div>

          <!-- email -->
          <div class="user--email-address">
            <div *ngIf="employee_email === null"><i>{{employee_email}}</i></div>
            <div *ngIf="employee_email !== null"><i>{{employee_email}}</i></div>
          </div>

          <!-- employee id -->
          <div class="user--id">
            <div *ngIf="employee_id === null"><i>{{employee_id}}</i></div>
            <div *ngIf="employee_id !== null"><i>{{employee_id}}</i></div>
          </div>

          ...

        </ion-content>

- To handling with no data, we declare the `*ngIf` to check if the variable is null or not.
- If no data then it will present default value like **No data** and **Invalid id**.

- In **profile.page.scss**:

        .user--profile-picture {
            max-width: 125px;
            max-height: 125px;
            border-radius: 50%;
            margin: 30px auto;
            display: table;
        }

        .user--profile-picture>img {
            width: 125px;
            height: auto;
            border-radius: inherit;
        }

- In **profile.page.ts**:

        import { DispenserAPIService } from 'src/app/services/DispenserAPI/dispenser-api.service';
        import { PreferenceManagerService } from 'src/app/services/PreferenceManager/preference-manager.service';
        import { StaticVariables } from 'src/app/classes/StaticVariables/static-variables';
        import { UnitConverter } from 'src/app/classes/UnitConverter/unit-converter';

        export class ProfilePage implements OnInit {

          // field variable
          employee_id = null;
          employee_name = null;
          employee_email = null;
          employee_picture_string = null;

          constructor(
            private navCtrl: NavController,
            private alertCtrl: AlertController,
            private api: DispenserAPIService,
            private pref: PreferenceManagerService
          ) { }

          async ngOnInit() {

            ////////////////////
            // test save to pref
            await this.pref.setData(StaticVariables.KEY__LOGIN_EMPLOYEE_ID, "2");
            ////////////////////

            // get id from preference
            this.employee_id = await this.pref.getData(StaticVariables.KEY__LOGIN_EMPLOYEE_ID);

            if (this.employee_id !== "" || this.employee_id !== null || this.employee_id !== undefined) {

              let getProfile = await this.api.getRepairmanProfile(this.employee_id);

              this.employee_name = getProfile['FullName'];
              this.employee_email = getProfile['Email'];
              this.employee_picture_string = UnitConverter.convertBase64ToImage(getProfile['Picture']);
            }
          }

          ...
        }

- In **line 25** we use dummy data to be saved into preference, using ID 2 as employee ID.
- In **line 33** we call the function to get the repairman profile from Dispenser API service.
- To display the image in base64 form we call the function inside the **Unit Converter** class named `convertBase64ToImage()` to add the data type (data:image/jpeg, base64).

- Result in profile page:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/46-01.JPG" style="max-width: 250px" />
</center>
<br>

- The repairman profile picture also should be appeared in home page where there is profile icon on the top right corner.
- In home page we add:
- **home.page.html**:

        <ion-avatar slot="end" (click)="profile()">
          <img *ngIf="employee_picture_string === null" src="assets\upload-image\profile-empty.png" alt="profile-image" />
          <img *ngIf="employee_picture_string !== null" [src]="employee_picture_string" alt="profile-image" />
        </ion-avatar>

- **home.page.ts**:

export class HomePage {

  ...
  
  employee_picture_string: string;

  async ngOnInit() {

    // dummy data
    await this.pref.setData(StaticVariables.KEY__LOGIN_EMPLOYEE_ID, "2");

    // get id from preference
    this.employee_id = await this.pref.getData(StaticVariables.KEY__LOGIN_EMPLOYEE_ID);
    if (this.employee_id !== "" || this.employee_id !== null || this.employee_id !== undefined) {
      let getProfile = await this.api.getRepairmanProfile(this.employee_id);
      this.employee_picture_string = UnitConverter.convertBase64ToImage(getProfile['Picture']);
    }
    
    ...
  }
}

- Result in profile page:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/46-02.JPG" style="max-width: 250px" />
</center>
<br>

---

### Workflow from log in to log out system

Time: **13:39**

- In login page we implement preference system so when repairman do the login procedure it will store both the ID and the email address.
- In **login.page.ts**:

    export class LoginPage implements OnInit {

      // field variable to store input
      credential: string = "";
      password: string = "";

      constructor(
        private navCtrl: NavController,
        private api: DispenserAPIService,
        private pref: PreferenceManagerService
      ) { }

      ngOnInit() {
      }

      async login() {

        const { credential, password } = this;
        let resultData: any;
        let email: string;
        let id: string;

        if (credential === "" || password === "") {

        } else {

          // login using email
          resultData = await this.api.loginRepairmanUsingEmail(credential, password);
          if (resultData === 1){
            email = credential;
            await this.api.getRepairmanProfile(credential).then((result) => {
              id = result['EmployeeID'];
            });
          } else {

            // login using id
            resultData = await this.api.loginRepairmanUsingEmployeeId(credential, password);
            if (resultData === 1) {
              id = credential;
              await this.api.getRepairmanProfile(credential).then((result) => {
                email = result['Email'];
              });
            }
          }
        }

        if (resultData === 1) {
          await this.pref.setData(StaticVariables.KEY__LOGIN_EMPLOYEE_EMAIL, email);
          await this.pref.setData(StaticVariables.KEY__LOGIN_EMPLOYEE_ID, id);
          this.navCtrl.navigateForward(['home']);
        }
      }

      ...
    }

- In **line 23** we check first if the form was filled in or not, otherwise it will not perform the login.
- In **line 28-45** do login with email first and if not valid then with id, the system using this way because both email address and employee id has the same form named **credential**.
- **Line 28-33** if email address is correct then get ID from API.
- **Line 37-42** if ID is correct then get email address from API.
- If either using email address or ID is valid, in **line 47** where the `resultData` was checked will store data to preference.

- Result that login page store email address and ID:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/46-03.JPG" style="max-width: 350px" />
</center>
<br>

- In home page and profile page, remove the dummy data which set preference with key `KEY__LOGIN_EMPLOYEE_ID` to 2, we don't need this because now login page will store ID and email address.
- Result demo:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/46-04.gif" style="max-width: 250px" />
</center>
<br>

- Login success, repairman will take to home page.
- Home page will load data using employee ID from preference.
- In profile page, repairman can do log out.
- After log out, email address and ID in preference will be erased.

---

## Conclusion

- Add function in dispenser api service to get data from API about repairman information so now we can display the name, email address, id, and the profile picture.
- Implement the function into profile page so it display the repairman information and home page to display the profile picture as icon on top right corner.
- Login page store the email address and ID into preference after repairman successfully do login, and it will be erased again once after the repairman do log out in profile page.

---

Time: **18:05**
Event: Leaving the lab

###### tags: `on-intern`