---
# System prepended metadata

title: '<center>30^th^ July, 2019</center>'
tags: [Daily Internship Documentation]

---

# <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">
```