xdrm-brackets
/
NxTIC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Modification de la mise en page de la fiche relation + clusterisation (<article>).

This commit is contained in:
xdrm-brackets 2016-04-22 15:51:17 +02:00
parent e01f20bae8
commit 20d9ca8216
3 changed files with 162 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
view/input.php
View File

@ -62,87 +62,106 @@
<article class='contact-panel'> <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>
<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'>
<input type='text' data-name='firstname' placeholder='Prénom'> <input type='text' data-name='firstname' placeholder='Prénom'>
<input type='text' data-name='lastname' placeholder='Nom'> <input type='text' data-name='lastname' placeholder='Nom'>
<input type='submit' class='primary sub-number' data-store value='Enregistrer'> <input type='submit' class='primary sub-number' data-store value='Enregistrer'>
</h4> </h4> -->
<h4 data-icon='+' class='add-contact' style='cursor: pointer;'>Ajouter un contact</h4>
<!-- <span data-tag='ET'></span> -->
</article> </article>
<h4 data-icon='+' class='add-contact' style='cursor: pointer;'>Ajouter un contact</h4>
<span data-space></span> <span data-space></span>
<h3 data-n='3'>Remplir les fiches relations des contacts</h3> <h3 data-n='3'>Remplir les fiches relations des contacts</h3>
<!-- GESTION DES FICHES RELATIONS --> <!-- GESTION DES FICHES RELATIONS -->
<article class='relation-panel'> <article class='relation-panel'>
<article class='fiche-relation'>
<span data-space></span> <span data-space></span>
<h4 data-icon='o' class='fiche-relation nobold'> <h4 data-icon='o'>Prénom1 Nom1 (Pseudo1)</h4>
<input type='radio' class='spacebtm' name='sexe' checked data-name='sexe' id='sexeH_0'><label for='sexeH_0'>Homme</label>
&nbsp&nbsp&nbsp<input type='radio' class='btm' name='sexe' data-name='sexe' id='sexeF_0'><label for='sexeF_0'>Femme</label><br>
<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>
&nbsp&nbsp&nbsp<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'>
<h5 class='nobold'>
<input type='number' min='5' max='120' data-name='age' placeholder='Age'>
</h5>
<h5 class='nobold'>
<span class='select-container'><select data-name='job'>
<option value='.'>Dernière profession exercée:</option> <option value='.'>Dernière profession exercée:</option>
<option value='.'>___________________________</option> <option value='.'>___________________________</option>
<option value='0'>Métier 1</option> <option value='0'>Métier 1</option>
<option value='1'>Métier 2</option> <option value='1'>Métier 2</option>
<option value='2'>Métier 3</option> <option value='2'>Métier 3</option>
<option value='3'>Métier 4</option> <option value='3'>Métier 4</option>
</select></span><br> </select></span>
</h5>
<h5 class='nobold'>
Situation familiale:<br> Situation familiale:<br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' checked name='famsit' data-name='famsit' id='famsitA_0'><label for='famsitA_0'>Seul</label><br> &nbsp&nbsp&nbsp<input type='radio' checked name='famsit' data-name='famsit' id='famsitA_0'><label for='famsitA_0'>Seul</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' name='famsit' data-name='famsit' id='famsitB_0'><label for='famsitB_0'>En couple sans enfants</label><br> &nbsp&nbsp&nbsp<input type='radio' name='famsit' data-name='famsit' id='famsitB_0'><label for='famsitB_0'>En couple sans enfants</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' name='famsit' data-name='famsit' id='famsitC_0'><label for='famsitC_0'>En couple avec enfants</label><br> &nbsp&nbsp&nbsp<input type='radio' name='famsit' data-name='famsit' id='famsitC_0'><label for='famsitC_0'>En couple avec enfants</label>
</h5>
<span class='select-container'><select class='spaced' data-name='studies'> <h5 class='nobold'>
<span class='select-container'><select data-name='studies'>
<option value='.'>Niveau d'études maximal:</option> <option value='.'>Niveau d'études maximal:</option>
<option value='.'>___________________________</option> <option value='.'>___________________________</option>
<option value='0'>Parcours 1</option> <option value='0'>Parcours 1</option>
<option value='1'>Parcours 2</option> <option value='1'>Parcours 2</option>
<option value='2'>Parcours 3</option> <option value='2'>Parcours 3</option>
<option value='3'>Parcours 4</option> <option value='3'>Parcours 4</option>
</select></span><br> </select></span>
</h5>
<span class='select-container'><select class='spacebtm' data-name='relation'> <h5 class='nobold'>
<span class='select-container'><select data-name='relation'>
<option value='.'>Type de relation:</option> <option value='.'>Type de relation:</option>
<option value='.'>___________________________</option> <option value='.'>___________________________</option>
<option value='0'>Relation 1</option> <option value='0'>Relation 1</option>
<option value='1'>Relation 2</option> <option value='1'>Relation 2</option>
<option value='2'>Relation 3</option> <option value='2'>Relation 3</option>
<option value='3'>Relation 4</option> <option value='3'>Relation 4</option>
</select></span><br> </select></span>
</h5>
<h5 class='nobold'>
Où habite t-elle/il ?<br> Où habite t-elle/il ?<br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' checked name='loc' data-name='loc' id='locA_0'><label for='locA_0'>- de 5 minutes</label><br> &nbsp&nbsp&nbsp<input type='radio' checked name='loc' data-name='loc' id='locA_0'><label for='locA_0'>- de 5 minutes</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' name='loc' data-name='loc' id='locB_0'><label for='locB_0'>de 5 à 15 minutes</label><br> &nbsp&nbsp&nbsp<input type='radio' name='loc' data-name='loc' id='locB_0'><label for='locB_0'>de 5 à 15 minutes</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' name='loc' data-name='loc' id='locC_0'><label for='locC_0'>de 15 à 60 minutes</label><br> &nbsp&nbsp&nbsp<input type='radio' name='loc' data-name='loc' id='locC_0'><label for='locC_0'>de 15 à 60 minutes</label><br>
&nbsp&nbsp&nbsp<input type='radio' class='spaced' name='loc' data-name='loc' id='locD_0'><label for='locD_0'>+ d'une heure</label><br> &nbsp&nbsp&nbsp<input type='radio' name='loc' data-name='loc' id='locD_0'><label for='locD_0'>+ d'une heure</label>
</h5>
<div class='spacetop'> <h5 class='nobold'>
Depuis quand connaissez-vous cette personne ? Depuis quand connaissez-vous cette personne ?
<input type='text' data-name='duration' placeholder='Nombre de mois'><br> <input type='text' data-name='duration' placeholder='Nombre de mois'>
</div> </h5>
<span class='select-container'><select class='spaced' data-name='context'> <h5 class='nobold'>
<span class='select-container'><select data-name='context'>
<option value='.'>Contexte de rencontre:</option> <option value='.'>Contexte de rencontre:</option>
<option value='.'>___________________________</option> <option value='.'>___________________________</option>
<option value='0'>Contexte 1</option> <option value='0'>Contexte 1</option>
<option value='1'>Contexte 2</option> <option value='1'>Contexte 2</option>
<option value='2'>Contexte 3</option> <option value='2'>Contexte 3</option>
<option value='3'>Contexte 4</option> <option value='3'>Contexte 4</option>
</select></span><br> </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> </article>
<!-- <span data-tag='ET'></span> -->
</article> </article>
<span data-space></span> <span data-space></span>

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

