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

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

## Summary

Today I have a weekly progress presentation. I also modify some positioning configuration in the CSS file of the Dashboard & Detailed Information Page. I also have a weekly meeting with my team to discuss about the

URL:
* [**NTUST_SmartDispenser Github ver 2019.07.25**](https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/f8eeb2e298feea2426b478a4030221b3ed7754b6)

---
## Weekly Presentation Powerpoint

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

---
## Documentation

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

1. Remove variables that store the value of pixel that used for Jellyfish icon & Bubble text top & left margin value.

2. Aldy created a variable to mark the *ngOnInit()* has already been run or not.

  // identify if ngOnInit is done
  private ngOnInitDone: boolean = false;

3. Modify the *ngOnInit()* method.

async ngOnInit() {

    this.detectDevice();

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

    // create loading screen
    await this.showLoadScreen();

    await this.setDeviceIdFromUrl();
    await this.setAPIsData();
    await this.setLocationText();

    // check if preference is not build yet
    await this.checkPrefFirstTime();
    await this.setPrefs();
    await this.getLoginEmail();

    await this.dismissLoadScreen();

    // call again to make sure that data from ngOnInit will load to ionViewDidEnter
    await this.ionViewDidEnter();

    // make ngOnInitDone to true so data can update
    this.ngOnInitDone = true;
  }

4. Modify the *ionViewDidenter()* method.

  async ionViewDidEnter() {

    await this.getLoginEmail();

    if (this.ngOnInitDone) {
      // always check if any report submitted from login id
      await this.setReportCondition(this.emailAddress);

      // always check if dispenser is being tracked
      await this.setTrackCondition(this.emailAddress);
    }
  }

5. Modify the method to adjust the screen size, Remove some unnecessary variables from it.

  private adjustScreen(){
    if((!this.isDesktopType) && (window.innerHeight < window.innerWidth)){
      this.headerHeight = this.screenHeight * 0.6;
      this.contentHeight = this.screenHeight * 0.4;
    }else{
      this.headerHeight = this.screenHeight * 0.7;
      this.contentHeight = this.screenHeight * 0.3;
    }

    // set components based on display size
    this.pageLeft = window.innerWidth/2 - this.screenWidth/2;
  }

#### 1.2 dashboard.page.html

1. Remove style pixel properties from location bubble text.

      <div class="speech-bubble">
        <div class="speech-bubble-text">
          {{dispenser_building_location}}
          <br>
          {{dispenser_floor_location}}
        </div>
      </div>

2. Remove style pixel properties from Jellyfish icon.

      <div class="jellyfish-icon">
        <img alt="avatar" src="assets/dashboard/jellyfishIcon.png">
      </div>

#### 1.3 dashboard.page.scss

1. Modify *.jellyfish-icon* class to be responsive with the screen condition.

.jellyfish-icon {
    position: absolute;
    height: 120px;
    width: 120px;
    border-radius: 50px;
    left: 50%;
    margin-left: -60px;
    bottom: -60px;
}

2. Modify *.speech-bubble* class to be responsive with the screen condition.

.speech-bubble {
    position: absolute;
    background: white;
    border-radius: 18px;
    width: 270px;
    opacity: 0.8;
    text-align: center;
    bottom: 80px;
    left: 50%;
    margin-left: -135px;
}

.speech-bubble-text {
    padding: 10px 20px;
    font-size: 15px;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    margin-left: -10px;
    margin-bottom: -10px;
}

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

1. Remove variables that store the value of pixel that used for Jellyfish icon & Bubble text top & left margin value.

2. Modify the method to adjust the screen size, Remove some unnecessary variables from it.

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

    if(this.headerHeight < 150)
      this.headerHeight = 150;

    this.contentHeight = this.screenHeight - this.headerHeight;

    this.pageLeft = window.innerWidth/2 - this.screenWidth/2;
  }

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

1. Remove style pixel properties from Jellyfish icon.

      <div class="jellyfish-icon">
        <img alt="avatar" src="assets/dashboard/jellyfishIcon.png">
      </div>

2. Remove style pixel properties from Detailed Information text.

      <div class="detailed-information-text">
        Detailed Information
      </div>

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

1. Modify the *.jellyfish-icon* class to be responsive with the screen.

.jellyfish-icon{
    position: absolute;
    height: 70px;
    width: 70px;
    border-radius: 50px;
    top: 50%;
    left: 50%;
    margin-left: -35px;
    margin-top: -35px;
}

2. Modify the *.detailed-information-text* class to be responsive with the screen.

.detailed-information-text{
    font-stretch: normal;
    text-align: center;
    color: white;
    top: 50%;
    margin-top: 45px;

---
## Discussion Result

- Dispenser API will have function to login, register, get repairman assignment (next, today, and done), send notification when arrived, send report when repairment has complete.
- Repairman can register through the app using company email address and will receive verified account notification by the company.
---
## Result

<font color=red>Final result of the application:</font>