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:

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

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': "+886 123 345 901",
        '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': "+886 123 345 902",
        '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': "+886 123 345 903",
        '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': "+886 123 345 904",
        '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': "+886 123 345 905",
        '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:

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

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

31st July Report

Progress

Modify Home page for Future Mission

Conclusion

tags: on-intern

tags: `on-intern`