From 9fc8cbd7d88215f2d21086d854f539535d095f3e Mon Sep 17 00:00:00 2001
From: Vincent LAURENT <vince.laurent@gmail.com>
Date: Tue, 12 Oct 2021 17:19:08 +0200
Subject: [PATCH] Indicateur de chargement pour l'interrogation ajax qui permet
 de transformer une image en svg

---
 public/js/app.js       | 8 ++++++++
 templates/pdf.html.php | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index b4f50bf..61a6e5d 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -344,6 +344,8 @@ loadingTask.promise.then(function(pdf) {
         throttle: 0,
         onEnd: function() {
             document.getElementById('btn_modal_ajouter').setAttribute('disabled', 'disabled');
+            document.getElementById('btn_modal_ajouter_spinner').classList.remove('d-none');
+            document.getElementById('btn_modal_ajouter_check').classList.add('d-none');
             const file = new File([dataURLtoBlob(signaturePad.toDataURL())], "draw.png", {
                 type: 'image/png'
             });
@@ -356,6 +358,8 @@ loadingTask.promise.then(function(pdf) {
                 document.getElementById('img-upload').src = svgImage;
                 document.getElementById('img-upload').classList.remove("d-none");
                 document.getElementById('btn_modal_ajouter').removeAttribute('disabled');
+                document.getElementById('btn_modal_ajouter_spinner').classList.add('d-none');
+                document.getElementById('btn_modal_ajouter_check').classList.remove('d-none');
                 document.getElementById('btn_modal_ajouter').focus();
             };
             xhr.send( data );
@@ -398,6 +402,8 @@ loadingTask.promise.then(function(pdf) {
 
     document.getElementById('input-image-upload').addEventListener('change', function(event) {
         document.getElementById('btn_modal_ajouter').setAttribute('disabled', 'disabled');
+        document.getElementById('btn_modal_ajouter_spinner').classList.remove('d-none');
+        document.getElementById('btn_modal_ajouter_check').classList.add('d-none');
         var data = new FormData();
         data.append('file', document.getElementById('input-image-upload').files[0]);
 
@@ -409,6 +415,8 @@ loadingTask.promise.then(function(pdf) {
             document.getElementById('img-upload').src = svgImage;
             document.getElementById('img-upload').classList.remove("d-none");
             document.getElementById('btn_modal_ajouter').removeAttribute('disabled');
+            document.getElementById('btn_modal_ajouter_spinner').classList.add('d-none');
+            document.getElementById('btn_modal_ajouter_check').classList.remove('d-none');
             document.getElementById('btn_modal_ajouter').focus();
         };
         xhr.send( data );
diff --git a/templates/pdf.html.php b/templates/pdf.html.php
index 0978fac..5da5a36 100644
--- a/templates/pdf.html.php
+++ b/templates/pdf.html.php
@@ -122,8 +122,8 @@
                 <input id="input-svg-type" type="hidden" />
           </div>
           <div class="modal-footer">
-            <button tabindex="-1" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
-            <button id="btn_modal_ajouter" type="button" disabled="disabled" class="btn btn-primary" data-bs-dismiss="modal">Ajouter</button>
+            <button tabindex="-1" type="button" class="btn btn-light" data-bs-dismiss="modal">Annuler</button>
+            <button id="btn_modal_ajouter" type="button" disabled="disabled" class="btn btn-primary" data-bs-dismiss="modal"><span id="btn_modal_ajouter_spinner" class="spinner-border spinner-border-sm d-none"></span><span id="btn_modal_ajouter_check" class="bi bi-check-circle"></span> Ajouter</button>
           </div>
         </div>
       </div>