---
# System prepended metadata

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

---

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

###### tags: `Daily Internship Documentation`
---
## 33^rd^ Day of Internship

## Summary

Today I fix some UI that's not following Mrs. Annie design. I also create a function to upload the images into the webpage.

URL:
* [**NTUST_RepairmanApp Github ver 2019.08.16**](https://github.com/ianjoseph2204/NTUST_RepairmanApp/tree/13385cc5fc8b072e2b8232a2571dc3cf204bf2c1)

---
## Documentation

### 1. Report Repair Page
#### 1.1 report-repair.page.ts

1. Create a function to upload an image.

```typescript=44
  /**
   * Method to add image
   */
  async onFileSelect(event: any, index: number) {

    console.log(index);

    // Limit size image to 10 Mb
    if (event.target.files[0].size <= 10485760) {

      // Check image length, image cannot empty
      if (event.target.files.length > 0) {
        this.fileImage[index] = event.target.files[0];

        let reader = new FileReader();

        // Read file as data url
        reader.readAsDataURL(event.target.files[0]);

        // Called once readAsDataURL is completed
        reader.onload = (event) => {
          this.urlImage[index] = reader.result;
          // this.imageIndex++;
        }
      }

    } else {

      // Send message if data is to big
      const tooBig = await this.alertCtrl.create({
        mode: "ios",
        header: 'File Size is to Big',
        message: 'Please upload file below 10 Mb!',
        buttons: [
          {
            text: 'OK',
            handler: () => {
              console.log('Confirm Cancel: Ok');
            }
          }
        ]
      });
      await tooBig.present();
    }
  }
```

2. Create a function to delete an image.
```typescript=90
  /**
   * @param index is number image uploaded by user
   * Method to rearrange array if user delete the image
   */
  async delete(index: number) {

    this.fileImage[index] = null;
    this.urlImage[index] = null;
  }
```

#### 1.2 report-repair.page.html

1. Edit the span for the back Button, add a Submit button in it.
```htmlmixed=5
        <span class="back-button" (click)="backButton()">
          <ion-icon style="zoom: 1.2;" name="ios-arrow-back"></ion-icon>
        </span>
        <span class="report-repairing-text">Report repairing progress</span>
        <span class="submit-button">Submit</span>
```

2. Add a div for the jellyfish icon.
```htmlmixed=17
  <div class="icon-space">
    <div class="icon-jellyfish">
      <img src="assets\acuo-avatar\group@3x.png" alt="avatar" style="border-radius: 50px;">
    </div>
  </div>
```

3. Edit the div for upload the first image.
```htmlmixed=75
      <span class="image-block">
        <!--The display upload picture box-->
        <div *ngIf="urlImage[0] === null">
          <label for="input-file-0">
            <div class="image-upload-space">
              <div class="camera-icon">
                <ion-icon name="camera" size="large"></ion-icon>
              </div>
            </div>
          </label>

          <input id="input-file-0" accept="image/*" type="file" (change)="onFileSelect($event, 0)" />
        </div>

        <!--The display of the picture-->
        <div *ngIf="urlImage[0] !== null">
          <div class="image-upload-space">
            <img [src]="urlImage[0]" class="imageUrl">
          </div>
          <div class="delete" (click)="delete(0)"><u><b>Delete</b></u></div>
        </div>
      </span>
```

4. Edit the div for upload the sedond image.
```htmlmixed=99
      <span class="image-block">
         <!--The display upload picture box-->
        <div *ngIf="urlImage[1] === null">
          <label for="input-file-1">
            <div class="image-upload-space">
              <div class="camera-icon">
                <ion-icon name="camera" size="large"></ion-icon>
              </div>
            </div>
          </label>

          <input id="input-file-1" accept="image/*" type="file" (change)="onFileSelect($event, 1)" />
        </div>

        <!--The display of the picture-->
        <div *ngIf="urlImage[1] !== null">
          <div class="image-upload-space">
            <img [src]="urlImage[1]" class="imageUrl">
          </div>
          <div class="delete" (click)="delete(1)"><u><b>Delete</b></u></div>
        </div>
      </span>
```

5. Edit the div for upload the thrid image.
```htmlmixed=122
      <span class="image-block">
        <!--The display upload picture box-->
        <div *ngIf="urlImage[2] === null">
          <label for="input-file-2">
            <div class="image-upload-space">
              <div class="camera-icon">
                <ion-icon name="camera" size="large"></ion-icon>
              </div>
            </div>
          </label>

          <input id="input-file-2" accept="image/*" type="file" (change)="onFileSelect($event, 2)" />
        </div>

        <!--The display of the picture-->
        <div *ngIf="urlImage[2] !== null">
          <div class="image-upload-space">
            <img [src]="urlImage[2]" class="imageUrl">
          </div>
          <div class="delete" (click)="delete(2)"><u><b>Delete</b></u></div>
        </div>
      </span>
```

#### 1.3 report-repair.page.scss

1. Edit the content of the header.
```css=16
.back-button, .report-repairing-text, .submit-button{
    bottom: 50%;
    margin-bottom: -8.5px;
}
```

2. Edit the back button class.
```css=21
.back-button{
    position: relative;
    width: 20px;
    height: 20px;
    left: 10px
}
```

3. Create a class for submit button.
```css=34
.submit-button{
    position: absolute;
    font-size: 16px;
    right: 15px;
}
```

4. Edit the background color of the ion-content.
```css=76
ion-content{
    --ion-background-color: #f3f3f3;
    min-width: 350px;
}
```

5. Edit the border of the ion-card.
```css=81
ion-card{
    box-shadow: none !important;
    --background: white;
}
```

6. Create classes for the jellyfish divs.
```css=86
.icon-space{
    position: relative;
    left: 50%;
    margin-left: -30px;
    height: 30px;
    width: 100%;
    z-index: 1;
}

.icon-jellyfish{
    position: absolute;
    height: 60px;
    width: 60px;
    bottom: -40px;
}
```

7. Create a class for the div>input.
```css=137
div>input{
    display: none;
}
```

8. Create a class for delete image button.
```css=157
.delete {
    text-align: center;
    color: red;
    margin-bottom: 5px;
    opacity: 0.5;
}
```

9. Create a class to set the size of the uploaded image.
```css=164
.imageUrl {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}
```
---
## Result

![](https://i.imgur.com/hB1DlIB.jpg)
