# 31st July Report

## Progress

Time: **08:55**
Event: Entering the lab

---

### Modify Home page for Future Mission

Time: **15:27**
- The upper part for title and profile picture now no longer scrollable so when the content was overflowed the upper part will not get scrolled instead stay still.
- Using `ion-header` for upper part and `ion-content` for body part, `ion-header` has its own pre-defined library which make the upper part stay still on the above.
- In **home.page.html**

    <ion-app>

      <ion-header padding>
        <ion-item class="ion-item--no-background title" lines="none">
          <ion-label>{{fragmentTitle}}</ion-label>
          <ion-avatar slot="end">
            <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
          </ion-avatar>
        </ion-item>
      </ion-header>

      <ion-content padding scroll-y="false">
        <ion-slides [options]="slideOpts" #slides (ionSlideDidChange)="slideChanges()">

          <!-- DONE SLIDE -->
          <ion-slide>
            <ion-content>
              <ion-list class="ion-list--no-background" *ngFor="let missionDay of doneMissionList">

                <ion-item class="ion-item--no-background" lines="none">
                  <ion-label>
                    <h2 class="subtitle">{{missionDay.DayString.toUpperCase()}}</h2>
                    <span class="subtitle--date">{{missionDay.DateString.toUpperCase()}}</span>
                  </ion-label>
                </ion-item>

                <ion-card class="card-done" *ngFor="let missionItem of missionDay.Data">
                  <ion-item lines="none">
                    <ion-label class="card--title">
                      <span>{{missionItem.ClientName}}</span>
                    </ion-label>
                    <ion-label class="card--title-time">
                      <span>{{missionItem.MissionTimeOnlyHour}}</span>
                    </ion-label>
                  </ion-item>
                  <ion-item lines="none">
                    <ion-label class="card--address">
                      <span>{{missionItem.ClientAddress}}</span>
                    </ion-label>
                  </ion-item>
                </ion-card>

              </ion-list>

              <br>
            </ion-content>
          </ion-slide>

          <!-- TODAY SLIDE -->
          <ion-slide>
            <ion-content>
                <ion-list class="ion-list--no-background">

                  <ion-item class="ion-item--no-background" lines="none">
                    <ion-label>
                      <h2 class="subtitle">TODAY</h2>
                      <span class="subtitle--date">{{todayMissionList.Date}}</span>
                    </ion-label>
                  </ion-item>

                  <ion-card class="card-today" (click)="openDetail(item.MissionNumber)" tappable *ngFor="let item of todayMissionList.Data">
                    <ion-item lines="none">
                      <ion-label class="card--title">
                        <span>{{item.ClientName}}</span>
                      </ion-label>
                      <ion-label class="card--title-time">
                        <span>{{item.MissionTimeOnlyHour}}</span>
                      </ion-label>
                    </ion-item>
                    <ion-item lines="none">
                      <ion-label class="card--address">
                        <span>{{item.ClientAddress}}</span>
                      </ion-label>
                    </ion-item>
                  </ion-card>

                </ion-list>
            </ion-content>
          </ion-slide>

        </ion-slides>

      </ion-content>
    </ion-app>

- From code above we can see on `ion-header` which it contains the title on `ion-label` with value `{{fragmentTitle}}`.
- **Fragment Title**, or `{{fragmentTitle}}`, is a variable in back end code that content string value of title and can be changes when the fragment being changed, example from Today Mission to Future Mission and vice versa.
- Put the title and the avatar, on `ion-avatar`, into header so these will be the upper part which cannot be scroll when the body overflowed.
- The result when body being scrolled:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/36-01.gif" style="max-width:250px" />
</center>
<br>

