Modification de la mise en page de la fiche relation + clusterisation (<article>).
This commit is contained in:
xdrm-brackets
parent
e01f20bae8
commit
20d9ca8216
131
view/input.php
131
view/input.php
|
|
@ -62,87 +62,106 @@
|
|||
<article class='contact-panel'>
|
||||
<span data-space></span>
|
||||
<h5 data-text="Renseigner au moins un des nominatifs pour chaque contact. (pseudo, prénom et/ou nom)"></h5>
|
||||
<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='username' placeholder='Pseudo'>
|
||||
<input type='text' data-name='firstname' placeholder='Prénom'>
|
||||
<input type='text' data-name='lastname' placeholder='Nom'>
|
||||
<input type='submit' class='primary sub-number' data-store value='Enregistrer'>
|
||||
</h4>
|
||||
<h4 data-icon='+' class='add-contact' style='cursor: pointer;'>Ajouter un contact</h4>
|
||||
<!-- <span data-tag='ET'></span> -->
|
||||
</h4> -->
|
||||
|
||||
</article>
|
||||
<h4 data-icon='+' class='add-contact' style='cursor: pointer;'>Ajouter un contact</h4>
|
||||
|
||||
<span data-space></span>
|
||||
<h3 data-n='3'>Remplir les fiches relations des contacts</h3>
|
||||
|
||||
<!-- GESTION DES FICHES RELATIONS -->
|
||||
<article class='relation-panel'>
|
||||
<span data-space></span>
|
||||
<h4 data-icon='o' class='fiche-relation nobold'>
|
||||
<input type='radio' class='spacebtm' name='sexe' checked data-name='sexe' id='sexeH_0'><label for='sexeH_0'>Homme</label>
|
||||
   <input type='radio' class='btm' name='sexe' data-name='sexe' id='sexeF_0'><label for='sexeF_0'>Femme</label><br>
|
||||
<article class='fiche-relation'>
|
||||
<span data-space></span>
|
||||
<h4 data-icon='o'>Prénom1 Nom1 (Pseudo1)</h4>
|
||||
|
||||
<input type='number' min='5' max='120' class='spaced' data-name='age' placeholder='Age'><br>
|
||||
<h5 class='nobold'>
|
||||
<input type='radio' name='sexe' checked data-name='sexe' id='sexeH_0'><label for='sexeH_0'>Homme</label>
|
||||
   <input type='radio' class='btm' name='sexe' data-name='sexe' id='sexeF_0'><label for='sexeF_0'>Femme</label>
|
||||
</h5>
|
||||
|
||||
<span class='select-container'><select class='spacebtm' data-name='job'>
|
||||
<option value='.'>Dernière profession exercée:</option>
|
||||
<option value='.'>___________________________</option>
|
||||
<option value='0'>Métier 1</option>
|
||||
<option value='1'>Métier 2</option>
|
||||
<option value='2'>Métier 3</option>
|
||||
<option value='3'>Métier 4</option>
|
||||
</select></span><br>
|
||||
|
||||
Situation familiale:<br>
|
||||
   <input type='radio' class='spaced' checked name='famsit' data-name='famsit' id='famsitA_0'><label for='famsitA_0'>Seul</label><br>
|
||||
   <input type='radio' class='spaced' name='famsit' data-name='famsit' id='famsitB_0'><label for='famsitB_0'>En couple sans enfants</label><br>
|
||||
   <input type='radio' class='spaced' name='famsit' data-name='famsit' id='famsitC_0'><label for='famsitC_0'>En couple avec enfants</label><br>
