# 30th July Report

## Progress

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

---

### Creating service for API on Repairman App

Time: **10:35**
- Here is the list of API that we use in Repairman App after adjustment from Mr. Johnny on 2019, July 29th :
- Get dispenser repair condition, use to get data about dispenser under maintenance.
- Get dispenser detail, use to get detail about the dispenser.

Time: **11:50**
- Add functions to **dispenser-api.service** to get dispenser detail and repair condition from API

async getDispenserDetail (device_id: string) {
  
  let url = this.urlDispenserDetail + device_id;

  let returnValue = {
    "Device_ID": device_id,
    "Building": "",
    "Position": "",
    "Type": ""
  }

  await this.http.get(url).toPromise()
    .then((result) => {
      returnValue = result['Data'];
    }, () => {
      console.error("Promise rejected: unable to get dispenser detail!");
    })
    .catch((e) => {
      console.error("Function error: on getDispenserDetail => " + e);
    });

  return returnValue;
}

async getDispenserRepairCondition (device_id: string) {
  
  let url = this.urlGetDispenserRepairCondition + device_id;

  let returnValue = [{}];

  await this.http.get(url).toPromise()
    .then((result) => {
      returnValue = result['Data'];
    }, () => {
      console.error("Promise rejected: unable to get dispenser repair condition!");
    })
    .catch((e) => {
      console.error("Function error: on getDispenserRepairCondition => " + e);
    });

  return returnValue;
}

- Add function to convert timestamp from API with format `YEAR-MONTH-DATEOFMONTH HOUR:MINUTE:SECOND` into JSON object format

convertApiTimeToJson (time: string) {
  // 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(" ");

    ////////////////////////////////////////////
    //  DATE PART                             //
  ////////////////////////////////////////////

  // resultDate = YEAR-MONTH-DATEOFMONTH
  let resultDate = splitTime[0];

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

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

    ////////////////////////////////////////////
    //  HOUR PART                             //
  ////////////////////////////////////////////

  // resultHour = HOUR:MINUTE:SECOND
  let resultHour = splitTime[1];

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

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

    ////////////////////////////////////////////
    //  CONSTRUCT DATE PART                   //
  ////////////////////////////////////////////

  // now we get every component to construct date into JSON format
  let newDate = {
    'Year': resultYear,
    'Month': resultMonth,
    'DateOfMonth': resultDateOfMonth,
    'Hour': resultHourC,
    'Minute': resultMinute,
    'Second': resultSecond
  };

  return newDate;
}

- Add more function to get mission data for an employee which separate into three parts.
- Mission Done, when the mission has been done by the repairman.

    async getAssignmentDone (device_id: string, employee_id: string) {

      // get data from RepairCondition
      let data = await this.getDispenserRepairCondition(device_id);
      let returnArray = [];

      // for every data will be filtered to get what have been done
      for (let i = 0 ; i < data.length ; i++) {

        // if data contains the employee id we need
        if (data[i]['Employee_ID'] === employee_id) {

          // if data contains status above-equal to 5 and has repair time done
          if (data[i]['Status'] >= 5 && data[i]['RepairDoneTime'] !== "") {

            returnArray.push(data[i]);
          }  
        }
      }

      return returnArray;
    }

- Mission Today, when mission is about today and should be done. (***Noted** that mission today using comparison about current date from Repairman App with RepairDoneTime to check if mission is valid*)

    async getAssignmentToday (device_id: string, employee_id: string, nowTime: string) {

      // get data from RepairCondition
      let data = await this.getDispenserRepairCondition(device_id);
      let returnArray = [];

      // for every data will be filtered to get what have been done
      for (let i = 0 ; i < data.length ; i++) {

        // if data contains the employee id we need
        if (data[i]['Employee_ID'] === employee_id) {

          // if data contains status = 5 and has repair time done
          if (data[i]['Status'] === 4 && data[i]['RepairDoneTime'] !== "") {

            let missionTime = this.convertApiTimeToJson(data[i]['RepairDoneTime']);
            let currentTime = this.convertApiTimeToJson(nowTime);

            // if data has same day as mission deadline
            if (
              missionTime['Year'] === currentTime['Year'] &&
              missionTime['Month'] === currentTime['Month'] &&
              missionTime['DateOfMonth'] === currentTime['DateOfMonth']
            ) {

              // if data is under the deadline time
              if (missionTime['Hour'] <= currentTime['Hour'] &&
                  missionTime['Minute'] <= currentTime['Minute'] &&
                  missionTime['Second'] <= currentTime['Second']
              ) {

                // put into data will be returned
                returnArray.push(data[i]);
              }
            }
          }  
        }
      }

      return returnArray;
    }

