# 13th August Report

## Progress

Time: **09:00**
Event: Entering the lab

---

### UI update on nearby dispenser page

Time: **10:53**

- From last report we have some changes from Ms. Annie which update the UI design of User App, one of them is on nearby dispenser page.
- In nutshell, the changes are:
- Nearby dispenser icon become smaller.
- Height of each item become taller, make it has more space.
- Temperature indicator move to bottom of each item.
- The building name and floor separate with "/", or more like the floor is between "/" character, for example = **/ 3F /**.
- Update which state here are major changes, some minor can be seen on our Github repository.
- In **nearby.page.html**:
- On header that contains of dispenser icon and title, we change so the title can span through the width of page, see on **line 30 - 32**:

        <div class="overlay header-inside">

          <div>
            <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"
              >
            </div>

            <div class="header-inside--icon-right float-left">
              <img 
                class="icon"
                src="assets\cancel\[e-mail]" 
                alt="acuo-cancel1"
                (click)="backFunc()"
              >
            </div>
          </div>

          <div class="header-inside--title">
            <h5>Nearby Water Dispenser</h5>
          </div>
        </div>

- Major changes on content for each item, separate the icon and title with the temperature indicator, see on **line 4 and 22**.

        <div class="overlay body-content--card-inside with-data">
          <div class="body-content--card-item">

            <div class="body-content--card-item above-item">

              <!-- dispenser icon -->
              <div class="float-left">
                <img class="body-content--card-item--icon" src="assets\acuo-avatar\[e-mail]" alt="avatar">
              </div>

              <!-- dispenser detail -->
              <div class="body-content--card-item--content">                
                <div class="body-content--card-item--content-title">
                  {{item.Building}}
                  <br>
                  {{item.Position}}
                </div>
              </div>

            </div>

            <div class="body-content--card-item below-item">

              <!-- dispenser status no data -->
              <div class="body-content--card-item--content-options" *ngIf="item.Status == 0">
                <span style="color: white; font-size: 18px"><b>Status unavailable</b></span>
              </div>

              <!-- dispenser status options -->
              <div class="body-content--card-item--content-options" *ngIf="item.Status != 0">
                <div class="body-content--card-item--content-options-item float-left color-cold" *ngIf="item.ColdTemp > 0">
                  Cold
                </div>
                <div class="body-content--card-item--content-options-item float-left color-warm" *ngIf="item.WarmTemp > 0">
                  Warm
                </div>
                <div class="body-content--card-item--content-options-item float-left color-hot" *ngIf="item.HotTemp > 0">
                  Hot
                </div>
              </div>

            </div>

          </div>
        </div>

- In **nearby.page.scss** we add more classes and modify some classes by adding or removing its attribute:

    .header-inside--title {
        text-align: center; 
        clear: both;
    }

    .body-content--card {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        height: 100%;
        min-height: 150px;
        overflow: hidden;
    }

    .body-content--card-inside {
        overflow: auto; 
        padding: 15px;
        height: inherit;
    }

    .with-data {
        min-height: 150px;
    }

    .body-content--card-item {
        padding: 0px 5px 5px 5px;
    }

    .above-item {
        position: relative
    }

    .below-item {
        position: absolute; 
        bottom: 10px; 
        width: 85%
    }

    .body-content--card-item--icon {
        text-align: center;
        max-width: 50px;
    }

    .body-content--card-item--content {
        padding-left: 60px;
    }

    .body-content--card-item--content-title {
        bottom: 0; 
        left: 0;
        color: #FFFFFF;
        padding-top: 10px;
        overflow: hidden; 
        text-overflow: ellipsis; 
        white-space: nowrap; 
        display: block
    }

    .body-content--card-item--content-options-item {
        border-radius: 10px;
        padding: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        text-align: center;
        color: white;
        width: 20%;
    }

    .overlay {
        z-index: 1;
        width: 100%;
        background-color: rgba($color: #000000, $alpha: 0.3);
    }

Time: **13:49**

- To generate the new display of building location, in back end code (.ts) we create some functions so it can separate the floor with its name.
- From API, there some building location which doesn't has floor so we should create logic if the it has or not.
- In **nearby.page.ts**:

    async getBuildingFloor (buildingLoc: string) {
      if (await this.checkIfFloorExists(buildingLoc)) {
        let splitLoc = buildingLoc.split(" ");
        return splitLoc[splitLoc.length - 1];
      } else {      
        return "";
      }
    }

    async getBuildingName (buildingLoc: string) {
      let needLength: number;
      let splitLoc = buildingLoc.split(" ");

      if (await this.checkIfFloorExists(buildingLoc)) {
        needLength = splitLoc.length - 1;
      } else {
        needLength = splitLoc.length;
      }

      let buildString = splitLoc[0];
      for (let i = 1 ; i < needLength ; i++) {
        buildString = buildString + " " + splitLoc[i];
      }

      return buildString;
    }

    async checkIfFloorExists (buildingLoc: string) {
      let splitLoc = buildingLoc.split(" ");
      let getFloor = splitLoc[splitLoc.length - 1];    
      let splitFloor = getFloor.split("");  

      if (splitFloor.length <= 4) {
        return true;
      } else {
        return false;
      }
    }

    async buildBuildingDetail (name: string, floor: string) {
      if (floor !== "") {
        return name + " / " + floor + " /";
      } else {
        return name;
      }
    }

- `getBuildingFloor()` function will return the floor if exists, or "" if not.
- `getBuildingName()` function will return the name of the building without floor.
- `checkIfFloorExists()` function will return true if floor is exists on API, false if not.
- `buildBuildingDetail()` function will return combination of building name and floor.

- Use all above functions when generate the JSON to be displayed on page:

    // get building detail from building name and floor
    let dispenserBuildingName = await this.getBuildingName(dispenserDetails['Building']);
    let dispenserBuildingFloor = await this.getBuildingFloor(dispenserDetails['Building']);
    let dispenserBuildingDetail = await this.buildBuildingDetail(dispenserBuildingName, dispenserBuildingFloor);

    // build all components into an object
    let tempAllDetails = {
      'Device_ID': dispenserId,
      'Status': getNearbyDispenserJson[i]['Status'],
      'HotTemp': getNearbyDispenserJson[i]['HotTemp'],
      'WarmTemp': getNearbyDispenserJson[i]['WarmTemp'],
      'ColdTemp': getNearbyDispenserJson[i]['ColdTemp'],
      'Building': dispenserBuildingDetail,
      'Position': dispenserDetails['Position'],
      'Picture': dispenserPicture
    };

- **Building** attribute has combination of building name and floor.
- From `buildBuildingDetail()` function also generate the floor to has "/" character on front and back.

- Result page:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/44-01.JPG" style="max-width: 250px" />
</center>
<br>

---

### UI update on report problem page

Time: **15:22**
- Based on Ms. Annie's UI design for report problem page in User App, the input pictures has their own section.
- Previously there is only one section for upload picture which after upload one the section will appear again until maximum 3 picture has been uploaded.
- Now user know that there are 3 section for upload the picture, still maximum 3 pictures per report.
- For this, update on front end code of report problem page (HTML and CSS), in here only state the major code being updated and the rest can be seen on Github.
- In **report-problem.page.html**:

        <ion-item lines="none" class="content-title">
          <ion-label>What's the problem?</ion-label>
        </ion-item>

        <div class="content-body">
          <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 class="content-body--other-input" *ngIf="j" [(ngModel)]="Description" (keyup)="checkOther()">
            </ion-input>
          </ion-item>
        </div>

        <ion-item lines="none" class="content-title">
          <ion-label>Upload images</ion-label>
        </ion-item>

        <div class="imageContainer">
          <div class="imageContainer--input">
            <ion-icon size="large" slot="primary" name="add"></ion-icon>
          </div>
          <div class="imageContainer--input">
            <ion-icon size="large" slot="primary" name="add"></ion-icon>
          </div>
          <div class="imageContainer--input">
            <ion-icon size="large" slot="primary" name="add"></ion-icon>
          </div>
        </div>

- In **line 1-3 and 16-18**, a title for problem options section and upload picture section which previously both doesn't have.
- In **line 20-30** we update how to display the section for upload the picture from only one option to three option.
- Actually the system still the same where user must upload the picture one by one, the different is now user know that he can upload up to 3 pictures.

- In **report-problem.page.scss**:

        .header-inside--title {
            text-align: center; 
            clear: both;
        }

        .content-title {
            --background: rgba(0,0,0,0); 
            margin-bottom: -20px
        }

        .content-body {
            padding: 5px;
        }

        .content-body--other-input {
            border-bottom: 1px solid grey;
            margin-left: 10px;
        }

        ion-checkbox {
            margin-right: 10px;
        }

        .imageContainer {
          margin: 10px auto 20px auto;
          display: table;
        }

        .imageContainer--input {
            padding: 20px; 
            margin: 10px 5px; 
            display: table; 
            float: left; 
            border: dashed #dbdbdb;
            border-radius: 5px;
        }

- Result display:
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/44-02.JPG" style="max-width: 250px" />
</center>
<br>

---

## Conclusion

- Update the UI design of nearby dispenser page on User App based on Ms. Annie request, the result can be seen in this report while the mock up or Ms. Annie's design can be seen in previous report (12th August).
- Update the UI design of report problem page on User App, same as above where it is based on Ms. Annie's request.
- Profile page for Repairman still in progress.

---

Time: **18:00**
Event: Leaving the lab

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