# 4th July Report

## Progress

**09:00** Entering into lab.

### Update HackMD and Trello from 1st to 3rd July

- HackMD Finish.
- Trello Finish.

**10:20** Testing Upload image in ionic.

### Testing Upload Image in Ionic
- Able to solve bug in tutorial.
- But, failed to upload because use cordova library. So i will find tutorial for angular library.

**13:00** Improving report problem page.

### Improving Report Problem Page
- Change json file to send
- Able to use fill logic in form
- Failed to upload because need form data format not json. So i will research it tomorrow.

**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>Maintenance records</h5>
      </div>

      <div class="header-inside--icon-right float-left">
        <img class="icon" src="assets\cancel\[e-mail]" alt="acuo-cancel1">
      </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>

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

    <ion-item lines="none">
      <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>

**report-problem.page.scss**

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);
}

**report-problem.page.ts**

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

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

  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' }
  ];

  public selected: string;
  public type;

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  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);

      this.http.post("https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Report", JSON.stringify(reportProblems))
        .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;

  }

}

Error Message i get
<center>
<img src="https://imgur.com/fvrZ28t.png" stye="height" 300px>
</center>
<br>

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