@ -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'> ", 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>");
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=""; 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"),contactContainer=$("article.contact-panel"); function updateListener(b,a,c,d){b.removeEventListener(a,c);d.addEventListener(a,c);return d}var ic=new inputChecker,FormDeflaterP={tags:["input"],attr:["data-name"]},importCallLog=$('input#call_log-import[type="file"]'),contactDeflaters=[];function contactForms(){var b=$$("h4.new-contact");contactDeflaters=[];for(var a=0;a<b.length;a++)contactDeflaters.push(new FormDeflater(b[a],FormDeflaterP.tags,FormDeflaterP.attr));return b}
function 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=[]; 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 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); 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
View File

@ -22,33 +22,26 @@
/* [0] Gestion des constantes et fonctions /* [0] Gestion des constantes et fonctions
=========================================================*/ =========================================================*/
var contactBuilder = new HTMLBuilder(); var contactBuilder = new HTMLBuilder();
var contactBuilderLayout = "<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number'> "; contactBuilder.setLayout(
contactBuilderLayout += "<input type='text' data-name='username' placeholder='Pseudo' value='@username'> "; "<h4 data-icon='p' class='new-contact'> "+
contactBuilderLayout += "<input type='text' data-name='firstname' placeholder='Prénom' value='@firstname'> "; "<input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' > "+
contactBuilderLayout += "<input type='text' data-name='lastname' placeholder='Nom' value='@lastname'> "; "<input type='text' data-name='username' placeholder='Pseudo' value='@username' > "+
contactBuilderLayout += "<input type='submit' class='primary sub-number' value='Enregistrer'>"; "<input type='text' data-name='firstname' placeholder='Prénom' value='@firstname' > "+
contactBuilder.setLayout(contactBuilderLayout); "<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 */ /* (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 // 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 /* [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) Contiendra les formulaires des contacts ajoutés */ /* (2) Contiendra les formulaires des contacts ajoutés */
var contactDeflaters = []; // Contiendra les deflaters de chaque formulaire d'ajout de contact var contactDeflaters = []; // Contiendra les deflaters de chaque formulaire d'ajout de contact
function contactForms(){ function contactForms(){
@ -104,55 +97,88 @@ function contactForms(){
return contactForms; return contactForms;
} }
/* (3) Bouton d'ajout de contact */ /* (3) Bouton d'ajout de contact */
var addContact = $('h4.add-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'); 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 // /* (1) Fonction pour l'ajout d'un contact */
contactContainer.removeChild(addContact); function addNewContact(number, username, firstname, lastname){
contactContainer.innerHTML += contactBuilder.build({
// {3} On ajoute le nouveau contact // number: (typeof number != 'string') ? '' : number,
contactContainer.appendChild( newContactHTMLBuilder() ); username: (typeof username != 'string') ? '' : username,
firstname: (typeof firstname != 'string') ? '' : firstname,
// {4} On remet les enfants précédemment enlevés // lastname: (typeof lastname != 'string') ? '' : lastname
contactContainer.appendChild(addContact); });
// {4} On met à jour notre listener //
// addContact = updateListener(addContact, 'click', addNewContact, $('h4.add-contact'));
} }
// On ajoute le premier
addNewContact();
// Puis on attache l'évènement pour en ajouter d'autres manuellement
addContact.addEventListener('click', addNewContact, false); 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 */ /* (4) Contiendra les formulaires de fiche relation */
var relationDeflaters = []; // Contiendra les deflaters de chaque formulaire de fiche de relation var ficheDeflaters = []; // Contiendra les deflaters de chaque formulaire de fiche de fiche
function relationForms(){ function ficheForms(){
// {1} On récupère les formulaires // // {1} On récupère les formulaires //
var relationForms = $$('h4.fiche-relation'); var ficheForms = $$('h4.fiche-fiche');
// {2} Mise à jour des deflaters // // {2} Mise à jour des deflaters //
relationDeflaters = []; ficheDeflaters = [];
for( var i = 0 ; i < relationForms.length ; i++ ) for( var i = 0 ; i < ficheForms.length ; i++ )
relationDeflaters.push( new FormDeflater( relationForms[i], FormDeflaterP.tags, FormDeflaterP.attr )); ficheDeflaters.push( new FormDeflater( ficheForms[i], FormDeflaterP.tags, FormDeflaterP.attr ));
// {3} On retourne la liste des formulaires // // {3} On retourne la liste des formulaires //
return relationForms; return ficheForms;
} }