# <center>16^th^ July, 2019</center>
###### tags: `Daily Internship Documentation`
---
## 10^th^ Day of Internship
## Summary
Today I finished the UI of the 'Detailed Information' page
---
## Documentation
### 1. Detailed Information Page
#### 1.1 detailed-information.page.ts
1. Modify and add extra variable to store the detail location of the dispenser. **(line 39-41)**
2. Get the detail location of the dispenser from API, and store it in the variables. **(line 167-168)**
```htmlmixed=
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 dispenserBuildingPosition: string;
public dispenserPlacedPosition: 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.dispenserBuildingPosition = this.dispenser_detail['Building'];
this.dispenserPlacedPosition = 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. Change the class used in div to *temperature-display-content*. **(line 33)**
2. Set up the temperature display components. **(line 36-41)**
3. Set up the dispenser position display. **(line 77-84)**
4. Set up the dispenser type display. **(line 87-90)**
```htmlmixed=
<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-display-content">
<div class="temperature-switch">
<span class="immediate-temperature-text">Immediate temperature</span>
<span class="degree-letter">°F</span>
<span class="toggle-button">
<ion-toggle mode="ios"></ion-toggle>
</span>
<span class="degree-letter">°C</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 class="dispenser-position-content">
<span class="information-text">Position</span>
<span class="position-display">
{{dispenserBuildingPosition}}
<br>
{{dispenserPlacedPosition}}
</span>
</div>
<div class="dispenser-type-content">
<span class="information-text">Type</span>
<span class="type-display">{{dispenser_type}}</span>
</div>
</ion-content>
```
#### 1.3 detailed-information.page.scss
1. Set the margin of *.logo* class. **(line 23-24)**
2. Simplfy some redundant properties of dispenser's temperature, position, and type class. **(line 62)**
3. Simplfy position property redundant from several classes. **(line 73)**
4. Simplyf top property redundant from immedieate temperature text, toggle button, and degree letter classes. **(line 88-90)**
5. Set up *.immediate-temperature-text* class. **(line 92-96)**
6. Set up class for toggle-button. **(line 102-105)**
7. Set up class for degree letter. **(line 107-111)**
8. Set up classes for disepnser position display. **(line 161-192)**
9. Set up class for dispenser type display. **(line 193-198)**
```htmlmixed=
//=======================
// 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;
margin-left: 20px;
margin-right: 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-display-content, .dispenser-position-content, .dispenser-type-content{
position: relative;
width: 90%;
top: 20px;
margin-left: 20px;
margin-right: 20px;
}
/*------------------------------------------------
Dispenser Temperature Display
------------------------------------------------*/
.temperature-display-content, .temperature-switch, .immediate-temperature-text, .toggle-button, .degree-letter, .temperature-display-space, .temperature-display, .temperature-logo, .temperature-text{
position: relative;
}
.temperature-display-content{
height: 100px;
border-radius: 7px;
background-color: #f3f3f3;
}
.temperature-switch{
height: 40%;
width: 100%;
}
.immediate-temperature-text, .toggle-button, .degree-letter{
top: 5px;
}
.immediate-temperature-text{
left: 10px;
font-size: 15px;
color: #666666;
}
.toggle-button, .degree-letter{
float: right;
}
.toggle-button{
height: 21px;
width: 30px;
}
.degree-letter{
width: 20px;
font-size: 17px;
font-family: PingFang-SC;
color: #666666;
}
.temperature-display-space{
height: 60%;
width: 100%;
background-color: transparent;
}
.temperature-display-block{
width: 33.33%;
height: 100%;
float: left;
}
.temperature-display{
left: 0;
width: 100px;
height: 90%;
margin: 0 auto;
text-align: center;
}
.temperature-logo{
left: 3px;
float: left;
top: 10%;
}
.temperature-text{
position: relative;
float: left;
left: 4px;
top: 20%;
font-size: 20px;
font-family: Roboto;
}
.cold-text{
color: #36a1ce;
}
.warm-color{
color: #f5a623;
}
.hot-color{
color: #fb7581;
}
/*------------------------------------------------
Dispenser Position Display
------------------------------------------------*/
.dispenser-position-content{
height: 90px;
border-bottom: 1px solid #e2e2e2;
}
.information-text, .position-display, .type-display{
position: relative;
font-size: 17px;
top: 25%;
}
.information-text{
font-family: PingFangSC;
float: left;
left: 10px;
color: #666666;
}
.position-display, .type-display{
float: right;
right: 10px;
font-family: PingFangTC;
text-align: right;
}
.position-display{
width: 70%;
}
/*------------------------------------------------
Dispenser Type Display
------------------------------------------------*/
.dispenser-type-content{
height: 40px;
}
//=============================
// CSS properties Configuration
//=============================
ion-toggle{
zoom: 0.5;
position: relative;
}
```
---
## Result
The final result of the UI in portrait and landscape display:
Sign in with Wallet
Connect another wallet