- Mission Next

    async getAssignmentNext (device_id: string, employee_id: string) {

      // get data from RepairCondition
      let data = await this.getDispenserRepairCondition(device_id);
      let returnArray = [];

      // for every data will be filtered to get what have been done
      for (let i = 0 ; i < data.length ; i++) {

        // if data contains the employee id we need
        if (data[i]['Employee_ID'] === employee_id) {

          // if data contains status = 4 but has repair time done
          if (data[i]['Status'] === 4 && data[i]['RepairDoneTime'] !== "") {

            returnArray.push(data[i]);
          }  
        }
      }

      return returnArray;
    }

---

### Implement into Repairman App dashboard

Time: **14:50**

- Below is the mock up design from Ms. Annie for dashboard on Repairman App.

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

- Below is the mock up design when items in dashboard are clicked and pop up the details.

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

- From **those** we can see that there are several attributes that we should get from the API, they are:
- client name
- client address
- mission time (repair done time)
- client phone
- client contact person (maintainer)
- machine type
- machine number
- error code (1-5)
- problem occur (description)
- notification time
- repairman (employee id)
- client number
- mission number

Time: **16:20**
- In here we are going to implement the concept above to dashboard, only on Today Mission because the data isn't as complex as the two others, Next Mission and Done Mission.
- On **home.page.ts** (the dashboard, only different name in project) create a dummy mission list.

export class HomePage {

    // field variable
    todayMissionList: any;
    todayDate: any;
    missionTodayDate: string;
    
    // constant array
    monthNameArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "Desember"];
    
    ngOnInit() {

      // initialize current date
      this.todayDate = new Date();
      this.missionTodayDate = (this.monthNameArray[this.todayDate.getMonth()] + " " + this.todayDate.getDate()).toUpperCase();    
      let tempArray = [];

      // create dummy item for today mission
      for (let i = 0 ; i < 3 ; i++) {

        let number = i + 1;
        let month = this.todayDate.getMonth() + 1;

        let item = {
          'ClientName': "Client No.00" + number,
          'ClientAddress': "Taipei, Keelung Rd. No. " + number,
          'MissionTime': this.todayDate.getFullYear() + "-" + month + "-" + this.todayDate.getDate() + " " + "23:59:59",
          'MissionTimeOnlyHour': "23:59",
          'ClientPhone': "[phone]" + number,
          'ClientContactPerson': "Mr. 00" + number,
          'MachineType': "UN-1321AG-" + number + "-L",
          'MachineNumber': "45670" + number,
          'ErrorCode': "1",
          'ProblemOccured': "Your Lie in April 1st",
          'NotificationTime': "2019-30-29 11:41:00",
          'Repairman': "198503302003121001",
          'ClientNumber': "13240" + number,
          'MissionNumber': "05"+ number
        };

        tempArray.push(item);
      }

      this.todayMissionList = {
        'Date': this.missionTodayDate,
        'Data': tempArray
      };
    }

}

- After implement the dummy data to the design, which **already created by Thariq** before, the result:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/35-03.JPG" style="max-width:250px" />
</center>
<br>

- Implement data using Angular import variable by `{{variableName}}`.
- For multiple data inside array using ngFor to get all items inside of an array.
- Implement multiple data using `*ngFor="let item of todayMissionList"` and each card will get data with `((item.variableName}}`.

- With using the dummy data, each item of dashboard page can be clicked and pass the data to get the details. When clicked, using ModalController will pop up the detail without route the user to another page instead overlay it on the same page.
- On **detail.page.html**

<ion-header class="background" no-border>

  <ion-item class="title" lines="none">
    <ion-title><span class="client-name">{{data.ClientName}}</span></ion-title>
    <ion-icon slot="end" mode="ios" name="arrow-down" (click)="dismiss()" style="cursor: pointer"></ion-icon>
  </ion-item>

