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.
XJC/src/app/components/carteParrainage/carte-parrainage/carte-parrainage.component....

77 lines
3.7 KiB
HTML

<app-nav-parrain></app-nav-parrain>
<div class="container">
<h4 class="mb-5 mt-1 font-bold wow fadeInDown text-center" style="padding-top: 5%;">Cartes de parrainage ({{(carteParrData | async)?.length}})</h4>
<div class="topButtons col-md-12" style="padding-top: 2%;">
<div *ngIf="(carteParrData | async)?.length != 0" class="btnFiltre">
<div class="dropdown" dropdown>
<button dropdownToggle type="button" class="btn btn-info btn-rounded dropdown-toggle waves-light" mdbRippleRadius>
Filtres
</button>
<div class="dropdown-menu">
<a class="dropdown-item" id="crtActive" (click)="activeCarte('Active')">Actives</a>
<a class="dropdown-item" id="crtToutes" (click)="activeCarte('Toutes')">Toutes</a>
<a class="dropdown-item" id="crtInactive" (click)="activeCarte('Inactive')">Inactives</a>
</div>
</div>
</div>
</div>
<div *ngIf="(carteParrData | async)?.length == 0" class="alert alert-info">
Cher,<strong><i> {{parrain.firstname}} </i></strong>
<p>Le principe est simple :</p>
<ul>
<li> Reçoit tes cartes de parrainage ici</li>
<li> Partage-les à tes amis via Facebook, Whatsapp, ect.</li>
<li> Gagne de l'argent chaque fois qu'un de tes amis présente ta carte lors de ses achats</li>
</ul>
<p>N'attends plus, et rends toi vite chez un des commerçcant affiliés de ton choix pour obtenir ta </p>
<p>carte de parrainage !</p>
</div>
<div class="list-group wow fadeInUpBig">
<div *ngFor="let crt of carteParrData | async">
<div class="card mainCard" *ngIf="(crt.status == statutAffiche) || (statutAffiche == 'Toutes')">
<div class="row no-margin">
<img class="col-md-6 card-image mb-1 subCard1" src={{crt.carteTemplate.downloadURL}}>
<!--<div class="col-md-6 card-image mb-1 subCard1" [ngStyle]="{ 'background-image': 'url(' + crt.carteTemplate.downloadURL + ')'}">
<div class="view">
<div class="row firstRow">
<div *ngIf="commercant !== undefined" >
<div class="col-md-6 flex-center card-block cardPart1"></div>
<div class="col-md-6 flex-center card-block card-image mb-1 cardPart2">
<p></p>
</div>
</div>
</div>
<div class="row secondRow">
<div class="col-md-6 flex-center cardPart3"><p></p></div>
<div class="col-md-6 flex-center cardPart4"><p></p></div>
</div>
</div>
</div>-->
<div class="col-md-6 card subCard2">
<label>ID de la carte: {{crt.uid}}</label>
<label>Avantage cumule: {{crt.avantageCumule === ''? '0' : crt.avantageCumule}} €</label>
<label>Avantage recuperer: {{crt.avantageRecuperer === ''? '0' : crt.avantageRecuperer}} €</label>
</div>
</div>
<!-- Card footer -->
<div class="card-data" id="footerCard">
<ul>
<li class="float-right"><i class="fa fa-info-circle" aria-hidden="true"></i>Statut:
<label class="font-bold" *ngIf="crt.status == 'Active'" style="color:#00C851; margin-bottom: 0">{{crt.status}}</label>
<label class="font-bold" *ngIf="crt.status == 'Inactive'" style="color:#ffbb33; margin-bottom: 0">{{crt.status}}</label>
<label class="font-bold" *ngIf="crt.status == 'Bloqué'" style="color:#ff4444; margin-bottom: 0">{{crt.status}}</label>
</li>
<li class="float-left"><i class="fa fa-clock-o"></i>Valable du {{crt.dateDebut | date:'dd/MM/yyyy'}} au {{crt.dateFin | date:'dd/MM/yyyy'}}</li>
</ul>
</div>
</div>
<!-- Card footer -->
</div>
</div>
</div>