# 19th July Report

## Progress

Time: **08:53**
Event: Entering the lab

---

### Add "back" component on Login and Register Page
- The only reason why must add "back" component in both page is because iOS device (UE) doesn't has back button, like the others.
- This also added in Nearby Dispenser and Maintenance Progress Page.
- To be more, all pages except than Dashboard Page should has "back" component in order to bring the user back into previous page without using back button in his device.
- This is the "back" component, looks like X symbol:

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

The uses of "back" component as back function in code:

<div (click)="backFunc()">
    <img src="assets/icon/backButton.png" />
</div>

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

export class MyPage {

    constructor(private navCtrl: NavController) {  }

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

}

Time: **10:07**
- Add the back component to HTML and SCSS and function to Typescript in Login and Register Page.
- In **.page.html**

    <ion-content class="i-theme1">

      <div class="icon-cancel">
        <img src="assets/cancel/[e-mail]" alt="cancel" (click)="backFunc()">
      </div>
      
      ...
      
  </ion-content>

- Put the icon before header icon which contain the company (Union ACUO) icon.
- In **.page.scss**

    .icon-cancel {
        text-align: right;
        margin-top: 15px;
        margin-right: 15px;
    }

- In **.page.ts**

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

    export class LoginPage {

        constructor(private navCtrl: NavController) {  }

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

    }

- Change the `LoginPage` into `RegisterPage` for the Register Page.
- Display:

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

---

### Clean up code on pages

Time: **14:00**
- Finalize code without any dummy testing data, clean up `console.log()`, function to log the data, and commit to Github.
- The code still in my branch but I think this is final.
- Login Page: https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/project-aldy/src/app/pages/auth/login
- Register Page: https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/project-aldy/src/app/pages/auth/register
- Nearby Dispenser Page: https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/project-aldy/src/app/pages/nearby
- Maintenance Progress Page: https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/project-aldy/src/app/pages/mt-progress

---

### Integrating Dashboard Page to get value from URL

Time: **16:48**
- The purpose of this is to get the `device_id` which get from URL when user scan the QR Code.
- In `app-routing.module.ts` add attribute to page which wants to has parameter to get from URL
- In here we will use Dashboard Page to get `device_id` from URL, we can see on **`dashboard/:device_id`**.

import { Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard/:device_id', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule' },
  ...
];  

- Add ActivatedRoute library to Dashboard Page and get the parameter using paramMap function.
- It will be like this:

import { ActivatedRoute } from '@angular/router';

export class DashboardPage implements OnInit {

    constructor(private actRoute: ActivatedRoute) { 

    // get the device_id from parameter in URL
    let device_id = this.actRoute.snapshot.paramMap.get('device_id');
    
    // log the data
    console.log("Device ID: " + device_id);
    
  }

}

- On code above, I tried to log the data if `device_id` can be passed from the URL.
- Result:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/29-03.JPG" />
</center>
<br>

- **Pros**:
- Simple to use.
- Seems easy to use if ever using PHP get function.
- **Cons**:
- If parameter is blank, ex: `http://localhost:8100/dashboard` it will not load the page (crash).
- This method will be learn and work furthermore by Ian as the one who responsible for Dashboard Page.

Time: **17:36**
- Cons can be prevent by add more routing module to page where there will be two option: one is the default and the other one is using parameter.

{ path: 'dashboard/:device_id', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule' },
{ path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule' },

- Now accessing Dashboard Page without parameter `device_id` also can.
- This will return the `device_id` parameter with `null`.

---

## Conclusion
- Add back component to Login and Register Page, necessary for iOS device which not has back button.
- Clean up code on Login Page, Register Page, Nearby Dispenser Page, and Maintenance Progress Page.
- Searching how to get parameter from URL in Ionic using ActivatedRoute.

---

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

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