# 17th May Report

This is the twelfth study report of NTUST Internship program, before going to Taiwan. In this week my plan is to create UI design for "nearby machine", and next week I will start to code the back end and integrate with the API.

## Summary of this week

- Create UI design for "nearby machine" using Ionic 4 platform with HTML and SCSS.
- Using dummy data to display the mock up (this will using field variable with pre inserted value).

## Documentation

### 1. Page

#### 1.1. nearby.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>Nearby Water Dispenser</h5>
      </div>
      
      <div class="header-inside--icon-right float-left">
        <img 
          class="icon"
          src="assets\cancel\[e-mail]" 
          alt="acuo-cancel1"
        >
      </div>

    </div>
  </div>

  <div class="filter">
    
    <div class="float-left">
      <img class="filter-icon" src="assets\cup-coffee\[e-mail]" alt="filter">
    </div>

    <div class="filter-content float-left">
      <div class="filter-content--title">
        <b>I want to find...</b>
      </div>
      <div class="filter-content--options">
        <div class="filter-content--options-item">
          <ion-button (click)="coldFilter()" class="btn-deactived" size="small" fill="solid" expand="block">
            Cold
          </ion-button>
        </div>
        <div class="filter-content--options-item">
          <ion-button (click)="warmFilter()" class="btn-deactived" size="small" fill="solid" expand="block">
            Warm
          </ion-button>
        </div>
        <div class="filter-content--options-item">
          <ion-button (click)="hotFilter()" class="btn-deactived" size="small" fill="solid" expand="block">
            Hot
          </ion-button>
        </div>
      </div>
    </div>
    
  </div>

  <div class="body">

    <!-- this building -->

    <div class="body-content">

      <h3>In this building</h3>
  
      <ion-card *ngFor="let item of items" >
  
        <div class="body-content--card">
          <div class="overlay body-content--card-inside">
            <div class="body-content--card-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 float-left">
                <div class="body-content--card-item--content-title">
                  This is the building position ...
                  <br>
                  ... and this is the dispenser position
                </div>
                
                <div class="body-content--card-item--content-options">
                  <div class="body-content--card-item--content-options-item float-left color-cold">
                    Cold
                  </div>
                  <div class="body-content--card-item--content-options-item float-left color-warm">
                    Warm
                  </div>
                  <div class="body-content--card-item--content-options-item float-left color-hot">
                    Hot
                  </div>

                </div>
              </div>

            </div>
          </div>
        </div>

      </ion-card>

    </div>

    <!-- nearby building -->

    <div class="body-content">

      <h3>In nearby building</h3>
  
      <ion-card *ngFor="let item of items" >
  
        <div class="body-content--card">
          <div class="overlay body-content--card-inside">
            <div class="body-content--card-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 float-left">
                <div class="body-content--card-item--content-title">
                  This is the building position ...
                  <br>
                  ... and this is the dispenser position
                </div>
                
                <div class="body-content--card-item--content-options">
                  <div class="body-content--card-item--content-options-item float-left color-cold">
                    Cold
                  </div>
                  <div class="body-content--card-item--content-options-item float-left color-warm">
                    Warm
                  </div>
                  <div class="body-content--card-item--content-options-item float-left color-hot">
                    Hot
                  </div>

                </div>
              </div>

            </div>
          </div>
        </div>

      </ion-card>

    </div>

  </div>

</ion-content>

#### 1.2. nearby.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%;
}

.filter {
    background-color: #EDEDED;
    color: #444444;
    padding: 15px;
    overflow: auto;
}

.filter-icon {
    max-height: 20px;
    width: auto
}

.filter-content {
    width: 90%;
    padding-left: 10px
}

.filter-content--title {
    bottom: 0; 
    left: 0; 
    margin-bottom: 5px
}

.filter-content--options {
    top: 0;
    left: 0;
}

.filter-content--options-item {
    width: 30%; 
    float: left;
}

.float-left {
    float: left;
}

.body {
    background-color: #FFFFFF;
    color: #666666;
    padding: 15px;
    overflow: auto;
}

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

.body-content--card {
    background-image: url("http://thegorbalsla.com/wp-content/uploads/2018/08/Bukit-Doa-Tomohon-Manado-700x472.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    max-height: 200px;
    overflow: hidden;
}

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

.body-content--card-item {
    padding-top: 30px;
}

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

.body-content--card-item--content {
    max-width: 90%; 
    padding-left: 10px;
}

.body-content--card-item--content-title {
    bottom: 0; 
    left: 0; 
    margin-bottom: 5px;
    color: #FFFFFF
}

.body-content--card-item--content-options {
    top: 0;
    left: 0;
}

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

.color-cold {
    background-color: #63eaff;
}

.color-warm {
    background-color: #efbe40;
}

.color-hot {
    background-color: #ff6b6b;
}

.icon {
    max-width: 100%;
    height: auto;
}

.avatar {       
    width: 70%; 
    max-width: 100px;
}

.header-title {
    padding-top: 50px;
    padding-bottom: 10px;
}

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

.btn-deactived {
    --background: #bcbcbc;
    --color: #ffffff;
}

#### 1.3. nearby.page.ts

This one generate dummy data:

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

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

  public items = [{"name": "name1", "date": "01/01/18"},{"name": "name2", "date": "01/01/18"},{"name": 
  "name3", "date": "01/01/18"}]

  constructor() {  }

  ngOnInit() {
  }

}

---

### 2. Contents

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/12-01.JPG" alt="img1" width="50%">
</center>
</br>

---

### 3. Screenshot

1. Title
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/12-02.JPG" alt="img2" width="50%">
</center>
</br>

2. We have the "this building"
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/12-03.JPG" alt="img3" width="50%">
</center>
</br>

3. Nearby building
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/12-04.JPG" alt="img4" width="50%">
</center>
</br>

---

### Conclusion:
- We need to make the background image in title dynamically change in different dispenser.
- We need to make every nearby dispenser (this and nearby building) background image to change dynamically as well.
- We need to retrieve data from API to fill the content (icon, description, etc.).
- Use the data to filter system and re-display the dispenser list.
- Maybe there will be change for HTML code for display with program.

###### tags: `pre-intern report`