validation envoie carte: en cours

src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.html

@@ -169,14 +169,32 @@
           </div>
         </div>
       </div>
-      <div class="text-center" style="margin-top:5%">
-        <button class="btn btn-light-green waves-light" [disabled]="(parSelect === '') || (birthdayTemp !== parrain.birthday) || carteExitDeja || carteEnvoieOK" (click)="envoyerCartePar()">Envoyer Carte {{parSelect}}</button>
-        <button class="btn btn-cyan" (click)="goToOpComm()">Retour</button>
-        <div *ngIf="carteExitDeja && !carteEnvoieOK"  class="alert alert-danger">
-          Erreur: {{cartePar.parrainCarte.firstname}} {{cartePar.parrainCarte.familyname}} à déjà une carte de {{opComm.name}} !
+      <div class="card-footer" style="margin-top:5%">
+        <div class="row">
+          <div class="col-md-12" id="footer-1">
+            <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+              <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+            </svg>
+          </div>
         </div>
-        <div *ngIf="carteEnvoieOK"  class="alert alert-danger">
-          Une carte vient d'être envoyé à {{cartePar.parrainCarte.firstname}} {{cartePar.parrainCarte.familyname}}
+        <div class="row flex-center" id="footer-1bis">
+          <p>Envoie en cours</p>
+        </div>
+        <div class="row">
+          <div class="col-md-12" id="footer-2">
+            <button class="btn btn-light-green waves-light" [disabled]="(parSelect === '') || (birthdayTemp !== parrain.birthday) || carteExitDeja || carteEnvoieOK" (click)="envoyerCartePar()">Envoyer Carte {{parSelect}}</button>
+            <button class="btn btn-cyan" (click)="goToOpComm()">Retour</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12" id="footer-3">
+            <div *ngIf="carteExitDeja && !carteEnvoieOK"  class="alert alert-danger">
+              Erreur: {{cartePar.parrainCarte.firstname}} {{cartePar.parrainCarte.familyname}} à déjà une carte de {{opComm.name}} !
+            </div>
+            <div *ngIf="carteEnvoieOK"  class="alert alert-danger">
+              Une carte vient d'être envoyé à {{cartePar.parrainCarte.firstname}} {{cartePar.parrainCarte.familyname}}
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.scss

@@ -70,3 +70,71 @@
     }
   }
 }
+
+
+#footer-1, #footer-2, #footer-3 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#footer-1bis {
+  padding-bottom: 2% ;
+}
+
+.card-footer {
+  padding-top: 2%;
+}
+
+// This is just to center the spinner
+
+html, body { height: 100%; }
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Here is where the magic happens
+
+$offset: 187;
+$duration: 1.4s;
+
+.spinner {
+  animation: rotator $duration linear infinite;
+}
+
+@keyframes rotator {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(270deg); }
+}
+
+.path {
+  stroke-dasharray: $offset;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation:
+    dash $duration ease-in-out infinite,
+    colors ($duration*4) ease-in-out infinite;
+}
+
+@keyframes colors {
+  0% { stroke: #4285F4; }
+  25% { stroke: #DE3E35; }
+  50% { stroke: #F7C223; }
+  75% { stroke: #1B9A59; }
+  100% { stroke: #4285F4; }
+}
+
+@keyframes dash {
+  0% { stroke-dashoffset: $offset; }
+  50% {
+    stroke-dashoffset: $offset/4;
+    transform:rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: $offset;
+    transform:rotate(450deg);
+  }
+}

src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.ts

@@ -69,6 +69,7 @@ export class EnvoyerCarteComponent implements OnInit, OnDestroy {
 
   carteExitDeja: boolean;
   carteEnvoieOK: boolean;
+  carteEnvoieEncours: boolean;
 
   cartePars: any;
   filteredCartePars: any;
@@ -81,6 +82,7 @@ export class EnvoyerCarteComponent implements OnInit, OnDestroy {
     this.user = afAuth.authState;
     this.carteExitDeja = false;
     this.carteEnvoieOK = false;
+    this.carteEnvoieEncours = false;
     this.filteredCartePars = {};
     this.radioParrain = '';
     this.validC = '';
@@ -514,6 +516,7 @@ export class EnvoyerCarteComponent implements OnInit, OnDestroy {
   }
 
   envoyerCartePar(){
+    this.carteEnvoieEncours = true;
     this.carteExist(this.cartePar.parrainCarte.uid);
 
     // this.goToOpComm();