WrenchBoardIonic2023/src/app/pages/mytasks/mytasks.page.html

<ion-header mode="ios" class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="search-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>My Tasks</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content class="ion-padding">
  <ion-segment [(ngModel)]="tabs">
    <ion-segment-button value="tasks">
      <ion-label>Active</ion-label>
    </ion-segment-button>
    <ion-segment-button value="pastdue">
      <ion-label>Past Due</ion-label>
    </ion-segment-button>
    <ion-segment-button value="review">
      <ion-label>In Review</ion-label>
    </ion-segment-button>
  </ion-segment>

  <div *ngIf="tabs =='tasks'">
    <div *ngIf="active_job_count == 0">
      <ion-card>
        <img alt="WrenchBoard Tasks" src="https://www.wrenchboard.com/assets/images/apps/current-tasks.png" />
        <ion-card-header>
          <ion-card-title>Current Tasks</ion-card-title>
          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
        </ion-card-header>

        <ion-card-content>
          Here's a small text description for the card content. Nothing more, nothing less.
        </ion-card-content>
      </ion-card>
    </div>


    <div class="chat" *ngFor="let item of jobsData;" (click)="activeSeleted(item)">
      <div class="flex">
        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
        <div style="margin-left: 10px;">
          <ion-label class="bold_text"> {{item.title}}</ion-label>
          <div style="display: flex;">
            <ion-label class="grey_text"> {{item.job_description}} </ion-label>

          </div>
          <div>
            <hr />
            <ion-label> {{item.delivery_date}}</ion-label>
          </div>
        </div>
      </div>
      <div class="column">
        <ion-icon name="chevron-forward-outline"></ion-icon>
        <!--        <ion-label class="small_text"> 11:30 PM</ion-label>-->
        <!--        <ion-label class="color_text"> 10</ion-label>-->
      </div>
    </div>
  </div>

  <div *ngIf="tabs =='pastdue'">

    <ion-card>
      <img alt="WrenchBoard Past Due" src="https://www.wrenchboard.com/assets/images/apps/pastdue-task.png" />
      <ion-card-header>
        <ion-card-title>Past Due</ion-card-title>
        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      </ion-card-header>

      <ion-card-content>
        Here's a small text description for the card content. Nothing more, nothing less.
      </ion-card-content>
    </ion-card>

    <div class="chat" *ngFor="let item of jobsPastDueData;" >
      <div class="flex">
        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
        <div style="margin-left: 10px;">
          <ion-label class="bold_text"> {{item.title}}</ion-label>
          <div style="display: flex;">
            <ion-label class="grey_text"> {{item.job_description}} </ion-label>

          </div>
          <div>
            <hr />
            <ion-label> {{item.delivery_date}}</ion-label>
          </div>
        </div>
      </div>
      <div class="column">
        <ion-icon name="chevron-forward-outline"></ion-icon>
        <!--        <ion-label class="small_text"> 11:30 PM</ion-label>-->
        <!--        <ion-label class="color_text"> 10</ion-label>-->
      </div>
    </div>
  </div>

  <div *ngIf="tabs =='review'">

    <ion-card>
      <img alt="Silhouette of mountains" src="https://www.wrenchboard.com/assets/images/apps/review-task.png" />
      <ion-card-header>
        <ion-card-title>In Review</ion-card-title>
        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      </ion-card-header>

      <ion-card-content>
        Here's a small text description for the card content. Nothing more, nothing less.
      </ion-card-content>
    </ion-card>

    <div class="chat" *ngFor="let item of jobsInReviewData;">
      <div class="flex">
        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
        <div style="margin-left: 10px;">
          <ion-label class="bold_text"> {{item.title}}</ion-label>
          <div style="display: flex;">
            <ion-label class="grey_text"> {{item.job_description}} </ion-label>

          </div>
          <div>
            <hr />
            <ion-label> {{item.delivery_date}}</ion-label>
          </div>
        </div>
      </div>
      <div class="column">
        <ion-icon name="chevron-forward-outline"></ion-icon>
        <!--        <ion-label class="small_text"> 11:30 PM</ion-label>-->
        <!--        <ion-label class="color_text"> 10</ion-label>-->
      </div>
    </div>
  </div>
</ion-content>