Page de synchro ok

MobiParc/assets/js/main.js

@@ -50,9 +50,10 @@ var objId;
 
 var load = function () {
     // Vide la section main
+    
+    $("#sync").hide();
     $("#main").empty();
-
-
+    $("#main").show();
 
     // Page en cours
     var base = window.location.hash.split('?')[0];
@@ -99,6 +100,7 @@ var load = function () {
             if (!qry["id"]) {
                 store.getAll().onsuccess = function (event) {
                     var data = { data: event.target.result };
+                    console.log(data);
                     $("#main").html(template(data));
                 };
             }
@@ -222,15 +224,14 @@ $(document).on('click', '.sidebar', function () {
 
 // Affiche ou masque le bouton de sync
 if (navigator.onLine) {
-    $(".data-sync").removeAttr("disabled");
+    $(".start-sync").removeAttr("disabled");
 }
 else {
-    if (!$(".data-sync").is(":disabled"))
+    if (!$(".start-sync").is(":disabled"))
     {
-        $(".data-sync").attr("disabled")
+        $(".start-sync").attr("disabled")
     }
 }
-
 /* retour haut de page*/
 window.onscroll = function (ev) {
     document.getElementById("back-top").className =(window.pageYOffset > 100) ? "": "hidden";
@@ -240,12 +241,6 @@ $('#back-top').on('click', function () {
     $('html, body').animate({ scrollTop: 0 }, 200);
 });
 
-// Gere l'affichage des classes modales
-$(".toggle-sync-dlg").click(function () {
-    $(".modal-content,.modal-background").toggleClass("active");
-    if ($(this).hasClass("modal-close")) location.reload();
-});
-
 // Rend les lignes des tables .selectable selectionnables
 mo = new MutationObserver(function (mutations, observer) {
 
@@ -263,24 +258,31 @@ mo.observe(document.querySelector('#main'), { childList: true });
 
 // ### Synchronisation des données
 
-$(".data-sync").on("click", function () {
+$(".start-sync").on("click", function () {
+
+    infodiv = $("#sync")
 
     if (!request) {
         request = indexedDB.open(db_name, db_version);
         request.onerror = function () {
             console.log("Error while accessing the db");
-            alert("Erreur: impossible d'accéder à la base de données locale.");
+            infodiv.html("<p>Erreur de synchronisation: impossible d'accéder à la base de données locale.</p>");
             return;
         };
     }
 
+    $("#main").hide();
+    $("#sync").show();
+
     var db = request.result;
     var txs = db.transaction("activites", "readonly");
     var stores = txs.objectStore("activites");
+
     console.log("post all");
     stores.openCursor().onsuccess = function (event) {
         var cursor = event.target.result;
         if (cursor) {
+            $("#sync").find(".status").html("<p>Synchronisation en cours, veuillez patienter...</p>");
             cursor.value.model = "activites";
             var id = cursor.value.guid;
             var posting = $.post("/api/modelepwa", { data: JSON.stringify(cursor.value) });
@@ -288,23 +290,31 @@ $(".data-sync").on("click", function () {
             // Put the results in a div
             posting.done(function (data) {
                 if (data == true) {
-
                     var tx = db.transaction("activites", "readwrite");
                     var store = tx.objectStore("activites");
                     store.delete(id).onsuccess = function (evt) {
-                        $('.sync-result').append("Sync ok activite : " + id + "<br>");
                     };
                 }
             });
             cursor.continue();
         }
         else {
-            console.log("end activite");
+            $("#sync").find(".status").html("<p>Synchronisation terminée.</p>");
+            $("#sync").find(".end-sync").show();
         }
-
     };
+
+    stores.openCursor().onerror = function (event) {
+        $("#sync").find(".status").html("<p>Erreur de synchronisation: .</p>");
+        console.log(event);
+    }
+
 })
 
+$(".end-sync").click(function () {
+    load();
+});
+
 //###### TOOLBOX  ######
 
 function createGuid() {

MobiParc/index.html

@@ -27,17 +27,15 @@
 		<a href="index.html" class="logo">ModelePWA</a>
 		
         <nav class="right">
-            <button class="alt toggle-sync-dlg">Sync</button>
+            <button class="start-sync alt">Sync</button>
 		</nav>
 	</header>
 
-    <!-- Boite de dialogue synchro -->
-    <section id="sync-dlg" class="hidden">
-        <div class="sync-result"></div>
-        <span class="toggle-sync-dlg">X</span>
-        <button class="data-sync" disabled>Sync</button>
-        <br>
-    </section>
+    <div id="sync" class="align-center">
+        <h3>Synchronisation des données</h3>
+        <div class="status"></div>
+        <button class="end-sync" style="display: none;">Retour</button>
+    </div>
 
     <section id="main" class="inner">
         <noscript>
@@ -75,7 +73,7 @@
                         <th>Date</th>
                         <th>Loc.</th>
                         <th>Real.</th>
-                        <th>...</th>
+                        <th></th>
                     </tr>
                 </thead>
                 <tbody>
@@ -84,7 +82,7 @@
                         <td>{{dateint}}</td>
                         <td>{{localisation}}</td>
                         <td>{{realisation}}</td>
-                        <td>Voir+</td>
+                        <td><i class="fa fa-ellipsis-v"></i></td>
                     </tr>
                     {{/data}}
                 </tbody>
@@ -101,6 +99,9 @@
             <li>
                 <button class="del button alt" disabled>Supprimer</button>
             </li>
+            <!--<li>
+                <button class="sync alt">Envoyer</button>
+            </li>-->
         </ul>
         {{else}}