</ion-header>

<ion-content class="background">

  <ion-list padding>

    <ion-item lines="none">
      <ion-label>
        <p class="item--title">TELEPHONE</p>
        <span class="item--detail">{{data.ClientPhone}}</span>
      </ion-label>
      <ion-button size="small">CALL</ion-button>
    </ion-item>

    <ion-item lines="none">
      <ion-label>
        <p class="item--title">CONTACT</p>
        <span class="item--detail">{{data.ClientContactPerson}}</span>
      </ion-label>
    </ion-item>

    <ion-item lines="none">
      <ion-label>
        <p class="item--title">ADDRESS</p>
        <span class="item--detail">{{data.ClientAddress}}</span>
      </ion-label>
      <ion-button size="small">MAP</ion-button>
    </ion-item>

    <ion-item lines="none">
      <ion-label>
        <p class="item--title">MACHINE TYPE</p>
        <span class="item--detail">{{data.MachineType}}</span>
      </ion-label>
    </ion-item>
    
    <ion-item lines="none">
      <ion-label>
        <p class="item--title">MACHINE NUMBER</p>
        <span class="item--detail">{{data.MachineNumber}}</span>
      </ion-label>
    </ion-item>

    <ion-item lines="none">
      <ion-label>
        <p class="item--title">ERROR CODE</p>
        <span class="item--detail">{{data.ErrorCode}}</span>
      </ion-label>
    </ion-item>
    
    <ion-item lines="none">
      <ion-label>
        <p class="item--title">PROBLEM</p>
        <span class="item--detail">{{data.ProblemOccured}}</span>
      </ion-label>
    </ion-item>

    <ion-item lines="none">
      <ion-label>
        <p class="item--title">NOTIFICATION TIME</p>
        <span class="item--detail">{{data.NotificationTime}}</span>
      </ion-label>
    </ion-item>
    
    <ion-item lines="none">
      <ion-label>
        <p class="item--title">REPAIRMAN</p>
        <span class="item--detail">{{data.Repairman}}</span>
      </ion-label>
    </ion-item>

    <ion-item lines="none">
      <ion-label>
        <p class="item--title">CLIENT NUMBER</p>
        <span class="item--detail">{{data.ClientNumber}}</span>
      </ion-label>
    </ion-item>
    
    <ion-item lines="none">
      <ion-label>
        <p class="item--title">MISSION NUMBER</p>
        <span class="item--detail">{{data.MissionNumber}}</span>
      </ion-label>
    </ion-item>

  </ion-list>
</ion-content>

- On **detail.page.scss**

ion-col {
    --ion-grid-column-padding: 0px;
}

ion-header {
    --ion-background-color: #259ed6;
}

ion-content {
    --ion-background-color: #259ed6;
}

ion-grid {
    --ion-grid-padding: 0px;
}

ion-item.title {
    --padding-top: 20px;
    --padding-start: 11px;
    --padding-end: 11px;
}

ion-button {
    --border-width: 0px;
}

.client-name {
    font-weight: bold;
    font-size: 24px;
    color: #ffffff;
}

.item--title {
    font-size: 14px;
    margin-bottom: 5px;
    color: rgba($color: #ffffff, $alpha: 0.75);
}

.item--detail {
    font-size: 16px;
    color: #ffffff;
}

- On **detail.page.ts**

import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';

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

  data: any;
  Arrived = false;
  inputCamera = false;


  constructor(
    public modalController: ModalController, 
    public navParams: NavParams
  ) {
    this.data = navParams.get('Data');
  }
}

- On back end code (.ts) we can see in Constructor that we get the passed data with `navParams`, remember that we pass the data with JSON object:

{
  'Date': this.missionTodayDate,
  'Data': tempArray
}

- Result:

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

---

## Conclusion
- Listing the API from Mr. Johnny and create service to handle the API for Repairman App.
- What has to be add furthermore: Authentication API, Report Done for repairman API.
- On Dashboard page, named Home page, for Repairman App has to receive data from API and create list of all attributes that should be displayed.
- Using dummy data to perform the design, Dashboard page on Today Mission can listing the mission and each of them can be clicked to get the details.

---

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

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