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

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

## Summary

Today I created the back-end part of the 'detailed-information' page to retrieve the temperature data of the dispenser via API, and then show the result into the console. I got a problem before, the data from the database cannot be parsed into the local variable that I have made. It's because we need to declare the ngOnInit() function as an asynchronus.

---
## Documentation

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

1. Import DispenserApi service. **(line 1)**
2. Make the variables that will be parsed to the html as public. **(line 16-20)**
3. Create variables to store the dispenser data. **(line 29-49)**
4. Import PreferenceManager & DispenserAPI service into the constructor. **(line 55-56)**
5. Make the *ngOnInit()* function as asynchronous. **(line 58)**
6. Call the functions to store the Dispenser data in *ngOnInit()*. **(line 67-71)**
7. Modify the jellyfish icon position. **(line 97-98)**
8. Create functions for API calling and data storing process. **(line 120-148)**
9. Create a routing function to go back to the dashboard page. **(line 150-155)**

import { DispenserAPIService } from './../../services/DispenserAPI/dispenser-api.service';
import { StaticVariable } from './../../classes/StaticVariable/static-variable';
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 celciusHotTemp: number;
  public celciusWarmTemp: number;
  public celciusColdTemp: number;

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

  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.setCelciusTemperatures();
    this.setFahrenheitTempratures();
    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;
    this.contentHeight = this.screenHeight * 0.7;

    this.pageLeft = window.innerWidth/2 - this.screenWidth/2;
    this.jellyfishIconTop = this.headerHeight/2 - 25;
    this.jellyfishIconLeft = this.screenWidth/2 - 25;
    this.detailedInformationTop = this.headerHeight/2;
  }
  
  private adjustDynamicDesktopScreen(){
    this.getDesktopScreenSize();    
    this.adjustScreen();
  }

  private adjustDynamicMobileScreen(event?: any) {
    this.getMobileScreenSize();
    this.adjustScreen();
  }

  @HostListener('window:resize', ['$event'])
  onresize(event?: any) {
    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
  //--------------------------------------------------
  setCelciusTemperatures(){
    this.celciusHotTemp = this.dispenser_rawdata['HotTemp'];
    this.celciusWarmTemp = this.dispenser_rawdata['WarmTemp'];
    this.celciusColdTemp = this.dispenser_rawdata['ColdTemp'];
  }

  setFahrenheitTempratures(){
    this.fahrenheitHotTemp = this.celciusHotTemp/5 * 9 + 32;
    this.fahrenheitWarmTemp = this.celciusWarmTemp/5 * 9 + 32;
    this.fahrenheitColdTemp = this.celciusColdTemp/5 * 9 + 32;
  }

  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 click property which calling the *goToDashboard()* function from typescript. **(line 13)**
2. Create divs in the ion-content. **(line 34-44)**

<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>

      <!--Detail 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>

  </div>

  <div>

  </div>

  <div>

  </div>
  
</ion-content>

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

1. Resize the height & width of the jellyfish icon. **(line 41-42)**

//=======================
// 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: 50px;
    width: 50px;
    border-radius: 50px;
}

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

---
## Result

The value from the database is shown in the console log: