# 5th July Report

## Progress

**09:00** Entering into lab.

### Add alert message

Change some code in **report-problem.page.html**

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

Change some code in **report-problem.page.ts**

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) {
      console.log("You must fill problem")
    } else {
      const reportProblems = {
        "File": this.File,
        "Device_ID": this.Device_ID,
        "Email": this.Email,
        "ErrorType": this.ErrorType,
        "Description": this.Description
      }

      console.log(reportProblems);

      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: (blah) => {
              console.log('Confirm Cancel: blah');
            }
          }
        ]
      });

      await thank.present();


      this.uploadForm = this.formBuilder.group({
        Email: ['AAAAA']
      });

      console.log(this.uploadForm.value);



      this.http.post("https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Report", JSON.stringify(this.uploadForm.value))
        .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: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Discard',
          cssClass: 'icon-color',
          handler: () => {
            console.log('Confirm Discard');
          }
        }
      ]
    });

    await alert.present();
  }

Result

<center>
<img src="https://imgur.com/LfhNEk6.png" stye="height" 300px>
</center>
<br>

<center>
<img src="https://imgur.com/DhuA6qz.png" stye="height" 300px>
</center>
<br>

### Post form-data format

Add in **module.ts** file

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ReportProblemPage]
})

Add in **page.ts**

import { FormBuilder, FormGroup } from '@angular/forms';

})
export class FormDataPage implements OnInit {

  SERVER_URL = "https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Report";
  uploadForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private httpClient: HttpClient) { }


ngOnInit() {
    this.uploadForm = this.formBuilder.group({
      profile: ['AAAA'],
      error: ['1']
    });
    const formData = new FormData();
    formData.append('Email', this.uploadForm.get('profile').value);
    formData.append('ErrorType', this.uploadForm.get('error').value);

    console.log(formData);
    this.httpClient.post<any>(this.SERVER_URL, formData).subscribe(
      (res) => console.log(res),
      (err) => console.log(err)
    );
  }

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