# 14th August Report

## Progress

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

---

### Weekly meeting in IB-713

Start time: **09:30**
End time: **11:00**

- The result can be seen [here](https://hackmd.io/@muhamadaldy/HJ9bfNbNr).
- Weekly report:
- Home page for Repairman App
- Parse the data from API.
- Convert into three different format of JSON.
- Testing the three fragments of home page (Done, Today, Future Mission page)
- Authentication page for Reset password
- Forgot password and reset password page for Repairman App
- Forgot password and reset password page for User App
- Update UI design on User App
- Nearby dispenser page
- Report problem page

---

### Create profile page for Repairman App

Time: **14:52**

- Profile page is a page that shows the repairman information also has access to log out from the app.
- It will shows:
- Profile picture
- Full name
- Employee ID
- Email address
- Profile page can be accessed from Login page where there is a small profile icon on the top right corner.
- In **profile.page.html**:

    <ion-content>

      <!-- cancel button -->
      <div class="button--cancel" (click)="backFunc()">
        <ion-icon slot="start" name="close" size="large" color="black"></ion-icon>
      </div>

      <!-- profile picture -->
      <div class="user--profile-picture">
        <img src="assets\upload-image\profile-empty.png" alt="profile-image" />
      </div>

      <!-- name -->
      <div class="user--full-name">
        Your Name
      </div>

      <!-- email -->
      <div class="user--email-address">
        <i>[e-mail]</i>
      </div>

      <!-- employee id -->
      <div class="user--id">
        <i>098761</i>
      </div>

      <!-- log out button -->
      <div class="button--log-out">
        <ion-button (click)="logout()" color="danger" fill="solid" expand="block" >
          LOG OUT
        </ion-button>
      </div>

    </ion-content>

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

    ion-content {
        --background: #ededed
    }

    .button--cancel {
        margin-right: 20px;
        margin-top: 20px;
        text-align: right;
    }

    .button--log-out {
        bottom: 10%;
        position: absolute;
        width: -webkit-fill-available;
        padding: 0px 30%;
    }

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

    .user--full-name {
        font-weight: bold;
        font-size: 30px;
        text-align: center;
        margin: 10px 40px 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        padding-bottom: 10px;
    }

    .user--email-address {
        color: rgba(0, 0, 0, 0.75);
        font-size: 18px;
        text-align: center;
        margin-bottom: 10px;
    }

    .user--id {
        color: rgba(0, 0, 0, 0.75);
        font-size: 18px;
        text-align: center;
        margin-bottom: 10px;
    }

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

    import { Component, OnInit } from '@angular/core';
    import { NavController, AlertController } from '@ionic/angular';

    @Component({
      selector: 'app-profile',
      templateUrl: './profile.page.html',
      styleUrls: ['./profile.page.scss'],
    })
    export class ProfilePage implements OnInit {

      constructor(
        private navCtrl: NavController,
        private alertCtrl: AlertController
      ) { }

      ngOnInit() {
      }

      backFunc () {
        this.navCtrl.back();
      }

      async logout () {

        let myAlert = await this.alertCtrl.create({
          mode: "ios",
          header: "Log Out",
          message: "Are you sure want to sign out?",
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              handler: () => {
                console.log('Confirm Cancel');
              }
            }, {
              text: 'Sign Out',
              handler: () => {
                console.log('Confirm Okay');
              }
            }
          ]
        });

        myAlert.present();
      }
    }

- In our back end code (.ts) has two functions, one is to route back to previous page and the other one is to perform **Log Out** system.
- Result display:
- Initial display
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/45-01.JPG" style="max-width: 250px" />
</center>
<br>

- The small "X" button on top right corner is to route or go back to previous page.
- The red button on the bottom is to perform log out system.

- When **LOG OUT** button was pressed
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/45-02.JPG" style="max-width: 250px" />
</center>
<br>

- Repairman can choose either cancel or Sign Out, means log out from his account.
- This alert gives repairman a option before log out and also handling when the button is accidentally being pressed.

---

## Conclusion

- Have get information from Mr. Johnny that API for getting the client information, like name, address, and etc., has been created.
- Profile page UI design for Repairman App has been created with displaying general information of repairman account, also it has access to perform log out from account.

---

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

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