# 8st July Report

## Progress

**09:15** Entering the BMW lab.

### Change POST to format-data and Add input file

Finish, I can upload data to database in format-data and i can upload image to. But i can only upload 1 image. I add some logic in alert message when user fill report problem incorect and POST when user want to know status of dispenser.

**report-problem.page.ts**

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AlertController } from '@ionic/angular';
import { FormBuilder, FormGroup } from '@angular/forms';

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

  constructor(public alertController: AlertController, private http: HttpClient, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.uploadForm = this.formBuilder.group({
      image: [''],
    });
  }

  uploadForm: FormGroup;

  File: any = [];
  Device_ID: string = "MA_B1_01";
  Email: string = "[e-mail]";
  ErrorType = 0;
  Description: string = '';

  problems = [
    { problem: 'Button does not respond' },
    { problem: 'Unable to water' },
    { problem: 'Leaking water' },
    { problem: 'Screen not shown' },
    { problem: 'Other' }
  ];

  updateTrack: boolean = false;

  public selected: string;
  public type;

  public toggle(selected, type) {
    this.ErrorType = type + 1;
    if (type != 4) {
      this.Description = '';
    }
    for (let index = 0; index < this.problems.length; index++) {
      if (this.problems['problem'] != selected['problem']) {
        this.problems[index]['isChecked'] = null;
      }
    }
  }

  async submit() {
    if (this.ErrorType == 0) {
      const error = await this.alertController.create({
        mode: "ios",
        header: 'Dispenser problem is incorret',
        message: 'Please choose one of the problems above!',
        buttons: [
          {
            text: 'OK',
            handler: () => {
              console.log('Confirm Cancel: Ok');
            }
          }
        ]
      });
      await error.present();


    } else {

      if ((this.Description == '') && (this.ErrorType == 5)) {
        const error = await this.alertController.create({
          mode: "ios",
          header: 'Dispenser problem is left blank',
          message: 'Please fill the description when choose other option!',
          buttons: [
            {
              text: 'OK',
              handler: () => {
                console.log('Confirm Cancel: Ok');
              }
            }
          ]
        });
        await error.present();

      } else {

        const reportProblems = new FormData();
        reportProblems.append('File', this.uploadForm.get('image').value);
        reportProblems.append('Device_ID', String(this.Device_ID));
        reportProblems.append('Email', String(this.Email));
        reportProblems.append('ErrorType', String(this.ErrorType));
        reportProblems.append('Description', String(this.Description));

        const thank = await this.alertController.create({
          mode: "ios",
          header: 'Thank you for your assistance!',
          message: 'We have received a problem report',
          buttons: [
            {
              text: 'OK',
              handler: () => {
                console.log('Confirm Cancel: Ok');
              }
            }
          ]
        });
        await thank.present();

        this.http.post<any>("https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Report", reportProblems)
          .subscribe(data => {
            console.log(data);
          }, error => {
            console.log(error);
          });
        if (this.updateTrack == true) {
          let updateData = {
            'Email': this.Email,
            'Device_ID': this.Device_ID,
            'Status': 1
          }
          this.http.post<any>("https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Track", updateData)
            .subscribe(data => {
              console.log(data);
            }, error => {
              console.log(error);
            });
        }

      }
    }
  }
  onKey(event: any) {
    for (let index = 0; index < this.problems.length; index++) {
      this.problems[index]['isChecked'] = null;
    }
    this.problems[4]['isChecked'] = 1;
    this.ErrorType = 5;
  }

  async AlertConfirm() {
    const alert = await this.alertController.create({
      mode: "ios",
      header: 'Dicard Editing?',
      message: 'If you go back now, you will lose editing.',
      buttons: [
        {
          text: 'Cancel',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Discard',
          cssClass: 'icon-color',
          handler: () => {
            console.log('Confirm Discard');
          }
        }
      ]
    });

    await alert.present();
  }

  onFileSelect(event) {

    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.uploadForm.get('image').setValue(file);
    }
  }

}

