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" size="medium" (click)="onHelp()"></ion-icon>
        </div>
      </div>
    </ion-toolbar>
  </div>
</ion-header>

<ion-content class="ion-padding">
    <div class="boxed_contents">
      <app-dash-toptool></app-dash-toptool>
      <div *ngIf = "accountType == 'FAMILY'; else elseFulltag">
        <app-familypending></app-familypending>
        <app-suggestedlist></app-suggestedlist>
        <ion-grid class="fam1">
          <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>
        <app-familiy-dash></app-familiy-dash>
        <app-latest-market></app-latest-market>
<!--        <app-tracking></app-tracking>-->
        <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 *ngIf = "homebannerCount <3;">
<!--          <div class="offer">-->
<!--            <div class="bg_image back_image" [style.backgroundImage]="'url('+offerBanner+')'"></div>-->
<!--          </div>-->
        </div>

        <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">{{item.short_description}}</ion-label>


              <!--        <ion-label class="price">$48.00 </ion-label>-->

              <!--        <div class="row">-->
              <!--          &lt;!&ndash;          <ion-icon name="star-half-outline" color="warning"></ion-icon>&ndash;&gt;-->
              <!--          &lt;!&ndash;          <ion-label class="small">4.9</ion-label>&ndash;&gt;-->
              <!--          &lt;!&ndash;          <ion-label class="small">|</ion-label>&ndash;&gt;-->
              <!--          &lt;!&ndash;          <ion-label class="small">8266 Students</ion-label>&ndash;&gt;-->
              <!--        </div>-->
            </div>
          </div>
          <!--    <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
        </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>-->