|
||||
<h5 class='nobold'>
|
||||
<input type='number' min='5' max='120' data-name='age' placeholder='Age'>
|
||||
</h5>
|
||||
|
||||
<span class='select-container'><select class='spaced' data-name='studies'>
|
||||
<option value='.'>Niveau d'études maximal:</option>
|
||||
<option value='.'>___________________________</option>
|
||||
<option value='0'>Parcours 1</option>
|
||||
<option value='1'>Parcours 2</option>
|
||||
<option value='2'>Parcours 3</option>
|
||||
<option value='3'>Parcours 4</option>
|
||||
</select></span><br>
|
||||
<h5 class='nobold'>
|
||||
<span class='select-container'><select data-name='job'>
|
||||
<option value='.'>Dernière profession exercée:</option>
|
||||
<option value='.'>___________________________</option>
|
||||
<option value='0'>Métier 1</option>
|
||||
<option value='1'>Métier 2</option>
|
||||
<option value='2'>Métier 3</option>
|
||||
<option value='3'>Métier 4</option>
|
||||
</select></span>
|
||||
</h5>
|
||||
|
||||
<span class='select-container'><select class='spacebtm' data-name='relation'>
|
||||
<option value='.'>Type de relation:</option>
|
||||
<option value='.'>___________________________</option>
|
||||
<option value='0'>Relation 1</option>
|
||||
<option value='1'>Relation 2</option>
|
||||
<option value='2'>Relation 3</option>
|
||||
<option value='3'>Relation 4</option>
|
||||
</select></span><br>
|
||||
<h5 class='nobold'>
|
||||
Situation familiale:<br>
|
||||
   <input type='radio' checked name='famsit' data-name='famsit' id='famsitA_0'><label for='famsitA_0'>Seul</label><br>
|
||||
   <input type='radio' name='famsit' data-name='famsit' id='famsitB_0'><label for='famsitB_0'>En couple sans enfants</label><br>
|
||||
   <input type='radio' name='famsit' data-name='famsit' id='famsitC_0'><label for='famsitC_0'>En couple avec enfants</label>
|
||||
</h5>
|
||||
|
||||
Où habite t-elle/il ?<br>
|
||||
   <input type='radio' class='spaced' checked name='loc' data-name='loc' id='locA_0'><label for='locA_0'>- de 5 minutes</label><br>
|
||||
   <input type='radio' class='spaced' name='loc' data-name='loc' id='locB_0'><label for='locB_0'>de 5 à 15 minutes</label><br>
|
||||
   <input type='radio' class='spaced' name='loc' data-name='loc' id='locC_0'><label for='locC_0'>de 15 à 60 minutes</label><br>
|
||||
   <input type='radio' class='spaced' name='loc' data-name='loc' id='locD_0'><label for='locD_0'>+ d'une heure</label><br>
|
||||
<h5 class='nobold'>
|
||||
<span class='select-container'><select data-name='studies'>
|
||||
<option value='.'>Niveau d'études maximal:</option>
|
||||
<option value='.'>___________________________</option>
|
||||
<option value='0'>Parcours 1</option>
|
||||
<option value='1'>Parcours 2</option>
|
||||
<option value='2'>Parcours 3</option>
|
||||
<option value='3'>Parcours 4</option>
|
||||
</select></span>
|
||||
</h5>
|
||||
|
||||
<div class='spacetop'>
|
||||
<h5 class='nobold'>
|
||||
<span class='select-container'><select data-name='relation'>
|
||||
<option value='.'>Type de relation:</option>
|
||||
<option value='.'>___________________________</option>
|
||||
<option value='0'>Relation 1</option>
|
||||
<option value='1'>Relation 2</option>
|
||||
<option value='2'>Relation 3</option>
|
||||
<option value='3'>Relation 4</option>
|
||||
</select></span>
|
||||
</h5>
|
||||
|
||||
<h5 class='nobold'>
|
||||
Où habite t-elle/il ?<br>
|
||||
   <input type='radio' checked name='loc' data-name='loc' id='locA_0'><label for='locA_0'>- de 5 minutes</label><br>
|
||||
   <input type='radio' name='loc' data-name='loc' id='locB_0'><label for='locB_0'>de 5 à 15 minutes</label><br>
|
||||
   <input type='radio' name='loc' data-name='loc' id='locC_0'><label for='locC_0'>de 15 à 60 minutes</label><br>
|
||||
   <input type='radio' name='loc' data-name='loc' id='locD_0'><label for='locD_0'>+ d'une heure</label>
