home.html

<ion-header class="glass top-header">
  <ion-toolbar>
    <a class="header-link">myTravel</a>
    <ion-buttons end>
      <a ion-button class="btn-ico profile spaced"
        (click)="openNav('profile')"></a>
      <a ion-button class="btn-ico settings spaced"
        (click)="openNav('settings')"></a>
      <a ion-button class="btn-ico help"></a>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding
  can-swipe-back="false"
  [class.hasmodal]="$s.isForexModal===true || $s.isBookFor === true || !!$s.isDeleteConfirmation"
>
  <div class="welcome-section">
    <h1>Hi, {{$vm.db.defaultUsername}}</h1>
    <div class="book">
      <a class="btn-bookfor" (click)="showBookFor()">{{$s.bookFor || 'Book for'}}</a>
    </div>
    <!-- /.book -->
    <div class="trips">
      <div class="trip-card plane"
        (click)="openNav('NewTrip')"
      >
        <h4 class="caption">NEW TRIP</h4>
      </div>
      <!-- /.trip-card -->
      <div class="trip-card bag"
        (click)="openNav('mytrips')">
        <h4 class="caption">MY TRIPS</h4>
      </div>
      <!-- /.trip-card -->
    </div>
    <div class="trip-sn trips-ongoing">
      <h3 class="title">Ongoing trip</h3>
      
    <ion-list class="swipe-cardlist">
      <ion-item-sliding class="itinerary-card"
        *ngFor="let item of $vm.db.home.ongoingTrip; let i = $index"
      >
        <ion-item>
          <ion-card class="fluid" >
            <ion-card-content
              (click)="openNav('itineraryStatus')"
            >
              <header>
                <span class="date-from">{{item.dateFrom}}</span>
                <span class="date-to">{{item.dateTo}}</span>
              </header>
              <div class="route">
                <div class="airport from">
                  <i class="takeoff"></i>
                  <div class="code src">{{item.fromCode}}</div>
                  <div class="city src-city">{{item.fromCity}}</div>
                  <div class="time">{{item.scheduleDeparture}}</div>
                </div>
                <div class="airport to">
                  <i class="landing"></i>
                  <div class="code dest">{{item.toCode}}</div>
                  <div class="city dest-city">{{item.toCity}}</div>
                  <div class="time">{{item.scheduledArrival}}</div>
                </div>
              </div>
              <!-- /.route -->
            </ion-card-content>
          </ion-card>
          <!-- /.itinerary-card -->
        </ion-item>
        <ion-item-options class="item-options" side="right">
          
          <div class="hidden-con">
            <a class="hidden-lnk del"
              (click) = "removeTripByIndex(i, $vm.db.home.ongoingTrip)"
            ></a>
            <a class="hidden-lnk edit"></a>
            <a class="hidden-lnk accmoney"
              (click) = "showForex($event)"
            ></a>
          </div>

        </ion-item-options>
      </ion-item-sliding>

      <div class="msg noresult"
          *ngIf="$vm.db.home.ongoingTrip && $vm.db.home.ongoingTrip.length<=0"
        >No more trips found</div>
    </ion-list>
    </div>
    <!-- /.trips-ongoing -->
    <div class="trip-sn trips-ongoing">
      <h3 class="title">Upcoming trips</h3>
      <ion-list class="swipe-cardlist">
        <ion-item-sliding class="itinerary-card"
        *ngFor="let item of $vm.db.home.upcomingTrips"
        >
          <ion-item>
            <ion-card class="fluid" >
              <ion-card-content
                (click)="openNav('itineraryStatus')"
              >
                <header>
                  <span class="date-from">{{item.dateFrom}}</span>
                  <span class="date-to">{{item.dateTo}}</span>
                </header>
                <div class="route">
                  <div class="airport from">
                    <i class="takeoff"></i>
                    <div class="code src">{{item.fromCode}}</div>
                    <div class="city src-city">{{item.fromCity}}</div>
                    <div class="time">{{item.scheduleDeparture}}</div>
                  </div>
                  <div class="airport to">
                    <i class="landing"></i>
                    <div class="code dest">{{item.toCode}}</div>
                    <div class="city dest-city">{{item.toCity}}</div>
                    <div class="time">{{item.scheduledArrival}}</div>
                  </div>
                </div>
                <!-- /.route -->
              </ion-card-content>
            </ion-card>
                  <!-- /.itinerary-card -->
          </ion-item>
          <ion-item-options class="item-options" side="right">
            
            <div class="hidden-con">
              <a class="hidden-lnk del"
                (click) = "removeTripByIndex(i, $vm.db.home.upcomingTrips)"
              ></a>
              <a class="hidden-lnk edit"></a>
              <a class="hidden-lnk accmoney"
                (click) = "showForex($event)"
              ></a>
            </div>

          </ion-item-options>
        </ion-item-sliding>
        <div class="msg noresult"
          *ngIf="!!$vm.db.home.upcomingTrips && $vm.db.home.upcomingTrips.length<=0"
        >No more trips found</div>
      </ion-list>
    </div>
    <!-- /.trips-ongoing -->
  </div>
  <!-- modals -->


  <div class="modal-wrap  modal-book-for"
    *ngIf="!!$s.isBookFor"
  >
    <div class="modal">
      <ion-card class="fluid">
        <ion-card-content>
          <h2 class="title">Book for</h2>
          <a class="close" (click)="$s.isBookFor = false"></a>
          <div class="mcon">
            <a class="opt" *ngFor="let item of $lookup.bookfor"
            [class.selected] = "item.label === $s.bookFor"
            (click) = "$s.bookFor = item.label; $s.isBookFor = false;"
            >{{item.label}}</a>
          </div>
          <div class="book-for-emp">
            <h3 class="title-book"> Book for Employee </h3>
            <!-- /.title-book -->
            <div class="empno">
              <input type="number" pattern="[0-9]*" class="val inputctrl" placeholder="Employee number" #empno
                [(ngModel)]="$s.bookforEmpVal"
                (focus)="$s.bookForEmpError = false"
              />
              <a class="arrow" 
                (click)="bookforEmp()"
              ></a>
              <div class="error-msg"
                *ngIf="!!$s.bookForEmpError"
              >{{$s.bookForEmpErrorMsg}}</div>
            </div>
          </div>
        </ion-card-content>
      </ion-card>
    </div>
    <!-- /.modal -->
  </div>
  <!-- /.modal-wrap -->

  <div class="modal-wrap"
    *ngIf="!!$s.isForexModal"
  >
    <div class="modal modal-forex">
      <ion-card class="fluid">
        <ion-card-content>
          <h2 class="title">Add forex amount</h2>
          <a class="close" (click)="$s.isForexModal = false"></a>
          <div class="mcon">
            <div class="cash-card">
              <div class="rw-cc"
                *ngFor="let item of $vm.db.home.forex"
              >
                <span class="lbl">{{item.amountType}}</span>
                <span class="val">{{item.value}}</span>
              </div>
              <div class="rw-cc total">
                <span class="lbl">Total forex collected</span>
                <span class="val">{{$vm.db.home.totalForex}}</span>
              </div>
            </div>
            <!-- /.cash-card -->
            <div class="fieldset">
              <div class="lbl">Do you need additional forex?</div>
              <div class="val"><input type="text" class="amount inputctrl nopad" placeholder="Enter the amount" /></div>
            </div>
            <!-- /.fieldset -->
            <div class="fieldset">
              <div class="val"><input type="text" class="inputctrl nopad" placeholder="Why do you require additional amount?" /></div>
            </div>
            <!-- /.fieldset -->

            <div class="actions">
              <a class="btn-prim fluid"
              (click)="$s.isForexModal = false"
              >SUBMIT</a>
            </div>
          </div>
          <!-- /.mcon -->
        </ion-card-content>
      </ion-card>
    </div>
    <!-- /.modal -->
  </div>
  <!-- /.modal-wrap -->

  <div class="modal-wrap" *ngIf="!!$s.isDeleteConfirmation">
    <div class="modal option-selector">
      <div class="card-md fluid">
        <div class="card-con">
          <h2 class="title">Delete trip</h2>
  
          <a class="close" (click)="$s.isDeleteConfirmation = false"></a>
  
  
          <div class="mcon">
            <div class="msg-view">
              <h3>Are you sure you wanted to delete this trip?</h3>
  
              <div class="action-bar">
                <a class="btn" (click)="$s.isDeleteConfirmation = false">No</a>
                <a class="btn" (click)="confirmDelete()">Yes</a>
  
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /.modal -->
  </div>
  <!-- /.modal-wrap -->
</ion-content>