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

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

## Summary
Today I start to implement the design of 'Detailed Information' page. I also remodel the adjust screen methods to be more dynamic.

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

1. Rename the *isDesktopDevice* variable into *isDesktopType* and declare it with boolean datatype. **(line 28)**
2. Remove the *scaledWidth* variable. **(line 33)**
3. Rename the *deviceService* variable into *deviceDetector*. **(line 50)**
4. Modify the content of *ngOnInit()* function. **(line 55-63)**
5. Create method to get the desktop screen size. **(line 73-76)**
6. Create method to get the mobilephone screen size. **(line 78-81)**
7. Create a method to adjust the size of the page content. **(line 83-90)**
8. Create content to Dynamically adjust the desktop screen. **(line 91-95)**
9. Create content to Dynamically adjust the mobilephone screen. **(line 97-99)**
10. Set a Hostlistener for method *adjustDynamicDesktopScreen()* & *adjustDynamicMobileScreen()*. **(line 102-107)**

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 isDesktopType: boolean;

  //variables for screen & item resolution
  public screenHeight: any;
  public screenWidth: 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 deviceDetector: DeviceDetectorService,
    private pref: PreferenceManagerService) {
  }

  ngOnInit() {
    this.detectDevice();

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

    this.main();
  }

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

  private detectDevice() {
    this.isDesktopType = this.deviceDetector.isDesktop();
  }
  
  private getDesktopScreenSize(){
    this.screenHeight = window.innerHeight;
    this.screenWidth = this.screenHeight/16 * 9;
  }
    
  private getMobileScreenSize(){
    this.screenHeight = window.innerHeight;
    this.screenWidth = window.innerWidth;
  }

  private adjustScreen(){
    this.headerHeight = this.screenHeight * 0.7;
    this.contentHeight = this.screenHeight * 0.3;

    this.pageLeft = window.innerWidth/2 - this.screenWidth/2;
    this.jellyfishIconTop = this.headerHeight - 60;
    this.jellyfishIconLeft = this.screenWidth/2 - 60;
  }
  
  private adjustDynamicDesktopScreen(){
    this.getDesktopScreenSize();    
    this.adjustScreen();
  }

  private adjustDynamicMobileScreen(event?: any) {
    this.getMobileScreenSize();
    this.adjustScreen();
  }

  @HostListener('window:resize', ['$event'])
  onresize(event?: any) {
    if(this.isDesktopType)
      this.adjustDynamicDesktopScreen();
    else
      this.adjustDynamicMobileScreen();
  }

  
  public 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);
  }
    
  public getDispenserPictureUrl(){
    return this.url_dispenser_picture;
  }

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

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

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

  /**
   * Methods for button status is on or off
   */
  public 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. Replace the variable for [style.width.px] in ion-header with *screenWidth* from the typescript. **(line 1)**
2. Replace the variable for [style.width.px] in ion-content with *screenWidth* from the typescript. **(line 1)**