|
||||
</h5>
|
||||
|
||||
<h5 class='nobold'>
|
||||
Depuis quand connaissez-vous cette personne ?
|
||||
<input type='text' data-name='duration' placeholder='Nombre de mois'><br>
|
||||
</div>
|
||||
<input type='text' data-name='duration' placeholder='Nombre de mois'>
|
||||
</h5>
|
||||
|
||||
|
||||
<span class='select-container'><select class='spaced' data-name='context'>
|
||||
<option value='.'>Contexte de rencontre:</option>
|
||||
<option value='.'>___________________________</option>
|
||||
<option value='0'>Contexte 1</option>
|
||||
<option value='1'>Contexte 2</option>
|
||||
<option value='2'>Contexte 3</option>
|
||||
<option value='3'>Contexte 4</option>
|
||||
</select></span><br>
|
||||
<h5 class='nobold'>
|
||||
<span class='select-container'><select data-name='context'>
|
||||
<option value='.'>Contexte de rencontre:</option>
|
||||
<option value='.'>___________________________</option>
|
||||
<option value='0'>Contexte 1</option>
|
||||
<option value='1'>Contexte 2</option>
|
||||
<option value='2'>Contexte 3</option>
|
||||
<option value='3'>Contexte 4</option>
|
||||
</select></span>
|
||||
</h5>
|
||||
|
||||
<strong>Avec quelle fréquence discutez-vous avec cette personne ?</strong>
|
||||
<h5 class='nobold'>
|
||||
Avec quelle fréquence discutez-vous avec cette personne ?
|
||||
</h5>
|
||||
|
||||
</h4>
|
||||
<!-- <span data-tag='ET'></span> -->
|
||||
</article>
|
||||
|
||||
</article>
|
||||
<span data-space></span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
var contactBuilder=new HTMLBuilder,contactBuilderLayout="<input type='text' data-name='number' placeholder='Num\u00e9ro de t\u00e9l\u00e9phone' value='@number'> ",contactBuilderLayout=contactBuilderLayout+"<input type='text' data-name='username' placeholder='Pseudo' value='@username'> ",contactBuilderLayout=contactBuilderLayout+"<input type='text' data-name='firstname' placeholder='Pr\u00e9nom' value='@firstname'> ",contactBuilderLayout=contactBuilderLayout+"<input type='text' data-name='lastname' placeholder='Nom' value='@lastname'> ",
|
||||
contactBuilderLayout=contactBuilderLayout+"<input type='submit' class='primary sub-number' value='Enregistrer'>";contactBuilder.setLayout(contactBuilderLayout);function newContactHTMLBuilder(b,a,c,d){var e=document.createElement("h4");e.dataset.icon="p";e.className="new-contact";e.innerHTML=contactBuilder.build({number:"string"!=typeof b?"":b,username:"string"!=typeof a?"":a,firstname:"string"!=typeof c?"":c,lastname:"string"!=typeof d?"":d});return e}var ficheRelationHTML="";
|
||||
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}var addContact=$("h4.add-contact"),contactContainer=$("article.contact-panel");
|
||||
function addNewContact(){console.log("adding New Contact");console.log(contactContainer.children);contactContainer.removeChild(addContact);contactContainer.appendChild(newContactHTMLBuilder());contactContainer.appendChild(addContact)}addContact.addEventListener("click",addNewContact,!1);var relationDeflaters=[];
|
||||
function relationForms(){var b=$$("h4.fiche-relation");relationDeflaters=[];for(var a=0;a<b.length;a++)relationDeflaters.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);
|
||||
var contactBuilder=new HTMLBuilder;contactBuilder.setLayout("<h4 data-icon='p' class='new-contact'> <input type='text' data-name='number' placeholder='Num\u00e9ro de t\u00e9l\u00e9phone' value='@number' > <input type='text' data-name='username' placeholder='Pseudo' value='@username' > <input type='text' data-name='firstname' placeholder='Pr\u00e9nom' value='@firstname' > <input type='text' data-name='lastname' placeholder='Nom' value='@lastname' > <input type='submit' class='primary sub-number' value='Enregistrer'></h4>");
|
||||
var ficheBuilder=new HTMLBuilder;ficheBuilder.setLayout("<h4 data-icon='p' class='new-contact'> <input type='text' data-name='number' placeholder='Num\u00e9ro de t\u00e9l\u00e9phone' value='@number' > <input type='text' data-name='username' placeholder='Pseudo' value='@username' > <input type='text' data-name='firstname' placeholder='Pr\u00e9nom' value='@firstname' > <input type='text' data-name='lastname' placeholder='Nom' value='@lastname' > <input type='submit' class='primary sub-number' value='Enregistrer'></h4>");
|
||||
function updateListener(b,a,c,d){b.removeEventListener(a,c);d.addEventListener(a,c);return d}var ic=new inputChecker,FormDeflaterP={tags:["input"],attr:["data-name"]},importCallLog=$('input#call_log-import[type="file"]'),contactDeflaters=[];function contactForms(){var b=$$("h4.new-contact");contactDeflaters=[];for(var a=0;a<b.length;a++)contactDeflaters.push(new FormDeflater(b[a],FormDeflaterP.tags,FormDeflaterP.attr));return b}
|
||||
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");
|
||||
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);
|
||||
|
|
|
|||
136
view/js/input.js
136
view/js/input.js
|
|
@ -22,33 +22,26 @@
|
|||
/* [0] Gestion des constantes et fonctions
|
||||
=========================================================*/
|
||||
var contactBuilder = new HTMLBuilder();
|
||||
var contactBuilderLayout = "<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number'> ";
|
||||
contactBuilderLayout += "<input type='text' data-name='username' placeholder='Pseudo' value='@username'> ";
|
||||
contactBuilderLayout += "<input type='text' data-name='firstname' placeholder='Prénom' value='@firstname'> ";
|
||||
contactBuilderLayout += "<input type='text' data-name='lastname' placeholder='Nom' value='@lastname'> ";
|
||||
contactBuilderLayout += "<input type='submit' class='primary sub-number' value='Enregistrer'>";
|
||||
contactBuilder.setLayout(contactBuilderLayout);
|
||||
contactBuilder.setLayout(
|
||||
"<h4 data-icon='p' class='new-contact'> "+
|
||||
"<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' > "+
|
||||
"<input type='text' data-name='firstname' placeholder='Prénom' value='@firstname' > "+
|
||||
"<input type='text' data-name='lastname' placeholder='Nom' value='@lastname' > "+
|
||||
"<input type='submit' class='primary sub-number' value='Enregistrer'>"+
|
||||
"</h4>");
|
||||
|
||||
/* (1) Contiendra le formulaire d'ajout de contact (numéro, pseudo, prénom, nom, submit) */
|
||||
function newContactHTMLBuilder(number, username, firstname, lastname){
|
||||
var root = document.createElement('h4');
|
||||
root.dataset.icon = 'p';
|
||||
root.className = 'new-contact';
|
||||
|
||||
root.innerHTML = contactBuilder.build({
|
||||
number: (typeof number != 'string') ? '' : number,
|
||||
username: (typeof username != 'string') ? '' : username,
|
||||
firstname: (typeof firstname != 'string') ? '' : firstname,
|
||||
lastname: (typeof lastname != 'string') ? '' : lastname
|
||||
});
|
||||
|
||||
return root;
|
||||
}
|
||||
|
||||
/* (2) TODO: Contiendra la fiche relation complète */
|
||||
var ficheRelationHTML = "";
|
||||
|
||||
|
||||
var ficheBuilder = new HTMLBuilder();
|
||||
ficheBuilder.setLayout(
|
||||
"<h4 data-icon='p' class='new-contact'> "+
|
||||
"<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' > "+
|
||||
"<input type='text' data-name='firstname' placeholder='Prénom' value='@firstname' > "+
|
||||
"<input type='text' data-name='lastname' placeholder='Nom' value='@lastname' > "+
|
||||
"<input type='submit' class='primary sub-number' value='Enregistrer'>"+
|
||||
"</h4>");
|
||||
|
||||
|
||||
// Fonction qui met à jour un élément et son listener
|
||||
|
|
@ -82,13 +75,13 @@ var FormDeflaterP = { tags: ['input'], attr: ['data-name'] };
|
|||
|
||||
|
||||
|
||||
|
||||
/* [2] Indexation des inputs
|
||||
=========================================================*/
|
||||
/* (1) Input de type fichier pour l'import */
|
||||
var importCallLog = $('input#call_log-import[type="file"]');
|
||||
|
||||
|
||||
|
||||
/* (2) Contiendra les formulaires des contacts ajoutés */
|
||||
var contactDeflaters = []; // Contiendra les deflaters de chaque formulaire d'ajout de contact
|
||||
function contactForms(){
|
||||
|
|
@ -104,55 +97,88 @@ function contactForms(){
|
|||
return contactForms;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* (3) Bouton d'ajout de contact */
|
||||
var addContact = $('h4.add-contact');
|
||||
|
||||
/* (4) Bouton d'ajout de fiche */
|
||||
var addFiche = $('h4.add-fiche');
|
||||
|
||||
|
||||
// Fonction pour l'ajout d'un contact
|
||||
|
||||
/* [3] Gestion des formulaires de contact
|
||||
=========================================================*/
|
||||
/* (0) Conteneur de tous les formulaires */
|
||||
var contactContainer = $('article.contact-panel');
|
||||
function addNewContact(){
|
||||
console.log('adding New Contact');
|
||||
// {1} On récupère les éléments (dont les contacts) //
|
||||
var children = contactContainer.children;
|
||||
var clen = children.length;
|
||||
console.log( children );
|
||||
|
||||
// {2} On retire les 2 derniers enfants //
|
||||
contactContainer.removeChild(addContact);
|
||||
|
||||
// {3} On ajoute le nouveau contact //
|
||||
contactContainer.appendChild( newContactHTMLBuilder() );
|
||||
|
||||
// {4} On remet les enfants précédemment enlevés //
|
||||
contactContainer.appendChild(addContact);
|
||||
|
||||
|
||||
|
||||
// {4} On met à jour notre listener //
|
||||
// addContact = updateListener(addContact, 'click', addNewContact, $('h4.add-contact'));
|
||||
/* (1) Fonction pour l'ajout d'un contact */
|
||||
function addNewContact(number, username, firstname, lastname){
|
||||
contactContainer.innerHTML += contactBuilder.build({
|
||||
number: (typeof number != 'string') ? '' : number,
|
||||
username: (typeof username != 'string') ? '' : username,
|
||||
firstname: (typeof firstname != 'string') ? '' : firstname,
|
||||
lastname: (typeof lastname != 'string') ? '' : lastname
|
||||
});
|
||||
}
|
||||
|
||||
// On ajoute le premier
|
||||
addNewContact();
|
||||
|
||||
// Puis on attache l'évènement pour en ajouter d'autres manuellement
|
||||
addContact.addEventListener('click', addNewContact, false);
|
||||
|
||||
|
||||
|
||||
|
||||
/* [4] Gestion des fiches relation
|
||||
=========================================================*/
|
||||
/* (0) Conteneur de tous les formulaires */
|
||||
var ficheContainer = $('article.contact-panel');
|
||||
|
||||
/* (1) Fonction pour l'ajout d'un contact */
|
||||
function addNewFiche(number, username, firstname, lastname){
|
||||
ficheContainer.innerHTML += contactBuilder.build({
|
||||
number: (typeof number != 'string') ? '' : number,
|
||||
username: (typeof username != 'string') ? '' : username,
|
||||
firstname: (typeof firstname != 'string') ? '' : firstname,
|
||||
lastname: (typeof lastname != 'string') ? '' : lastname
|
||||
});
|
||||
}
|
||||
|
||||
// On ajoute la première
|
||||
// addNewFiche();
|
||||
|
||||
// Puis on attache l'évènement pour en ajouter d'autres manuellement
|
||||
// addContact.addEventListener('click', addNewFiche, false);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [5] Gestion des deflaters (formulaires) de contact
|
||||
=========================================================*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [6] Gestion des deflaters (formulaires) de fiches
|
||||
=========================================================*/
|
||||
/* (4) Contiendra les formulaires de fiche relation */
|
||||
var relationDeflaters = []; // Contiendra les deflaters de chaque formulaire de fiche de relation
|
||||
function relationForms(){
|
||||
var ficheDeflaters = []; // Contiendra les deflaters de chaque formulaire de fiche de fiche
|
||||
function ficheForms(){
|
||||
// {1} On récupère les formulaires //
|
||||
var relationForms = $$('h4.fiche-relation');
|
||||
var ficheForms = $$('h4.fiche-fiche');
|
||||
|
||||
// {2} Mise à jour des deflaters //
|
||||
relationDeflaters = [];
|
||||
for( var i = 0 ; i < relationForms.length ; i++ )
|
||||
relationDeflaters.push( new FormDeflater( relationForms[i], FormDeflaterP.tags, FormDeflaterP.attr ));
|
||||
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 relationForms;
|
||||
return ficheForms;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue