# 21st June Report

This is the 17th study report of NTUST Internship program, before going to Taiwan. In previous report we have the UI design for Maintenance Progress page. From the API we can get the data needed and generate the progress into the list. In this report will cover the data called from API and make the progress into list. It still using static device_id (which pre-defined) inside the back end code (in .ts).

---

## Summary of this week

- Called the data from API using device_id.
- Use the data to generate the progress list

---

## Documentation

### 1. mt-progress page

#### 1.1. mt-progress.page.html

<!-- 
    ...
    before down there is same
-->

  <!-- estimate -->
  <div class="estimate">
    <div>
      <img 
        class="estimate-icon" 
        src="assets\cup-coffee\[e-mail]" 
        alt="alert"
      >
    </div>
    <div class="estimate-title">
      <b>Report submitted</b>
    </div>
    <div class="estimate-subtitle">
      Estimated completion time: XX hours later
    </div>
  </div>

  <!-- progress -->
  <div class="progress">

    <!-- make a list -->
    <ul>
      <li *ngFor="let item of items">

        <!-- left side the dot -->
        <div class="fa"></div>

        <!-- right side the content with left border -->
        <div class="fi">
          {{item.UploadTimeString}}
          <br>
          {{item.Status}}
          <!-- <br>
          .. more details ..
          <br>
          .. more details .. -->
        </div>

      </li>
    </ul>

  </div>

</ion-content>

#### 1.2. mt-progress.page.scss

Same, no change occured.

#### 1.3. mt-progress.page.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  /**
   * API url list
   */
  urlGetRepair: string = "https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Repair?Device_ID=";

  /**
   * Array for details from Get Repair Condition
   * - Status
   * - ErrorType
   */
  arrayStatus: string[] = [
    "Waiting for confirmation",
    "Send error information to Union",
    "The repairment has been completed，and waits for validation",
    "Complete"
  ];

  arrayErrorType: string[] = [
    "Button does not respond",
    "Unable to emit water",
    "Leaking water",
    "Screen not shown"
  ];

  /**
   * field variable
   */
  items: any = [];
  
  // dummy device_id
  device_id: string = "RB_09_01";

  constructor(
    public http: HttpClient
  ) { }

  ngOnInit() {
    this.main();
  }

  async main () {
    // get items from API
    this.items = await this.getRepairCondition(this.device_id);

    // sort items array from the latest
    await this.sortFunction(this.items);

    // test to console
    console.log(this.items);
  }

  async sortFunction (myArray) {
    await myArray.sort((a, b) => {
      let dateA = new Date(a['UploadTime']), dateB = new Date(b['UploadTime']);
  
      if (dateB > dateA)
        return 1;
      if (dateB < dateA)
        return -1;

      return 0;
    });
  }

  async getRepairCondition (device_id: string) {
    const myUrl = this.urlGetRepair + device_id;

    let myJson = await this.http.get(myUrl).toPromise();
    let myData = myJson['Data'];

    let returnJson: any = [];

    for (let i = 0 ; i < myData.length ; i++) {
      let status: number = myData[i]['Status'];
      let statusString: string = this.arrayStatus[status - 1];

      let errorType: number = myData[i]['ErrorType'];
      let errorTypeString: string;
      if (errorType == 5) {
        errorTypeString = myData[i]['Description'];
      } else {
        errorTypeString = this.arrayErrorType[errorType - 1];
      }

      let uploadTime = await this.getTime(myData[i]['UploadTime']);

      let result = {
        'UploadTime': uploadTime,
        'UploadTimeString': myData[i]['UploadTime'],
        'StatusNum': status,
        'Status': statusString,
        'ErrorTypeNum': errorType,
        'ErrorType': errorTypeString
      };

      returnJson.push(result);
    }

    return returnJson;
  }

  getTime (time) {
    // time passed is String, construct into Date format
    // time example from json: "2019-03-08 16:32:00"
    // format: YEAR-MONTH-DATEOFMONTH HOUR:MINUTE:SECOND
    
    // split into DATE form and HOUR form
    let splitTime = time.split(" ");

    let resultDate = splitTime[0];
    let resultHour = splitTime[1];

    // split DATE into YEAR, MONTH, and DATEOFMONTH
    let splitDate = resultDate.split("-");

    let resultYear = splitDate[0];
    let resultMonth = splitDate[1] - 1;
    let resultDateOfMonth = splitDate[2];

    // split HOUR into HOUR, MINUTE, and SECOND
    let splitHour = resultHour.split(":");

    let resultHourC = splitHour[0];
    let resultMinute = splitHour[1];
    let resultSecond = splitHour[2];

    // now we get every component to construct date from String
    let newDate = new Date(
      resultYear,
      resultMonth,
      resultDateOfMonth,
      resultHourC,
      resultMinute,
      resultSecond,
      0
    );

    return newDate;
  }

}

---

### 2. Result in mt-progress page

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

---

### 3. Using dummy data to generate "Good Progress"

It still not as we expected, I will try using the dummy data to generate the list like we want in mock up design. Before going to far, here is the log of array we have.

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

We going to make dummy data as same format as this so the result will as close to we expected. We will use in back end code here in `async main ()` function:

async main () {
    // get items from API

    // dummy data
    this.items = [
      {
        'UploadTime': new Date(2019, 3, 19, 11, 15, 0, 0),
        'UploadTimeString': "2019-04-19 11:15:00",
        'StatusNum': 4,
        'Status': this.arrayStatus[3],
        'ErrorTypeNum': 1,
        'ErrorType': this.arrayErrorType[0]
      },
      {
        'UploadTime': new Date(2019, 1, 13, 9, 15, 0, 0),
        'UploadTimeString': "2019-02-13 09:15:00",
        'StatusNum': 3,
        'Status': this.arrayStatus[2],
        'ErrorTypeNum': 1,
        'ErrorType': this.arrayErrorType[0]
      },
      {
        'UploadTime': new Date(2019, 0, 31, 15, 58, 0, 0),
        'UploadTimeString': "2019-01-31 15:58:00",
        'StatusNum': 2,
        'Status': this.arrayStatus[1],
        'ErrorTypeNum': 1,
        'ErrorType': this.arrayErrorType[0]
      },
      {
        'UploadTime': new Date(2019, 0, 15, 8, 37, 0, 0),
        'UploadTimeString': "2019-01-15 08:37:00",
        'StatusNum': 1,
        'Status': this.arrayStatus[0],
        'ErrorTypeNum': 1,
        'ErrorType': this.arrayErrorType[0]
      }
    ];

    // sort items array from the latest
    await this.sortFunction(this.items);

    // test to console
    console.log(this.items);
}

and the result in page:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/17-03.JPG" alt="3" style="max-height: 500px" />
</center>
</br>

---

## Notes
- I have consulted with Mr. Johnny who create the API that the design which I got from mock up has outdated with the changes of structure from the API
- This means that I have to talk with Ms. Annie, the mock up designer, to discuss about the design

---

## Some references
- Sorting an array in Ionic (https://stackoverflow.com/questions/49128743/how-to-sort-array-by-date-and-count-in-ionic-2)

###### tags: `pre-intern report`