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

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

## Summary
Today, I present my progress to all laboratory members and Professor RT. After the presentation, I integrate the pages that Thariq and Aldy has made. I also create routes to their pages from Dashboard page.

---
## Weekly Presentation Powerpoint

{%slideshare IanJoseph13/20190710-ian-josephstatusreport %}

---
## Documentation

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

1. import StaticVariable module. **(line 1)**
2. import PreferenceManagerService module. **(line 7)**
3. add private pref: PreferenceManagerService parameter into constructor. **(line 50)**
4. Create method *asyn main()* and call it in *ngOnInit()* **(line 60)**
5. Create routing method to 'Report Problem' & 'Maintenace Records' page. **(line 110-116)**
6. Create initial check preference to parse device ID and check login session. **(line 128-145)**

import { StaticVariable } from './../../classes/StaticVariable/static-variable';
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { HostListener } from "@angular/core";
import { Router } from '@angular/router';
import { DeviceDetectorService } from 'ngx-device-detector';
import { PreferenceManagerService } from '../../services/PreferenceManager/preference-manager.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
})

export class DashboardPage implements OnInit {
  private device_id = 'T4_07_01';
  
  //variables for maintenance progress information
  private url_maintenance_progress = 'https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Repair?Device_ID=' + this.device_id;
  private maintenance_status: any;
  private maintenance_data: any;
  private no_report_problem: boolean;

  //variables for dispenser picture
  public url_dispenser_picture = 'https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Image?Device_ID=' + this.device_id;
  
  //variables for device detector
  private isDesktopDevice;

  //variables for screen & item resolution
  public screenHeight: any;
  public screenWidth: any;
  public scaledWidth: any;

  public headerHeight: any;
  public contentHeight: any;

  public pageLeft: any;
  public jellyfishIconTop: any;
  public jellyfishIconLeft: any;

  //Variable for tracking progress
  public trackIsActive: boolean = false;
  
  deviceInfo = null;
  constructor(
    private http:HttpClient, 
    private router: Router, 
    private deviceService: DeviceDetectorService,
    private pref: PreferenceManagerService) {
    this.detectDevice();
  }

  ngOnInit() {
    this.getScreenSize();
    this.main();
  }

  async main () {
    await this.checkPrefFirstTime();
  }

  detectDevice() {
    this.isDesktopDevice = this.deviceService.isDesktop();
  }
  
  @HostListener('window:resize', ['$event'])
  getScreenSize(event?: any) {
    this.screenWidth = window.innerWidth;
    this.screenHeight = window.innerHeight;

    if(this.isDesktopDevice)
      this.scaledWidth = this.screenHeight/16 * 9;
    else
      this.scaledWidth = this.screenWidth;
    
    this.headerHeight = this.screenHeight * 0.7;
    this.contentHeight = this.screenHeight * 0.3;

    this.pageLeft = this.screenWidth/2 - this.scaledWidth/2;
    this.jellyfishIconTop = this.headerHeight - 60;
    this.jellyfishIconLeft = this.scaledWidth/2 - 60;
  }

  maintenanceStatus(){
    this.http.get(this.url_maintenance_progress).subscribe(res => {
      this.maintenance_data = res["Data"];
      this.maintenance_status = this.maintenance_data["status"];
    })
    
    if(this.maintenance_status != 4)
      this.no_report_problem = true;
    else
      this.no_report_problem = false;
      
    console.log('Report status: ' + this.no_report_problem);
  }
    
  getDispenserPictureUrl(){
    return this.url_dispenser_picture;
  }

  /**
   * Methods for routing to another page
   */
  goToDetailedInformation(){
    this.router.navigate(['detailed-information']);
  }

  goToReportProblem(){
    this.router.navigate(['report-problem']);
  }

  goToMaintenanceRecords(){
    this.router.navigate(['maintenance-records']);
  }

  /**
   * Methods for button status is on or off
   */
  trackButton(){
    if(!this.trackIsActive)
      this.trackIsActive = true;
    else
      this.trackIsActive = false;
  }

  /**
   * Check First Time Prefference
   */
  async checkPrefFirstTime () {
      
    // in here check the first time when app opened
    let a = await this.pref.getData(StaticVariable.KEY__CHECK_PREF_CREATED);
    if (a === null || a === undefined) {

      // create some first
      await this.pref.saveData(StaticVariable.KEY__CHECK_PREF_CREATED, true);
      await this.pref.saveData(StaticVariable.KEY__LAST_DATE, new Date());
      await this.pref.saveData(StaticVariable.KEY__LAST_PAGE, null);
      await this.pref.saveData(StaticVariable.KEY__MAINTENANCE_PROGRESS__DEVICE_ID, null);
      await this.pref.saveData(StaticVariable.KEY__NEARBY_DISPENSER__DEVICE_ID, null);
      await this.pref.saveData(StaticVariable.KEY__SESSION_ID, null); 
    }
  }     
}  

#### 1.2 dashboard.page.html

1. Add click function that call *goToMaintenanceRecords()* method in 'Maintenance Records' button. **(line 15)**
2. ADd click function that call *goToReportProblem()* method in 'Report Problem' button. **(line 44)**

<ion-header no-border [style.height.px]="headerHeight" [style.width.px]="scaledWidth" [style.left.px]="pageLeft"
  position="absolute">
  <div class="background-image" [ngStyle]="{'background-image': 'url(' + url_dispenser_picture + ')'}">

    <div class="overlay">
      <div class="logo">
        <img src="assets/dashboard/acuo_logo.png">
      </div>

      <!--More button for dropdown options-->
      <span class="dropdown" style="float: right;">
        <button class="ripple dropbtn">
          <ion-icon name="more" size="large"></ion-icon>
          <div class="dropdown-content">
            <button class="more-button" (click)="goToMaintenanceRecords()">Maintenance records</button>
            <button class="more-button" (click)="goToDetailedInformation()">Detailed information</button>
          </div>
        </button>
      </span>

      <!--Star button for tracking feature-->
      <span>
        <button class="ripple header-button" (click)="trackButton()">
          <ion-icon name="star" size="large" *ngIf="trackIsActive == true"></ion-icon>
          <ion-icon name="star-outline" size="large" *ngIf="trackIsActive == false"></ion-icon>
        </button>
      </span>

      <div class="jellyfish-icon" [style.top.px]="jellyfishIconTop" [style.left.px]="jellyfishIconLeft">
        <img alt="avatar" src="assets/dashboard/jellyfishIcon.png">
      </div>
    </div>

  </div>
</ion-header>

<ion-content [style.height.px]="contentHeight" [style.width.px]="scaledWidth" [style.left.px]="pageLeft"
  position="absolute">

  <div class="content-button-space">

    <!--Report Dispenser button-->
    <span class="content-button">
      <button class="ripple full-button" (click)="goToReportProblem()">
        <ion-icon name="warning" size="large"></ion-icon>
        <p>Report dispenser</p>
      </button>
    </span>

    <!--Nearby Dispenser button-->
    <span class="content-button">
      <button class="ripple full-button">
        <ion-icon name="pin" size="large"></ion-icon>
        <p>Nearby dispenser</p>
      </button>
    </span>

  </div>

  <div class="report-status">
    No Report Problem
  </div>

</ion-content>

---
## Result

This is the result of the integration. I already create routing to another 2 pages. Aldy will manage the routing to his page.