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

<ion-header class="ion-no-border">
  <div *ngIf="accountType == 'FAMILY';">
    <ion-toolbar>
      <div class="heading">
        <div class="left">
          <div
            class="bg_image back_image"
            [style.backgroundImage]="'url('+profilePicture+')'"
          ></div>
          <div>
            <ion-label class="grey_text">Hello</ion-label>
            <ion-label class="bold_text">{{firstname}}</ion-label>
          </div>
        </div>
        <div class="right">
          <ion-icon
            name="notifications-outline"
            (click)="onNotification()"
          ></ion-icon>
          <!--          <ion-icon name="help-circle-outline" size="medium" (click)="onHelp()"></ion-icon>-->
        </div>
      </div>
    </ion-toolbar>
  </div>
  <div *ngIf="accountType == 'FULL';">
    <ion-toolbar>
      <div class="heading">
        <div class="left">
          <div
            class="bg_image back_image"
            [style.backgroundImage]="'url('+profilePicture+')'"
          ></div>
          <div>
            <ion-label class="grey_text">Hello</ion-label>
            <ion-label class="bold_text">{{firstname}}</ion-label>
          </div>
        </div>
        <div class="right">
          <ion-icon
            name="notifications-outline"
            (click)="onNotification()"
          ></ion-icon>
          <ion-icon
            name="help-circle-outline"
            (click)="onHelp()"
          ></ion-icon>
        </div>
      </div>
    </ion-toolbar>
  </div>
</ion-header>

<ion-content class="ion-padding">
  <div class="boxed_contents" id="{{home_dash_type}}">
    <div *ngIf="accountType == 'FULL';">
      <app-dash-toptool></app-dash-toptool>
    </div>
    <div *ngIf="accountType == 'FAMILY'; else elseFulltag">
      <app-family-connect></app-family-connect>
      <app-familyhome></app-familyhome>
      <app-familypending></app-familypending>
<!--      <app-suggestedlist></app-suggestedlist>-->
      <ion-grid class="fam1" style="box-shadow: 3px 3px #d3d3d3; padding: 0px;">
        <ion-row class="pend-row">
          <ion-col
            class="famleft"
            [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/ai-playground.jpg)'"
            [style.background-size]="contain"
          ></ion-col>
          <ion-col class="mid_place">
            <ion-label class="sug_text">Playground</ion-label>
            <ion-button shape="round" (click)="goPlayground()" fill="outline"
              >Get Started</ion-button
            >
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
    <ng-template #elseFulltag>
      <div *ngIf="home_dash_type=='DEFAULT_HOME_DASH'; ">
        <app-latest-market></app-latest-market>
        <ion-card class="map-sec" *ngIf="enableTracking > 0">
          <app-tracking></app-tracking>
          <ion-card-content>
            <ion-list>
              <ion-item lines="none">
                <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
                <!--            <ion-icon aria-hidden="true" name="airplane" ></ion-icon>-->
                <ion-label>Family Location</ion-label>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
        <div
          *ngFor="let item of bannerData; let i = index"
          class="bg_white {{item.short_style}}  {{item.card_type}} "
          (click)="onDetails(item)"
        >
          <div class="list">
            <div *ngIf="item.banner_location === 'URL' ">
              <!-- code to render a large video block-->
              <div
                class="bg_image back_image banner_image"
                [style.backgroundImage]="'url('+item.banner+')'"
              ></div>
            </div>
            <div *ngIf="item.banner_location === 'LOCAL' ">
              <div
                class="bg_image back_image banner_image"
                [style.backgroundImage]="'url(assets/images/'+item.banner+')'"
              ></div>
            </div>

            <div class="detail">
              <ion-label class="name">{{item.short_title}}</ion-label>
              <ion-label class="bg_text ovf" style="background-color: white"
                >{{item.short_description}}</ion-label
              >
            </div>
          </div>
          <!--    <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
        </div>
      </div>

      <div *ngIf="home_dash_type=='FAMILY_PARENT_DASH'; ">
        <app-familiy-dash [bannerData]="bannerData"></app-familiy-dash>
        <!--        <app-tracking></app-tracking>-->
      </div>

      <div *ngIf="home_dash_type=='JOBOWNER_HOME_DASH'; ">
        <app-jobowner-dash [bannerData]="bannerData"></app-jobowner-dash>
      </div>

      <div *ngIf="home_dash_type=='WORKER_HOME_DASH'; ">
        <app-workers-dash [bannerData]="bannerData"></app-workers-dash>
      </div>

      <div *ngIf="homebannerCount <3;">
        <!--          <div class="offer">-->
        <!--            <div class="bg_image back_image" [style.backgroundImage]="'url('+offerBanner+')'"></div>-->
        <!--          </div>-->
      </div>

      <div class="flex">
        <ion-label class="bold_text">Recent Blog</ion-label>
        <ion-label class="color_text" (click)="allBlog()">See all</ion-label>
      </div>
      <ion-grid>
        <ion-row
          class="bg_white bg_alice"
          *ngFor="let item of blogData; let i = index"
          (click)="blogDetails(item)"
        >
          <ion-col>
            <div class="detail">
              <ion-label class="name">{{item.post_title}}</ion-label>
              <ion-label class="extra_text"
                ><span class="title">Published:</span>{{item.post_date |
                date}}</ion-label
              >
            </div>
          </ion-col>
          <ion-col size="auto">
            <div
              style="width: 95px; height: 95px; border-radius: 10px"
              class="bg_image back_image banner_image"
              [style.backgroundImage]="'url(https://blog.wrenchboard.com/wp-content/uploads/'+item.meta_value+')'"
            ></div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ng-template>
  </div>
</ion-content>

<!--<div *ngIf="isModalOpen==true">-->
<!--  <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>-->
<ion-modal [isOpen]="isModalOpen">
  <ng-template>
    <ion-header class="modal-head">
      <ion-toolbar>
        <ion-title>Help</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="setCloseModal()">Close</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <app-help-listing></app-help-listing>
    </ion-content>
    <ion-footer>
      <ion-grid style="background-color: lightgray">
        <ion-row>
          <ion-col> </ion-col>
          <ion-col style="text-align: right">
            <ion-button
              (click)="setCloseModal()"
              shape="round"
              size="small"
              color="danger"
            >
              Close
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-footer>
  </ng-template>
</ion-modal>
<!--</div>-->