# <center>Maintenance Report Backend</center>

### API

From Johnny

**Method:GET**
**URL**

https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Maintenance?Device_ID={}

**Parameter**
|Name|Type|Example|Optional|
|-|-|-|-|-|
|Device_ID|<font color = "blue">String</font>|MA_B1_01|

**Response**

**ErrorType**
|Number|Meaning|
|-|-|
|1|<font color = "blue">Button does not respond</font>|
|2|<font color = "blue">Uable to water</font>|
|3|<font color = "blue">Leaking water</font>|
|4|<font color = "blue">Screen not shown</font>|
|5|<font color = "blue">Other</font>|

{
    "code": 200,
    "msg": "success",
    "success": "true",
    "result": "ok",
    "Data": [
        {
            "Device_ID": "T4_04_01",
            "ErrorType": 3,
            "Description": "Leaking water",
            "CompleteTime": "2019-01-02 24:00:00"
        },
        {
            "Device_ID": "T4_04_01",
            "ErrorType": 5,
            "Description": "Broken",
            "CompleteTime": "2019-01-09 24:00:00"
        },
        {
            "Device_ID": "T4_04_01",
            "ErrorType": 5,
            "Description": "No power supply",
            "CompleteTime": "2019-03-19 24:00:00"
        }
    ]
}

### Implementation
Type
`ionic g service rest`

Type in rest.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
  Generated class for the RestProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class RestProvider {

  apiUrl = 'https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Maintenance?Device_ID=T4_04_01';

  constructor(public http: HttpClient) {
    //console.log('Hello RestProvider Provider');
  }

  getDatas() {
    return new Promise(resolve => {
      this.http.get(this.apiUrl).subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }
}

Type in page.ts

import { Component } from '@angular/core';
import { RestProvider } from '../../providers/rest/rest'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  datas: any;

  constructor(public restProvider: RestProvider) {
    this.getDatas();
  }

  getDatas() {
    this.restProvider.getDatas()
      .then(data => {
        this.datas = data;
        console.log(this.datas);
      });
  }


}

Type in page.html

<ion-header>
  <div class="header">
    <div class="topleft">
      <img src="assets/icon/[e-mail]" height="40px" width="76px">
    </div>
    <div class="topright">
      <img src="assets/icon/[e-mail]" height="30px" width="30px">
    </div>
    <div class="center">
      <img src="assets/icon/group-6.png" height="54px" width="54px">
      <p class="Text">Maintenace records</p>
    </div>
  </div>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let dataDevice of datas?.Data">
      <ion-avatar slot="start" *ngFor="let dataDevice of datas?.Data">
        <img src="assets/icon/[e-mail]">
      </ion-avatar>
      <ion-label>
        <p>{{dataDevice.CompleteTime}}</p>
        <h4>{{dataDevice.ErrorType}}</h4>
        <p>{{dataDevice.Description}}</p>
      </ion-label>
      <ion-icon name="arrow-forward"></ion-icon>
    </ion-item>
  </ion-list>



</ion-content>

`page.scss` file is same

### Result


### Note
I need to add a few more things
First, I had to sort last month in UI, only the day was displayed.
Secondly I need to change the numeric code to the type of damage.
Third, when looping to display data from the API there is a code that is not displayed.