# 1st August Report
## Progress
Time: **08:55**
Event: Entering the lab
---
### Design the front page on Done Mission
Time: **10:12**
- It's located in Dashboard page, for third fragment of Repairman App which is use to display all the repairment has been done by the repairman and show the photos of his report.
- Using the same data from Future Mission to get display of different time of repairment with multiple work.
- For images which displayed, using pre-defined images which loaded from `assets` folder, call them locally on HTML code.
- In **home.page.html**
```htmlmixed=
<ion-app>
<ion-content padding scroll-y="false">
<ion-slides [options]="slideOpts" #slides (ionSlideDidChange)="slideChanges()">
<!-- DONE SLIDE -->
<ion-slide>
<ion-content>
<ion-list class="ion-list--no-background" *ngFor="let missionDay of doneMissionList">
<ion-item class="ion-item--no-background" lines="none">
<ion-label>
<h2 class="subtitle">{{missionDay.DayString.toUpperCase()}}</h2>
<span class="subtitle--date">{{missionDay.DateString.toUpperCase()}}</span>
</ion-label>
</ion-item>
<ion-card class="card-done" *ngFor="let missionItem of missionDay.Data">
<ion-item lines="none">
<ion-label class="card--title">
<span>{{missionItem.ClientName}}</span>
</ion-label>
<ion-label class="card--title-time">
<span>{{missionItem.MissionTimeOnlyHour}}</span>
</ion-label>
</ion-item>
<ion-item lines="none" class="address--done">
<ion-label class="card--address card--address--only-done">
<span>{{missionItem.ClientAddress}}</span>
</ion-label>
</ion-item>
<div class="card--done">
<img src="assets\acuo-avatar\group-6@3x.png" alt="image-1" class="card--done--image-report">
<img src="assets\acuo-avatar\group-6@3x.png" alt="image-1" class="card--done--image-report">
<img src="assets\acuo-avatar\group-6@3x.png" alt="image-1" class="card--done--image-report">
</div>
</ion-card>
</ion-list>
<br>
</ion-content>
</ion-slide>
</ion-slides>
</ion-content>
</ion-app>
```
- We can see in `<div class="card--done">` this is the container of the images which will load the report image from database after repairman done his job and submit a report include images.
- Like in the code, images uploaded maximum 3 items.
- To adjust some style in height, there are some changes in stylesheet (.scss) for line spacing between `ion-label` for address and container of images.
- In **home.page.scss**
```css=
.card--address--only-done {
margin-bottom: -8px;
}
.address--done {
--min-height: 32px;
}
.card--done {
padding: 0px 16px;
margin-bottom: 16px;
height: auto;
overflow: auto;
}
.card--done--image-report {
float: left;
max-height: 50px;
width: auto;
margin-right: 5px;
display: block;
}
```
- Result:
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/37-01.JPG" style="max-width:250px" />
</center>
<br>
---
### Using base64 image to display in HTML
Time: **13:42**
- The image which is stored in database are `base64` form so it should converted first before display.
- Based from [here](https://forum.ionicframework.com/t/converting-base64-string-to-img-src/129666) to convert `base64` string to image is by adding `data:image/jpeg;base64,` in front of the string then we can display it using Angular import image
`<img [src]="source-image" />`
- Changes in two files:
- HTML (.html), changes on how to import image using base64.
```htmlmixed=
<div class="card--done">
<img
*ngFor="let images of missionItem.ReportImages; let i=index"
[src]="images.ReportImage"
alt="image-{{i+1}}"
class="card--done--image-report" />
</div>
```
- Typescript (.ts), in here the base64 string separated because it too long.
```typescript=
export class HomePage {
doneMissionList = [];
ngOnInit() {
this.setDataDone();
}
setDataDone () {
// initialize
let data = [ ... ];
this.doneMissionList = data;
}
}
```
- For the testing purpose, using the dummy data of JSON and base64 image.
- JSON for data example
```json=
{
[
{
"DateString": "July 24",
"DayString": "Wednesday",
"Date": "...",
"Data": [
{
"ClientName": "Client No. 001",
"ClientAddress": "Taipei, Keelung Rd. No. 01",
"MissionTime": "2019-07-01 12:00:00",
"MissionTimeOnlyHour": "12:00",
"ClientPhone": "+886 123 345 901",
"ClientContactPerson": "Mr. 010",
"MachineType": "UN-1321AG-1-L",
"MachineNumber": "456701",
"ErrorCode": "1",
"ProblemOccured": "Your Lie in April 1st",
"NotificationTime": "2019-30-29 11:41:00",
"Repairman": "198503302003121001",
"ClientNumber": "132401",
"MissionNumber": "051",
"ReportIndex": 3,
"ReportImages": [
{
"ReportImage": this.imagetest
},
{
"ReportImage": this.imagetest
},
{
"ReportImage": this.imagetest
}
]
},
{
"ClientName": "Client No. 002",
"ClientAddress": "Taipei, Keelung Rd. No. 02",
"MissionTime": "2019-07-01 18:00:00",
"MissionTimeOnlyHour": "18:00",
"ClientPhone": "+886 123 345 902",
"ClientContactPerson": "Mr. 020",
"MachineType": "UN-1321AG-1-L",
"MachineNumber": "456701",
"ErrorCode": "1",
"ProblemOccured": "Your Lie in April 1st",
"NotificationTime": "2019-30-29 11:41:00",
"Repairman": "198503302003121001",
"ClientNumber": "132402",
"MissionNumber": "052",
"ReportIndex": 2,
"ReportImages": [
{
"ReportImage": this.imagetest
},
{
"ReportImage": this.imagetest
}
]
}
]
},
{
"DateString": "August 3",
"DayString": "Saturday",
"Date": "...",
"Data": [
{
"ClientName": "Client No. 003",
"ClientAddress": "Taipei, Keelung Rd. No. 03",
"MissionTime": "2019-07-01 15:00:00",
"MissionTimeOnlyHour": "15:00",
"ClientPhone": "+886 123 345 903",
"ClientContactPerson": "Mr. 030",
"MachineType": "UN-1321AG-1-L",
"MachineNumber": "456701",
"ErrorCode": "1",
"ProblemOccured": "Your Lie in April 1st",
"NotificationTime": "2019-30-29 11:41:00",
"Repairman": "198503302003121001",
"ClientNumber": "132403",
"MissionNumber": "053",
"ReportIndex": 3,
"ReportImages": [
{
"ReportImage": this.imagetest
},
{
"ReportImage": this.imagetest
},
{
"ReportImage": this.imagetest
}
]
}
]
},
{
"DateString": "August 4",
"DayString": "Sunday",
"Date": "...",
"Data": [
{
"ClientName": "Client No. 004",
"ClientAddress": "Taipei, Keelung Rd. No. 04",
"MissionTime": "2019-07-01 12:00:00",
"MissionTimeOnlyHour": "12:00",
"ClientPhone": "+886 123 345 904",
"ClientContactPerson": "Mr. 040",
"MachineType": "UN-1321AG-1-L",
"MachineNumber": "456701",
"ErrorCode": "1",
"ProblemOccured": "Your Lie in April 1st",
"NotificationTime": "2019-30-29 11:41:00",
"Repairman": "198503302003121001",
"ClientNumber": "132404",
"MissionNumber": "054",
"ReportIndex": 1,
"ReportImages": [
{
"ReportImage": this.imagetest
}
]
},
{
"ClientName": "Client No. 005",
"ClientAddress": "Taipei, Keelung Rd. No. 05",
"MissionTime": "2019-07-01 10:00:00",
"MissionTimeOnlyHour": "10:00",
"ClientPhone": "+886 123 345 905",
"ClientContactPerson": "Mr. 050",
"MachineType": "UN-1321AG-1-L",
"MachineNumber": "456701",
"ErrorCode": "1",
"ProblemOccured": "Your Lie in April 1st",
"NotificationTime": "2019-30-29 11:41:00",
"Repairman": "198503302003121001",
"ClientNumber": "132405",
"MissionNumber": "055",
"ReportIndex": 2,
"ReportImages": [
{
"ReportImage": this.imagetest
},
{
"ReportImage": this.imagetest
}
]
}
]
}
]
}
```
- Different from before now the images is stored as array.
- Back in front end (.html) with array we can call loop function using `*ngFor`, it's easier than state one by one.
- `ReportIndex` is the identifier for how many images that repairman send and stored in array.
- Although in HTML using `*ngFor` it's not necessary to discard this attribute because it might be use for further update.
- Base64 image example, you can have it here: https://pastebin.com/LKkAeSRq
- There is `imageset`, it is the variable name.
- The `data:image/jpeg;base64,` is use to convert base64 to image automatically.
- If you want to get the base64 string only, copy from `/9j/2...` to `....P/9k=`, you can check using **Base64 to Image Online Converter** from internet.
- Final result for the design
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/37-02.jpg" style="max-height:400px" />
</center>
<br>
---
### JSON object format for Home page
Time: **16:18**
- From the API (get dispenser repair condition), the JSON data which GET has this format:
```json=
{
"code": 200,
"msg": "success",
"success": "true",
"result": "ok",
"Data": [
{
"MissionNumber": ... ,
"Device_ID": ... ,
"Email": ... ,
"ErrorType": ... ,
"Description": ... ,
"Status": ... ,
"UploadTime": ... ,
"NotifyTime": ... ,
"ConfirmTIme": ... ,
"RepairCallTime": ... ,
"RepairDoneTime": ... ,
"MaintenanceDoneTime": ... ,
"CompleteTime": ... ,
"Maintainer": ... ,
"Maintainer_ID": ... ,
"Result": ... ,
"Index": ... ,
"Source": ... ,
"Source2": ... ,
"Source3": ... ,
"ArriveTime": ... ,
"Complete_Index": ... ,
"Complete_Source": ... ,
"Complete_Source2": ... ,
"Complete_Source3": ... ,
"Archive": ... ,
"Delete": ... ,
},
...
]
}
```
- To integrate with the system in Home page, it should remake into the format needed as following:
- For **done mission**
```json=
{
[
{
"DateString": ... ,
"DayString": ... ,
"Date": ... ,
"Data": [
{
"ClientName": ... ,
"ClientAddress": ... ,
"MissionTime": ... ,
"MissionTimeOnlyHour": ... ,
"ClientPhone": ... ,
"ClientContactPerson": ... ,
"MachineType": ... ,
"MachineNumber": ... ,
"ErrorCode": ... ,
"ProblemOccured": ... ,
"NotificationTime": ... ,
"Repairman": ... ,
"ClientNumber": ... ,
"MissionNumber": ... ,
"ReportIndex": ... ,
"ReportImages": [
{
"ReportImage": ...
},
...
]
},
...
],
},
...
]
}
```
- For **today mission**
```json=
{
[
{
"ClientName": ... ,
"ClientAddress": ... ,
"MissionTime": ... ,
"MissionTimeOnlyHour": ... ,
"ClientPhone": ... ,
"ClientContactPerson": ... ,
"MachineType": ... ,
"MachineNumber": ... ,
"ErrorCode": ... ,
"ProblemOccured": ... ,
"NotificationTime": ... ,
"Repairman": ... ,
"ClientNumber": ... ,
"MissionNumber": ... ,
},
...
]
}
```
- For **future mission**
```json=
{
[
{
"DateString": ... ,
"DayString": ... ,
"Date": ... ,
"Data": [
{
"ClientName": ... ,
"ClientAddress": ... ,
"MissionTime": ... ,
"MissionTimeOnlyHour": ... ,
"ClientPhone": ... ,
"ClientContactPerson": ... ,
"MachineType": ... ,
"MachineNumber": ... ,
"ErrorCode": ... ,
"ProblemOccured": ... ,
"NotificationTime": ... ,
"Repairman": ... ,
"ClientNumber": ... ,
"MissionNumber": ... ,
},
...
],
},
...
]
}
```
- The JSON object format for done mission and future mission has similarly with different on report data from repairman where future mission doesn't has.
---
## Conclusion
- Design rework has been implemented Dashboard page on Done Mission section, now all three fragments (Done, Today, and Future mission) has the same theme.
- Done mission has item to display image from what repairman sent the report images, for this it will generate base64 string which stored in database and convert into image so it can be displayed.
- In order to display the data from API, must remake the JSON object into the format needed, all three fragments of Home page has their own format.
---
### Reference
- https://forum.ionicframework.com/t/converting-base64-string-to-img-src/129666
- Base64 to image online converter: https://codebeautify.org/base64-to-image-converter
Time:
Event: Leaving the lab
###### tags: `on-intern`
Sign in with Wallet
Connect another wallet