<ion-header no-border [style.height.px]="headerHeight" [style.width.px]="screenWidth" [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]="screenWidth" [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>

#### 1.3 dashboard.page.scss

1. Remove the *.ion-header* class. **(line 4)**

//=======================
// Header Part CSS 
//=======================
.background-image, .overlay{
    height: 100%;
    width: 100%;
}
.background-image{
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.overlay {
    z-index: 1;
    background-color: rgba($color: #000000, $alpha: 0.5);
}

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

.logo{
    position: absolute;
    top: 20px;
}

.header-button{
    position: relative;
    background-color: transparent;
    top: 20px;
    right: 20px;
    float: right;
    height:40px;
    width: 40px;
    color: white;
}

.logo {
    height: 50px;
    width: 90px;
    left: 33px;
}

//=======================
// Content Part CSS
//=======================
.content-button-space{
    position: relative;
    height:65%;
    width: 100%;
}

.content-button{
    position: relative;
    top: 0px;
    left: 0px;
    float: left;
    height:100%;
    width: 50%;
    text-align: center;
    color: black;
}

.full-button{
    position: relative;
    background-color: transparent;
    height: 100%;
    width: 100%;
}

.report-status{
    text-align: center;
    height: 35%;
    bottom: 0px;
    border-top: 1px solid #e9e9e9;
}

//=============================
// CSS properties Configuration
//=============================

/* Ripple effect */
.ripple {
    background-position: center;
    transition: background 0.8s;
}

.ripple:hover {
    background:transparent radial-gradient(circle,  transparent 1%, white 1%) center/15000%;
}

.ripple:active {
    color: #D3D3D3;
    size: 100%;
    transition: background 0s;
}

//Pressed effect

.pressed:active {
  transform: translateY(4px);
}

//button
button{
    outline: none;
}

//Dropdown button configuration
.dropbtn {
    background-color: transparent;
    border: none;
    color: white;
}
 
.dropdown {
    top: 20px;
    right: 20px;
    position: relative;
    display: inline-block;
}
    
.dropdown-content {
    position: absolute;
    display: none;
    right: 0;
    border: none;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 8px;
}
  
.dropdown-content .more-button {
    color: black;
    padding: 20px;
    top: 30%;
    height: 50px;
    text-decoration: none;
    display: block;
    border-bottom: black;
    text-align: center;
}

.more-button{
    border-radius: 8px;
    background-color: white;
    width: 100%;
}
.dropdown-content .more-button:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
    display: block;
}

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

1. Import the required libraries. **(line 1-7)**
2. Declare the requires variables. **(line 16-32)**
3. Declare the parsing parameter of the constructor. **(line 35-38)**
4. Call the device detector and dynamic adjust screen method in the *ngOnInit()* function. **(line 42-50)**
5. Create a method to detect the device type is Desktop of not. **(line 52-54)**
6. Create a method to get the screen size of the desktop. **(line 56-59)**
7. Create a method to get the screen size of the mobilephone. **(line 61-64)**
8. Create a method to adjust the page content to the screen size. **(line 66-74)**
9. Create a method to set the size of the page contents. **(line 76-79)**
10. Create a method to adjust the page content to the mobilephone screen. **(line 81-84)**
11. Create a Hostlistener to listen the changes of the screen size, and dynamically adjust the screen. **(line 86-92)**

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

@Component({
  selector: 'app-detailed-information',
  templateUrl: './detailed-information.page.html',
  styleUrls: ['./detailed-information.page.scss'],
})
export class DetailedInformationPage implements OnInit {
  
  private screenHeight: any;
  private screenWidth: any;

  private headerHeight: any;
  private contentHeight: any;

  public pageLeft: any;

  public jellyfishIconTop: any;
  public jellyfishIconLeft: any;
  public detailedInformationTop: any;

  //variables for dispenser
  private device_id = 'T4_07_01';
  public url_dispenser_picture = 'https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Image?Device_ID=' + this.device_id;
  
  public isDesktopType: any = false;

  constructor(
    private http:HttpClient, 
    private router: Router, 
    private deviceDetector: DeviceDetectorService,
    private pref: PreferenceManagerService) {
    
  }

  ngOnInit() {
    this.detectDevice();

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

  }

  private detectDevice() {
    this.isDesktopType = this.deviceDetector.isDesktop();
  }
  
  private getDesktopScreenSize(){
    this.screenHeight = window.innerHeight;
    this.screenWidth = this.screenHeight/16 * 9;
  }
    
  private getMobileScreenSize(){
    this.screenHeight = window.innerHeight;
    this.screenWidth = window.innerWidth;
  }

  private adjustScreen(){
    this.headerHeight = this.screenHeight * 0.3;
    this.contentHeight = this.screenHeight * 0.7;

    this.pageLeft = window.innerWidth/2 - this.screenWidth/2;
    this.jellyfishIconTop = this.headerHeight/2 - 20;
    this.jellyfishIconLeft = this.screenWidth/2 - 20;
    this.detailedInformationTop = this.headerHeight/2;
  }
  
  private adjustDynamicDesktopScreen(){
    this.getDesktopScreenSize();    
    this.adjustScreen();
  }

  private adjustDynamicMobileScreen(event?: any) {
    this.getMobileScreenSize();
    this.adjustScreen();
  }

  @HostListener('window:resize', ['$event'])
  onresize(event?: any) {
    if(this.isDesktopType)
      this.adjustDynamicDesktopScreen();
    else
      this.adjustDynamicMobileScreen();
  }

}

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

1. Set the ion-header size and position. **(line 1-2)**
2. Create a container for the dispenser image as the background of the header. **(line 3)**
3. Create a container for the overlay to make the background image darker. **(line 5)**
4. Create a container for the Acuo logo. **(line 7-10)**
5. Create a container for the close button. **(line 12-15)**
6. Create a container for the jellyfish icon. **(line 17-20)**
7. Create a container for the 'Detailed Information' text. **(line 22-25)**
8. Set the ion-content size and position. **(line 32)**

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

    <div class="overlay">

      <!--Acuo Logo-->
      <div class="logo">
        <img src="assets/dashboard/acuo_logo.png">
      </div>

      <!--Close Button to go back to Dashboard-->
      <button class="close-button">
        <ion-icon name="close" size="large"></ion-icon>
      </button>

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

      <!--Detail Information text-->
      <div class="detailed-information-text" [style.top.px]="detailedInformationTop">
        Detailed Information
      </div>

    </div>

  </div>
</ion-header>

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

</ion-content>

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

1. Create *.background-image* & *.overlay* classes and set their size. **(line 4-7)**
2. Set the properties of *.background-image* such as position and background-repeat. **(line 8-12)**
3. Set the properties of *.overlay* class. **(line 15-18)**
4. Create a *.logo* class and set its size and position. **(line 20-26)**
5. Create a *.close-button* class and set its properties (position, size, and color). **(line 28-37)**
6. Create a *.jellyfish-icon* class and set its properties (position and size). **(line 39-44)**
7. Create a *.detailed-information-text* and set its properties (position, size, font configuration, and color). **(line 46-56)**

//=======================
// Header Part CSS 
//=======================
.background-image, .overlay{
    height: 100%;
    width: 100%;
}
.background-image{
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.overlay {
    z-index: 1;
    background-color: rgba($color: #000000, $alpha: 0.5);
}

.logo{
    position: absolute;
    top: 20px;
    left: 20px;
    height: 43px; 
    width: 80px;
}

.close-button{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    color: white;
    background-color: transparent;
    text-align: center;
}

.jellyfish-icon{
    position: relative;
    height: 40px;
    width: 40px;
    border-radius: 50px;
}

.detailed-information-text{
    position: relative;
    height: 20px;
    width: 100%;
    font-family: PingFang-SC;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    text-align: center;
    color: white;
}

---
## Result

Here is the display of the detailed-information page: