---
# System prepended metadata

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

---

# <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:
```typescript=9
import {ActivatedRoute} from "@angular/router";
```

* Add into constructor
```typescript=42
  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)**
```typescript=52
  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)**
```typescript=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)**
```typescript=140
  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)**

```typescript=
  async setPrefs(){
    await this.pref.saveData(StaticVariable.KEY__DEVICE_ID, this.device_id);
  }
```
7. Create method to check login preference. **(line 190-196)**

```typescript=187
  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:
![](https://i.imgur.com/81LgkGg.png)

* New Source Code:
```css=53
.content-button-space{
    position: relative;
    height:65%;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
}
```
```css=77
.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:
```typescript=8
import {StaticVariable} from "../../classes/StaticVariable/static-variable";
```

Modify device_id variable
```typescript=30
  private device_id;
```

Add method to get preference data in ngOnInit():
```typescript=66
  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:
```typescript=134
  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)**

```typescript=
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>
![2019-07-19_MA_04_01](https://i.imgur.com/PVGNpCq.gif)

<font color=red>Opening dispenser with id: MA_02_01</font>
![2019-07-19_MA_02_01](https://i.imgur.com/SPcK5XB.gif)