details des carte parrainage dans carte parrainage

src/app/components/carteParrainage/carte-parrainage/carte-parrainage.component.html

@@ -29,9 +29,9 @@
     <p>carte de parrainage !</p>
   </div>
   <div class="list-group wow fadeInUpBig">
-    <div *ngFor="let crt of carteParrData | async">
+    <div *ngFor="let crt of (carteParrData | async); let i = index;">
       <div class="card mainCard" *ngIf="(crt.status == statutAffiche) || (statutAffiche == 'Toutes')">
-        <div class="row no-margin">
+        <div class="row no-margin maincard-row">
           <img class="col-md-6 card-image subCard1" id="image1" src={{crt.carteTemplate.downloadURL}}>
           <!--<div class="col-md-6 card-image mb-1 subCard1" [ngStyle]="{ 'background-image': 'url(' + crt.carteTemplate.downloadURL + ')'}">
 
@@ -51,9 +51,17 @@
             </div>
           </div>-->
           <div class="col-md-6 card subCard2">
-            <label>ID de la carte: {{crt.uid}}</label>
-            <label>Avantages cumulés: {{crt.avantageCumule === ''? '0' : crt.avantageCumule}} €</label>
-            <label>Avantages recuperés: {{crt.avantageRecuperer  === ''? '0' : crt.avantageRecuperer}} €</label>
+            <div class="card-block no-margin">
+              <div class="col-md-12" id="subCard2Part1">
+                <label>ID de la carte: {{crt.uid}}</label>
+                <label>Avantages cumulés: {{crt.avantageCumule === ''? '0' : crt.avantageCumule}} €</label>
+                <label>Avantages recuperés: {{crt.avantageRecuperer  === ''? '0' : crt.avantageRecuperer}} €</label>
+              </div>
+              <div class="btn-block d-flex flex-lg-row flex-md-column flex-sm-row" id="subCard2Part2">
+                <button class="btn btn-outline-primary btn-rounded" (click)="hideme[i] = !hideme[i]">{{show ? 'Cacher Détails' : 'Détails'}}</button>
+                <!--<button class="btn btn-outline-info btn-rounded" (click)="sectionToImage(op.carteTemplate.downloadURL, commercant.image.downloadURL)">screenShot</button>-->
+              </div>
+            </div>
           </div>
         </div>
         <!-- Card footer -->
@@ -69,6 +77,17 @@
         </div>
       </div>
       <!-- Card footer -->
+      <div class="card" [hidden]="!hideme[i]" style="height:20rem; overflow-y: auto;">
+        <div class="card-body">
+          <ul class="list-group wow fadeInDown">
+            <p class="font-weight-normal" style="padding-top: 2%" *ngIf="crt.historique === undefined">Aucune opération n'a été effectuée sur cette carte !</p>
+
+            <li class="list-group-item justify-content-between align-items-center" *ngFor="let hst of crt.historique">
+              <p class="font-weight-normal" style="padding-top: 2%">{{hst}}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 

src/app/components/carteParrainage/carte-parrainage/carte-parrainage.component.scss

@@ -11,33 +11,24 @@
 .container {
   padding-top: 5%;
 }
-
 .mainCard {
   margin-top: 5%;
   width: 100%;
+  .maincard-row {
+    height: 25vh;
+  }
 }
 
-#image1 {
-  padding-left: 0;
-  padding-right: 0;
+.container {
+  padding-top:5%;
 }
 
-
 .subCard1 {
-  height: 15rem;
-  background-repeat: no-repeat;
-  background-size:20% auto;
-  background-position : center;
-}
-
-.subCard2 {
-  display: flex;
-  justify-content: center;
-  padding-left: 10%;
-}
-
-.subCard2 > label {
-  padding-bottom: 5%;
+  height: auto;
+  background-color: white;
+  // background-repeat: no-repeat;
+  // background-size:20% auto;
+  // background-position : center;
 }
 
 .firstRow {
@@ -69,6 +60,44 @@
   //background-color: yellow;
 }
 
+#image1 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+#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%;
+}
+
 .no-margin {
   margin-right: 0;
   margin-left: 0;

src/app/components/carteParrainage/carte-parrainage/carte-parrainage.component.ts

@@ -30,9 +30,11 @@ export class CarteParrainageComponent implements OnInit, OnDestroy {
   commList: FirebaseListObservable<any[]>;
   databaseRef: any;
   statutAffiche: string;
+  hideme = {};
 
   constructor(public afAuth: AngularFireAuth, public afDb: AngularFireDatabase,
               private router: Router) {
+    this.hideme = {}; // init is required
     this.carteParr = new CarteParrainage();
     this.databaseRef = firebase.database().ref();
     this.user = afAuth.authState;