**report-problem.page.html**

<ion-content>
  <div class="header">
    <div class="overlay header-inside">

      <div class="header-inside--icon-left float-left">
        <img class=" icon" src="assets/acuo-icons/[e-mail]" alt="acuo-icons1">
      </div>

      <div class="header-inside--title-center float-left">
        <img class="icon avatar" src="assets\acuo-avatar\[e-mail]" alt="acuo-avatar1">
        <h5>Report problems</h5>
      </div>


      <div class="header-inside--icon-right float-left">
        <img class="icon" src="assets\cancel\[e-mail]" alt="acuo-cancel1" (click)="AlertConfirm()">
      </div>

    </div>
  </div>

  <ion-list padding>

    <ion-item lines="none" *ngFor="let problemName of problems; let i = index; let j = last;">
      <ion-label>{{problemName['problem']}}</ion-label>
      <ion-checkbox slot="start" color="medium" [(ngModel)]="problemName['isChecked']" (click)="toggle(problemName, i)">
      </ion-checkbox>

      <ion-input style="border-bottom: 1px solid grey" *ngIf="j" [(ngModel)]="Description" (keyup)="onKey($event)">
      </ion-input>
    </ion-item>

    <div class="imageContainer">
      <h4 lines="none">
        Upload image optional
      </h4>

      <div class="image-upload">
        <label for="file-input">
          <img src="assets\upload-image\upload.png" class="uploadPhoto" />
        </label>
        <input id="file-input" accept="image/*" type="file" (change)="onFileSelect($event)" />
      </div>

    </div>

    <section>
      <ion-button expand="block" ion-button (click)="submit()">Submit</ion-button>
    </section>

    <ion-item lines="none">
      <ion-checkbox [(ngModel)]="updateTrack" slot="start" mode="ios" color="medium"></ion-checkbox>
      <ion-label>Tell me when the repair is complete</ion-label>
    </ion-item>


  </ion-list>

</ion-content>

**report-problem.page.css**

ion-content {
    --background: #FFFFFF;
    --color: #000000;
}

.header {
    background-image: url("https://blog.tiket.com/wp-content/uploads/Gambar-Pemandangan-Alam-Terindah-Danau-Toba.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFFFFF;
    overflow: auto;
}

.header-inside {
    padding: 15px;
    overflow: auto;
}

.header-inside--icon-left {
    width: 15%;
    left: 0;
    text-align: left;
    height: 100%;
}

.header-inside--title-center {
    width: 70%;
    text-align: center;
    height: 100%;
    padding-top: 50px;
    padding-bottom: 10px;
}

.header-inside--icon-right {
    width: 15%;
    right: 0;
    text-align: right;
    height: 100%;
}

.float-left {
    float: left;
}

.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    background-color: rgba($color: #000000, $alpha: 0.5);

}

.uploadPhoto {
    display: block;
    height: 75px;
    width: 75px;
    opacity: 0.5;
    margin: 10px auto;

}

.imageContainer {
    border: gray;
    border-style: dashed;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 30px;
}

.image-upload>input {
    display: none;
}

### Result

**Report Problem Page**
<center>
<img src="https://imgur.com/QlnKJO5.png" stye="height" 300px>
</center>
<br>

**Upload Image**
<center>
<img src="https://imgur.com/BL6cp2R.png" stye="height" 300px>
</center>
<br>

**Image in Database**
<center>
<img src="https://imgur.com/a4XcqHp.png" stye="height" 300px>
</center>
<br>

**Submit When Blank**
<center>
<img src="https://imgur.com/MzYBF9D.png" stye="height" 300px>
</center>
<br>

**Submit When Other Empty**
<center>
<img src="https://imgur.com/ms8o6Ds.png" stye="height" 300px>
</center>
<br>

**04.30** Research how to show choosen image, delete it, and limit the upload.
**05.30** Living the lab.

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