Gestion des .js minifiés pour page-manager. Gestion de l'ajout dynamique de formulaires de contact ainsi que de l'enregistrement en local idem pour le formulaire du sujet.

This commit is contained in:
xdrm-brackets 2016-04-22 19:35:05 +02:00
parent 74676f7c58
commit 66a8f9ef96
6 changed files with 228 additions and 116 deletions

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;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"!= localStorageInterface.prototype={dataset:[],dataset_keys:[],set:function(a,b,d){var c=this.dataset.indexOf(a);if(-1==c)return!1;-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"!=typeof a)return!1;if(-1<this.dataset.indexOf(a))return!0;
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; 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

@ -2,8 +2,8 @@ function pageManagerClass(){}var ptrPageManagerClass;
pageManagerClass.prototype={depJS:null,depCSS:null,xhr:[],activeXHR:null,page:null,vars:[],path:"",jsPath:"js",cssPath:"css",pagelist:null,container:null,ajax:function(b,c,f,a){for(var d=0;d<this.xhr.length;d++)this.xhr=this.xhr.slice(0,d-1).concat(this.xhr.slice(d,this.xhr.length-1));var e;e=window.XMLHttpRequest?this.xhr.push(new XMLHttpRequest)-1:this.xhr.push(new ActiveXObject("Microsoft.XMLHttpRequest"))-1;this.activeXHR=this.xhr[e];var g=this;this.xhr[e].onreadystatechange=function(){4==g.xhr[e].readyState&& pageManagerClass.prototype={depJS:null,depCSS:null,xhr:[],activeXHR:null,page:null,vars:[],path:"",jsPath:"js",cssPath:"css",pagelist:null,container:null,ajax:function(b,c,f,a){for(var d=0;d<this.xhr.length;d++)this.xhr=this.xhr.slice(0,d-1).concat(this.xhr.slice(d,this.xhr.length-1));var e;e=window.XMLHttpRequest?this.xhr.push(new XMLHttpRequest)-1:this.xhr.push(new ActiveXObject("Microsoft.XMLHttpRequest"))-1;this.activeXHR=this.xhr[e];var g=this;this.xhr[e].onreadystatechange=function(){4==g.xhr[e].readyState&&
(-1<[0,200].indexOf(g.xhr[e].status)?c(g.xhr[e].responseText):c())};f="string"==typeof f&&/^POST|GET$/i.test(f)?f.toUpperCase():"POST";a="POST"==f&&"object"==typeof a&&a instanceof FormData?a:null;this.xhr[e].open(f,b,!0);this.xhr[e].send(a);return this},explodeURL:function(b){b=1<=arguments.length?b:document.URL;if(null!=this.pagelist&&/^(?:(?:http:\/\/)?[^\/]+)\/([a-z0-9_]+)\/?(?:\/((?:.+\/)+)\/?)?$/i.test(b)){for(var c=RegExp.$2.split("/");""==c[c.length-1];)c.pop();return-1<this.pagelist.indexOf(RegExp.$1)? (-1<[0,200].indexOf(g.xhr[e].status)?c(g.xhr[e].responseText):c())};f="string"==typeof f&&/^POST|GET$/i.test(f)?f.toUpperCase():"POST";a="POST"==f&&"object"==typeof a&&a instanceof FormData?a:null;this.xhr[e].open(f,b,!0);this.xhr[e].send(a);return this},explodeURL:function(b){b=1<=arguments.length?b:document.URL;if(null!=this.pagelist&&/^(?:(?:http:\/\/)?[^\/]+)\/([a-z0-9_]+)\/?(?:\/((?:.+\/)+)\/?)?$/i.test(b)){for(var c=RegExp.$2.split("/");""==c[c.length-1];)c.pop();return-1<this.pagelist.indexOf(RegExp.$1)?
{page:RegExp.$1,"var":c}:null}return null},loadDependencies:function(){"object"==typeof this.depCSS&&this.depCSS instanceof Element&&this.depCSS.parentNode==document.head&&document.head.removeChild(this.depCSS);"object"==typeof this.depJS&&this.depJS instanceof Element&&this.depJS.parentNode==document.head&&document.head.removeChild(this.depJS);ptrPageManagerClass=this;this.ajax(this.path+"/"+this.cssPath+"/"+this.page+".css",function(b){null!=b?(ptrPageManagerClass.depCSS=document.createElement("link"), {page:RegExp.$1,"var":c}:null}return null},loadDependencies:function(){"object"==typeof this.depCSS&&this.depCSS instanceof Element&&this.depCSS.parentNode==document.head&&document.head.removeChild(this.depCSS);"object"==typeof this.depJS&&this.depJS instanceof Element&&this.depJS.parentNode==document.head&&document.head.removeChild(this.depJS);ptrPageManagerClass=this;this.ajax(this.path+"/"+this.cssPath+"/"+this.page+".css",function(b){null!=b?(ptrPageManagerClass.depCSS=document.createElement("link"),
ptrPageManagerClass.depCSS.rel="stylesheet",ptrPageManagerClass.depCSS.type="text/css",ptrPageManagerClass.depCSS.href=ptrPageManagerClass.path+"/"+ptrPageManagerClass.cssPath+"/"+ptrPageManagerClass.page+".css",document.head.appendChild(ptrPageManagerClass.depCSS)):console.warn("[loadDependencies_Error] - ("+ptrPageManagerClass.path+"/"+ptrPageManagerClass.cssPath+"/"+ptrPageManagerClass.page+".css)")});this.ajax(this.path+"/"+this.jsPath+"/"+this.page+".js",function(b){null!=b?(ptrPageManagerClass.depJS= ptrPageManagerClass.depCSS.rel="stylesheet",ptrPageManagerClass.depCSS.type="text/css",ptrPageManagerClass.depCSS.href=ptrPageManagerClass.path+"/"+ptrPageManagerClass.cssPath+"/"+ptrPageManagerClass.page+".css",document.head.appendChild(ptrPageManagerClass.depCSS)):console.warn("[loadDependencies_Error] - ("+ptrPageManagerClass.path+"/"+ptrPageManagerClass.cssPath+"/"+ptrPageManagerClass.page+".css)")});this.ajax(this.path+"/"+this.jsPath+"/"+this.page+"-min.js",function(b){null!=b?(ptrPageManagerClass.depJS=
document.createElement("script"),ptrPageManagerClass.depJS.type="text/javascript",ptrPageManagerClass.depJS.src=ptrPageManagerClass.path+"/"+ptrPageManagerClass.jsPath+"/"+ptrPageManagerClass.page+".js",document.head.appendChild(ptrPageManagerClass.depJS)):console.warn("[loadDependencies_Error] - ("+ptrPageManagerClass.path+"/"+ptrPageManagerClass.jsPath+"/"+ptrPageManagerClass.page+".js)")})},updateURL:function(){0<this.vars.length?window.history.pushState(this.page,this.page,"/"+this.page+"/"+this.vars.join("/")+ document.createElement("script"),ptrPageManagerClass.depJS.type="text/javascript",ptrPageManagerClass.depJS.src=ptrPageManagerClass.path+"/"+ptrPageManagerClass.jsPath+"/"+ptrPageManagerClass.page+"-min.js",document.head.appendChild(ptrPageManagerClass.depJS)):console.warn("[loadDependencies_Error] - ("+ptrPageManagerClass.path+"/"+ptrPageManagerClass.jsPath+"/"+ptrPageManagerClass.page+".js)")})},updateURL:function(){0<this.vars.length?window.history.pushState(this.page,this.page,"/"+this.page+"/"+
"/"):window.history.pushState(this.page,this.page,"/"+this.page+"/")},setPage:function(b,c,f,a){var d="object"==typeof a&&a instanceof Array?a:null;if(null!=d)for(a=0;a<d.length&&(d="string"==typeof d[a]&&/^[a-z0-9_]+$/i.test(d[a])?d:null,null!=d);a++);this.pagelist=null!=d?d:this.pagelist;this.page=this.pagelist[0];this.path="string"==typeof c?c:this.path;this.container="object"==typeof f&&f instanceof Element?f:this.container;if(null!=this.pagelist&&null!=this.container)if("string"==typeof b&&-1< this.vars.join("/")+"/"):window.history.pushState(this.page,this.page,"/"+this.page+"/")},setPage:function(b,c,f,a){var d="object"==typeof a&&a instanceof Array?a:null;if(null!=d)for(a=0;a<d.length&&(d="string"==typeof d[a]&&/^[a-z0-9_]+$/i.test(d[a])?d:null,null!=d);a++);this.pagelist=null!=d?d:this.pagelist;this.page=this.pagelist[0];this.path="string"==typeof c?c:this.path;this.container="object"==typeof f&&f instanceof Element?f:this.container;if(null!=this.pagelist&&null!=this.container)if("string"==
this.pagelist.indexOf(b)){this.page=b;var e=this;b=new FormData;for(a=0;a<this.vars.length;a++)b.append(this.vars[a],null);this.ajax(this.path+"/"+this.page+".php",function(a){e.container.innerHTML=a;e.loadDependencies()},"POST",b);this.updateURL()}else if(c=this.explodeURL(),null!=c){this.page=c.page;var g=this;b=new FormData;for(a=this.vars.length=0;a<c["var"].length;a++)this.vars[a]=c["var"][a],b.append(this.vars[a],null);this.ajax(this.path+"/"+this.page+".php",function(a){g.container.innerHTML= typeof b&&-1<this.pagelist.indexOf(b)){this.page=b;var e=this;b=new FormData;for(a=0;a<this.vars.length;a++)b.append(this.vars[a],null);this.ajax(this.path+"/"+this.page+".php",function(a){e.container.innerHTML=a;e.loadDependencies()},"POST",b);this.updateURL()}else if(c=this.explodeURL(),null!=c){this.page=c.page;var g=this;b=new FormData;for(a=this.vars.length=0;a<c["var"].length;a++)this.vars[a]=c["var"][a],b.append(this.vars[a],null);this.ajax(this.path+"/"+this.page+".php",function(a){g.container.innerHTML=
a;g.loadDependencies()},"POST",b);this.updateURL()}else this.setPage(this.pagelist[0]);else console.warn("pagelist et container manquant");return this},refresh:function(){this.setPage(this.page);return this}}; a;g.loadDependencies()},"POST",b);this.updateURL()}else this.setPage(this.pagelist[0]);else console.warn("pagelist et container manquant");return this},refresh:function(){this.setPage(this.page);return this}};

