op Card alpha

src/app/components/navigationBar/navigationBar.component.ts

@@ -29,6 +29,8 @@ export class NavigationBarComponent implements OnInit, OnDestroy{
   navElement1: string;
   navElement2: string;
   navElement3: string;
+  element1: string;
+  element2: string;
   afficheLogout: boolean;
 
 
@@ -37,20 +39,24 @@ export class NavigationBarComponent implements OnInit, OnDestroy{
     this.updateNavBar();
   }
 
+
+
   updateNavBar() {
+    this.navElement1 = 'Register';
+    this.navElement2 = 'Login';
     firebase.auth().onAuthStateChanged(function(user) {
       if (user) {
         this.afficheLogout = true;
         console.log('is signed in.');
         if (user.displayName === 'Parrain') {
           this.localUser = user;
-          this.element1 = 'Profil Parrain';
-          this.element2 = 'Logout Parrain';
+          this.navElement1 = 'Profil Parrain';
+          this.navElement2 = 'Logout Parrain';
           console.log('parrain fct: ' + this.navElement1);
         } else if (user.displayName === 'Commercant') {
           this.localUser = user;
-          this.element1 = 'Profil Commercant';
-          this.element2 = 'Logout Commercant';
+          this.navElement1 = 'Profil Commercant';
+          this.navElement2 = 'Logout Commercant';
         }
       } else {
         this.afficheLogout = false;

src/app/components/opCommercial/op-commercial/op-commercial.component.html

@@ -1,14 +1,29 @@
 <div class="container" style="padding-top:5%">
 
-  <div class="card">
-    <div class="well">
-      <p class="h5 text-center mb-4">Liste de vos operations commercials</p>
-    </div>
-  </div>
 
-  <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()">Profil</button>
+      <h4 class="h5 text-center mb-4">Liste de vos operations commercials</h4>
+      <div class="btn-group">
+        <button (click)="goToCreaOpCom()">Nouvelle opération Commercial</button>
+        <button (click)="goToProfil()">Profil</button>
+      </div>
+      <div class="list-group">
+        <div class="card mainCard" *ngFor="let op of opCommData | async">
+          <div class="row">
+            <div class="col-md-6 card subCard1">
+              <div class="row firstRow">
+                <div class="col-md-6 flex-center card-block cardPart1">test</div>
+                <div class="col-md-6 flex-center card-block cardPart2">test2</div>
+              </div>
+              <div class="row secondRow">
+                <div class="col-md-6 flex-center cardPart3">test3</div>
+                <div class="col-md-6 flex-center cardPart4">test4</div>
+              </div>
+            </div>
+            <div class="col-md-6 card subCard2">
+              <label>Operation Commerciale: {{op.name}}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+
 </div>

src/app/components/opCommercial/op-commercial/op-commercial.component.scss

@@ -0,0 +1,33 @@
+.mainCard {
+  margin-top: 5%;
+  width: 100%;
+}
+
+.subCard1 {
+  height: 15rem;
+}
+
+.firstRow {
+  height: 50%;
+}
+
+.secondRow {
+  height: 50%;
+}
+
+
+.cardPart1 {
+  //background-color: red;
+}
+
+.cardPart2 {
+  //background-color: orange;
+}
+
+.cardPart3 {
+  //background-color: green;
+}
+
+.cardPart4 {
+  //background-color: yellow;
+}