Avancement sur les interactions dynamiques + passage des instances 'subject', 'contact', 'mini' en classes externes.
This commit is contained in:
xdrm-brackets
parent
59a38ff6d2
commit
0998c89f47
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -264,7 +264,7 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|
||||||
@include transition( border .2s ease-in-out, background .2s ease-in-out );
|
@include transition( border .2s ease-in-out, background .2s ease-in-out, color .2s ease-in-out );
|
||||||
|
|
||||||
/* Animation de @focus*/
|
/* Animation de @focus*/
|
||||||
&:focus{
|
&:focus{
|
||||||
|
|
@ -272,6 +272,23 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Boutons
|
||||||
|
& input[type='submit']{
|
||||||
|
border-color: darken($timeline-2, 20);
|
||||||
|
|
||||||
|
background: $timeline-2;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
// Animation de @hover pour les boutons
|
||||||
|
&:hover,
|
||||||
|
&:focus{
|
||||||
|
background: darken($timeline-2, 5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
& label{
|
& label{
|
||||||
color: #555;
|
color: #555;
|
||||||
|
|
@ -409,7 +426,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
margin: 0;
|
margin: .3em 0;
|
||||||
padding: .5em .8em;
|
padding: .5em .8em;
|
||||||
|
|
||||||
border: 1px solid darken(#d8e0e9, 10);
|
border: 1px solid darken(#d8e0e9, 10);
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -44,8 +44,8 @@ miniFicheBuilder.setLayout(
|
||||||
"\t<h4 data-icon='o' class='color2'>@firstname @lastname (@username)</h4>\n"+
|
"\t<h4 data-icon='o' class='color2'>@firstname @lastname (@username)</h4>\n"+
|
||||||
|
|
||||||
"\t<h5 class='nobold color0'>\n"+
|
"\t<h5 class='nobold color0'>\n"+
|
||||||
"\t\t<input type='radio' name='sexe_min_@uid' checked data-name='sexe' id='sexeH_min_@uid' checked='@sexe_A'><label for='sexeH_min_@uid'>Homme</label>\n"+
|
"\t\t<input type='radio' name='sexe_min_@uid' checked data-name='sexe' id='sexeH_min_@uid' checked='@sexea'><label for='sexeH_min_@uid'>Homme</label>\n"+
|
||||||
"\t\t   <input type='radio' class='btm' name='sexe_min_@uid' data-name='sexe' id='sexeF_min_@uid' checked='@sexe_B'><label for='sexeF_min_@uid'>Femme</label>\n"+
|
"\t\t   <input type='radio' class='btm' name='sexe_min_@uid' data-name='sexe' id='sexeF_min_@uid' checked='@sexeb'><label for='sexeF_min_@uid'>Femme</label>\n"+
|
||||||
"\t</h5>\n"+
|
"\t</h5>\n"+
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -99,10 +99,10 @@ miniFicheBuilder.setLayout(
|
||||||
|
|
||||||
"\t<h5 class='nobold color0'>\n"+
|
"\t<h5 class='nobold color0'>\n"+
|
||||||
"\t\tOù habite t-elle/il ?<br>\n"+
|
"\t\tOù habite t-elle/il ?<br>\n"+
|
||||||
"\t\t   <input type='radio' checked name='loc_min_@uid' data-name='loc' id='locA_min_@uid' checked='@loc_A'><label for='locA_min_@uid'>- de 10km</label><br>\n"+
|
"\t\t   <input type='radio' checked name='loc_min_@uid' data-name='loc' id='locA_min_@uid' checked='@loca'><label for='locA_min_@uid'>- de 10km</label><br>\n"+
|
||||||
"\t\t   <input type='radio' name='loc_min_@uid' data-name='loc' id='locB_min_@uid' checked='@loc_B'><label for='locB_min_@uid'>de 10km à 30km</label><br>\n"+
|
"\t\t   <input type='radio' name='loc_min_@uid' data-name='loc' id='locB_min_@uid' checked='@locb'><label for='locB_min_@uid'>de 10km à 30km</label><br>\n"+
|
||||||
"\t\t   <input type='radio' name='loc_min_@uid' data-name='loc' id='locC_min_@uid' checked='@loc_C'><label for='locC_min_@uid'>de 30km à 100km</label><br>\n"+
|
"\t\t   <input type='radio' name='loc_min_@uid' data-name='loc' id='locC_min_@uid' checked='@locc'><label for='locC_min_@uid'>de 30km à 100km</label><br>\n"+
|
||||||
"\t\t   <input type='radio' name='loc_min_@uid' data-name='loc' id='locD_min_@uid' checked='@loc_D'><label for='locD_min_@uid'>+ de 100km</label>\n"+
|
"\t\t   <input type='radio' name='loc_min_@uid' data-name='loc' id='locD_min_@uid' checked='@locd'><label for='locD_min_@uid'>+ de 100km</label>\n"+
|
||||||
"\t</h5>\n"+
|
"\t</h5>\n"+
|
||||||
"</article>");
|
"</article>");
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
function inputPhoneContact(a,c){this.container=a;this.add_button=c}inputPhoneContact.prototype={container:this.container,add_button:this.add_button};
|
function inputPhoneContact(a,b){this.container=a;this.add_button=b}inputPhoneContact.prototype={container:this.container,add_button:this.add_button,handler:null};
|
||||||
inputPhoneContact.prototype.fieldsToStorage=function(){console.log("CONTACTS: FIELDS TO STORAGE");for(var a=$$("article.contact-panel .new-contact"),c=0;c<a.length;c++){var d=a[c].parentNode.children.indexOf(a[c]),b=(new FormDeflater(a[c],["input"],["data-name"])).deflate(),e=0<b.number.value.length;if(e=e&&0<b.username.value.length+b.firstname.value.length+b.lastname.value.length)b={number:b.number.value,username:b.username.value,firstname:b.firstname.value,lastname:b.lastname.value},lsi.set("contacts",
|
inputPhoneContact.prototype.fieldsToStorage=function(){console.log("CONTACTS: FIELDS TO STORAGE");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,{uid:c,number:d.number.value,username:d.username.value,firstname:d.firstname.value,lastname:d.lastname.value})}this.storageToFields()};
|
||||||
"form"+d,b),e=lsi.get("mini-fiches","form"+d),!1===e?lsi.set("mini-fiches","form"+d,{uid:d,firstname:b.firstname,lastname:b.lastname,username:b.username,age:"",sexe:[!0,!1],job:".",location:[!0,!1,!1,!1]}):(e.firstname=b.firstname,e.lastname=b.lastname,e.username=b.username,lsi.set("mini-fiches","form"+d,e))}this.storageToFields()};
|
inputPhoneContact.prototype.add=function(a){console.log("CONTACTS: ADD");a.number=null!=a.number?a.number:"";a.username=null!=a.username?a.username:"";a.firstname=null!=a.firstname?a.firstname:"";a.lastname=null!=a.lastname?a.lastname:"";this.container.innerHTML+=contactBuilder.build(a);a=$$('article.contact-panel .new-contact input[type="submit"]');for(var b=this,c=0;c<a.length;c++)a[c].removeEventListener("click",function(a){b.handler()},!1),a[c].addEventListener("click",function(a){b.handler()},
|
||||||
inputPhoneContact.prototype.add=function(a){console.log("CONTACTS: ADD");a.number=null!=a.number?a.number:"";a.username=null!=a.username?a.username:"";a.firstname=null!=a.firstname?a.firstname:"";a.lastname=null!=a.lastname?a.lastname:"";this.container.innerHTML+=contactBuilder.build(a);a=$$('article.contact-panel .new-contact input[type="submit"]');for(var c=this,d=0;d<a.length;d++)a[d].removeEventListener("click",function(a){c.fieldsToStorage()},!1),a[d].addEventListener("click",function(a){c.fieldsToStorage()},
|
!1)};inputPhoneContact.prototype.storageToFields=function(){console.log("CONTACTS: STORAGE TO FIELDS");var a=lsi.keys("contacts");this.container.innerHTML="";for(var b=0;b<a.length;b++){var c=lsi.get("contacts",a[b]);this.add(c)}this.add({number:"",firstname:"",lastname:"",username:""})};inputPhoneContact.prototype.attach=function(a){console.log("CONTACTS: ATTACH");lsi.createDataset("contacts");this.handler=a;var b=this;this.add_button.addEventListener("click",function(){b.handler()},!1);this.storageToFields()};
|
||||||
!1)};inputPhoneContact.prototype.storageToFields=function(){console.log("CONTACTS: STORAGE TO FIELDS");var a=lsi.keys("contacts");this.container.innerHTML="";for(var c=0;c<a.length;c++){var d=lsi.get("contacts",a[c]);this.add(d)}this.add({number:"",firstname:"",lastname:"",username:""})};inputPhoneContact.prototype.attach=function(){console.log("CONTACTS: ATTACH");lsi.createDataset("contacts");var a=this;this.add_button.addEventListener("click",function(c){a.fieldsToStorage()},!1);this.storageToFields()};
|
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,8 @@ function inputPhoneContact(container, add_button){
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
inputPhoneContact.prototype = {
|
inputPhoneContact.prototype = {
|
||||||
container: this.container, // Conteneur des formulaires de contact
|
container: this.container, // Conteneur des formulaires de contact
|
||||||
add_button: this.add_button // Bouton d'ajout d'un formulaire
|
add_button: this.add_button, // Bouton d'ajout d'un formulaire
|
||||||
|
handler: null // Fonction pour l'enregistrement et la synchronisation des données
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -41,6 +42,7 @@ inputPhoneContact.prototype.fieldsToStorage = function(){
|
||||||
|
|
||||||
// {5} On récupère et met en forme les valeurs du deflater //
|
// {5} On récupère et met en forme les valeurs du deflater //
|
||||||
var obj = {
|
var obj = {
|
||||||
|
uid: indexInParent,
|
||||||
number: deflated.number.value,
|
number: deflated.number.value,
|
||||||
username: deflated.username.value,
|
username: deflated.username.value,
|
||||||
firstname: deflated.firstname.value,
|
firstname: deflated.firstname.value,
|
||||||
|
|
@ -50,35 +52,9 @@ inputPhoneContact.prototype.fieldsToStorage = function(){
|
||||||
// {6} 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 enregistre les données des MINI fiches associées //
|
|
||||||
var associatedMiniFiche = lsi.get('mini-fiches', 'form'+indexInParent);
|
|
||||||
|
|
||||||
// Si n'existe pas, on la crée
|
|
||||||
if( associatedMiniFiche === false ){
|
|
||||||
lsi.set('mini-fiches', 'form'+indexInParent, {
|
|
||||||
uid: indexInParent,
|
|
||||||
firstname: obj.firstname,
|
|
||||||
lastname: obj.lastname,
|
|
||||||
username: obj.username,
|
|
||||||
age: '',
|
|
||||||
sexe: [true, false],
|
|
||||||
job: '.',
|
|
||||||
location: [true, false, false, false]
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sinon, on met à jour
|
|
||||||
}else{
|
|
||||||
|
|
||||||
associatedMiniFiche.firstname = obj.firstname;
|
|
||||||
associatedMiniFiche.lastname = obj.lastname;
|
|
||||||
associatedMiniFiche.username = obj.username;
|
|
||||||
|
|
||||||
lsi.set('mini-fiches', 'form'+indexInParent, associatedMiniFiche);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
// {7} On met à jour le rendu des contacts//
|
||||||
|
|
||||||
// {8} On met à jour le rendu des contacts//
|
|
||||||
this.storageToFields();
|
this.storageToFields();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -116,8 +92,8 @@ inputPhoneContact.prototype.add = function(objectData){
|
||||||
// On met à jour les listener (remove, puis add)
|
// On met à jour les listener (remove, puis add)
|
||||||
var ptr = this;
|
var ptr = this;
|
||||||
for( var i = 0 ; i < contactSubmits.length ; i++ ){
|
for( var i = 0 ; i < contactSubmits.length ; i++ ){
|
||||||
contactSubmits[i].removeEventListener('click', function(e){ ptr.fieldsToStorage(); }, false);
|
contactSubmits[i].removeEventListener('click', function(e){ ptr.handler(); }, false);
|
||||||
contactSubmits[i].addEventListener('click', function(e){ ptr.fieldsToStorage(); }, false);
|
contactSubmits[i].addEventListener('click', function(e){ ptr.handler(); }, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
@ -154,24 +130,24 @@ inputPhoneContact.prototype.storageToFields = function(){
|
||||||
// On ajoute un champ de plus à remplir
|
// On ajoute un champ de plus à remplir
|
||||||
this.add({number:'', firstname:'', lastname:'', username:''});
|
this.add({number:'', firstname:'', lastname:'', username:''});
|
||||||
|
|
||||||
// {4} On met à jour les MINI fiches //
|
|
||||||
// miniFiche.fieldsToStorage();
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* [5] Point d'amorçage de la gestion des contacts
|
/* [5] Point d'amorçage de la gestion des contacts
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
inputPhoneContact.prototype.attach = function(){
|
inputPhoneContact.prototype.attach = function(handler){
|
||||||
console.log('CONTACTS: ATTACH');
|
console.log('CONTACTS: ATTACH');
|
||||||
|
|
||||||
/* (1) On initialise le jeu de données */
|
/* (1) On initialise le jeu de données */
|
||||||
lsi.createDataset('contacts');
|
lsi.createDataset('contacts');
|
||||||
|
|
||||||
|
// On enregistre le handler
|
||||||
|
this.handler = handler;
|
||||||
|
|
||||||
/* (2) On attache l'évènement sur le bouton d'ajout de contact */
|
/* (2) On attache l'évènement sur le bouton d'ajout de contact */
|
||||||
var ptr = this;
|
var ptr = this;
|
||||||
this.add_button.addEventListener('click', function(e){ ptr.fieldsToStorage(); }, false);
|
this.add_button.addEventListener('click', function(){ ptr.handler(); }, false);
|
||||||
|
|
||||||
/* (3) On charge les contacts depuis la mémoire ('localStorage') */
|
/* (3) On charge les contacts depuis la mémoire ('localStorage') */
|
||||||
this.storageToFields();
|
this.storageToFields();
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
function inputPhoneMini(a){this.container=a}inputPhoneMini.prototype={container:this.container};
|
||||||
|
inputPhoneMini.prototype.fieldsToStorage=function(){console.log("MINI FICHE: FIELDS TO STORAGE");for(var a=$$("article.mini-relation-panel .mini-fiche-relation"),c=0;c<a.length;c++){var b=(new FormDeflater(a[c],["input","select"],["data-name"])).deflate(),d=lsi.get("mini-fiches","form"+b.uid.value);console.log("deflated");console.log(b);!1===d&&(d.username="inconnu",d.firstname="inconnu",d.lastname="inconnu");b={uid:b.uid.value,firstname:d.firstname,lastname:d.lastname,username:d.username,sexe:[b.sexe[0].status,
|
||||||
|
b.sexe[1].status],age:b.age.value,job:b.job.value,loc:[b.loc[0].status,b.loc[1].status,b.loc[2].status,b.loc[3].status]};lsi.set("mini-fiches","form"+b.uid,b)}this.storageToFields()};
|
||||||
|
inputPhoneMini.prototype.add=function(a){console.log("MINI FICHE: ADD");if(null==a.uid)return!1;a.firstname=null!=a.firstname?a.firstname:"";a.lastname=null!=a.lastname?a.lastname:"";a.username=null!=a.username?a.username:"";a.age=null!=a.age?a.age:"";a.sexe=null!=a.sexe?a.sexe:[!0,!1];a.job=null!=a.job?a.job:".";a.loc=null!=a.loc?a.loc:[!0,!1,!1,!1];console.log(a);this.container.innerHTML+=miniFicheBuilder.build({firstname:a.firstname,lastname:a.lastname,username:a.username,uid:a.uid,age:a.age,sexea:a.sexe[0]?
|
||||||
|
"true":"false",sexeb:a.sexe[1]?"true":"false",job:a.job,loca:a.loc[0]?"true":"false",locb:a.loc[1]?"true":"false",locc:a.loc[2]?"true":"false",locd:a.loc[3]?"true":"false"})};
|
||||||
|
inputPhoneMini.prototype.storageToFields=function(){console.log("MINI FICHE: STORAGE TO FIELDS");var a=lsi.keys("mini-fiches");this.container.innerHTML="";for(var c=0;c<a.length;c++){var b=lsi.get("mini-fiches",a[c]);this.add({uid:b.uid,firstname:b.firstname,lastname:b.lastname,username:b.username,age:b.age,sexe:b.sexe,job:b.job,loc:b.loc})}};
|
||||||
|
inputPhoneMini.prototype.sync=function(){for(var a=lsi.keys("contacts"),c=0;c<a.length;c++){var b=lsi.get("contacts",a[c]),d=lsi.get("mini-fiches",a[c]);null==d?lsi.set("mini-fiches",a[c],{uid:b.uid,firstname:b.firstname,lastname:b.lastname,username:b.username,sexe:[!0,!1],age:"",job:".",loc:[!0,!1,!1,!1]}):(d.firstname=b.firstname,d.lastname=b.lastname,d.username=b.username,lsi.set("mini-fiches",a[c],d))}};
|
||||||
|
inputPhoneMini.prototype.attach=function(){console.log("MINI FICHE: ATTACH");lsi.createDataset("mini-fiches");this.storageToFields()};
|
||||||
|
|
@ -0,0 +1,245 @@
|
||||||
|
/* [0] Constructeur -> définit le conteneur et le bouton d'ajout
|
||||||
|
=========================================================*/
|
||||||
|
function inputPhoneMini(container){
|
||||||
|
this.container = container;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* [1] Attributs
|
||||||
|
=========================================================*/
|
||||||
|
inputPhoneMini.prototype = {
|
||||||
|
container: this.container // Conteneur des mini fiches relation
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/* [2] Gestion de l'enregistrement des formulaires mini fiches relation
|
||||||
|
=========================================================*/
|
||||||
|
inputPhoneMini.prototype.fieldsToStorage = function(){
|
||||||
|
console.log('MINI FICHE: FIELDS TO STORAGE');
|
||||||
|
|
||||||
|
// {1} Pour chaque formulaire de contact présent //
|
||||||
|
var existingMiniFiches = $$('article.mini-relation-panel .mini-fiche-relation');
|
||||||
|
for( var i = 0 ; i < existingMiniFiches.length ; i++ ){
|
||||||
|
|
||||||
|
// {2} On initialise notre deflater pour récupérer les valeurs //
|
||||||
|
var deflater = new FormDeflater(existingMiniFiches[i], ['input', 'select'], ['data-name']);
|
||||||
|
|
||||||
|
// {3} On enregistre ce contact si le numéro n'est pas vide et soit pseudo/prénom/nom //
|
||||||
|
var deflated = deflater.deflate();
|
||||||
|
|
||||||
|
// TODO: Condition pour que le formulaire soit valide
|
||||||
|
var validForm = true;
|
||||||
|
|
||||||
|
// Si le formulaire n'est pas valide, on ne l'enregistre pas
|
||||||
|
if( !validForm ) continue;
|
||||||
|
|
||||||
|
// {4} On récupère les données du LSI si elles existent //
|
||||||
|
var existingData = lsi.get('mini-fiches', 'form'+deflated.uid.value);
|
||||||
|
console.log('deflated');
|
||||||
|
console.log(deflated);
|
||||||
|
// Si n'existe pas, on initialise
|
||||||
|
if( existingData === false ){
|
||||||
|
existingData.username = 'inconnu';
|
||||||
|
existingData.firstname = 'inconnu';
|
||||||
|
existingData.lastname = 'inconnu';
|
||||||
|
}
|
||||||
|
|
||||||
|
// {5} On récupère et met en forme les valeurs du deflater //
|
||||||
|
var obj = {
|
||||||
|
uid: deflated.uid.value,
|
||||||
|
firstname: existingData.firstname,
|
||||||
|
lastname: existingData.lastname,
|
||||||
|
username: existingData.username,
|
||||||
|
sexe: [
|
||||||
|
deflated.sexe[0].status, // VRAI SI HOMME
|
||||||
|
deflated.sexe[1].status // VRAI SI FEMME
|
||||||
|
],
|
||||||
|
age: deflated.age.value,
|
||||||
|
job: deflated.job.value,
|
||||||
|
loc: [
|
||||||
|
deflated.loc[0].status, // VRAI si choix 1
|
||||||
|
deflated.loc[1].status, // VRAI si choix 2
|
||||||
|
deflated.loc[2].status, // VRAI si choix 3
|
||||||
|
deflated.loc[3].status // VRAI si choix 4
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// {6} On enregistre les données dans le 'localStorage' //
|
||||||
|
lsi.set('mini-fiches', 'form'+obj.uid, obj);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// {7} On met à jour le rendu //
|
||||||
|
this.storageToFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [3] Gestion de l'ajout physique d'un nouveau contact
|
||||||
|
=========================================================*/
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
* @objectData<Object> Objet contenant les informations nécessaires à l'affichage
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
inputPhoneMini.prototype.add = function(objectData){
|
||||||
|
console.log('MINI FICHE: ADD');
|
||||||
|
|
||||||
|
// Si pas d'UID, on retourne une erreur
|
||||||
|
if( objectData.uid == null )
|
||||||
|
return false;
|
||||||
|
|
||||||
|
/* (0) Gestion du formattage des valeur */
|
||||||
|
objectData.firstname = (objectData.firstname != null) ? objectData.firstname : '';
|
||||||
|
objectData.lastname = (objectData.lastname != null) ? objectData.lastname : '';
|
||||||
|
objectData.username = (objectData.username != null) ? objectData.username : '';
|
||||||
|
objectData.age = (objectData.age != null) ? objectData.age : '';
|
||||||
|
objectData.sexe = (objectData.sexe != null) ? objectData.sexe : [true, false];
|
||||||
|
objectData.job = (objectData.job != null) ? objectData.job : '.';
|
||||||
|
objectData.loc = (objectData.loc != null) ? objectData.loc : [true, false, false, false];
|
||||||
|
|
||||||
|
|
||||||
|
console.log(objectData);
|
||||||
|
|
||||||
|
// {1} Création physique //
|
||||||
|
this.container.innerHTML += miniFicheBuilder.build({
|
||||||
|
firstname: objectData.firstname,
|
||||||
|
lastname: objectData.lastname,
|
||||||
|
username: objectData.username,
|
||||||
|
uid: objectData.uid,
|
||||||
|
age: objectData.age,
|
||||||
|
sexea: objectData.sexe[0] ? 'true' : 'false',
|
||||||
|
sexeb: objectData.sexe[1] ? 'true' : 'false',
|
||||||
|
job: objectData.job,
|
||||||
|
loca: objectData.loc[0] ? 'true' : 'false',
|
||||||
|
locb: objectData.loc[1] ? 'true' : 'false',
|
||||||
|
locc: objectData.loc[2] ? 'true' : 'false',
|
||||||
|
locd: objectData.loc[3] ? 'true' : 'false'
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [4] Gestion de l'affichage depuis le 'localStorage'
|
||||||
|
=========================================================*/
|
||||||
|
inputPhoneMini.prototype.storageToFields = function(){
|
||||||
|
console.log('MINI FICHE: STORAGE TO FIELDS');
|
||||||
|
|
||||||
|
// {1} Pour chaque contact du 'localStorage' //
|
||||||
|
var existingMiniFiches = lsi.keys('mini-fiches');
|
||||||
|
|
||||||
|
// On réinitialise le HTML
|
||||||
|
this.container.innerHTML = '';
|
||||||
|
|
||||||
|
for( var i = 0 ; i < existingMiniFiches.length ; i++ ){
|
||||||
|
// {2} On récupère les informations du contact //
|
||||||
|
var ficheData = lsi.get('mini-fiches', existingMiniFiches[i]);
|
||||||
|
|
||||||
|
// {3} On ajoute un contact à la liste //
|
||||||
|
this.add({
|
||||||
|
uid: ficheData.uid,
|
||||||
|
firstname: ficheData.firstname,
|
||||||
|
lastname: ficheData.lastname,
|
||||||
|
username: ficheData.username,
|
||||||
|
age: ficheData.age,
|
||||||
|
sexe: ficheData.sexe,
|
||||||
|
job: ficheData.job,
|
||||||
|
loc: ficheData.loc
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [5] Synchronisation des CONTACT vers les MINI fiches
|
||||||
|
=========================================================*/
|
||||||
|
inputPhoneMini.prototype.sync = function(){
|
||||||
|
/* (1) On récupère les clés de tous les CONTACTS */
|
||||||
|
var contactUIDs = lsi.keys('contacts');
|
||||||
|
|
||||||
|
/* (2) Pour chaque CONTACT, on met à jour/crée la MINI fiche associée */
|
||||||
|
for( var i = 0 ; i < contactUIDs.length ; i++ ){
|
||||||
|
|
||||||
|
/* (3) On récupère les informations du CONTACT */
|
||||||
|
var contactData = lsi.get('contacts', contactUIDs[i]);
|
||||||
|
|
||||||
|
/* (4) On récupère les informations de la MINI (si elle existe) */
|
||||||
|
var miniData = lsi.get('mini-fiches', contactUIDs[i]);
|
||||||
|
|
||||||
|
|
||||||
|
/* (5) Cas 1 : la MINI fiche n'exise pas */
|
||||||
|
if( miniData == null ){
|
||||||
|
|
||||||
|
// On crée la MINI fiche
|
||||||
|
lsi.set('mini-fiches', contactUIDs[i], {
|
||||||
|
uid: contactData.uid,
|
||||||
|
firstname: contactData.firstname,
|
||||||
|
lastname: contactData.lastname,
|
||||||
|
username: contactData.username,
|
||||||
|
sexe: [true, false], // valeur par défaut
|
||||||
|
age: '', // valeur par défaut
|
||||||
|
job: '.', // valeur par défaut
|
||||||
|
loc: [true, false, false, false] // valeur par défaut
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* (6) Cas 2 : la MINI fiche existe déja */
|
||||||
|
}else{
|
||||||
|
|
||||||
|
// On modifie la MINI fiche
|
||||||
|
miniData.firstname = contactData.firstname;
|
||||||
|
miniData.lastname = contactData.lastname;
|
||||||
|
miniData.username = contactData.username;
|
||||||
|
|
||||||
|
// On met à jour la MINI fiche
|
||||||
|
lsi.set('mini-fiches', contactUIDs[i], miniData);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [6] Point d'amorçage de la gestion des contacts
|
||||||
|
=========================================================*/
|
||||||
|
inputPhoneMini.prototype.attach = function(){
|
||||||
|
console.log('MINI FICHE: ATTACH');
|
||||||
|
|
||||||
|
/* (1) On initialise le jeu de données */
|
||||||
|
lsi.createDataset('mini-fiches');
|
||||||
|
|
||||||
|
/* (2) On charge les mini fiches depuis la mémoire ('localStorage') */
|
||||||
|
this.storageToFields();
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
function inputPhoneSubject(a,b,c,d,e){this.number=a;this.username=b;this.firstname=c;this.lastname=d;this.store_button=e}inputPhoneSubject.prototype={store_button:this.store_button,number:this.number,username:this.username,firstname:this.firstname,lastname:this.lastname};
|
||||||
|
inputPhoneSubject.prototype.fieldsToStorage=function(){console.log("SUBJECT: FIELDS TO STORAGE");var a=0<this.number.value.length,a=a&&0<this.username.value.length+this.firstname.value.length+this.lastname.value.length;if(!a)return!1;lsi.set("subject","form",{number:this.number.value,username:this.username.value,firstname:this.firstname.value,lastname:this.lastname.value})};
|
||||||
|
inputPhoneSubject.prototype.storageToFields=function(){console.log("SUBJECT: STORAGE TO FIELDS");var a=lsi.get("subject","form");null!=a&&(this.number.value=a.number,this.username.value=a.username,this.firstname.value=a.firstname,this.lastname.value=a.lastname)};inputPhoneSubject.prototype.attach=function(){console.log("SUBJECT: ATTACH");lsi.createDataset("subject");var a=this;this.store_button.addEventListener("click",function(b){a.fieldsToStorage()},!1);this.storageToFields()};
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
/* [0] Constructeur -> définit le conteneur et le bouton d'ajout
|
||||||
|
=========================================================*/
|
||||||
|
function inputPhoneSubject(iNumber, iUsername, iFirstname, iLastname, store_button){
|
||||||
|
this.number = iNumber;
|
||||||
|
this.username = iUsername;
|
||||||
|
this.firstname = iFirstname;
|
||||||
|
this.lastname = iLastname;
|
||||||
|
|
||||||
|
this.store_button = store_button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* [1] Attributs
|
||||||
|
=========================================================*/
|
||||||
|
inputPhoneSubject.prototype = {
|
||||||
|
store_button: this.store_button, // Bouton d'ajout d'un formulaire
|
||||||
|
number: this.number,
|
||||||
|
username: this.username,
|
||||||
|
firstname: this.firstname,
|
||||||
|
lastname: this.lastname
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/* [2] Gestion de l'enregistrement des formulaires de contact
|
||||||
|
=========================================================*/
|
||||||
|
inputPhoneSubject.prototype.fieldsToStorage = function(){
|
||||||
|
console.log('SUBJECT: FIELDS TO STORAGE');
|
||||||
|
|
||||||
|
// {1} Vérification des champs //
|
||||||
|
// Le numéro n'est pas vide
|
||||||
|
var validForm = this.number.value.length > 0;
|
||||||
|
// ET le pseudo et/ou le prénom et/ou le nom n'est pas vide
|
||||||
|
validForm = validForm && this.username.value.length+this.firstname.value.length+this.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: this.number.value,
|
||||||
|
username: this.username.value,
|
||||||
|
firstname: this.firstname.value,
|
||||||
|
lastname: this.lastname.value
|
||||||
|
};
|
||||||
|
|
||||||
|
// {3} On enregistre les données dans le 'localStorage' //
|
||||||
|
lsi.set('subject', 'form', obj);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [3] Gestion de l'affichage depuis le 'localStorage'
|
||||||
|
=========================================================*/
|
||||||
|
inputPhoneSubject.prototype.storageToFields = function(){
|
||||||
|
console.log('SUBJECT: STORAGE TO FIELDS');
|
||||||
|
|
||||||
|
// {1} On récupère les informations du sujet //
|
||||||
|
var subjectData = lsi.get('subject', 'form');
|
||||||
|
|
||||||
|
if( subjectData == null ) return;
|
||||||
|
|
||||||
|
// {2} On restore les valeurs //
|
||||||
|
this.number.value = subjectData.number;
|
||||||
|
this.username.value = subjectData.username;
|
||||||
|
this.firstname.value = subjectData.firstname;
|
||||||
|
this.lastname.value = subjectData.lastname;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [4] Point d'amorçage de la gestion des contacts
|
||||||
|
=========================================================*/
|
||||||
|
inputPhoneSubject.prototype.attach = function(){
|
||||||
|
console.log('SUBJECT: ATTACH');
|
||||||
|
|
||||||
|
/* (1) On initialise le jeu de données */
|
||||||
|
lsi.createDataset('subject');
|
||||||
|
|
||||||
|
/* (2) On attache l'évènement sur le bouton d'ajout de contact */
|
||||||
|
var ptr = this;
|
||||||
|
this.store_button.addEventListener('click', function(e){ ptr.fieldsToStorage(); }, false);
|
||||||
|
|
||||||
|
/* (3) On charge le sujet depuis la mémoire ('localStorage') */
|
||||||
|
this.storageToFields();
|
||||||
|
};
|
||||||
|
|
@ -75,6 +75,30 @@
|
||||||
|
|
||||||
<!-- GESTION DES MINI-FICHES RELATIONS -->
|
<!-- GESTION DES MINI-FICHES RELATIONS -->
|
||||||
<h3 data-n='3' class='color4'>Remplir les fiches relations rapides pour tous les contacts</h3>
|
<h3 data-n='3' class='color4'>Remplir les fiches relations rapides pour tous les contacts</h3>
|
||||||
|
<div class='arrow-container line'>
|
||||||
|
<span>«</span>
|
||||||
|
<span>1</span>
|
||||||
|
<span>2</span>
|
||||||
|
<span>3</span>
|
||||||
|
<span>4</span>
|
||||||
|
<span>5</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>7</span>
|
||||||
|
<span>8</span>
|
||||||
|
<span>9</span>
|
||||||
|
<span>10</span>
|
||||||
|
<span>11</span>
|
||||||
|
<span>12</span>
|
||||||
|
<span>13</span>
|
||||||
|
<span>14</span>
|
||||||
|
<span>15</span>
|
||||||
|
<span>16</span>
|
||||||
|
<span>17</span>
|
||||||
|
<span>18</span>
|
||||||
|
<span>19</span>
|
||||||
|
<span>20</span>
|
||||||
|
<span>»</span>
|
||||||
|
</div>
|
||||||
<span data-space></span>
|
<span data-space></span>
|
||||||
<article class='mini-relation-panel'>
|
<article class='mini-relation-panel'>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
function updateListener(b,c,a){b.removeEventListener(c,a);b.addEventListener(c,a)}
|
function updateListener(b,a,c){b.removeEventListener(a,c);b.addEventListener(a,c)}var importCallLog=$('input#call_log-import[type="file"]'),ficheContainer=$("article.relation-panel"),subjectManager,contactManager,miniManager,ficheManager;function dynamicUpdate(){console.log("dynamic update");miniManager.fieldsToStorage();contactManager.fieldsToStorage();miniManager.sync();miniManager.storageToFields();contactManager.storageToFields()}
|
||||||
var ic=new inputChecker,FormDeflaterP={tags:["input"],attr:["data-name"]},importCallLog=$('input#call_log-import[type="file"]'),addContact=$("h4.add-contact"),contactContainer=$("article.contact-panel"),miniFicheContainer=$("article.mini-relation-panel"),ficheContainer=$("article.relation-panel"),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"]'),
|
include("/js/includes/input-phone-subject.js",function(){include("/js/includes/input-phone-contact.js",function(){include("/js/includes/input-phone-mini.js",function(){include("/js/includes/input-phone-fiche.js",function(){subjectManager=new inputPhoneSubject($('article.subject-panel [data-name="number"]'),$('article.subject-panel [data-name="username"]'),$('article.subject-panel [data-name="firstname"]'),$('article.subject-panel [data-name="lastname"]'),$('article.subject-panel [data-name="submit"]'));
|
||||||
store:$('article.subject-panel [data-name="submit"]')};lsi.createDataset("subject");function storeSubject(){console.log("storing subject");var b=0<subjectInput.number.value.length,b=b&&0<subjectInput.username.value.length+subjectInput.firstname.value.length+subjectInput.lastname.value.length;if(!b)return!1;lsi.set("subject","form",{number:subjectInput.number.value,username:subjectInput.username.value,firstname:subjectInput.firstname.value,lastname:subjectInput.lastname.value})}
|
subjectManager.attach();contactManager=new inputPhoneContact($("article.contact-panel"),$("h4.add-contact"));contactManager.attach(dynamicUpdate);miniManager=new inputPhoneMini($("article.mini-relation-panel"));miniManager.attach()})})})});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 b=lsi.get("subject","form");null!=b&&(subjectInput.number.value=b.number,subjectInput.username.value=b.username,subjectInput.firstname.value=b.firstname,subjectInput.lastname.value=b.lastname)}restoreSubject();subjectInput.store.addEventListener("click",storeSubject,!1);var contactManager;include("/js/includes/input-phone-contact.js",function(){contactManager=new inputPhoneContact(contactContainer,addContact);contactManager.attach()});lsi.createDataset("mini-fiches");
|
|
||||||
function storeMiniFiches(){console.log("STORING ALL MINI-FICHES");for(var b=$$("article.mini-relation-panel .mini-fiche-relation "),c=0;c<b.length;c++){var a=(new FormDeflater(b[c],["input","select"],["data-name"])).deflate(),d=lsi.get("mini-fiches","form"+a.uid.value);console.log("deflated");console.log(a);!1===d&&(d.username="inconnu",d.firstname="inconnu",d.lastname="inconnu");a={uid:a.uid.value,firstname:d.firstname,lastname:d.lastname,username:d.username,sexe:[a.sexe[0].status,a.sexe[1].status],
|
|
||||||
age:a.age.value,job:a.job.value,location:[a.loc[0].status,a.loc[1].status,a.loc[2].status,a.loc[3].status]};lsi.set("mini-fiches","form"+a.uid,a)}restoreMiniFiches()}function addNewMiniFiche(b,c,a,d,h,f,g,e){miniFicheContainer.innerHTML+=miniFicheBuilder.build({firstname:b,lastname:c,username:a,uid:d,age:"",sexe_A:f[0]?"true":"false",sexe_B:f[1]?"true":"false",job:g,loc_A:e[0]?"true":"false",loc_B:e[1]?"true":"false",loc_C:e[2]?"true":"false",loc_D:e[3]?"true":"false"})}
|
|
||||||
function restoreMiniFiches(){var b=lsi.keys("mini-fiches");miniFicheContainer.innerHTML="";for(var c=0;c<b.length;c++){var a=lsi.get("mini-fiches",b[c]);addNewMiniFiche(a.firstname,a.lastname,a.username,a.uid,a.age,a.sexe,a.job,a.location)}}restoreMiniFiches();importCallLog.addEventListener("change",function(b){api.send({path:"upload/call_log",file:importCallLog.files[0]},function(b){console.log(b);0==b.ModuleError&&importCallLog.addClass("active")})},!1);
|
|
||||||
|
|
|
||||||
454
view/js/input.js
454
view/js/input.js
|
|
@ -29,49 +29,44 @@ function updateListener(element, eventType, handler){
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* [1] Initialisation des utilitaires
|
/* [1] Initialisation des utilitaires et variables
|
||||||
=========================================================*/
|
|
||||||
/* (1) Instanciation de inputChecker */
|
|
||||||
var ic = new inputChecker();
|
|
||||||
|
|
||||||
/* (2) Paramètres de FormDeflater */
|
|
||||||
var FormDeflaterP = { tags: ['input'], attr: ['data-name'] };
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* [2] Indexation des inputs + Containers
|
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* (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) Conteneur des fiches relation */
|
||||||
var addContact = $('h4.add-contact');
|
|
||||||
/* (3) Conteneur des formulaires de contact */
|
|
||||||
var contactContainer = $('article.contact-panel');
|
|
||||||
|
|
||||||
/* (4) Conteneur des MINI fiches relation */
|
|
||||||
var miniFicheContainer = $('article.mini-relation-panel');
|
|
||||||
|
|
||||||
/* (5) Conteneur des fiches relation */
|
|
||||||
var ficheContainer = $('article.relation-panel');
|
var ficheContainer = $('article.relation-panel');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* (3) Initialisation des managers */
|
||||||
|
var subjectManager;
|
||||||
|
var contactManager;
|
||||||
|
var miniManager;
|
||||||
|
var ficheManager;
|
||||||
|
|
||||||
|
function dynamicUpdate(){
|
||||||
|
console.log('dynamic update');
|
||||||
|
/* (1) On enregistre les MINI fiches relation */
|
||||||
|
miniManager.fieldsToStorage();
|
||||||
|
|
||||||
|
/* (2) On enregister les FICHES relation */
|
||||||
|
// ficheManager.fieldsToStorage();
|
||||||
|
|
||||||
|
/* (3) On enregistre les CONTACTS */
|
||||||
|
contactManager.fieldsToStorage();
|
||||||
|
|
||||||
|
/* (4) On synchronise les MINI avec les CONTACTS */
|
||||||
|
miniManager.sync();
|
||||||
|
|
||||||
|
/* (5) On synchronise les FICHE avec les CONTACTS */
|
||||||
|
// ficheManager.sync();
|
||||||
|
|
||||||
|
/* (6) On affiche le tout */
|
||||||
|
miniManager.storageToFields();
|
||||||
|
// ficheManager.storageToFields();
|
||||||
|
contactManager.storageToFields();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -88,59 +83,59 @@ var ficheContainer = $('article.relation-panel');
|
||||||
/* [3] Gestion des formulaires du sujet
|
/* [3] Gestion des formulaires du sujet
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* (0) Les input du formulaire du sujet */
|
/* (0) Les input du formulaire du sujet */
|
||||||
var subjectInput = {
|
// var subjectInput = {
|
||||||
number: $('article.subject-panel [data-name="number"]'),
|
// number: $('article.subject-panel [data-name="number"]'),
|
||||||
username: $('article.subject-panel [data-name="username"]'),
|
// username: $('article.subject-panel [data-name="username"]'),
|
||||||
firstname: $('article.subject-panel [data-name="firstname"]'),
|
// firstname: $('article.subject-panel [data-name="firstname"]'),
|
||||||
lastname: $('article.subject-panel [data-name="lastname"]'),
|
// lastname: $('article.subject-panel [data-name="lastname"]'),
|
||||||
|
//
|
||||||
store: $('article.subject-panel [data-name="submit"]')
|
// store: $('article.subject-panel [data-name="submit"]')
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
/* (1) Gestion de l'enregistrement du sujet en local ('localStorage') */
|
// /* (1) Gestion de l'enregistrement du sujet en local ('localStorage') */
|
||||||
lsi.createDataset('subject');
|
// lsi.createDataset('subject');
|
||||||
function storeSubject(){
|
// function storeSubject(){
|
||||||
console.log('storing subject');
|
// console.log('storing subject');
|
||||||
|
//
|
||||||
// {1} Vérification des champs //
|
// // {1} Vérification des champs //
|
||||||
// Le numéro n'est pas vide
|
// // Le numéro n'est pas vide
|
||||||
var validForm = subjectInput.number.value.length > 0;
|
// var validForm = subjectInput.number.value.length > 0;
|
||||||
// ET le pseudo et/ou le prénom et/ou le nom n'est pas vide
|
// // 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;
|
// 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
|
// // Si le formulaire n'est pas valide, on ne l'enregistre pas
|
||||||
if( !validForm ) return false;
|
// if( !validForm ) return false;
|
||||||
|
//
|
||||||
// {2} On récupère et met en forme les valeurs du deflater //
|
// // {2} On récupère et met en forme les valeurs du deflater //
|
||||||
var obj = {
|
// var obj = {
|
||||||
number: subjectInput.number.value,
|
// number: subjectInput.number.value,
|
||||||
username: subjectInput.username.value,
|
// username: subjectInput.username.value,
|
||||||
firstname: subjectInput.firstname.value,
|
// firstname: subjectInput.firstname.value,
|
||||||
lastname: subjectInput.lastname.value
|
// lastname: subjectInput.lastname.value
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
// {3} On enregistre les données dans le 'localStorage' //
|
// // {3} On enregistre les données dans le 'localStorage' //
|
||||||
lsi.set('subject', 'form', obj);
|
// lsi.set('subject', 'form', obj);
|
||||||
|
//
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
/* (2) Gestion de l'affichage (et mise à jour) du sujet (depuis 'localStorage') */
|
// /* (2) Gestion de l'affichage (et mise à jour) du sujet (depuis 'localStorage') */
|
||||||
function restoreSubject(){
|
// function restoreSubject(){
|
||||||
// {1} On récupère les informations du sujet //
|
// // {1} On récupère les informations du sujet //
|
||||||
var subjectData = lsi.get('subject', 'form');
|
// var subjectData = lsi.get('subject', 'form');
|
||||||
|
//
|
||||||
if( subjectData == null ) return;
|
// if( subjectData == null ) return;
|
||||||
|
//
|
||||||
// {2} On restore les valeurs //
|
// // {2} On restore les valeurs //
|
||||||
subjectInput.number.value = subjectData.number;
|
// subjectInput.number.value = subjectData.number;
|
||||||
subjectInput.username.value = subjectData.username;
|
// subjectInput.username.value = subjectData.username;
|
||||||
subjectInput.firstname.value = subjectData.firstname;
|
// subjectInput.firstname.value = subjectData.firstname;
|
||||||
subjectInput.lastname.value = subjectData.lastname;
|
// subjectInput.lastname.value = subjectData.lastname;
|
||||||
}restoreSubject();
|
// }restoreSubject();
|
||||||
|
|
||||||
|
|
||||||
/* (n) On attache l'évènement d'enregistrement du formulaire du sujet */
|
/* (n) On attache l'évènement d'enregistrement du formulaire du sujet */
|
||||||
subjectInput.store.addEventListener('click', storeSubject, false);
|
// subjectInput.store.addEventListener('click', storeSubject, false);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -151,28 +146,85 @@ subjectInput.store.addEventListener('click', storeSubject, false);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var contactManager;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* [4] Gestion des formulaires de contact
|
|
||||||
|
|
||||||
|
/* [2] Inclusion des scripts externes et lancement
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
|
include('/js/includes/input-phone-subject.js', function(){
|
||||||
include('/js/includes/input-phone-contact.js', function(){
|
include('/js/includes/input-phone-contact.js', function(){
|
||||||
/* (1) On crée une instance du gestionnaire des CONTACTS */
|
include('/js/includes/input-phone-mini.js', function(){
|
||||||
contactManager = new inputPhoneContact(
|
include('/js/includes/input-phone-fiche.js', function(){
|
||||||
contactContainer,
|
|
||||||
addContact
|
|
||||||
|
/* [3] Gestion du formulaire du sujet
|
||||||
|
=========================================================*/
|
||||||
|
/* (1) On crée une instance du manager du sujet */
|
||||||
|
subjectManager = new inputPhoneSubject(
|
||||||
|
$('article.subject-panel [data-name="number"]'),
|
||||||
|
$('article.subject-panel [data-name="username"]'),
|
||||||
|
$('article.subject-panel [data-name="firstname"]'),
|
||||||
|
$('article.subject-panel [data-name="lastname"]'),
|
||||||
|
$('article.subject-panel [data-name="submit"]')
|
||||||
);
|
);
|
||||||
|
|
||||||
/* (2) On le démarre */
|
/* (2) On le démarre */
|
||||||
contactManager.attach();
|
subjectManager.attach();
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [4] Gestion des formulaires de contact
|
||||||
|
=========================================================*/
|
||||||
|
/* (1) On crée une instance du gestionnaire des CONTACTS */
|
||||||
|
contactManager = new inputPhoneContact(
|
||||||
|
$('article.contact-panel'),
|
||||||
|
$('h4.add-contact')
|
||||||
|
);
|
||||||
|
|
||||||
|
/* (2) On le démarre */
|
||||||
|
contactManager.attach(dynamicUpdate);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [5] Gestion des mini fiches relation
|
||||||
|
=========================================================*/
|
||||||
|
/* (1) On crée une instance du gestionnaire des mini fiches relation */
|
||||||
|
miniManager = new inputPhoneMini(
|
||||||
|
$('article.mini-relation-panel')
|
||||||
|
);
|
||||||
|
|
||||||
|
miniManager.attach();
|
||||||
|
|
||||||
|
|
||||||
|
/* [6] Gestion des fiches relation
|
||||||
|
=========================================================*/
|
||||||
|
/* (1) On crée une instance du gestionnaire des fiches relation */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}) }) }) });
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ETAPE 1 : INITIALISATION (ON RESTAURE LES DONNEES)
|
||||||
|
// 1. contact.storageToFields();
|
||||||
|
// 2. contact.add();
|
||||||
|
// 3. mini.storageToFields();
|
||||||
|
// 4. fiche.storageToFields();
|
||||||
|
|
||||||
|
// ETAPE 2 : ENREGISTREMENT + MISE À JOUR
|
||||||
|
// 1. mini.fieldsToStorage();
|
||||||
|
// 2. fiche.fieldsToStorage();
|
||||||
|
// 3. contact.fieldsToStorage();
|
||||||
|
// 4. mini.sync();
|
||||||
|
// 5. fiche.sync();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -325,115 +377,115 @@ include('/js/includes/input-phone-contact.js', function(){
|
||||||
/* [5] Gestion des MINI fiches relation
|
/* [5] Gestion des MINI fiches relation
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* (1) Gestion de l'enregistrement des contacts en local ('localStorage') */
|
/* (1) Gestion de l'enregistrement des contacts en local ('localStorage') */
|
||||||
lsi.createDataset('mini-fiches');
|
// lsi.createDataset('mini-fiches');
|
||||||
function storeMiniFiches(){
|
// function storeMiniFiches(){
|
||||||
console.log('STORING ALL MINI-FICHES');
|
// console.log('STORING ALL MINI-FICHES');
|
||||||
|
//
|
||||||
// {1} Pour chaque formulaire de contact présent //
|
// // {1} Pour chaque formulaire de contact présent //
|
||||||
var existingMiniFiches = $$('article.mini-relation-panel .mini-fiche-relation ');
|
// var existingMiniFiches = $$('article.mini-relation-panel .mini-fiche-relation ');
|
||||||
for( var i = 0 ; i < existingMiniFiches.length ; i++ ){
|
// for( var i = 0 ; i < existingMiniFiches.length ; i++ ){
|
||||||
|
//
|
||||||
// {2} On initialise notre deflater pour récupérer les valeurs //
|
// // {2} On initialise notre deflater pour récupérer les valeurs //
|
||||||
var deflater = new FormDeflater(existingMiniFiches[i], ['input', 'select'], ['data-name']);
|
// var deflater = new FormDeflater(existingMiniFiches[i], ['input', 'select'], ['data-name']);
|
||||||
|
//
|
||||||
// {3} On enregistre ce contact si le numéro n'est pas vide et soit pseudo/prénom/nom //
|
// // {3} 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();
|
||||||
|
//
|
||||||
// TODO: Condition pour que le formulaire soit valide
|
// // TODO: Condition pour que le formulaire soit valide
|
||||||
var validForm = true;
|
// var validForm = true;
|
||||||
|
//
|
||||||
// Si le formulaire n'est pas valide, on ne l'enregistre pas
|
// // Si le formulaire n'est pas valide, on ne l'enregistre pas
|
||||||
if( !validForm ) continue;
|
// if( !validForm ) continue;
|
||||||
|
//
|
||||||
// {4} On récupère les données du LSI si elles existent //
|
// // {4} On récupère les données du LSI si elles existent //
|
||||||
var existingData = lsi.get('mini-fiches', 'form'+deflated.uid.value);
|
// var existingData = lsi.get('mini-fiches', 'form'+deflated.uid.value);
|
||||||
console.log('deflated');
|
// console.log('deflated');
|
||||||
console.log(deflated);
|
// console.log(deflated);
|
||||||
// Si n'existe pas, on initialise
|
// // Si n'existe pas, on initialise
|
||||||
if( existingData === false ){
|
// if( existingData === false ){
|
||||||
existingData.username = 'inconnu';
|
// existingData.username = 'inconnu';
|
||||||
existingData.firstname = 'inconnu';
|
// existingData.firstname = 'inconnu';
|
||||||
existingData.lastname = 'inconnu';
|
// existingData.lastname = 'inconnu';
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
// {5} On récupère et met en forme les valeurs du deflater //
|
// // {5} On récupère et met en forme les valeurs du deflater //
|
||||||
var obj = {
|
// var obj = {
|
||||||
uid: deflated.uid.value,
|
// uid: deflated.uid.value,
|
||||||
firstname: existingData.firstname,
|
// firstname: existingData.firstname,
|
||||||
lastname: existingData.lastname,
|
// lastname: existingData.lastname,
|
||||||
username: existingData.username,
|
// username: existingData.username,
|
||||||
sexe: [
|
// sexe: [
|
||||||
deflated.sexe[0].status, // VRAI SI HOMME
|
// deflated.sexe[0].status, // VRAI SI HOMME
|
||||||
deflated.sexe[1].status // VRAI SI FEMME
|
// deflated.sexe[1].status // VRAI SI FEMME
|
||||||
],
|
// ],
|
||||||
age: deflated.age.value,
|
// age: deflated.age.value,
|
||||||
job: deflated.job.value,
|
// job: deflated.job.value,
|
||||||
location: [
|
// location: [
|
||||||
deflated.loc[0].status, // VRAI si choix 1
|
// deflated.loc[0].status, // VRAI si choix 1
|
||||||
deflated.loc[1].status, // VRAI si choix 2
|
// deflated.loc[1].status, // VRAI si choix 2
|
||||||
deflated.loc[2].status, // VRAI si choix 3
|
// deflated.loc[2].status, // VRAI si choix 3
|
||||||
deflated.loc[3].status // VRAI si choix 4
|
// deflated.loc[3].status // VRAI si choix 4
|
||||||
]
|
// ]
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
// {6} On enregistre les données dans le 'localStorage' //
|
// // {6} On enregistre les données dans le 'localStorage' //
|
||||||
lsi.set('mini-fiches', 'form'+obj.uid, obj);
|
// lsi.set('mini-fiches', 'form'+obj.uid, obj);
|
||||||
|
//
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
// {7} On met à jour le rendu //
|
// // {7} On met à jour le rendu //
|
||||||
restoreMiniFiches();
|
// restoreMiniFiches();
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
|
//
|
||||||
|
//
|
||||||
/* (2) Fonction pour l'ajout d'un contact */
|
// /* (2) Fonction pour l'ajout d'un contact */
|
||||||
function addNewMiniFiche(firstname, lastname, username, uid, age, sexe, job, location){
|
// function addNewMiniFiche(firstname, lastname, username, uid, age, sexe, job, location){
|
||||||
// {1} Création physique //
|
// // {1} Création physique //
|
||||||
miniFicheContainer.innerHTML += miniFicheBuilder.build({
|
// miniFicheContainer.innerHTML += miniFicheBuilder.build({
|
||||||
firstname: firstname,
|
// firstname: firstname,
|
||||||
lastname: lastname,
|
// lastname: lastname,
|
||||||
username: username,
|
// username: username,
|
||||||
uid: uid,
|
// uid: uid,
|
||||||
age: '',
|
// age: '',
|
||||||
sexe_A: sexe[0] ? 'true' : 'false',
|
// sexe_A: sexe[0] ? 'true' : 'false',
|
||||||
sexe_B: sexe[1] ? 'true' : 'false',
|
// sexe_B: sexe[1] ? 'true' : 'false',
|
||||||
job: job,
|
// job: job,
|
||||||
loc_A: location[0] ? 'true' : 'false',
|
// loc_A: location[0] ? 'true' : 'false',
|
||||||
loc_B: location[1] ? 'true' : 'false',
|
// loc_B: location[1] ? 'true' : 'false',
|
||||||
loc_C: location[2] ? 'true' : 'false',
|
// loc_C: location[2] ? 'true' : 'false',
|
||||||
loc_D: location[3] ? 'true' : 'false'
|
// loc_D: location[3] ? 'true' : 'false'
|
||||||
});
|
// });
|
||||||
|
//
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
|
//
|
||||||
/* (3) Gestion de l'affichage (et mise à jour) des contacts (depuis 'localStorage') */
|
// /* (3) Gestion de l'affichage (et mise à jour) des contacts (depuis 'localStorage') */
|
||||||
function restoreMiniFiches(){
|
// function restoreMiniFiches(){
|
||||||
// {1} Pour chaque contact du 'localStorage' //
|
// // {1} Pour chaque contact du 'localStorage' //
|
||||||
var existingMiniFiches = lsi.keys('mini-fiches');
|
// var existingMiniFiches = lsi.keys('mini-fiches');
|
||||||
|
//
|
||||||
// On réinitialise le HTML
|
// // On réinitialise le HTML
|
||||||
miniFicheContainer.innerHTML = '';
|
// miniFicheContainer.innerHTML = '';
|
||||||
|
//
|
||||||
for( var i = 0 ; i < existingMiniFiches.length ; i++ ){
|
// for( var i = 0 ; i < existingMiniFiches.length ; i++ ){
|
||||||
// {2} On récupère les informations du contact //
|
// // {2} On récupère les informations du contact //
|
||||||
var ficheData = lsi.get('mini-fiches', existingMiniFiches[i]);
|
// var ficheData = lsi.get('mini-fiches', existingMiniFiches[i]);
|
||||||
|
//
|
||||||
// {3} On ajoute un contact à la liste //
|
// // {3} On ajoute un contact à la liste //
|
||||||
addNewMiniFiche(
|
// addNewMiniFiche(
|
||||||
ficheData.firstname,
|
// ficheData.firstname,
|
||||||
ficheData.lastname,
|
// ficheData.lastname,
|
||||||
ficheData.username,
|
// ficheData.username,
|
||||||
ficheData.uid,
|
// ficheData.uid,
|
||||||
ficheData.age,
|
// ficheData.age,
|
||||||
ficheData.sexe,
|
// ficheData.sexe,
|
||||||
ficheData.job,
|
// ficheData.job,
|
||||||
ficheData.location
|
// ficheData.location
|
||||||
);
|
// );
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
}restoreMiniFiches();
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue