You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
sfh-mohemm/Mohem/src/app/offersdiscount/home/home.component.html

92 lines
3.2 KiB
HTML

<ion-content>
<div class="head-title">
<app-generic-header showImage="false" showBack="true" [headerText]="'itemforsale,offersdiscount' | translate">
</app-generic-header>
</div>
<div class="header"></div>
<div class="bottom"></div>
<div class="sales-items" *ngIf="segment =='1'">
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-item lines="none" class="SearchtextBox">
<ion-input [placeholder]="'itemforsale,search-items'| translate" [(ngModel)]="searchText"
(ionInput)="search($event.target.value)"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="10">
<p class="filterText"> {{ts.trPK('itemforsale','browse-categories')}}</p>
</ion-col>
<ion-col size="2" (click)="openModel()">
<img class='filter' src="assets/imgs/itemsforsale/filter.svg">
</ion-col>
</ion-row>
</ion-grid>
<div class="container-icon" *ngIf="categories.length>0">
<div class="box-icon" *ngFor="let key of categories">
<div class="sale-icon" (click)="filterOffers(key)" [ngClass]="{'active':activeClass==key.categoryName_en }">
<div class="top">
<!-- <ion-icon name="images"></ion-icon> -->
<img [src]="key.content" />
</div>
<div class="bottom-icon">
<p *ngIf="direction =='ltr'">{{key.categoryName_en}}</p>
<p *ngIf="direction =='rtl'">{{key.categoryName_ar}}</p>
</div>
</div>
</div>
</div>
<div class="grid-container">
<ion-row>
<ion-col size="6" *ngFor="let item of offersData" (click)="openDetails(item)">
<ion-card class="offers-discount-card">
<ion-card-header>
<!-- <img [src]="item.Banner_Image" /> -->
<div class="header-img" [ngStyle]="{'background-image': 'url(' + item.Banner_Image + ')'}"></div>
<ion-card-title>{{item.Title}}</ion-card-title>
</ion-card-header>
<ion-card-content>
<div [innerHTML]="getDotted(item.Description)"></div>
<div class="dark offers-title">
{{item.Discount}}
</div>
<ion-row [class]="checkDate(item['End Date']) ==true ? 'green' : 'red'">
<ion-col size="10" *ngIf="checkDate(item['End Date']) ==true">
<p class="offer-valid">{{ts.trPK('general','offer-valid')}}</p>
</ion-col>
<ion-col size="10" *ngIf="checkDate(item['End Date']) ==false">
<p class="offer-valid"> {{ts.trPK('general','expired')}}</p>
</ion-col>
<ion-col size="2">
<img src="assets/imgs/itemsforsale/arrow.svg">
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</div>
</div>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>