# <center>30^th^ July, 2019</center>
###### tags: `Daily Internship Documentation`
---
## 20^th^ Day of Internship
## Summary
Today I write down some documentations for the Detailed Information page. I also update the latest update to the brach master of NTUST_Smartdispenser.
URL:
* [**NTUST_SmartDispenser Github ver 2019.07.30**](https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/b9a101c1bd4b62169bd9c3bafdc6f4890491c66d)
---
## Documentation
### 1. Detailed Information Page
#### 1.1 detailed-information.page.ts
1. Add documentation for each method.
```typescript=71
/**
* Process in ngOnInit():
* 1. Detect the device and adjust the height & width with the device screen.
* 2. Show Loading Screen before processing the API & Preference.
* 3. Process the value and variables to display the current temperature of the dispenser.
* 4. Dismiss the Loading Screen after the process is done.
*/
async ngOnInit() {
```
```typescript=100
/**
* Method to detect the device type is Desktop or not.
*/
private detectDevice() {
```
```typescript=111
/**
* Get the height & width of the desktop screen.
*/
private getDesktopScreenSize(){
```
```typescript=119
/**
* Get the height & width of the mobile screen.
*/
private getMobileScreenSize(){
```
```typescript=127
/**
* Adjust the height of the header & content for the page. Set the left margin of the page.
* If the height of the header is less than 150px, the height will be set = 150px.
*/
private adjustScreen(){
```
```typescript=142
/**
* Adjust the page height & width based on desktop screen size.
* This method will be called in HostListener & dynamically change the page size in desktop.
*/
private adjustDynamicDesktopScreen(){
```
```typescript=151
/**
* Adjust the page height & width based on mobile screen size.
* This method will be called in HostListener & dynamically change the page size in mobile.
*/
private adjustDynamicMobileScreen() {
```
```typescript=160
/**
* Listen the changes of the height & width of the page.
* It also detect the orientation of the screen is portrait/landscape
*/
@HostListener('window:resize', ['$event'])
onresize() {
```
```typescript=172
/**
* Get the device ID from preference.
*/
async getPrefsData(){
```
```typescript=183
/**
* Method to get the data of the dispenser via API.
* 1. Set the url of the dispenser picture.
* 2. Get the rawdata of the dispenser that contain the dispenser's current temperature.
* 3. Get the detail of the dispenser that contain the dispenser's current location.
*/
async setAPIsData(){
```
```typescript=199
/**
* Set the current Cold, Warm, & Hot temperature of the dispenser.
*/
setCelsiusTemperatures(){
```
```typescript=208
/**
* Set the current Cold, Warm, & Hot temperature of the dispenser according to the Celsius temperature data.
*/
setFahrenheitTemperatures(){
```
```typescript=217
/**
* Set the dispenser's building position, placement location, & type.
*/
setDispenserDetail(){
```
```typescript=226
/**
* Change the status of the temperature toggle & call the setTemperatureDisplay() method.
* Update the session when user press the toggle button.
*/
setTemperatureToggle(){
```
```typescript=237
/**
* Set the value of variables that will display the current temperature of the dispenser.
*/
setTemperatureDisplay(){
```
```typescript=246
/**
* Switch the current temperature unit based on the temperature toggle status.
* @param celsius contain the current temperature value in Celsius.
* @param fahrenheit contain the current temperature value in Fahrenheit.
*/
switchTemperature(celsius, fahrenheit){
```
```typescript=269
/**
* Create and show the Loading screen.
*/
async showLoadScreen () {
```
```typescript=283
/**
* Dismiss the Loading screen.
*/
async dismissLoadScreen () {
```
```typescript=295
/**
* Navigate to previous page & update the session.
*/
goToDashboard(){
```
2. Update the session everytime the user press the temperatre toggle button.
```typescript=230
setTemperatureToggle(){
this.isToggleActive = !this.isToggleActive;
this.setTemperatureDisplay();
this.updateCurrentSession();
}
```
#### 1.2 detailed-information.page.html
1. Add documentation for each div.
```htmlmixed=4
<!--Darker overlay for the background-->
<div class="overlay">
```
```htmlmixed=33
<!--Display for the temperature of the dispenser's water-->
<div class="temperature-display-content">
```
```htmlmixed=33
<!--Display for the temperature of the dispenser's water-->
<div class="temperature-display-content">
```
```htmlmixed=36
<!-- Segment for the temperature switch toggle-->
<div class="temperature-switch">
```
```htmlmixed=51
<!--Space for Cold, Warm, & Hot temperature display-->
<div class="temperature-display-space">
```
```htmlmixed=54
<!--Cold temperature display-->
<span class="temperature-display-block">
```
```htmlmixed=63
<!--Warm temperature display-->
<span class="temperature-display-block" color="#36a1ce">
```
```htmlmixed=72
<!--Hot temperature display-->
<span class="temperature-display-block" color="#36a1ce">
```
```htmlmixed=83
<!--Display for the current position of the dispenser-->
<div class="dispenser-position-content">
```
```htmlmixed=93
<!--Display for the type of the dispenser-->
<div class="dispenser-type-content">
```
Sign in with Wallet
Connect another wallet