# 14th June Report

This is the 16th study report of NTUST Internship program, before going to Taiwan. In previous report we have the flowchart of Maintenance Progress PWA work flow. Here will cover the UI design using HTML for it and by using dummy data to simulate how the design will work.

---

## Summary of this week

- Title of the page is similarly same as the Nearby Machine page, so using the same template.
- Has time to determine how long the maintenance takes from reported until to be done.
- Every progress is listed using "dot".

---

## Documentation

### 1. mt-progress.page.html

<ion-content>

  <!-- header -->
  <div class="header">
    <div class="overlay header-inside">
      
      <div class="header-inside--icon-left float-left">
        <img 
          class="icon"
          src="assets/acuo-icons/[e-mail]" 
          alt="acuo-icons1"
        >
      </div>
      
      <div class="header-inside--title-center float-left">
        <img 
          class="icon avatar"
          src="assets\acuo-avatar\[e-mail]" 
          alt="acuo-avatar1"
        >
        <h5>Maintenance Progress</h5>
      </div>
      
      <div class="header-inside--icon-right float-left">
        <img 
          class="icon"
          src="assets\cancel\[e-mail]" 
          alt="acuo-cancel1"
        >
      </div>

    </div>
  </div>

  <!-- estimate -->
  <div class="estimate">
    <div>
      <img 
        class="estimate-icon" 
        src="assets\cup-coffee\[e-mail]" 
        alt="alert"
      >
    </div>
    <div class="estimate-title">
      <b>Report submitted</b>
    </div>
    <div class="estimate-subtitle">
      Estimated completion time: 5 hours later
    </div>
  </div>

  <!-- progress -->
  <div class="progress">

    <!-- make a list -->
    <ul>
      <li *ngFor="let item of items; let i=index">

        <!-- left side the dot -->
        <div class="fa"></div>

        <!-- right side the content with left border -->
        <div class="fi">
          {{i+1}} Here is the date...
          <br>
          .. and its details ..
          <br>
          .. more details ..
          <br>
          .. more details ..
        </div>

      </li>
    </ul>

  </div>

</ion-content>

---

### 2. mt-progress.page.scss

ion-content {
    --background: #FFFFFF;
    --color: #000000;
}

.header {
    background-image: url("https://blog.tiket.com/wp-content/uploads/Gambar-Pemandangan-Alam-Terindah-Danau-Toba.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFFFFF;
    overflow: auto;
}

.header-inside {
    padding: 15px;
    overflow: auto;
}

.header-inside--icon-left {
    width: 15%;
    left: 0;
    text-align: left;
    height: 100%;
}

.header-inside--title-center {
    width: 70%;
    text-align: center;
    height: 100%;
    padding-top: 50px;
    padding-bottom: 10px;
}

.header-inside--icon-right {
    width: 15%;
    right: 0;
    text-align: right;
    height: 100%;
}

.estimate {
    margin: 20px 40px;
    padding: 30px 0;
    border-radius: 5px;
    text-align: center;
    background-color: #EDEDED;
    color: #444444;
    overflow: auto;
}

.estimate-icon {
    max-height: 30px;
    width: auto;
}

.estimate-title {
    margin-top: 15px;
}

.estimate-subtitle {
    margin-top: 10px;
}

.progress {
    margin: 20px 40px;
    padding: 0 20px;
    overflow: auto;
}

ul li {
    display: block;
    min-height: 100px;
}

ul li .fa {
    background: #ededed;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    float: left;
    z-index: 1;
}

ul li .fi {
    border-left: solid thick #ededed;
    border-width: 4px;
    margin-left: 6px;
    padding-left: 20px;
    min-height: 100px;
}

ul li:first-child .fa {
    background: #3880ff;
}

ul li:first-child .fi {
    color: #3880ff;
}

ul li:last-child .fi {
    border-width: 0;
}

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

.float-left {
    float: left;
}

---

### 3. mt-progress.page.ts

In order to responsively loop the list, using dummy data to make a list. In this example using 10 data to generate UI design of progress.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mt-progress',
  templateUrl: './mt-progress.page.html',
  styleUrls: ['./mt-progress.page.scss'],
})
export class MtProgressPage implements OnInit {

  // make 10 dummy data to generate list
  items: any = [1, 2, 3,1,1,1,1,1,1,1];

  constructor() { }

  ngOnInit() {
  }

}

---

### 4. Result of UI Design

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/16-01.JPG" alt="1" style="max-height: 500px" />
</center>
</br>

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/16-02.JPG" alt="1" style="max-height: 500px" />
</center>
</br>

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/16-03.JPG" alt="1" style="max-height: 500px" />
</center>
</br>

---

## Credits to
- Creating Step Bar in HTML and CSS (https://www.youtube.com/watch?v=eU-7UmXZPGY)
- How to make a vertical line in HTML (https://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html)

###### tags: `pre-intern report`