# <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
Sign in with Wallet
Connect another wallet