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">
  <div class="boxed_contents">
    <ion-segment class="common_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'" class="lesson">
      <div *ngIf="active_job_count == 0 && active_offers_count == 0 ">
        <ion-card style="background-color: #f4f1f0;">
          <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-header>

          <ion-card-content>
            You currently have no active tasks or chores. Visit the Market to find anything interesting to you.
          </ion-card-content>
        </ion-card>
      </div>

      <div *ngIf="active_job_count == 0 && active_offers_count > 0; ">
        <ion-card style="margin:0px; background-color: #0b5e86; color: white; border-radius: 15px;">
          <img alt="WrenchBoard Tasks" src="https://www.wrenchboard.com/assets/images/apps/current-tasks.png" />
          <ion-card-header>
            <ion-card-title style="color: white; font-weight: bolder;">Ready to Start ?</ion-card-title>
          </ion-card-header>

          <ion-card-content>
            You have one or more task offers waiting for you to start.
          </ion-card-content>

        </ion-card>
        <ion-button (click)="startOfferPage()"  style="margin-top: 5px;" expand="block" shape="round" color="secondary">Start Now</ion-button>
      </div>

      <div class="chat" *ngFor="let item of jobsData;" (click)="activeSeleted(item)">
        <div class="flex">
          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></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>
            <ion-label>{{item.price*0.01}} {{item.currency}}</ion-label>
            <ion-label class="due_date">Due : {{item.delivery_date |date}}</ion-label>

            <div>
            </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'">
      <div *ngIf="pastdue_job_count == 0">
        <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>
            You do not have any task past due.
          </ion-card-content>
        </ion-card>
      </div>
      <div class="chat" *ngFor="let item of jobsPastDueData;"  (click)="activeSeleted(item)">
        <div class="flex">
          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></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 class="due_date">Due : {{item.delivery_date |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'">
      <div *ngIf="review_job_count == 0">
        <ion-card>
          <img alt="WrenchBoard Review" 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>
            No task is currently in review.
          </ion-card-content>
        </ion-card>
      </div>


      <div class="chat" *ngFor="let item of jobsInReviewData;"  (click)="activeSeleted(item)">
        <div class="flex">
          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></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 class="due_date">Due : {{item.delivery_date |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>

</ion-content>