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

###### tags: `Daily Internship Documentation`
---
## 9^th^ Day of Internship

## Summary

Today I create the UI for the temperature display in 'Detailed Information' page.

---
## Documentation

### 1. Detailed Information Page
#### 1.1 detailed-information.page.ts

1. Remove the *StaticVariable* class. **(line 1)**
2. Create variables that store the temperature data in string. **(line 50-56)**
3. Set the value of displayCelsius variables. **(line 149-151)**
4. Set the value of displayFahrenheit variables. **(line 159-161)**

import { DispenserAPIService } from './../../services/DispenserAPI/dispenser-api.service';
import { Component, OnInit } from '@angular/core';
import { HostListener } from "@angular/core";
import { Router } from '@angular/router';
import { DeviceDetectorService } from 'ngx-device-detector';
import { PreferenceManagerService } from 'src/app/services/PreferenceManager/preference-manager.service';
import { HttpClient } from '@angular/common/http';

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

  public screenHeight: any;
  public screenWidth: any;

  public headerHeight: any;
  public contentHeight: any;

  public pageLeft: any;

  public jellyfishIconTop: any;
  public jellyfishIconLeft: any;
  public detailedInformationTop: any;

  //variables for dispenser APIs
  private device_id = "MA_04_01";
  public url_dispenser_picture: string;
  public dispenser_rawdata: any;
  public dispenser_detail: any;

  //Variable for the device type is Desktop or not
  public isDesktopType: any = false;

  //Variable for contain the dispenser detail
  public dispenser_type: string;
  public dispenser_position: string;

  //Variables for temperature
  public celsiusHotTemp: number;
  public celsiusWarmTemp: number;
  public celsiusColdTemp: number;

  public fahrenheitHotTemp: number;
  public fahrenheitWarmTemp: number;
  public fahrenheitColdTemp: number;

  public displayCelsiusHot: string;
  public displayCelsiusWarm: string;
  public displayCelsiusCold: string;

  public displayFahrenheitHot: string;
  public displayFahrenheitWarm: string;
  public displayFahrenheitCold: string;

  constructor(
      private http: HttpClient,
      private router: Router,
      private deviceDetector: DeviceDetectorService,
      private pref: PreferenceManagerService,
      private api: DispenserAPIService) { }

  async ngOnInit() {

    this.detectDevice();

    if(this.isDesktopType)
      this.adjustDynamicDesktopScreen();
    else
      this.adjustDynamicMobileScreen();

    await this.setAPIsData();

    this.setCelsiusTemperatures();
    this.setFahrenheitTemperatures();
    this.setDispenserDetail();
  }

  private detectDevice() {
    this.isDesktopType = this.deviceDetector.isDesktop();
  }

  //--------------------------------------------------
  //Screen Configuration part
  //--------------------------------------------------

  private getDesktopScreenSize(){
    this.screenHeight = window.innerHeight;
    this.screenWidth = this.screenHeight/16 * 9;
  }

  private getMobileScreenSize(){
    this.screenHeight = window.innerHeight;
    this.screenWidth = window.innerWidth;
  }

  private adjustScreen(){
    this.headerHeight = this.screenHeight * 0.3;

    if(this.headerHeight < 150)
      this.headerHeight = 150;

    this.contentHeight = this.screenHeight - this.headerHeight;

    this.pageLeft = window.innerWidth/2 - this.screenWidth/2;
    this.jellyfishIconTop = this.headerHeight/2 - 35;
    this.jellyfishIconLeft = this.screenWidth/2 - 35;
    this.detailedInformationTop = this.headerHeight/2 + 45;
  }

  private adjustDynamicDesktopScreen(){
    this.getDesktopScreenSize();
    this.adjustScreen();
  }

  private adjustDynamicMobileScreen() {
    this.getMobileScreenSize();
    this.adjustScreen();
  }

  @HostListener('window:resize', ['$event'])
  onresize() {
    if(this.isDesktopType)
      this.adjustDynamicDesktopScreen();
    else
      this.adjustDynamicMobileScreen();
  }

  //--------------------------------------------------
  //APIs part
  //--------------------------------------------------

  async setAPIsData(){
    this.url_dispenser_picture = await this.api.getDispenserPictureUrlOnly(this.device_id);
    this.dispenser_rawdata = await this.api.getDispenserRawData(this.device_id);
    this.dispenser_detail = await this.api.getDispenserDetail(this.device_id);
  }

  //--------------------------------------------------
  //Variable Assigning part
  //--------------------------------------------------
  setCelsiusTemperatures(){
    this.celsiusHotTemp = this.dispenser_rawdata['HotTemp'];
    this.celsiusWarmTemp = this.dispenser_rawdata['WarmTemp'];
    this.celsiusColdTemp = this.dispenser_rawdata['ColdTemp'];

    this.displayCelsiusHot = this.celsiusHotTemp + "°C";
    this.displayCelsiusWarm = this.celsiusWarmTemp + "°C";
    this.displayCelsiusCold = this.celsiusColdTemp + "°C";
  }

  setFahrenheitTemperatures(){
    this.fahrenheitHotTemp = this.celsiusHotTemp/5 * 9 + 32;
    this.fahrenheitWarmTemp = this.celsiusWarmTemp/5 * 9 + 32;
    this.fahrenheitColdTemp = this.celsiusColdTemp/5 * 9 + 32;

    this.displayFahrenheitHot = this.fahrenheitHotTemp + "°F";
    this.displayFahrenheitWarm = this.fahrenheitWarmTemp + "°F";
    this.displayFahrenheitCold = this.fahrenheitColdTemp + "°F";
  }

  setDispenserDetail(){
    this.dispenser_position = this.dispenser_detail['Position'];
    this.dispenser_type = this.dispenser_detail['Type'];
  }

  //--------------------------------------------------
  //Routing part
  //--------------------------------------------------
  goToDashboard(){
    this.router.navigate(['dashboard']);
  }
}