- To accompany the front end design, in **home.page.scss**

    :root {
        --ion-safe-area-top: 20px;
        --ion-safe-area-bottom: 22px;
    }

    ion-header {
        background-color: #ededed;
        height: auto;
        padding-bottom: 0px;
    }

    .header-md:after {
        width: 0%;
    }

    ion-content {
        --background: #ededed;
        height: 85%;
        padding-top: 0px;
    }

    .swiper-slide {
        display: block;

    }

    ion-slide>h2 {
        margin-top: 2.8rem;
    }

    ion-slide {
        height: 100vh;
        flex-direction: column;
    }

    ion-card.card-future {
        border-left: 5px solid #259ed6;
    }

    ion-card.card-today {
        border-left: 5px solid #259ed6;
        cursor: pointer;
    }

    ion-card.card-done {
        border-left: 5px solid #69d392;
    }

    .ion-list--no-background {
        background: var(
            --ion-item-background,
            var(--ion-background-color, rgba (0,0,0,0))
        );
    }

    .ion-item--no-background {
        --background: rgba(0, 0, 0, 0);
    }

    .title {
        font-size: 24px;
        font-weight: bold;
        padding-left: 0px;
    }

    .subtitle {
        font-weight: bold;
        font-size: 16px
    }

    .subtitle--date {
        font-size: 14px;
        color: rgba($color: #000000, $alpha: 0.75);
    }

    .card--title {
        margin-bottom: -5px;
        font-size: 18px;
        font-weight: bold;
    }

    .card--title-time {
        margin-bottom: -5px;
        text-align: right;
        font-size: 18px;
        font-weight: bold;
    }

    .card--address {
        margin-top: -5px;
        font-size: 16px;
        color: rgba($color: #000000, $alpha: 0.75);
    }

- Add the `ion-header` and `.header-md:after` class, both of these affect the `ion-header` design in HTML.
- The rest is same, if there any then it's just minor change, like size, color, etc.

- For the main part, in **home.page.ts**

    import { ViewChild } from '@angular/core';
    import { IonSlides } from '@ionic/angular';

    export class HomePage {

        futureMissionList = [];
        fragmentTitle: string;

        fragmentTitleArray = ["What I've Done", "Today's Mission", "Future"];

        ngOnInit() {
            this.fragmentTitle = this.fragmentTitleArray[1];
            this.setDataFuture();
        }

        async setDataFuture () {

            // initialize
            let data = [ ... ];

            this.futureMissionList = data;
          }
      }
    }

- Because the data is too long, I think it's better to have seperate documentation with the back end code (.ts).
- The dummy data being used:

    [
      {
        'DateString': "August 1",
        'DayString': "Thursday",
        'Date': "...",
        'Data': [
          {
            'ClientName': "Client No. 001",
            'ClientAddress': "Taipei, Keelung Rd. No. 01",
            'MissionTime': "2019-07-01 12:00:00",
            'MissionTimeOnlyHour': "12:00",
            'ClientPhone': "[phone]",
            'ClientContactPerson': "Mr. 010",
            'MachineType': "UN-1321AG-1-L",
            'MachineNumber': "456701",
            'ErrorCode': "1",
            'ProblemOccured': "Your Lie in April 1st",
            'NotificationTime': "2019-30-29 11:41:00",
            'Repairman': "198503302003121001",
            'ClientNumber': "132401",
            'MissionNumber': "051"
          },
          {
            'ClientName': "Client No. 002",
            'ClientAddress': "Taipei, Keelung Rd. No. 02",
            'MissionTime': "2019-07-01 18:00:00",
            'MissionTimeOnlyHour': "18:00",
            'ClientPhone': "[phone]",
            'ClientContactPerson': "Mr. 020",
            'MachineType': "UN-1321AG-1-L",
            'MachineNumber': "456701",
            'ErrorCode': "1",
            'ProblemOccured': "Your Lie in April 1st",
            'NotificationTime': "2019-30-29 11:41:00",
            'Repairman': "198503302003121001",
            'ClientNumber': "132402",
            'MissionNumber': "052"
          }
        ]
      },
      {
        'DateString': "August 3",
        'DayString': "Saturday",
        'Date': "...",
        'Data': [
          {
            'ClientName': "Client No. 003",
            'ClientAddress': "Taipei, Keelung Rd. No. 03",
            'MissionTime': "2019-07-01 15:00:00",
            'MissionTimeOnlyHour': "15:00",
            'ClientPhone': "[phone]",
            'ClientContactPerson': "Mr. 030",
            'MachineType': "UN-1321AG-1-L",
            'MachineNumber': "456701",
            'ErrorCode': "1",
            'ProblemOccured': "Your Lie in April 1st",
            'NotificationTime': "2019-30-29 11:41:00",
            'Repairman': "198503302003121001",
            'ClientNumber': "132403",
            'MissionNumber': "053"
          }
        ]
      },
      {
        'DateString': "August 4",
        'DayString': "Sunday",
        'Date': "...",
        'Data': [
          {
            'ClientName': "Client No. 004",
            'ClientAddress': "Taipei, Keelung Rd. No. 04",
            'MissionTime': "2019-07-01 12:00:00",
            'MissionTimeOnlyHour': "12:00",
            'ClientPhone': "[phone]",
            'ClientContactPerson': "Mr. 040",
            'MachineType': "UN-1321AG-1-L",
            'MachineNumber': "456701",
            'ErrorCode': "1",
            'ProblemOccured': "Your Lie in April 1st",
            'NotificationTime': "2019-30-29 11:41:00",
            'Repairman': "198503302003121001",
            'ClientNumber': "132404",
            'MissionNumber': "054"
          },
          {
            'ClientName': "Client No. 005",
            'ClientAddress': "Taipei, Keelung Rd. No. 05",
            'MissionTime': "2019-07-01 10:00:00",
            'MissionTimeOnlyHour': "10:00",
            'ClientPhone': "[phone]",
            'ClientContactPerson': "Mr. 050",
            'MachineType': "UN-1321AG-1-L",
            'MachineNumber': "456701",
            'ErrorCode': "1",
            'ProblemOccured': "Your Lie in April 1st",
            'NotificationTime': "2019-30-29 11:41:00",
            'Repairman': "198503302003121001",
            'ClientNumber': "132405",
            'MissionNumber': "055"
          }
        ]
      }
    ]

- The result in Home page for Future Mission:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/36-02.gif" style="max-width:250px" />
</center>
<br>

- In dummy data there are still unused attributes which not being displayed in Home page on Future Mission.
- These data will not discarded because still unclear if each item will be use in next work.

---

## Conclusion
- Modify the Home page for Future mission, on "Future" fragment, by get the data from backend code (.ts) and display dynamically on frontend (HTML and SCSS).
- Using dummy data to perform demo so the design can be displayed as expected.
- For Home page on Done Mission fragment will be developt and test using dummy data on tomorrow because it has to generate photo (up to 3 images) on each item.

---

Time: **18:00**
Event: Leaving the lab

###### tags: `on-intern`