# 16st July Report

## Progress

**09:40** - Entering BMW Lab.

## Make Repairman App Home Page

To make page switch I use `ionic-slide`.

<ion-slides>
      <ion-slide>
<!--         ... item ... -->
      </ion-slide>
      <ion-slide>
<!--       ... item ... -->
      </ion-slide>
<!--       ... more slide ... -->
</ion-slides>

For item i use ionic card

<ion-card class="card-future">
            <ion-item lines="none">
              <ion-label slot="start">
                <h2>Client Name</h2>
              </ion-label>
              <ion-label slot="end">
                <h2>10:00</h2>
              </ion-label>
            </ion-item>
            <ion-item lines="none">
              <ion-label slot="start">
                <h2>Address</h2>
              </ion-label>
            </ion-item>
          </ion-card>

To edit bolder color use edit in css.

ion-card.card-future {
    border-left: 3px solid blue;
}

### Result :

<center>
<img src="https://imgur.com/TYTdtKq.gif" stye="height" 300px>
</center>
<br>

## Try Ionic Modal

I use ionic modal to implement this view.

<center>
<img src="https://imgur.com/ZNvKXHM.png" stye="height" 300px>
</center>
<br>

A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases.

To make a modal generate page
`npm i page ModalPage`

Add button in test page

 <ion-button (click)="openModal()">Open Modal</ion-button>

Add in typescript

import { ModalController } from '@ionic/angular';
import { ModalPagePage } from '../modal-page/modal-page.page';

constructor(public modalController: ModalController) { }

async openModal() {

    const modal = await this.modalController.create({
      component: ModalPagePage,
      componentProps: { value: 123 },
      cssClass: 'my-custom-modal-css'

    });

    await modal.present();
  }

In modul-page.page.html add

 {{val}}
  <ion-button (click)="dismiss()">Go Back</ion-button>

In modul-page.page.ts add

import { ModalController, NavParams } from '@ionic/angular';

val;
  constructor(public modalController: ModalController, public navParams: NavParams) {
    this.val = this.navParams.get('value');
  }

dismiss() {
    this.modalController.dismiss();
  }

To edit backdrop I must edit global css.

.my-custom-modal-css .modal-wrapper {
    height: 80%;
    top: 20%;
    position: absolute;
    display: block;
}

### Result:

<center>
<img src="https://imgur.com/EeApY4y.png" stye="height" 300px>
</center>
<br>

**18:00** - Leave BMW Lab.

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