# <center> Back End of Report Problem Page</center>

## Code

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>
  <ion-list>
    <ion-item>
      <ion-checkbox slot="start" color="medium" [(ngModel)]="prob1"></ion-checkbox>
      <ion-label>Ice water temperature is too high</ion-label>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" color="medium" [(ngModel)]="prob2"></ion-checkbox>
      <ion-label>Unable to water</ion-label>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" color="medium" [(ngModel)]="prob3"></ion-checkbox>
      <ion-label>Leaking water</ion-label>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" color="medium" [(ngModel)]="prob4"></ion-checkbox>
      <ion-label>Screen not shown</ion-label>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" color="medium" [(ngModel)]="other.check"></ion-checkbox>
      <ion-label>Other</ion-label>
      <ion-input [(ngModel)]="other.descrption"></ion-input>
    </ion-item>
    <ion-button expand="block" ion-button (click)="send()">Block Button</ion-button>
    <ion-item>
      <ion-checkbox slot="start" mode="ios" color="medium" [(ngModel)]="tellRepair"></ion-checkbox>
      <ion-label>Tell me when the repair is complete</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

typescript

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private http: HttpClient) { }

  prob1: false;
  prob2: false;
  prob3: false;
  prob4: false;
  other = { check: false, descrption: {} };
  tellRepair: false;

  async send() {
    let token = "";
    const { prob1, prob2, prob3, prob4, other, tellRepair } = this;
    const problems = {
      "Ice water temperature is too high": prob1,
      "Unable to water": prob2,
      "Leaking water": prob3,
      "Screen not shown": prob4,
      "Other": other,
      "Tell me when the repair is complete": tellRepair
    }

    let httpOption = await {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': token
      })
    };
    console.log(httpOption);

    this.http.post("https://smartcampus.et.ntust.edu.tw:5425/reportProblem", problems, httpOption)
      .subscribe(data => {
        console.log(data);
      }, error => {
        console.log(error);
      });

  }
}

CSS is same

### Note
Still need testing