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

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

## Summary

Today I try to get the device id of the dispenser from the URL, and then store it into preference.

**Repository**:
* [Click here to open the Student App Github repository version 2019.07.23](https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/7ed9d270e09f3d749cef04871b2b0830076dd900)

---
## Documentation

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

1. Add ActivatedRoute library. This library could get dynamic id in a URL.

* import library:

import {ActivatedRoute} from "@angular/router";

* Add into constructor

  constructor(
    private http:HttpClient,
    private deviceDetector: DeviceDetectorService,
    private pref: PreferenceManagerService,
    private navCtrl: NavController,
    private alertCtrl: AlertController,
    private api: DispenserAPIService,
    private actRoute: ActivatedRoute)
  {}

2. Call method to get device id from URL in ngOnInit(). **(line 63)**

  async ngOnInit() {
    this.detectDevice();

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

    this.setDeviceIdFromUrl();

    // Get the device id from URL
    this.device_id = this.actRoute.snapshot.paramMap.get('device_id');
    await this.setPrefs();

    // check if preference is not build yet
    await this.checkPrefFirstTime();
    await this.setAPIsData();
  }

3. Call method to check login preference in ionViewDidEnter(). **(line 68)**

  ionViewDidEnter() {
    this.setLoginPref();
  }

4. Group some codes in ngOnInit() that set preferences into some methods.

5. Simplify if else codes in *trackButton()* **(line 146)**

  async trackButton(){

    // check login first, return true if login is true
    if (await this.checkLogin()) {

      // act the active to
      this.trackIsActive = !this.trackIsActive;

      let email = await this.pref.getData(StaticVariable.KEY__SESSION_ID);
      await this.api.wantUpdateTrack(this.device_id, email, this.trackIsActive);
    }
  }

6. Create method to set preferences. **(line 183)**

  async setPrefs(){
    await this.pref.saveData(StaticVariable.KEY__DEVICE_ID, this.device_id);
  }

7. Create method to check login preference. **(line 190-196)**

  async setLoginPref(){
    // check if user has report something
    let email = await this.pref.getData(StaticVariable.KEY__SESSION_ID);
    if (email !== "" || email !== null || email !== undefined) {
      this.hasReportSubmitted = await this.api.checkAnyReportSubmitted(email, this.device_id);
    }
  }

[[**Press to go to previous dashboard.page.ts vers 2019.07.19**](https://gist.github.com/ianjoseph2204/ede155c07572d378e7f2108104ba6c4c)

#### 1.2 dashboard.page.html

<font color=red>There isn't any change in the html part.</font>

* ([**Press to go to previous Dashboard Page vers 2019.07.19**](https://hackmd.io/BrjVNqWJSamQWkQ1qpVJ1Q#1-Dashboard-Page))

#### 1.3 dashboard.page.scss

1. I moved the border between button space and report status space css.

* Github changes:

* New Source Code:

.content-button-space{
    position: relative;
    height:65%;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
}

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

* [(**Click here to see the full dashboard.page.scss source code ver 2019.07.19**)](https://gist.github.com/ianjoseph2204/d0802ca9d7890ff3e2a76250aa1caf9b)

### 2. Detailed Information Page
#### 2.1 detailed-information.page.ts

1. Get the current device_id from preference. **(line 134-136)**

* New Source code:

import {StaticVariable} from "../../classes/StaticVariable/static-variable";

Modify device_id variable

  private device_id;

Add method to get preference data in ngOnInit():

  async ngOnInit() {

    this.detectDevice();

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

    await this.getPrefsData();
    await this.setAPIsData();

    this.setCelsiusTemperatures();
    this.setFahrenheitTemperatures();
    this.setDispenserDetail();
    this.setTemperatureDisplay();
  }

Create method to get preference data:

  async getPrefsData(){
    this.device_id = await this.pref.getData(StaticVariable.KEY__DEVICE_ID);
  }

* [(**Click here to see the full detailed-information.page.ts source code**)](https://gist.github.com/ianjoseph2204/f9323c5c3fa6ef971fe1832fce726eab)

#### 2.2 detailed-information.page.html

There isn't any change in the html part.

* ([**Press to go to previous detailed-information.page.html ver 2019.08.17**](https://gist.github.com/ianjoseph2204/962bac33589ac67f0b10bcb10bbaab7c))

#### 2.3 detailed-information.page.scss

There isn't any change in the html part.
* ([**Press to go to previous detailed-information.page.scss Page ver 2019.08.17**](https://gist.github.com/ianjoseph2204/e4aae2f02f9eb097ae11dbcb193b71e2))

### 3. App Folder

#### 3.1 app-routing.module.ts
1. Add a new active route with parameter device_id. **(line 6)**

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

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard/:device_id', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule' },
  { path: 'dashboard', 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>Opening dispenser with id: MA_04_01</font>

<font color=red>Opening dispenser with id: MA_02_01</font>