#### 1.2 detailed-information.page.html

1. add *ion-content* property. **(line 32)**
2. Create display temperature part. **(line 34-68)**

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

    <div class="overlay">

      <!--Acuo Logo-->
      <div class="logo">
        <img src="assets/dashboard/acuo_logo.png">
      </div>

      <!--Close Button to go back to Dashboard-->
      <button class="close-button" (click)="goToDashboard()">
        <ion-icon name="close" size="large"></ion-icon>
      </button>

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

      <!--Detailed Information text-->
      <div class="detailed-information-text" [style.top.px]="detailedInformationTop">
        Detailed Information
      </div>

    </div>

  </div>
</ion-header>

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

  <div class="temperature-content">
    <div class="temperature-switch">

      <span class="toggle-button" style="float: right;">
        <ion-toggle></ion-toggle>
      </span>

    </div>

    <div class="temperature-display-space">

      <span class="temperature-display-block">
        <div class="temperature-display">
          <img class="temperature-logo" src="assets/detailed-information/cold.png" alt="colt logo">

          <span class="temperature-text cold-text">{{displayCelsiusCold}}</span>
        </div>
      </span>

      <span class="temperature-display-block" color="#36a1ce">
        <div class="temperature-display">
          <img class="temperature-logo" src="assets/detailed-information/warm.png" alt="colt logo">

          <span class="temperature-text warm-color">{{displayCelsiusWarm}}</span>
        </div>
      </span>

      <span class="temperature-display-block" color="#36a1ce">
        <div class="temperature-display">
          <img class="temperature-logo" src="assets/detailed-information/hot.png" alt="colt logo">

          <span class="temperature-text hot-color">{{displayCelsiusHot}}</span>
        </div>
      </span>
    </div>

  </div>

  <div>

  </div>

  <div>

  </div>

</ion-content>

#### 1.3 detailed-information.page.scss

1. Change the size of jellyfish icon. **(line 41-42)**
2. Change the position type of *.detailed-information-text*. **(line 47)**
3. Create content part for the temperature display. **(line 58-136)**
4. Modify the *ion-toggle* properties. **(line 141-145)**

//=======================
// Header Part CSS 
//=======================
.background-image, .overlay{
    height: 100%;
    width: 100%;
}
.background-image{
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

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

.logo{
    position: absolute;
    top: 20px;
    left: 20px;
    height: 43px;
    width: 80px;
}

.close-button{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    color: white;
    background-color: transparent;
    text-align: center;
}

.jellyfish-icon{
    position: relative;
    height: 70px;
    width: 70px;
    border-radius: 50px;
}

.detailed-information-text{
    position: absolute;
    height: 20px;
    width: 100%;
    font-family: PingFang-SC;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    text-align: center;
    color: white;
}

//=======================
// Content Part CSS
//=======================
.temperature-content{
    position: relative;
    background-color: #f3f3f3;
    height: 112px;
    width: 90%;
    top: 20px;
    left: 20px;
    right: 20px;
    border-radius: 7px;
}

.temperature-switch{
    position: relative;
    height: 30%;
    width: 100%;
    background-color: transparent;
}

.toggle-button{
    position: absolute;
    float: right;
    height: 32px;
    width: 60px;
    right: 10px;
}

.temperature-display-space{
    position: relative;
    height: 70%;
    width: 100%;
    background-color: transparent;
}

.temperature-display-block{
    position: relative;
    width: 33.33%;
    height: 100%;
    float: left;
}

.temperature-display{
    position: relative;
    left: 0;
    width: 100px;
    height: 90%;
    margin: 0 auto;
    text-align: center;
}

.temperature-logo{
    position: relative;
    left: 3px;
    float: left;
    top: 25%;
}

.temperature-text{
    position: relative;
    float: left;
    left: 4px;
    top: 40%;
    font-size: 20px;
    font-family: Roboto;
}

.cold-text{
    color: #36a1ce;
}

.warm-color{
    color: #f5a623;
}

.hot-color{
    color: #fb7581;
}
//=============================
// CSS properties Configuration
//=============================

ion-toggle{
    zoom: 0.9;
    position: relative;
    float: right;
}

---
## Result

The result of the temperature display is shown below: