list carte liste scan html/css
parent
05afcd3ebd
commit
3f5bba5014
@ -1,3 +1,69 @@
|
||||
<p>
|
||||
list-carte-envoyer works!
|
||||
</p>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!--
|
||||
<ul>
|
||||
<li *ngFor="let op of opCommData | async">
|
||||
Operation Commerciale: {{op.name}}
|
||||
</li>
|
||||
</ul>
|
||||
<button (click)="goToCreaOpCom()">Nouvelle opération Commercial</button>
|
||||
<button (click)="goToProfil()">Back</button>
|
||||
-->
|
||||
<app-nav-admin></app-nav-admin>
|
||||
<h4 class="h5 text-center mb-4" style="padding-top: 5%;">Liste des cartes envoyées</h4>
|
||||
<div class="btn-block flex-center align-middle" style="padding-top: 2%;">
|
||||
<button class="btn btn-primary btn-rounded waves-light" id="nouvelleOp" (click)="goToCreaOpCom()">Nouvelle opération Commerciale</button>
|
||||
<!--<button class="btn btn-primary btn-rounded waves-light" (click)="goToCarteEnvoyer()">Historique carte envoyer</button>-->
|
||||
<!--<button class="btn btn-default btn-rounded waves-light" (click)="goToProfil()">Profil</button>-->
|
||||
</div>
|
||||
<div class="list-group">
|
||||
|
||||
<div class="card mainCard" *ngFor="let op of opCommData | async">
|
||||
<div class="row" id="testt">
|
||||
<div class="col-md-6 mb-1 subCard1" id="subCard1">
|
||||
<img src="{{op.carteTemplate.downloadURL}}" id="image1" class="mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
|
||||
<div class="view">
|
||||
<div class="row firstRow">
|
||||
<div class="col-md-6 flex-center card-block cardPart1">{{commercant.commercialName}}</div>
|
||||
<div class="col-md-6 flex-center card-block card-image mb-1 cardPart2 image2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row secondRow">
|
||||
<div class="col-md-6 flex-center cardPart3"><p>{{op.name}}</p></div>
|
||||
<div class="col-md-6 flex-center cardPart4"><p>{{op.uid}}</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 card subCard2">
|
||||
<div class="card-block row">
|
||||
<div class="col-md-8" id="subCard2Part1">
|
||||
<div id="opTitle">
|
||||
<label>Validation: {{op.validationXJC}}</label>
|
||||
<label>Operation Commerciale: {{op.name}}</label>
|
||||
</div>
|
||||
<div id="opAvantages">
|
||||
<label>Avantage parrain: {{op.avantageParrain}}</label>
|
||||
<label>Avantage filleul: {{op.avantageFilleul}}</label>
|
||||
</div>
|
||||
<div id="opLogs">
|
||||
<label>Carte(s) envoyée(s): {{op.nbEnvoie}}</label>
|
||||
<label>Carte(s) scannée(s): {{op.nbScan}}</label>
|
||||
<label>Carte(s) débitée(s): {{op.nbDebiter}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2" id="subCard2Part2">
|
||||
<button class="btn btn-outline-primary btn-rounded" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'rejeté') || (op.validationXJC === 'bloqué')" (click)="goToEnCart(op.uid)">Envoyer</button>
|
||||
<button class="btn btn-outline-default btn-rounded" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'rejeté') || (op.validationXJC === 'bloqué')" (click)="goToScanCart(op.uid)">Scanner</button>
|
||||
<button class="btn btn-outline-info btn-rounded" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'rejeté') || (op.validationXJC === 'bloqué')" (click)="goToDebiterCart(op.uid)">Débiter</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block col-md-12" id="subCard2Part3">
|
||||
<h100 class="float-right">Du {{op.dateDebut | date:'dd/MM/yyyy'}} au {{op.dateFin | date:'dd/MM/yyyy'}}</h100>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -0,0 +1,86 @@
|
||||
.mainCard {
|
||||
margin-top: 5%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view {
|
||||
height:102%;
|
||||
width: 103%;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top:5%;
|
||||
}
|
||||
|
||||
.subCard1 {
|
||||
height: auto;
|
||||
background-color: white;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size:20% auto;
|
||||
// background-position : center;
|
||||
}
|
||||
|
||||
.firstRow {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.secondRow {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
|
||||
.cardPart1 {
|
||||
//background-color: red;
|
||||
}
|
||||
|
||||
.cardPart2 {
|
||||
//background-color: orange;
|
||||
background-repeat: no-repeat;
|
||||
background-size:50% auto;
|
||||
background-position : center;
|
||||
}
|
||||
|
||||
|
||||
.cardPart3 {
|
||||
//background-color: green;
|
||||
}
|
||||
|
||||
.cardPart4 {
|
||||
//background-color: yellow;
|
||||
}
|
||||
|
||||
#subCard2Part1 {
|
||||
padding-top: 5%;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
#subCard2Part2 {
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
#subCard2Part3 {
|
||||
padding-right: 5%;
|
||||
padding-top: 0%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
|
||||
#opTitle {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
#opAvantages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 2%;
|
||||
}
|
||||
|
||||
#opLogs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
|
||||
|
@ -1,3 +1,69 @@
|
||||
<p>
|
||||
list-scan-effecter works!
|
||||
</p>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!--
|
||||
<ul>
|
||||
<li *ngFor="let op of opCommData | async">
|
||||
Operation Commerciale: {{op.name}}
|
||||
</li>
|
||||
</ul>
|
||||
<button (click)="goToCreaOpCom()">Nouvelle opération Commercial</button>
|
||||
<button (click)="goToProfil()">Back</button>
|
||||
-->
|
||||
<app-nav-admin></app-nav-admin>
|
||||
<h4 class="h5 text-center mb-4" style="padding-top: 5%;">Liste des cartes envoyées</h4>
|
||||
<div class="btn-block flex-center align-middle" style="padding-top: 2%;">
|
||||
<button class="btn btn-primary btn-rounded waves-light" id="nouvelleOp" (click)="goToCreaOpCom()">Nouvelle opération Commerciale</button>
|
||||
<!--<button class="btn btn-primary btn-rounded waves-light" (click)="goToCarteEnvoyer()">Historique carte envoyer</button>-->
|
||||
<!--<button class="btn btn-default btn-rounded waves-light" (click)="goToProfil()">Profil</button>-->
|
||||
</div>
|
||||
<div class="list-group">
|
||||
|
||||
<div class="card mainCard" *ngFor="let op of opCommData | async">
|
||||
<div class="row" id="testt">
|
||||
<div class="col-md-6 mb-1 subCard1" id="subCard1">
|
||||
<img src="{{op.carteTemplate.downloadURL}}" id="image1" class="mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
|
||||
<div class="view">
|
||||
<div class="row firstRow">
|
||||
<div class="col-md-6 flex-center card-block cardPart1">{{commercant.commercialName}}</div>
|
||||
<div class="col-md-6 flex-center card-block card-image mb-1 cardPart2 image2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row secondRow">
|
||||
<div class="col-md-6 flex-center cardPart3"><p>{{op.name}}</p></div>
|
||||
<div class="col-md-6 flex-center cardPart4"><p>{{op.uid}}</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 card subCard2">
|
||||
<div class="card-block row">
|
||||
<div class="col-md-8" id="subCard2Part1">
|
||||
<div id="opTitle">
|
||||
<label>Validation: {{op.validationXJC}}</label>
|
||||
<label>Operation Commerciale: {{op.name}}</label>
|
||||
</div>
|
||||
<div id="opAvantages">
|
||||
<label>Avantage parrain: {{op.avantageParrain}}</label>
|
||||
<label>Avantage filleul: {{op.avantageFilleul}}</label>
|
||||
</div>
|
||||
<div id="opLogs">
|
||||
<label>Carte(s) envoyée(s): {{op.nbEnvoie}}</label>
|
||||
<label>Carte(s) scannée(s): {{op.nbScan}}</label>
|
||||
<label>Carte(s) débitée(s): {{op.nbDebiter}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2" id="subCard2Part2">
|
||||
<button class="btn btn-outline-primary btn-rounded" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'rejeté') || (op.validationXJC === 'bloqué')" (click)="goToEnCart(op.uid)">Envoyer</button>
|
||||
<button class="btn btn-outline-default btn-rounded" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'rejeté') || (op.validationXJC === 'bloqué')" (click)="goToScanCart(op.uid)">Scanner</button>
|
||||
<button class="btn btn-outline-info btn-rounded" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'rejeté') || (op.validationXJC === 'bloqué')" (click)="goToDebiterCart(op.uid)">Débiter</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block col-md-12" id="subCard2Part3">
|
||||
<h100 class="float-right">Du {{op.dateDebut | date:'dd/MM/yyyy'}} au {{op.dateFin | date:'dd/MM/yyyy'}}</h100>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -0,0 +1,86 @@
|
||||
.mainCard {
|
||||
margin-top: 5%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view {
|
||||
height:102%;
|
||||
width: 103%;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top:5%;
|
||||
}
|
||||
|
||||
.subCard1 {
|
||||
height: auto;
|
||||
background-color: white;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size:20% auto;
|
||||
// background-position : center;
|
||||
}
|
||||
|
||||
.firstRow {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.secondRow {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
|
||||
.cardPart1 {
|
||||
//background-color: red;
|
||||
}
|
||||
|
||||
.cardPart2 {
|
||||
//background-color: orange;
|
||||
background-repeat: no-repeat;
|
||||
background-size:50% auto;
|
||||
background-position : center;
|
||||
}
|
||||
|
||||
|
||||
.cardPart3 {
|
||||
//background-color: green;
|
||||
}
|
||||
|
||||
.cardPart4 {
|
||||
//background-color: yellow;
|
||||
}
|
||||
|
||||
#subCard2Part1 {
|
||||
padding-top: 5%;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
#subCard2Part2 {
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
#subCard2Part3 {
|
||||
padding-right: 5%;
|
||||
padding-top: 0%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
|
||||
#opTitle {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
#opAvantages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 2%;
|
||||
}
|
||||
|
||||
#opLogs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue