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

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

## Summary

Today I modify the balloon that displays the dispenser current position that has been created by Thariq before. I also remove unnecessary routing from app-routing.module.ts

URL:
* [**NTUST_SmartDispenser Github ver 2019.07.24**](https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/09219d540abd87af3e7366bab2144011c5f1e0a7)
* [**NTUST_RepairmanApp Github ver 2019.07.24**](https://github.com/ianjoseph2204/NTUST_RepairmanApp/tree/31b18608f845edb38fd451c4f09ad186eb793f6c)

---
## Documentation

### 1. Dashboard Page
#### 1.1 dashboard.page.ts

1. Create variables to store the data of the dispenser's rawtdata & location.

private dispenser_detail: any;

public dispenser_building_location: string = "";
public dispenser_floor_location: string = "";

2. Create variables to store the pixel value of balloonText top & left margin.

public balloonTextTop: any;
public balloonTextLeft: any;

3. Modify *ngOnInit()* function.

  async ngOnInit() {

    this.detectDevice();

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

    // create loading screen
    await this.showLoadCtrl();

    await this.setDeviceIdFromUrl();
    await this.setAPIsData();
    await this.setLocationText();

    // check if preference is not build yet
    await this.checkPrefFirstTime();
    await this.setPrefs();
    await this.getLoginEmail();

    await this.dismissLoadCtrl();

    // call again to make sure that data from ngOnInit will load to ionViewDidEnter
    await this.ionViewDidEnter();
  }

4. Store the data of dispenser_detail from api.

  async setAPIsData () {
    // get URL of dispenser picture
    this.url_dispenser_picture = await this.api.getDispenserPictureUrlOnly(this.device_id);

    // get dispenser detail location and type
    this.dispenser_detail = await this.api.getDispenserDetail(this.device_id);
  }

5. Create a method to store the location data of the dispenser.

  setLocationText(){
    this.dispenser_building_location = "Hi! I am Jellyfish and lives in the \n" + this.dispenser_detail['Building'] + ",";
    this.dispenser_floor_location = this.dispenser_detail['Position'];
    this.dispenser_floor_location.toLowerCase();
  }

#### 1.2 dashboard.page.html

1. Create the bubble text to show the current position of the dispenser.

<div class="speech-bubble" [style.top.px]="balloonTextTop" [style.left.px]="balloonTextLeft">
  <div class="speech-bubble-text">
    {{dispenser_building_location}}
    <br>{{dispenser_floor_location}}!
  </div>
</div>

#### 1.3 dashboard.page.scss

1. Change the position property of *.jellyfish-icon* class to be relative.

.jellyfish-icon {
    position: absolute;
    height: 120px;
    width: 120px;
    border-radius: 50px;
}

2. Remove margin-top from *.report-status* class.

.report-status {
    position: relative;
    text-align: center;
    height: 35%;
    bottom: 0;

3. Thariq create some classes for the bubble text.

.speech-bubble {
    position: relative;
    background: white;
    border-radius: 15px;
    width: 270px;
    opacity: 0.8;
    text-align: center;
}

.speech-bubble-text {
    padding: 10px 20px;
    font-size: 15px;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    margin-left: -10px;
    margin-bottom: -10px;
}

### 2. Detailed Information folder
#### 2.1 detailed-information.module.ts

1. Modify the method to set temperature display. This method will call the temperature filter method.

  setTemperatureDisplay(){
    this.displayHotTemp = this.filterTemperature(this.celsiusHotTemp, this.fahrenheitHotTemp);
    this.displayWarmTemp = this.filterTemperature(this.celsiusWarmTemp, this.fahrenheitWarmTemp);
    this.displayColdTemp = this.filterTemperature(this.celsiusColdTemp, this.fahrenheitColdTemp);
  }

2. Create a method to filter the Temperature value to be displayed.

  filterTemperature(celsius, fahrenheit){
    let displayTemp = "";

    if(celsius != null){
      if(!this.isToggleActive)
        displayTemp = celsius + "°C";
      else
        displayTemp = fahrenheit + "°F";
    }else{
      if(!this.isToggleActive)
        displayTemp = "...°C";
      else
        displayTemp = "...°F";
    }

    return displayTemp;
  }

### 3. App folder
#### 3.1 app-routing.module.ts

1. Remove unnecessary 'dashboard' path, because we are using path 'dashboard/:device_id' path.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard/:device_id', pathMatch: 'full' },
  { path: 'dashboard/:device_id', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule' },
  { path: 'detailed-information', loadChildren: './pages/detailed-information/detailed-information.module#DetailedInformationPageModule' },
  { path: 'maintenance-records', loadChildren: './pages/maintenance-records/maintenance-records.module#MaintenanceRecordsPageModule' },
  { path: 'report-problem', loadChildren: './pages/report-problem/report-problem.module#ReportProblemPageModule'},
  
  { path: 'mt-progress', loadChildren: './pages/mt-progress/mt-progress.module#MtProgressPageModule'},
  { path: 'nearby', loadChildren: './pages/nearby/nearby.module#NearbyPageModule'},
  
  { path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule'},
  { path: 'register', loadChildren: './pages/auth/register/register.module#RegisterPageModule'}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

---
## Result

<font color=red>Dashboard page when accessing dispenser with id MA_04_01:</font>

<font color=red>Dashboard page when accessing dispenser with id MA_02_01:</font>