Stockage en localdb ok

MobiParc/index.html

@@ -94,7 +94,7 @@
         <form class="data-form activite">
 
             <h3>Activité</h3>
-
+            
             <div class="input-group">
                 <label class="label" for="dateint">Date: </label>
                 <input class="input-text" id="dateint" name="dateint" type="date" title="Date de l'intervention'" /> <!--required-->
@@ -188,7 +188,7 @@
 
             <button class="button-submit btn btn-save" type="submit">Enregistrer</button>
         </form>
-
+        
 
         {{#if data}}
         <button class="del btn btn-delete" disabled>Supprimer</button>

MobiParc/js/mobiparc.js

@@ -34,7 +34,7 @@ var main = document.getElementsByClassName('main')[0];
 
 //### Initialisation
 
-// JS s'execute: Retire l'avertissement 'Javascript est requis'
+// JS s'execute: Retire l'avertissement 'Javascript est requis' (de fait, on sait que JS est actif...)
 document.body.classList.remove("nojs");
 
 // Installe le service worker
@@ -54,10 +54,9 @@ var open = indexedDB.open("MobiParc", 3);
 open.onupgradeneeded = function () {
     var db = open.result;
     var store = db.createObjectStore("activites", { keyPath: "tstamp" });
+    console.log("[Activites DB] Cree");
 };
 
-console.log(">"+window.location.hash.slice(1));
-
 // Obtient l'id de la section a afficher en fonction de l'url
 function getSectionId() {
     return (window.location.hash.slice(1).length > 0 ? window.location.hash.slice(1) : "index");
@@ -115,58 +114,12 @@ $('#cRetour').on('click', function () {
     $('html, body').animate({ scrollTop: 0 }, 200);
 });
 
-
 // Gere l'affichage des classes modales
 $(".modal-open, .modal-background, .modal-close").click(function () {
     $(".modal-content,.modal-background").toggleClass("active");
     if ($(this).hasClass("modal-close")) location.reload();
 });
 
-// Gere le clic sur un bouton supprimer
-$("body").on("click", ".data-del", function (event) {
-
-    // console.log($(this).data("id") + " " + $(this).data("type"));
-    var id = $(this).data("id");
-    var datatype = $(this).data("type");
-    //console.log(id + " " + datatype);
-
-    var r = confirm("Supprimer cet élément!");
-    if (r == true) {
-
-        var db = open.result;
-        var tx = db.transaction(datatype, "readwrite");
-        var store = tx.objectStore(datatype);
-
-        store.delete(id).onsuccess = function (evt) {
-            // console.log(id + " " + datatype);
-            location.reload();
-        };
-    }
-});
-
-// Gere le clic sur un bouton supprimer (bis?)
-$("body").on("click", ".del", function (event) {
-
-    var del = $(this);
-    if (confirm("Supprimer la selection!") == true) {
-
-        $(del).prop("disabled", true);
-
-        $(".ui-selected").each(function () {
-            var elt = $(this);
-            var id = $(elt).data("id");
-            var datatype = $(elt).data("type");
-            var db = open.result;
-            var tx = db.transaction(datatype, "readwrite");
-            var store = tx.objectStore(datatype);
-            store.delete(id).onsuccess = function (evt) {
-                $(elt).remove();
-            };
-        });
-    }
-});
-
-
 // Recharge dynamiquement le contenu HTML à chaque changement d'url
 $(window).on('hashchange', function () {
 
@@ -196,9 +149,17 @@ $(window).on('hashchange', function () {
     }
 });
 
-
+var addSubmitHandler = function() {
+    if ($(".main").find(".data-form").length) {
+        form = $(".main").find(".data-form")[0];
+        form.addEventListener('submit', handleFormSubmit);
+        console.log("handler added");
+    }
+};
+addSubmitHandler();
 
 // Observeur: suit les modifications apportees a la section main
+// >> Infos: https://davidwalsh.name/mutationobserver-api
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
 var mainsection = document.querySelector("section.main");
 var observer = new MutationObserver(function (mutations) {
@@ -210,21 +171,29 @@ var observer = new MutationObserver(function (mutations) {
         }
     });
 
-    //document.getElementsByClassName('results-display')[0].innerHTML = null;
-
-    // intercepte la soumision de formulaires
-    if ($(".main").find(".data-form").length) {
-        form = $(".main").find(".data-form")[0];
-        form.addEventListener('submit', handleFormSubmit);
-        console.log("submit handled");
-    }
+    document.getElementsByClassName('results-display')[0].innerHTML = null;
 
 });
 
-observer.observe(mainsection, { attributes: true, childList: true, subtree: true });
+// Notify me of everything!
+var observerConfig = {
+    attributes: true,
+    childList: true,
+    characterData: true
+};
+target = document.querySelector("section.main");
+observer.observe(target, observerConfig);
+
+
+// Intercepte la soumision de formulaires
+if ($(".main").find(".data-form").length) {
+    var form = $(".main").find(".data-form")[0];
 
+    $(form).on("submit", function (event) { // on requires jquery 1.7+
+        handleFormSubmit(event);
+    });
+}
 
-// Intercepte le submit de données
 var form;
 var handleFormSubmit = function handleFormSubmit(event) {
     console.log("handle submit");
@@ -246,8 +215,8 @@ var handleFormSubmit = function handleFormSubmit(event) {
         data.user = localStorage.hasOwnProperty("params") ? JSON.parse(localStorage.getItem("params")).user : "(unknown)";
         
         var db = open.result;
-        var txs = db.transaction("activite", "readwrite");
-        var stores = txs.objectStore("activite");
+        var txs = db.transaction("activites", "readwrite");
+        var stores = txs.objectStore("activites");
         stores.put(data);
 
         $(".main").empty();
@@ -261,6 +230,27 @@ var handleFormSubmit = function handleFormSubmit(event) {
     console.log(data);
 };
 
+// Gere le clic sur un bouton supprimer
+$("body").on("click", ".del", function (event) {
+
+    var del = $(this);
+    if (confirm("Supprimer la selection!") == true) {
+
+        $(del).prop("disabled", true);
+
+        $(".ui-selected").each(function () {
+            var elt = $(this);
+            var id = $(elt).data("id");
+            var datatype = $(elt).data("type");
+            var db = open.result;
+            var tx = db.transaction(datatype, "readwrite");
+            var store = tx.objectStore(datatype);
+            store.delete(id).onsuccess = function (evt) {
+                $(elt).remove();
+            };
+        });
+    }
+});
 
 // ### Synchronisation des données