---
# System prepended metadata

title: '<center>19^th^ August, 2019</center>'
tags: [Daily Internship Documentation]

---

# <center>19^th^ August, 2019</center>

###### tags: `Daily Internship Documentation`
---
## 34^th^ Day of Internship

## Summary

Today I make the Submit button in the report repair page only appear when the description field is not null. I also try to send the repair result into the database.

URL:
* [**NTUST_RepairmanApp Github ver 2019.08.19**](https://github.com/ianjoseph2204/NTUST_RepairmanApp/tree/e8fb9cf027aaf28c57c2d3b2116dd4d5a34595be)

---
## Documentation

### 1. Static Variable Class
#### 1.1 static-variable.ts

1. Add a key for the mission number.
```typescript=13
    public static KEY__MISSION_NUMBER: "mission_number";
```

### 2. Home Page
#### 2.1 home.page.ts

1. Insert the mission number from the data in the *setDetailReportToPref()* method.
```typescript=135
    await this.pref.setData(StaticVariables.KEY__MISSION_NUMBER, data['MissionNumber'])
  }
```

### 3. Report Repair Page
#### 3.1 report-repair.page.ts

1. Import the DispenserApi service.
```typescript=5
mport {DispenserAPIService} from '../../services/DispenserAPI/dispenser-api.service';
```

Import the api to the constructor.
```typescript=26
  constructor(
      private alertCtrl: AlertController,
      private pref: PreferenceManagerService,
      private api: DispenserAPIService,
      private navCtrl: NavController) { }
```

2. Create variables for the mission number and the result description.
```typescript=20
  public mission_number: any;

  public result_description: string = '';
```

3. Get mission number from preference.
```typescript=39
  async getPrefData(){
    this.device_id = await this.pref.getData(StaticVariables.KEY__DEVICE_ID);
    this.device_type = await this.pref.getData(StaticVariables.KEY__DEVICE_TYPE);
@ -35,8 +43,12 @@ export class ReportRepairPage implements OnInit {
    this.device_building_position = await this.pref.getData(StaticVariables.KEY__DEVICE_BUILDING_LOC);
    this.device_placement_position = await this.pref.getData(StaticVariables.KEY__DEVICE_PLACEMENT_LOC);
    this.problem_description = await this.pref.getData(StaticVariables.KEY__PROBLEM_DESCRIPTION);
    this.mission_number = await this.pref.getData(StaticVariables.KEY__MISSION_NUMBER)
  }
```

4. Create a function for the submit button activity.
```typescript=106
  /**
   * Send the report repair data into database, show alert, & go back to the Home page.
   */
  async submitButton(){

    console.log(this.result_description);

    await this.api.repairCompleteReport(this.fileImage, this.mission_number, this.result_description);

    let alert: any;

    alert = await this.alertCtrl.create({
      mode: "ios",
      header: 'Submission Success!',
      buttons: [
        {
          text: 'OK',
          handler: () => {
          }
        }
      ]
    });

    await alert.present(); //Display the alert message

    this.backButton();
  }
```

#### 3.2 report-repair.page.html

1. Show the Submit button when the repair description field is not null.
```htmlmixed=9
<span *ngIf="result_description!=''" class="submit-button" (click)="submitButton()">Submit</span>
```

2. Clear the dispenser position information when the preference is null.
```htmlmixed=32
    <span *ngIf="device_building_position!=null && device_placement_position!=null" class="detail-information">{{device_building_position}}, {{device_placement_position}}</span>
    <span *ngIf="device_building_position==null && device_placement_position==null" class="detail-information"> </span>
```



---
## Result

![](https://i.imgur.com/BIkgsud.gif)