View File

@ -144,11 +144,11 @@ pageManagerClass.prototype = {
}); });
// si le fichier js existe // si le fichier js existe
this.ajax(this.path+'/'+this.jsPath+'/'+this.page+'.js', function(e){ this.ajax(this.path+'/'+this.jsPath+'/'+this.page+'-min.js', function(e){
if( e != null ){ // on charge la dépendance JS si le fichier existe if( e != null ){ // on charge la dépendance JS si le fichier existe
ptrPageManagerClass.depJS = document.createElement('script'); ptrPageManagerClass.depJS = document.createElement('script');
ptrPageManagerClass.depJS.type = 'text/javascript'; ptrPageManagerClass.depJS.type = 'text/javascript';
ptrPageManagerClass.depJS.src = ptrPageManagerClass.path+'/'+ptrPageManagerClass.jsPath+'/'+ptrPageManagerClass.page+'.js'; ptrPageManagerClass.depJS.src = ptrPageManagerClass.path+'/'+ptrPageManagerClass.jsPath+'/'+ptrPageManagerClass.page+'-min.js';
document.head.appendChild(ptrPageManagerClass.depJS); document.head.appendChild(ptrPageManagerClass.depJS);
}else }else
console.warn('[loadDependencies_Error] - ('+ptrPageManagerClass.path+'/'+ptrPageManagerClass.jsPath+'/'+ptrPageManagerClass.page+'.js)'); console.warn('[loadDependencies_Error] - ('+ptrPageManagerClass.path+'/'+ptrPageManagerClass.jsPath+'/'+ptrPageManagerClass.page+'.js)');

View File

@ -38,6 +38,7 @@
<h3 data-n='1'>Identifier l'enquêté</h3> <h3 data-n='1'>Identifier l'enquêté</h3>
<span data-space></span> <span data-space></span>
<h5 data-text="Renseigner au moins un des nominatifs pour chaque contact. (pseudo, prénom et/ou nom)"></h5> <h5 data-text="Renseigner au moins un des nominatifs pour chaque contact. (pseudo, prénom et/ou nom)"></h5>
<article class='subject-panel'>
<h4 class='self' data-icon='a'> <h4 class='self' data-icon='a'>
<input type='text' data-name='number' placeholder='Numéro de téléphone'> <input type='text' data-name='number' placeholder='Numéro de téléphone'>
<input type='text' data-name='username' placeholder='Pseudo'> <input type='text' data-name='username' placeholder='Pseudo'>
@ -45,6 +46,7 @@
<input type='text' data-name='lastname' placeholder='Nom'> <input type='text' data-name='lastname' placeholder='Nom'>
<input type='submit' class='primary' data-name='submit' data-store value='Enregistrer'> <input type='submit' class='primary' data-name='submit' data-store value='Enregistrer'>
</h4> </h4>
</article>
<span data-space></span> <span data-space></span>
@ -59,9 +61,9 @@
<h3 data-n='2'>Saisir manuellement les contacts</h3> <h3 data-n='2'>Saisir manuellement les contacts</h3>
<!-- GESTION DE L'AJOUT DES CONTACTS --> <!-- GESTION DE L'AJOUT DES CONTACTS -->
<article class='contact-panel'>
<span data-space></span> <span data-space></span>
<h5 data-text="Renseigner au moins un des nominatifs pour chaque contact. (pseudo, prénom et/ou nom)"></h5> <h5 data-text="Renseigner au moins un des nominatifs pour chaque contact. (pseudo, prénom et/ou nom)"></h5>
<article class='contact-panel'>
<!-- <h4 data-icon='p' class='new-contact'> <!-- <h4 data-icon='p' class='new-contact'>
<input type='text' data-name='number' placeholder='Numéro de téléphone'> <input type='text' data-name='number' placeholder='Numéro de téléphone'>
<input type='text' data-name='username' placeholder='Pseudo'> <input type='text' data-name='username' placeholder='Pseudo'>

18
view/js/input-min.js vendored
View File

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

View File

@ -1,46 +1,41 @@
// STRUCTURE DU localStorage // STRUCTURE DU localStorage
// subject-data -> contient // subject -> contient les données du sujet
// contacts-data // contacts -> contient les données de tous les contacts
// fiches-relation // fiches -> contient les données de toutes les fiches
/* [0] Gestion des constantes et fonctions /* [0] Gestion des constantes et fonctions
=========================================================*/ =========================================================*/
var subjectBuilder = new HTMLBuilder();
subjectBuilder.setLayout(
"<h4 data-icon='p' class='self'> \n"+
"\t<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > \n"+
"\t<input type='text' data-name='username' placeholder='Pseudo' value='@username' > \n"+
"\t<input type='text' data-name='firstname' placeholder='Prénom' value='@firstname' > \n"+
"\t<input type='text' data-name='lastname' placeholder='Nom' value='@lastname' > \n"+
"\t<input type='submit' class='primary sub-number' value='Enregistrer'>\n"+
"</h4>\n\n");
var contactBuilder = new HTMLBuilder(); var contactBuilder = new HTMLBuilder();
contactBuilder.setLayout( contactBuilder.setLayout(
"<h4 data-icon='p' class='new-contact'> "+ "<h4 data-icon='p' class='new-contact'> \n"+
"<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > "+ "\t<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > \n"+
"<input type='text' data-name='username' placeholder='Pseudo' value='@username' > "+ "\t<input type='text' data-name='username' placeholder='Pseudo' value='@username' > \n"+
"<input type='text' data-name='firstname' placeholder='Prénom' value='@firstname' > "+ "\t<input type='text' data-name='firstname' placeholder='Prénom' value='@firstname' > \n"+
"<input type='text' data-name='lastname' placeholder='Nom' value='@lastname' > "+ "\t<input type='text' data-name='lastname' placeholder='Nom' value='@lastname' > \n"+
"<input type='submit' class='primary sub-number' value='Enregistrer'>"+ "\t<input type='submit' class='primary sub-number' value='Enregistrer'>\n"+
"</h4>"); "</h4>\n\n");
/* (2) TODO: Contiendra la fiche relation complète */ /* (2) TODO: Contiendra la fiche relation complète */
var ficheBuilder = new HTMLBuilder(); var ficheBuilder = new HTMLBuilder();
ficheBuilder.setLayout( ficheBuilder.setLayout(
"<h4 data-icon='p' class='new-contact'> "+ "<h4 data-icon='p' class='new-contact'> "+
"<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > "+ "\t<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > "+
"<input type='text' data-name='username' placeholder='Pseudo' value='@username' > "+ "\t<input type='text' data-name='username' placeholder='Pseudo' value='@username' > "+
"<input type='text' data-name='firstname' placeholder='Prénom' value='@firstname' > "+ "\t<input type='text' data-name='firstname' placeholder='Prénom' value='@firstname' > "+
"<input type='text' data-name='lastname' placeholder='Nom' value='@lastname' > "+ "\t<input type='text' data-name='lastname' placeholder='Nom' value='@lastname' > "+
"<input type='submit' class='primary sub-number' value='Enregistrer'>"+ "\t<input type='submit' class='primary sub-number' value='Enregistrer'>"+
"</h4>"); "</h4>");
@ -59,6 +54,14 @@ function updateListener(element, eventType, handler){
/* [1] Initialisation des utilitaires /* [1] Initialisation des utilitaires
=========================================================*/ =========================================================*/
/* (1) Instanciation de inputChecker */ /* (1) Instanciation de inputChecker */
@ -75,31 +78,23 @@ var FormDeflaterP = { tags: ['input'], attr: ['data-name'] };
/* [2] Indexation des inputs /* [2] Indexation des inputs
=========================================================*/ =========================================================*/
/* (1) Input de type fichier pour l'import */ /* (1) Input de type fichier pour l'import */
var importCallLog = $('input#call_log-import[type="file"]'); var importCallLog = $('input#call_log-import[type="file"]');
/* (2) Bouton d'ajout de contact */
/* (2) Contiendra les formulaires des contacts ajoutés */
var contactDeflaters = []; // Contiendra les deflaters de chaque formulaire d'ajout de contact
function contactForms(){
// {1} On récupère les formulaires //
var contactForms = $$('h4.new-contact');
// {2} Mise à jour des deflaters //
contactDeflaters = [];
for( var i = 0 ; i < contactForms.length ; i++ )
contactDeflaters.push( new FormDeflater( contactForms[i], FormDeflaterP.tags, FormDeflaterP.attr ));
// {3} On retourne la liste des formulaires //
return contactForms;
}
/* (3) Bouton d'ajout de contact */
var addContact = $('h4.add-contact'); var addContact = $('h4.add-contact');
/* (4) Bouton d'ajout de fiche */ /* (3) Bouton d'ajout de fiche */
var addFiche = $('h4.add-fiche'); var addFiche = $('h4.add-fiche');
@ -109,24 +104,119 @@ var addFiche = $('h4.add-fiche');
/* [3] Gestion des formulaires de contact
/* [3] Gestion des formulaires du sujet
=========================================================*/
/* (0) Les input du formulaire du sujet */
var subjectInput = {
number: $('article.subject-panel [data-name="number"]'),
username: $('article.subject-panel [data-name="username"]'),
firstname: $('article.subject-panel [data-name="firstname"]'),
lastname: $('article.subject-panel [data-name="lastname"]'),
store: $('article.subject-panel [data-name="submit"]')
};
/* (1) Gestion de l'enregistrement du sujet en local ('localStorage') */
lsi.createDataset('subject');
function storeSubject(){
console.log('storing subject');
// {1} Vérification des champs //
// Le numéro n'est pas vide
var validForm = subjectInput.number.value.length > 0;
// ET le pseudo et/ou le prénom et/ou le nom n'est pas vide
validForm = validForm && subjectInput.username.value.length+subjectInput.firstname.value.length+subjectInput.lastname.value.length > 0;
// Si le formulaire n'est pas valide, on ne l'enregistre pas
if( !validForm ) return false;
// {2} On récupère et met en forme les valeurs du deflater //
var obj = {
number: subjectInput.number.value,
username: subjectInput.username.value,
firstname: subjectInput.firstname.value,
lastname: subjectInput.lastname.value
};
// {3} On enregistre les données dans le 'localStorage' //
lsi.set('subject', 'form', obj);
}
/* (2) Gestion de l'affichage (et mise à jour) du sujet (depuis 'localStorage') */
function restoreSubject(){
// {1} On récupère les informations du sujet //
var subjectData = lsi.get('subject', 'form');
console.log(subjectData);
if( subjectData == null ) return;
// {2} On restore les valeurs //
subjectInput.number.value = subjectData.number;
subjectInput.username.value = subjectData.username;
subjectInput.firstname.value = subjectData.firstname;
subjectInput.lastname.value = subjectData.lastname;
}restoreSubject();
/* (n) On attache l'évènement d'enregistrement du formulaire du sujet */
subjectInput.store.addEventListener('click', storeSubject, false);
/* [4] 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) Gestion de l'enregistrement des contacts en local ('localStorage') */ /* (1) Gestion de l'enregistrement des contacts en local ('localStorage') */
lsi.createDataset('contacts'); lsi.createDataset('contacts');
function storeContacts(e){ function storeContacts(){
console.log('storing'); console.log('storing all forms');
// {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 // // {1} Pour chaque formulaire de contact présent //
var deflater = new FormDeflater(form, ['input'], ['data-name']); var existingContacts = $$('article.contact-panel .new-contact');
for( var i = 0 ; i < existingContacts.length ; i++ ){
// {3} On récupère et met en forme les valeurs du deflater // // {2} On récupère les informations relatives à l'élément courant //
var indexInParent = existingContacts[i].parentNode.children.indexOf(existingContacts[i]);
// {3} On initialise notre deflater pour récupérer les valeurs //
var deflater = new FormDeflater(existingContacts[i], ['input'], ['data-name']);
// {4} On enregistre ce contact si le numéro n'est pas vide et soit pseudo/prénom/nom //
var deflated = deflater.deflate(); var deflated = deflater.deflate();
// Le numéro n'est pas vide
var validForm = deflated.number.value.length > 0;
// ET le pseudo et/ou le prénom et/ou le nom n'est pas vide
validForm = validForm && deflated.username.value.length+deflated.firstname.value.length+deflated.lastname.value.length > 0;
// Si le formulaire n'est pas valide, on ne l'enregistre pas
if( !validForm ) continue;
// {5} On récupère et met en forme les valeurs du deflater //
var obj = { var obj = {
number: deflated.number.value, number: deflated.number.value,
username: deflated.username.value, username: deflated.username.value,
@ -134,8 +224,13 @@ function storeContacts(e){
lastname: deflated.lastname.value lastname: deflated.lastname.value
}; };
// {4} On enregistre les données dans le 'localStorage' // // {6} On enregistre les données dans le 'localStorage' //
lsi.set('contacts', 'form'+indexInParent, obj); lsi.set('contacts', 'form'+indexInParent, obj);
}
// {7} On met à jour le rendu //
restoreContacts();
} }
@ -157,11 +252,14 @@ function addNewContact(number, username, firstname, lastname){
} }
/* (3) Gestion de la récupération des contacts (depuis 'localStorage') */ /* (3) Gestion de l'affichage (et mise à jour) des contacts (depuis 'localStorage') */
function restoreContacts(){ function restoreContacts(){
// {1} Pour chaque contact du 'localStorage' // // {1} Pour chaque contact du 'localStorage' //
var existingContacts = lsi.keys('contacts'); var existingContacts = lsi.keys('contacts');
// On réinitialise le HTML
contactContainer.innerHTML = '';
for( var i = 0 ; i < existingContacts.length ; i++ ){ for( var i = 0 ; i < existingContacts.length ; i++ ){
// {2} On récupère les informations du contact // // {2} On récupère les informations du contact //
var contactData = lsi.get('contacts', existingContacts[i]); var contactData = lsi.get('contacts', existingContacts[i]);
@ -175,17 +273,20 @@ function restoreContacts(){
); );
} }
}restoreContacts();
// Si on a aucun contact, on en ajoute 1
if( ('article.contact-panel .new-contact input[type="submit"]') == null )
addNewContact(); addNewContact();
// {4} On met à jour les listeners de chaque formulaire //
var contactSubmits = $$('article.contact-panel .new-contact input[type="submit"]');
for( var i = 0 ; i < contactSubmits.length ; i++ )
updateListener(contactSubmits[i], 'click', storeContacts);
}restoreContacts();
/* (n) On attache tous les évènements */
addContact.addEventListener('click', addNewContact, false); /* (n) On attache l'évènement d'ajout d'un formulaire de contact */
addContact.addEventListener('click', storeContacts, false);
@ -194,8 +295,17 @@ addContact.addEventListener('click', addNewContact, false);
/* [4] Gestion des fiches relation
/* [5] Gestion des fiches relation
=========================================================*/ =========================================================*/
// TODO : Gestion des fiches relation en fonction des contacts
/* (0) Conteneur de tous les formulaires */ /* (0) Conteneur de tous les formulaires */
var ficheContainer = $('article.contact-panel'); var ficheContainer = $('article.contact-panel');
@ -221,6 +331,14 @@ function addNewFiche(number, username, firstname, lastname){
/* [5] Gestion des deflaters (formulaires) de contact /* [5] Gestion des deflaters (formulaires) de contact
=========================================================*/ =========================================================*/
@ -229,22 +347,6 @@ function addNewFiche(number, username, firstname, lastname){
/* [6] Gestion des deflaters (formulaires) de fiches
=========================================================*/
/* (4) Contiendra les formulaires de fiche relation */
var ficheDeflaters = []; // Contiendra les deflaters de chaque formulaire de fiche de fiche
function ficheForms(){
// {1} On récupère les formulaires //
var ficheForms = $$('h4.fiche-fiche');
// {2} Mise à jour des deflaters //
ficheDeflaters = [];
for( var i = 0 ; i < ficheForms.length ; i++ )
ficheDeflaters.push( new FormDeflater( ficheForms[i], FormDeflaterP.tags, FormDeflaterP.attr ));
// {3} On retourne la liste des formulaires //
return ficheForms;
}
@ -252,7 +354,11 @@ function ficheForms(){
/* [3] Gestion de l'import du fichier
/* [6] Gestion de l'import du fichier
=========================================================*/ =========================================================*/
importCallLog.addEventListener('change', function(e){ importCallLog.addEventListener('change', function(e){
/* (1) On rédige la requête */ /* (1) On rédige la requête */