Gestion de l'enregistrement local + de la restauration au chargement (erreur quand on ajoute un formulaire de contact, ceux qui ont été chargés dynamiquement se 'reset')

js/lib/html-builder-min.js

@@ -1 +1 @@
-function HTMLBuilder(){}HTMLBuilder.prototype={layout:null,default_params:{},setLayout:function(a){this.layout=a},build:function(a){var b=this.layout,c;for(c in a){var d=new RegExp("@"+c,"g");console.log(d);b=b.replace(d,a[c])}return b}};
+function HTMLBuilder(){}HTMLBuilder.prototype={layout:null,default_params:{},setLayout:function(a){this.layout=a},build:function(a){var b=this.layout,c;for(c in a)b=b.replace(new RegExp("@"+c,"g"),a[c]);return b}};

js/lib/html-builder.js

@@ -19,7 +19,6 @@ HTMLBuilder.prototype = {
         for( var name in parameters ){
             // Contiendra l'expression régulière pour remplacer le paramètre
             var regex = new RegExp('@'+name, 'g');
-            console.log(regex);
 
             render = render.replace(regex, parameters[name]);
         }

js/lib/local-storage-interface-min.js

@@ -1,3 +1,3 @@
 function localStorageInterface(){}
-localStorageInterface.prototype={dataset:[],dataset_keys:[],set:function(a,b,d){var c=this.dataset.indexOf(a);if(-1==c)return!1;this.dataset_keys[c].push(b);localStorage.setItem(a,JSON.stringify(this.dataset_keys[c]));localStorage.setItem(a+"_"+b,JSON.stringify(d));return!0},get:function(a,b){return-1==this.dataset.indexOf(a)?!1:JSON.parse(localStorage.getItem(a+"_"+b))},createDataset:function(a){if(null==a||"string"!=typeof a)return!1;if(-1<this.dataset.indexOf(a))return!0;var b=localStorage.getItem(a);
+localStorageInterface.prototype={dataset:[],dataset_keys:[],set:function(a,b,d){var c=this.dataset.indexOf(a);if(-1==c)return!1;console.log(this.dataset_keys[c]+" -> "+b);-1==this.dataset_keys[c].indexOf(b)&&(this.dataset_keys[c].push(b),localStorage.setItem(a,JSON.stringify(this.dataset_keys[c])));localStorage.setItem(a+"_"+b,JSON.stringify(d));return!0},get:function(a,b){return-1==this.dataset.indexOf(a)?!1:JSON.parse(localStorage.getItem(a+"_"+b))},createDataset:function(a){if(null==a||"string"!=
-null!=b?(this.dataset.push(a),this.dataset_keys.push(JSON.parse(b))):(this.dataset.push(a),this.dataset_keys.push([]),localStorage.setItem(a,""));return!0},keys:function(a){a=this.dataset.indexOf(a);return-1==a?!1:this.dataset_keys[a]}};var lsi=new localStorageInterface;
+typeof a)return!1;if(-1<this.dataset.indexOf(a))return!0;var b=localStorage.getItem(a);null!=b?(this.dataset.push(a),this.dataset_keys.push(JSON.parse(b))):(this.dataset.push(a),this.dataset_keys.push([]),localStorage.setItem(a,JSON.stringify([])));return!0},keys:function(a){a=this.dataset.indexOf(a);return-1==a?!1:this.dataset_keys[a]}};var lsi=new localStorageInterface;

js/lib/local-storage-interface.js

@@ -21,9 +21,11 @@ localStorageInterface.prototype = {
         /* (1) Si le 'dataset' n'existe pas */
         if( index == -1 ) return false; // erreur
 
-        /* (2) On enregistre la nouvelle clé */
+        /* (2) On enregistre la nouvelle clé, si elle est nouvelle */
+        if( this.dataset_keys[index].indexOf(key) == -1 ){
             this.dataset_keys[index].push(key);
             localStorage.setItem(dataset_name, JSON.stringify(this.dataset_keys[index]));
+        }
 
         /* (3) On propage au 'localStorage' */
         localStorage.setItem(dataset_name+'_'+key, JSON.stringify(value) );
@@ -75,7 +77,7 @@ localStorageInterface.prototype = {
 
             this.dataset.push(name);
             this.dataset_keys.push([]);
-            localStorage.setItem(name, '');
+            localStorage.setItem(name, JSON.stringify([]));
 
         }
 

view/js/input-min.js

@@ -1,6 +1,7 @@
 var contactBuilder=new HTMLBuilder;contactBuilder.setLayout("<h4 data-icon='p' class='new-contact'> <input type='text' data-name='number'    placeholder='Num\u00e9ro de t\u00e9l\u00e9phone' value='@number'    > <input type='text' data-name='username'  placeholder='Pseudo'              value='@username'  > <input type='text' data-name='firstname' placeholder='Pr\u00e9nom'              value='@firstname' > <input type='text' data-name='lastname'  placeholder='Nom'                 value='@lastname'  > <input type='submit' class='primary sub-number'                            value='Enregistrer'></h4>");
 var ficheBuilder=new HTMLBuilder;ficheBuilder.setLayout("<h4 data-icon='p' class='new-contact'> <input type='text' data-name='number'    placeholder='Num\u00e9ro de t\u00e9l\u00e9phone' value='@number'    > <input type='text' data-name='username'  placeholder='Pseudo'              value='@username'  > <input type='text' data-name='firstname' placeholder='Pr\u00e9nom'              value='@firstname' > <input type='text' data-name='lastname'  placeholder='Nom'                 value='@lastname'  > <input type='submit' class='primary sub-number'                            value='Enregistrer'></h4>");
-function updateListener(b,a,c,d){b.removeEventListener(a,c);d.addEventListener(a,c);return d}var ic=new inputChecker,FormDeflaterP={tags:["input"],attr:["data-name"]},importCallLog=$('input#call_log-import[type="file"]'),contactDeflaters=[];function contactForms(){var b=$$("h4.new-contact");contactDeflaters=[];for(var a=0;a<b.length;a++)contactDeflaters.push(new FormDeflater(b[a],FormDeflaterP.tags,FormDeflaterP.attr));return b}
+function updateListener(b,a,c){b.removeEventListener(a,c);b.addEventListener(a,c)}var ic=new inputChecker,FormDeflaterP={tags:["input"],attr:["data-name"]},importCallLog=$('input#call_log-import[type="file"]'),contactDeflaters=[];function contactForms(){var b=$$("h4.new-contact");contactDeflaters=[];for(var a=0;a<b.length;a++)contactDeflaters.push(new FormDeflater(b[a],FormDeflaterP.tags,FormDeflaterP.attr));return b}var addContact=$("h4.add-contact"),addFiche=$("h4.add-fiche"),contactContainer=$("article.contact-panel");
-var addContact=$("h4.add-contact"),addFiche=$("h4.add-fiche"),contactContainer=$("article.contact-panel");function addNewContact(b,a,c,d){contactContainer.innerHTML+=contactBuilder.build({number:"string"!=typeof b?"":b,username:"string"!=typeof a?"":a,firstname:"string"!=typeof c?"":c,lastname:"string"!=typeof d?"":d})}addNewContact();addContact.addEventListener("click",addNewContact,!1);var ficheContainer=$("article.contact-panel");
+lsi.createDataset("contacts");function storeContacts(b){console.log("storing");var a=b.target.parentNode;b=a.parentNode.children.indexOf(a);a=(new FormDeflater(a,["input"],["data-name"])).deflate();lsi.set("contacts","form"+b,{number:a.number.value,username:a.username.value,firstname:a.firstname.value,lastname:a.lastname.value})}
-function addNewFiche(b,a,c,d){ficheContainer.innerHTML+=contactBuilder.build({number:"string"!=typeof b?"":b,username:"string"!=typeof a?"":a,firstname:"string"!=typeof c?"":c,lastname:"string"!=typeof d?"":d})}var ficheDeflaters=[];function ficheForms(){var b=$$("h4.fiche-fiche");ficheDeflaters=[];for(var a=0;a<b.length;a++)ficheDeflaters.push(new FormDeflater(b[a],FormDeflaterP.tags,FormDeflaterP.attr));return b}
+function addNewContact(b,a,c,d){contactContainer.innerHTML+=contactBuilder.build({number:"string"!=typeof b?"":b,username:"string"!=typeof a?"":a,firstname:"string"!=typeof c?"":c,lastname:"string"!=typeof d?"":d});b=$$('article.contact-panel .new-contact input[type="submit"]');for(a=0;a<b.length;a++)updateListener(b[a],"click",storeContacts)}
-importCallLog.addEventListener("change",function(b){api.send({path:"upload/call_log",file:importCallLog.files[0]},function(a){console.log(a);0==a.ModuleError&&importCallLog.addClass("active")})},!1);
+function restoreContacts(){for(var b=lsi.keys("contacts"),a=0;a<b.length;a++){var c=lsi.get("contacts",b[a]);addNewContact(c.number,c.username,c.firstname,c.lastname)}}restoreContacts();addContact.addEventListener("click",addNewContact,!1);var ficheContainer=$("article.contact-panel");function addNewFiche(b,a,c,d){ficheContainer.innerHTML+=contactBuilder.build({number:"string"!=typeof b?"":b,username:"string"!=typeof a?"":a,firstname:"string"!=typeof c?"":c,lastname:"string"!=typeof d?"":d})}
+var ficheDeflaters=[];function ficheForms(){var b=$$("h4.fiche-fiche");ficheDeflaters=[];for(var a=0;a<b.length;a++)ficheDeflaters.push(new FormDeflater(b[a],FormDeflaterP.tags,FormDeflaterP.attr));return b}importCallLog.addEventListener("change",function(b){api.send({path:"upload/call_log",file:importCallLog.files[0]},function(a){console.log(a);0==a.ModuleError&&importCallLog.addClass("active")})},!1);

view/js/input.js

@@ -44,11 +44,10 @@ ficheBuilder.setLayout(
     "</h4>");
 
 
-// Fonction qui met à jour un élément et son listener
+/* (3) Fonction qui met à jour un élément et son listener */
-function updateListener(element, eventType, handler, newElement){
+function updateListener(element, eventType, handler){
     element.removeEventListener(eventType, handler);
-    newElement.addEventListener(eventType, handler);
+    element.addEventListener(eventType, handler);
-    return newElement;
 }
 
 
@@ -105,30 +104,96 @@ var addFiche = $('h4.add-fiche');
 
 
 
+
+
+
+
+
 /* [3] Gestion des formulaires de contact
 =========================================================*/
 /* (0) Conteneur de tous les formulaires */
 var contactContainer = $('article.contact-panel');
 
-/* (1) Fonction pour l'ajout d'un contact */
+/* (1) Gestion de l'enregistrement des contacts en local ('localStorage') */
+lsi.createDataset('contacts');
+function storeContacts(e){
+    console.log('storing');
+    // {1} On récupère les informations relatives à l'élément courant //
+    var form = e.target.parentNode;
+    var indexInParent = form.parentNode.children.indexOf(form);
+
+    // {2} On initialise notre deflater pour récupérer les valeurs //
+    var deflater = new FormDeflater(form, ['input'], ['data-name']);
+
+    // {3} On récupère et met en forme les valeurs du deflater //
+    var deflated = deflater.deflate();
+    var obj = {
+        number:    deflated.number.value,
+        username:  deflated.username.value,
+        firstname: deflated.firstname.value,
+        lastname:    deflated.lastname.value
+    };
+
+    // {4} On enregistre les données dans le 'localStorage' //
+    lsi.set('contacts', 'form'+indexInParent, obj);
+}
+
+
+/* (2) Fonction pour l'ajout d'un contact */
 function addNewContact(number, username, firstname, lastname){
+    // {1} On ajoute le HTML //
     contactContainer.innerHTML += contactBuilder.build({
         number:    (typeof number    != 'string') ? '' : number,
         username:  (typeof username  != 'string') ? '' : username,
         firstname: (typeof firstname != 'string') ? '' : firstname,
         lastname:  (typeof lastname  != 'string') ? '' : lastname
     });
+
+    // {2} On attache les évènements sur les boutons 'Enregistrer' //
+    var contactSubmits = $$('article.contact-panel .new-contact input[type="submit"]');
+    for( var i = 0 ; i < contactSubmits.length ; i++ )
+        updateListener(contactSubmits[i], 'click', storeContacts);
+
 }
 
-// On ajoute le premier
+
+/* (3) Gestion de la récupération des contacts (depuis 'localStorage') */
+function restoreContacts(){
+    // {1} Pour chaque contact du 'localStorage' //
+    var existingContacts = lsi.keys('contacts');
+
+    for( var i = 0 ; i < existingContacts.length ; i++ ){
+        // {2} On récupère les informations du contact //
+        var contactData = lsi.get('contacts', existingContacts[i]);
+
+        // {3} On ajoute un contact à la liste //
+        addNewContact(
+            contactData.number,
+            contactData.username,
+            contactData.firstname,
+            contactData.lastname
+        );
+    }
+
+}restoreContacts();
+
+// Si on a aucun contact, on en ajoute 1
+if( ('article.contact-panel .new-contact input[type="submit"]') == null )
     addNewContact();
 
-// Puis on attache l'évènement pour en ajouter d'autres manuellement
+
+
+
+/* (n) On attache tous les évènements */
 addContact.addEventListener('click', addNewContact, false);
 
 
 
 
+
+
+
+
 /* [4] Gestion des fiches relation
 =========================================================*/
 /* (0) Conteneur de tous les formulaires */