# <center>4^th^ July, 2019</center>

###### tags: `Daily Internship Documentation`
---
## 2^nd^ Day of Internship

## Summary
Today I continue to update the UI of the dashboard. I changed all the pictures for button with icons. I created buttons for tracking, options, report, and nearby dispenser feature. I also add some click effects such as ripple and pressed for button.

---
## Documentation

### 1. Dashboard Page
#### 1.1 dashboard.page.ts

1. Change and remove unnecessary variables for screen item resolutions **(line 24-32)**
2. remove unnecessary variables in getScreenSize() function **(line 43-54)**

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { HostListener } from "@angular/core";
import { Router } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
})

export class DashboardPage implements OnInit {
  private device_id = 'T4_07_01';
  
  //variables for maintenance progress information
  private url_maintenance_progress = 'https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Repair?Device_ID=' + this.device_id;
  private maintenance_status: any;
  private maintenance_data: any;
  private no_report_problem: boolean;

  //variables for dispenser picture
  public url_dispenser_picture = 'https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Image?Device_ID=' + this.device_id;
  
  //variables for screen resolution
  public screenHeight: any;
  public screenWidth: any;

  public headerHeight: any;
  public contentHeight: any;

  public jellyfishIconTop: any;
  public jellyfishIconLeft: any;

  public contenButtonsWidth: any;

  //Variable for tracking progress
  public trackIsActive: boolean;
  
  constructor(private http:HttpClient) {  }
  ngOnInit() {
    this.getScreenSize();
  }
  
    @HostListener('window:resize', ['$event'])
    getScreenSize(event?: any) {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
      
      this.headerHeight = this.screenHeight * 0.7;
      this.contentHeight = this.screenHeight * 0.3;

      this.jellyfishIconTop = this.headerHeight - 60;
      this.jellyfishIconLeft = this.screenWidth/2 - 60;

      this.contenButtonsWidth = this.screenWidth/2;

      //console.log("Screen Width: " + this.screenWidth);
      //console.log("Jellyfish position: " + this.jellyfishIconLeft);
    }

    maintenanceStatus(){
      this.http.get(this.url_maintenance_progress).subscribe(res => {
        this.maintenance_data = res["Data"];
        this.maintenance_status = this.maintenance_data["status"];
      })
      
      if(this.maintenance_status != 4){
        this.no_report_problem = true;
      }else{
        this.no_report_problem = false;
      }
  
      console.log('Report status: ' + this.no_report_problem);
    }
    
    getDispenserPictureUrl(){
      return this.url_dispenser_picture;
    }
}

#### 1.2 dashboard.page.html

1. Add header width with parsed value from typescript. **(line 1)**
2. Replace the 'div' tag with class *trackButton* & *optionButton* by 'span' tag with class *header-button*. **(line 9-19)**
3. Remove the width and height tag of jellyfishIcon (moved to scss). **(line 11)**
4. Add content width with parsed value from typescript. **(line 29)**
5. Remove height in 'div' class *bodyButton*, and change the class name with *content-button-space*. **(line 31)**
6. Change 'div' tag for Report and Nearby dispenser with span. Add ripple effect to the button. Change the img of the symbol with icon. **(line 33-45)**
7. Change the class of *contentButton* with *content-button*. **(line 49)**

<ion-header no-border [style.height.px]="headerHeight" [style.width.px]="screenWidth">
  <div class="background-image" [ngStyle]="{'background-image': 'url(' + url_dispenser_picture + ')'}">

    <div class="overlay">
      <div class="logo">
        <img src="assets/dashboard/acuo_logo.png">
      </div>

      <span>
        <button class="pressed header-button">
          <ion-icon name="more" size="large"></ion-icon>
        </button>
      </span>

      <span>
        <button class="ripple header-button">
          <ion-icon name="star-outline" size="large" color="white"></ion-icon>
        </button>
      </span>

      <div class="jellyfish-icon" [style.top.px]="jellyfishIconTop" [style.left.px]="jellyfishIconLeft">
        <img alt="avatar" src="assets/dashboard/jellyfishIcon.png" >
      </div>
    </div>

  </div>
</ion-header>

<ion-content [style.height.px]="contentHeight" [style.width.px]="screenWidth" position="absolute">

  <div class="content-button-space">
    
    <span class="content-button ">
      <button class="ripple full-button">
        <ion-icon name="pin" size="large"></ion-icon>
        <p>Nearby dispenser</p>
      </button>
    </span>

    <span class="content-button">
      <button class="ripple full-button">
        <ion-icon name="warning" size="large"></ion-icon>
        <p>Report dispenser</p>
      </button>
    </span>

  </div>

  <div class="report-status">
    No Report Problem
  </div>

</ion-content>

#### 1.1 dashboard.page.scss

1. Add *.button* class to customize the button display. **(line 1-9)**
2. in class *(.background-image)*, change the background-size to be cover, and then add background-position to be center center. **(line 19-20)**
3. Change the name of class *(.jellyfishIcon)* to be *(jellifish-icon)*. Change the width property to be 120px. Add property height: 120px and border-radius: 50px. **(line 32)**
4. Merge class *(.optionButton)* and *(.trackButton)* into one class called *(.header-button)*. **(line 44-52)**
5. Change the name of class*(.bodyButtons)* to be *(.content-button-space). **(line 62)**
6. Merge class *(.reportButton)* and *(.nerabyButton)* into one class called *(.content-button)*. Change the the height and width to be percantage. Add color: black. **(line 68)**
7. Add *(.full-button)* class to make the button fit the *(.content-button-space)* class. **(line 79-82)**
8. Change the name of class *(.reportStatus)* to be *(.report-status)*. **(line 85)**

button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    overflow: hidden;
    outline: none;
    z-index: 1;
}

// Header Part CSS
.ion-header {
    position: relative;
    width: 100%;
}

.background-image{
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
}

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

.jellyfish-icon{
    position: absolute;
    height: 120px;
    width: 120px;
    border-radius: 50px;
}

.logo{
    position: absolute;
    top: 20px;
}

.header-button{
    position: relative;
    top: 20px;
    right: 20px;
    float: right;
    height:40px;
    width:40px;
    color: white;
}

.logo {
    height: 50px;
    width: 90px;
    left: 33px;
}

//Content Part CSS

.content-button-space{
    position: relative;
    height:65%;
    width: 100%;
}

.content-button{
    position: relative;
    top: 0px;
    left: 0px;
    float: left;
    height:100%;
    width: 50%;
    text-align: center;
    color: black;
}

.full-button{
    position: relative;
    height: 100%;
    width: 100%;
}

.report-status{
    text-align: center;
    height: 35%;
    bottom: 0px;
    border-top: 1px solid #e9e9e9;
}

/* Ripple effect */
.ripple {
    background-position: center;
    transition: background 0.8s;
}

.ripple:hover {
    background:transparent radial-gradient(circle,  transparent 1%, white 1%) center/15000%;
}

.ripple:active {
    color: #D3D3D3;
    size: 100%;
    transition: background 0s;
}

//Pressed effect

.pressed:active {
  transform: translateY(4px);
}

---
## Result

All the images for button has been replaced with icons. All buttons are already clickable and have click effect.