# 22nd July Report

## Progress

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

---

Time: **10:36**
In case of in log says **ERR_SPDY_PROTOCOL_ERROR**, this is either the browser error or the internet connection problem, we can apply one of this way to try to fix the problem:
- Update browser version.
- Restart connection, or use the good one.
- Temporary shut down the antivirus, directly to Avast (https://support.google.com/chrome/forum/AAAAP1KN0B0sfAqeo4hDy8/?hl=en&gpf=%23!topic%2Fchrome%2FsfAqeo4hDy8).
- Flush DNS and renew IP in desktop browser:
- Open command prompt/terminal line
- ipconfig /flushdns
- ipconfig release
- ipconfig renew
- Remove cache and cookies for the website, can be done in browser settings.
- Clean all cache and cookies, can be done with some tools like CCleaner or in browser settings.

---

### Loading bar when load data from API

Time: **11:22**
- The purpose of using this feature is to show the user whether the page is loading something in the background and show when it's done.
- Source of learn:
- https://www.freakyjolly.com/ionic-4-adding-ion-loading-web-component-in-ionic-4-angular-application/
- https://ionicframework.com/docs/api/loading-controller
- https://github.com/ionic-team/ionic/issues/14800
- Loading bar can be created using Loading Controller, an angular component provided to show and hide a loading progress, in other words this will make a loading screen.
- It can be controlled using time or not, in this case we will control it without time and using flow of code.
- Loading controller [**cannot be implement using service**](https://github.com/ionic-team/ionic/issues/14800#issuecomment-406293577) so each page should has the same method (import library, implement in constructor, create one field variable and two function.
- The flow will be:
- Show the loading screen.
- Load the data from API.
- Process the data.
- Data is ready.
- Dismiss/remove the loading screen.
- Display the data to page.
- In testing, we will separate the function to create and show with the function to dismiss/remove the loading screen.
- In **nearby.page.ts**:

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

export class NearbyPage implements OnInit {

    constructor (private loadCtrl: LoadingController) { }
    
    // field variable
    makeLoading: any;

    // first function
    async createLoadCtrl () {

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

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

    // second function
    async dismissLoadCtrl () {

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

- Everytime want to create and display the loading screen, the `createLoadCtrl()` function should be called and when the time want to dismiss/remove it just call the `dismissLoadCtrl()` function.

- The display in the page:
- Create and show

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

- About to dismiss

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

- Pages will have this feature with condition:
- Dashboard, when loading the preference and background image.
- Nearby dispenser, when loading the data.
- Maintenance record, when loading the data.
- Maintenance progress, when loading the data.
- Login, when doing login proc
- Register, when doing register process.
- Report problem, when doing report process.
- Detail information, when loading the data.

---

### Segment view for multiple report in Maintenance Progress page

Time: **13:32**
- This case is when the user report multiple problems, means more than one problem, for one dispenser.
- Using ion-slider, it will display multiple reports to side-by-side with the user can choose by slide the screen to see his reports.
- The purpose is to display multiple reports in progress by the same user in same dispenser without stack them in one page to bottom.
- Stacked reports will have display like this

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/30-03.gif" style="max-height: 400px" />
</center>
<br>

Time: **16:02**
- With ion-slides we can have multiple container with slide or drag to access the from one to another container.
- It also generate the slide-pager, a dot-like to identify how many container in slide.
- Because of the structure of the data to display has nested array so we need nested \*ngFor to display, below here is the example how in Maintenance Progress page use.
- How to write example code:
- In **mt-progress.page.html**

    <ion-slides mode="ios" pager="true" scrollbar="true">
    
      <!-- generate multiple reports -->
      <ion-slide *ngFor="let reports of items">

          <!-- make a list -->
          <ul>

            <!-- generate steps of progress -->
            <li *ngFor="let item of reports">

              <!-- insert some data -->
              {{ item.ExampleTitle }}
              {{ item.ExampleSubtitle }}

            </li>

          </ul>     

      </ion-slide>
      
    </ion-slides>

- In **mt-progress.page.ts**

    export class MtProgressPage implements OnInit {
        
        // items will be the main array on HTML
        items: any = [];
        
        ngOnInit () {
        
            // create a set of items
            for (let i = 0 ; i < 3 ; i++) {
                
                // create empty array
                let exampleArray = [];
                
                for (let j = 0 ; j < 5 ; j++) {
                    
                    let data = {
                        'ExampleTitle': i,
                        'ExampleSubtitle': "I am " + i
                    };

                    // store in exampleArray
                    exampleArray.push(data);
                }
                
                // store in items array
                items.push(data);
            }
        }
    }

- In **mt-progress.page.scss**

    .swiper-slide {
        display: block;
    }

    ion-slide {
        text-align: left;
    }

    ion-slides {
        --bullet-background: #3b3b3b;
        --bullet-background-active: #3880ff;
    }

- Turns out, with real data and code it will display like this:

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

---

### Furthermore progress

Time: **17:08**
Things should be add in next progress:
- Filter the data get from the API (get dispenser repair condition) if the status is "Complete" (7) then the data no longer added into list when comparing current local date with Complete Time from API.
- Estimate completion time for each maintenance progress is around 3 days/72 hours work, gives notify in the page that displayed time is in workdays.
- If the estimate time has over than 3 days but status still not meet "Complete"(7) yet then it should display **Overtime** or something, this must be consulted what parameter should be displayed.

---

## Conclusion
- Loading screen is use to identify the user that the page is still load some data from API before display them.
- Making a loading screen in Ionic using Loading Controller, it can be controlled when to start and when to dismiss.
- To display multiple maintenance progress for same user and same dispenser, using Ionic Slides which make multiple container that using slide/drag to move one to another.
- For next part before compile with main project, should: (1) implement the loading screen in all pages when loading the data, (2) filter list with time for maintenance progress, (3) estimate completion time in maintenance progress, (4) session logout in dashboard page, (5) maybe login button in dashboard page but this out of main design, and (6) lazy loading for images when loaded from API.

---

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

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