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')

This commit is contained in:
xdrm-brackets 2016-04-22 16:40:06 +02:00
parent 20d9ca8216
commit 74676f7c58
6 changed files with 87 additions and 20 deletions

View File

@ -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}};

View File

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

View File

@ -1,3 +1,3 @@
function localStorageInterface(){} 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;

View File

@ -21,9 +21,11 @@ localStorageInterface.prototype = {
/* (1) Si le 'dataset' n'existe pas */ /* (1) Si le 'dataset' n'existe pas */
if( index == -1 ) return false; // erreur 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); this.dataset_keys[index].push(key);
localStorage.setItem(dataset_name, JSON.stringify(this.dataset_keys[index])); localStorage.setItem(dataset_name, JSON.stringify(this.dataset_keys[index]));
}
/* (3) On propage au 'localStorage' */ /* (3) On propage au 'localStorage' */
localStorage.setItem(dataset_name+'_'+key, JSON.stringify(value) ); localStorage.setItem(dataset_name+'_'+key, JSON.stringify(value) );
@ -75,7 +77,7 @@ localStorageInterface.prototype = {
this.dataset.push(name); this.dataset.push(name);
this.dataset_keys.push([]); this.dataset_keys.push([]);
localStorage.setItem(name, ''); localStorage.setItem(name, JSON.stringify([]));
} }

View File

@ -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 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>"); 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 File

@ -44,11 +44,10 @@ ficheBuilder.setLayout(
"</h4>"); "</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); 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 /* [3] Gestion des formulaires de contact
=========================================================*/ =========================================================*/
/* (0) Conteneur de tous les formulaires */ /* (0) Conteneur de tous les formulaires */
var contactContainer = $('article.contact-panel'); 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){ function addNewContact(number, username, firstname, lastname){
// {1} On ajoute le HTML //
contactContainer.innerHTML += contactBuilder.build({ contactContainer.innerHTML += contactBuilder.build({
number: (typeof number != 'string') ? '' : number, number: (typeof number != 'string') ? '' : number,
username: (typeof username != 'string') ? '' : username, username: (typeof username != 'string') ? '' : username,
firstname: (typeof firstname != 'string') ? '' : firstname, firstname: (typeof firstname != 'string') ? '' : firstname,
lastname: (typeof lastname != 'string') ? '' : lastname 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(); 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); addContact.addEventListener('click', addNewContact, false);
/* [4] Gestion des fiches relation /* [4] Gestion des fiches relation
=========================================================*/ =========================================================*/
/* (0) Conteneur de tous les formulaires */ /* (0) Conteneur de tous les formulaires */