# 29th July Report

## Progress

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

---

### Meeting for Final Presentation

Start time: **09:20**
- Each local student present their profile and hometown.
- They show many interesting places and cultures from their hometown.
- Wish someday can have visit again for a trip to their hometown.
- Adiwena present about his works on Bang-Bang PPL.
- Thariq present about his works on PWA for Smart Dispenser.
- At the end, we have farewell party for Thariq and Adiwena who has finished their internship, it was a great celebration!

End time: **12:10**

---

### Add feature to see detail information

Time: **15:25**
- Request from Johnny that every card/item in Nearby Dispenser should has link to Detailed Information.
- This aims that user/student can see the detail of hot, warm, and cold temperature of the dispenser, and also where to find it.
- It will direct the user from Nearby Dispenser page to Detailed Information page.
- In order to pass the `Device_ID`, in here using NavigationExtras to add parameter and ActivatedRoute in second page to receive the parameter.

---

- In **nearby.page.html** `ion-card` where every item from JSON file will be displayed.
- For same building

    <ion-card
        *ngFor="let item of nearbySameBuilding"
        (click)="getDetailInformation(item.Device_ID)" >

        ...

    </ion-card>

- For next/different building

    <ion-card
        *ngFor="let item of nearbyNextBuilding"
        (click)="getDetailInformation(item.Device_ID)" >

        ...

    </ion-card>

- `ion-card` is main content on Nearby Dispenser page to display the item which contains the information of the nearby dispenser.
- Using `*ngFor` we can using algorithm for every item in an array will be displayed, it's like FOR EACH concept.
- Using `(click)="function()"` will active the function in back end code (.ts) when the item was clicked.

- In **nearby.page.ts**

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

    export class NearbyPage implements OnInit {
    
        constructor (private navCtrl: NavController) { }

        getDetailInformation (device_id: string) {

          // set parameter of passed data
          let navigationExtras: NavigationExtras = {
            queryParams: {
              Device_ID: device_id
            }
          };

          this.navCtrl.navigateForward(['detailed-information'], navigationExtras);
        }
    }

- Each item will call function `getDetailInformation(item.Device_ID)` (look on HTML code above), it also passing the `Device_ID` from item array.
- On the function it wrap the device ID using **NavigationExtras**.
- With navCtrl (library use = **NavController**), it direct the user to Detailed Information page with pass the extras.

- In **detailed-information.page.ts**

    import { ActivatedRoute } from '@angular/router';
    import { PreferenceManagerService } from 'src/app/services/PreferenceManager/preference-manager.service';
    import { StaticVariable } from 'src/app/classes/StaticVariable/static-variable';

    export class DetailedInformationPage implements OnInit {

        constructor (
            private route: ActivatedRoute
            private pref: PreferenceManagerService
        ) { }

        async ngOnInit() {
            await this.getPrefsData();   
        }

        async getPrefsData(){

          // get from nearby dispenser page if exists
          let tempDeviceId: string;
          await this.route.queryParams.subscribe(params => {
              tempDeviceId = params["Device_ID"];
          });

          if (tempDeviceId !== undefined) {
              this.device_id = tempDeviceId;
          } else {
              this.device_id = await this.pref.getData(StaticVariable.KEY__DEVICE_ID);
          }
        }
    }

- Above there the parameter is retrived in `getPrefsData()` on tempDeviceId variable.
- It check whether the value is exists or not, means that the user is comes from Dashboard or Nearby Dispenser page.
- If comes from Dashboard page then it will use the device ID from preference because there is no parameter being passed.
- If comes from Nearby Dispenser page then device ID was came from parameter being passed.

- Result:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/34-01.gif" />
</center>
<br>

---

### Add feature to see Maintenance Records

Time: **17:05**

- This feature is to help the user see the maintenance progress of every problem has been occured.
- In order to get device ID for every record, it will using the same method as above (for Nearby Dispenser to Detailed Information page).
- Because in Maintenance Progress the system will check data from API which if having status equal to 7, means complete, with time frame more than 2 days then it will discarded, we add a identification and new system that identify if the data is from Maintenance Progress menu or from Maintenance Record menu.
- If they from Maintenance Progress menu, and also handling multiple rpeorts, it will using the previous system with handling only data under 2 days and up to status equal to 7.
- If it from Maintenance Records, which means single data for each record, it will using the next system with display the data without any further condition.

