# <center>3^rd^ July, 2019</center>

###### tags: `Daily Internship Documentation`
---
## 1^st^ day of Internship

## Summary
Today, I continue the progress of the Dashboard page that I made during the preparation time. I could make the dashboard page adjust the size of the screen size; create some icons for the buttons; and smarten the header, content, and report status section.

Beside doing the job above, today I have a welcoming party from some professors and laboratory assistants.

---
## Documentation

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

1. Import HostListener module to listen for new event, such as screen size change. **(line 4)**
2. Create some variables to be parsed into html which contain the pixel value for height, width, or distance from page border. **(line 24-34)**
3. Create getScreenSize() function to track the change of screen size and parse it to html in real time. **(line 45-58)**

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { HostListener } from "@angular/core";
import { Router } from '@angular/router';

@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 screen resolution
  public screenHeight: any;
  public screenWidth: any;

  public headerHeight: any;

  public jellyfishIconTop: any;
  public jellyfishIconLeft: any;

  public bodyButtonsHeight: any;
  public reportStatusHeight: any;

  //Variable for tracking progress
  public trackIsActive: boolean;
  
  constructor(private http:HttpClient) {  }
  ngOnInit() {
    this.getScreenSize();
  }
  
    @HostListener('window:resize', ['$event'])
    getScreenSize(event?: any) {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
      
      this.headerHeight = this.screenHeight * 0.7;
      
      this.jellyfishIconTop = this.headerHeight - 60;
      this.jellyfishIconLeft = this.screenWidth/2 - 60;

      this.bodyButtonsHeight = window.innerHeight * 0.2;
      this.reportStatusHeight = window.innerHeight * 0.1;
      //console.log("Screen Width: " + this.screenWidth);
      //console.log("Jellyfish position: " + this.jellyfishIconLeft);
    }

    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;
    }
}

#### 1.2 dashboard.page.html

1. Get the header height from typescript and set no border to remove the bottom border between header and content. **(line 1)**
2. Set the dispenser image as background from typescript. **(line 2)**
3. Create overlay div over the background. **(line 4)**
4. Create jellyfishIcon and set the top distance according to the value that parsed from typescript. **(line 17-20)**
5. Set the bodyButtons height. **(line 27)**
6. Create report and nearby button. **(line 28-36)**
7. Create report status. **(line 39-41)**

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

        <div class="trackButton">
            <ion-icon slot="icon-only" name="star-outline" size="large" color="white"></ion-icon>
        </div>

        <div class="optionButton">
          <ion-icon name="more" size="large"></ion-icon>
        </div>

        <div class="jellyfishIcon" [style.top.px]="jellyfishIconTop" [style.left.px]="jellyfishIconLeft">
          <img src="assets/dashboard/jellyfishIcon.png" height="120px" width="120px">
        </div>
      </div>

    </div>
</ion-header>

<ion-content>

  <div class="bodyButtons" [style.height.px]="bodyButtonsHeight">
    <div class="reportButton">
      <img src="assets/dashboard/warning.png">
      <p>Report problem</p>
    </div>

    <div class="nearbyButton">
      <img src="assets/dashboard/gps.png">
      <p>Nearby dispenser</p>
    </div>
  </div>

  <div class="reportStatus" [style.height.px]=reportStatusHeight>
    <ion-text color="#676563">No report problem</ion-text>
  </div>

</ion-content>

#### 1.3 dashboard.page.scss

1. Create .ion-header to set width & positioning type for the ion-header tag. **(line 2-5)**
2. Create .overlay to set an overlay over the background image. **(line 15-20)**
3. Create .jellyfishIcon to set the width of icon and positioning type. **(line 22-25)**
4. Create .logo, .optionButton and .trackButton to set the height & width, positioning type, distance from border, color, and icon size. **(line 27-43)**
5. Create .bodyButtons to separate the space between buttons in the content and report status. **(line 55-57)**
6. Create .reportButton and .nearbyButton to set the height & width, positioning type, distance from border, and color. **(line 59-74)**
7. Create .reportStatus to set the position of text, distance from bottom, and make border-top. **(line 76-80)**

// Header Part CSS
.ion-header {
    position: relative;
    width:100%;
}

.background-image{
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100%;
    width: 100%;
}

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

.jellyfishIcon{
    position: absolute;
    width: 100%;
}

.optionButton, .trackButton, .logo{
    position: absolute;
    top: 20px;
}

.optionButton, .trackButton{
    height:40px;
    width:40px;
    color: white;
    size: 100px;
}

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

.optionButton{
    right: 20px;
}

.trackButton{
    right: 70px;
}

//Content Part CSS

.bodyButtons{
    position: relative;
}

.reportButton, .nearbyButton{
    position: relative;
    text-align: center;
    display: inline-block;
    top: 10px;
    width: 50%;
    height: 70px;
}

.reportButton{
    left: 0px;
}

.nearbyButton{
    right: 0px;
}

.reportStatus{
    text-align: center;
    bottom: 0px;
    border-top: 1px solid #e9e9e9;
}

---
## Result