- --

Time: **17:47**
- In **maintenance-records.page.html** we add click function for every record.

    <div 
        *ngFor="let data of monthData.DayMaintenance; let j = last"
        (click)="getProgress(data.CompleteTime)">

        ...

    </div>

- Code above process every item display in Maintenance Record page.
- We add click function with pass the CompleteTime parameter because we want to check if the data from API has the same amount of CompleteTime with the item chosen.

- In **maintenance-records.page.ts** we add the function to route the user to Maintenance Progress page with `CompleteTime` as passed parameter.

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

    export class MaintenanceRecordsPage implements OnInit {
    
        constructor (private navCtrl: NavController) { }
    
        getProgress (completeTime: string) {

          // set parameter of passed data
          let navigationExtras: NavigationExtras = {
            queryParams: {
              CompleteTime: completeTime
            }
          };

          this.navCtrl.navigateForward(['mt-progress'], navigationExtras);
        }
    }

- In **mt-progress.page.ts** we add the back end system to classify which data from Maintenance Progress and from Records page.

    import { ActivatedRoute } from '@angular/router';
    import { PreferenceManagerService } from 'src/app/services/PreferenceManager/preference-manager.service';
    import { StaticVariable } from 'src/app/classes/StaticVariable/static-variable';

    export class DetailedInformationPage implements OnInit {
    
        isFromRecords: boolean = false;
        
        constructor(
            private pref: PreferenceManagerService,
            private route: ActivatedRoute
        ) {  }
          
        async ngOnInit() {

            // store id from preference
            this.device_id = await this.pref.getData(StaticVariable.KEY__DEVICE_ID);

            // if data get from record page
            let tempCompleteTime: string;

            await this.route.queryParams.subscribe(params => {
                tempCompleteTime = params['CompleteTime'];

                if (tempCompleteTime !== undefined) {
                    this.isFromRecords = true;
                } else {
                    this.isFromRecords = false;
                }
            });

            if (this.isFromRecords) {

                let myMaintenance = await this.getDataForRecord(tempCompleteTime);
                let myMtResult = await this.getMtResult(myMaintenance[0]);

                this.items.push({
                    'data': myMtResult,
                    'estimateTime': 0
                });

            } else {

              // the rest is to get data from Maintenance Progress page
              // you can see on our Github here: https://github.com/ianjoseph2204/NTUST_SmartDispenser
              
            }
          }
    }

- We also use the `isFromRecords` condition to check if is it **true** then all related to bring the user to Login page because of session login system will be cut down.

    ionViewDidEnter() {

        if (!this.isFromRecords)
            this.checkSession();
    }
    
    updateCurrentSession () {

        if (!this.isFromRecords)
            this.checkSession();
    }

- In **mt-progress.page.html** we also need to add some condition to check if it from record then no need to display *Estimate Time*.

    <div *ngIf="!isFromRecords">{{reports.estimateTime}} hours later</div>
    <div *ngIf="isFromRecords"><b>Done!</b></div>

- See on the back end code before (.ts) that `isFromRecords` is the field variable with boolean type.
- It store if the user comes from Maintenance Records, or from Maintenance Progress.
- Result:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/34-02.gif" />
</center>
<br>

**note: I forgot to insert the picture until I realize on 2019.07.30 at 3:00 PM*

---

## Conclusion

- Nearby Dispenser page now has feature to direct the user to see more information about dispenser nearby.
- By adding this, user can see each of water temperature and location so the user has choice which dispenser nearby he wants to come over.
- From Maintenance Records page now every item can be seen the progress has been done in details with timestamps.
- It will direct the user to Maintenance Progress page which display the user the progress of every record steps ever had.

---

### Reference
- https://forum.ionicframework.com/t/how-to-pass-data-to-another-page/119413/3
- https://forum.ionicframework.com/t/how-to-pass-data-from-1-page-to-another-using-navigation-in-ionic-4/151060/2

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

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