Gestion des MINI fiches fait + interaction avec CONTACTS

This commit is contained in:
xdrm-brackets 2016-04-27 11:22:03 +02:00
parent d1483c61f4
commit 64618ba87f
21 changed files with 795 additions and 529 deletions

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

View File

@ -441,14 +441,36 @@
&:first-child{ border-radius: 5px 0 0 5px; }
&:last-child{ border-radius: 0 5px 5px 0; }
// Animation de hover
&:hover,
&.active{//:not(:first-child):not(:last-child)
border-color: $timeline-2;
background: $timeline-2;
color: #fff;
// font-weight: bold;
}
// Animation quand la page est validée
&.done{
font-weight: normal;
color: $timeline-2;
// Animation de hover
&:hover,
&.active{//:not(:first-child):not(:last-child)
border-color: $timeline-2;
background: $timeline-2;
color: #fff;
// font-weight: bold;
}
}
// Quand la page n'est pas validée
&:not(.done){
font-weight: bold;
color: #333;
// Animation de hover
&:hover,
&.active{//:not(:first-child):not(:last-child)
border-color: #aaa;
background: #aaa;
color: #fff;
// font-weight: bold;
}
}
}
}

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

View File

@ -44,8 +44,8 @@ miniFicheBuilder.setLayout(
"\t<h4 data-icon='o' class='color2'>@firstname @lastname (@username)</h4>\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='@sexea'><label for='sexeH_min_@uid'>Homme</label>\n"+
"\t\t&nbsp&nbsp&nbsp<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\t<input type='radio' name='sexe_min_@uid' data-name='sexe' id='sexeH_min_@uid'><label for='sexeH_min_@uid'>Homme</label>\n"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='sexe_min_@uid' data-name='sexe' id='sexeF_min_@uid'><label for='sexeF_min_@uid'>Femme</label>\n"+
"\t</h5>\n"+
@ -153,235 +153,247 @@ miniFicheBuilder.setLayout(
/* (3) Constructeur de formulaire fiche relation */
var ficheBuilder = new HTMLBuilder();
ficheBuilder.setLayout(
"<article class='fiche-relation'>"+
"\t<span data-space></span>"+
"\t<h4 data-icon='o' class='color2'>@firstname @lastname (@username)</h4>"+
"<article class='fiche-relation'>\n"+
"\t<h5 class='nobold color0'>"+
"\t\t<input type='radio' name='sexe_@uid' checked data-name='sexe_@uid' id='sexeH_@uid'><label for='sexeH_@uid'>Homme</label>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' class='btm' name='sexe_@uid' data-name='sexe_@uid' id='sexeF_@uid'><label for='sexeF_@uid'>Femme</label>"+
"\t</h5>"+
"\t<input type='hidden' data-name='uid' value='@uid'>\n"+
"\t<input type='hidden' data-name='firstname' value='@firstname'>\n"+
"\t<input type='hidden' data-name='lastname' value='@lastname'>\n"+
"\t<input type='hidden' data-name='username' value='@username'>\n"+
"\t<h4 data-icon='o' class='color2'>@firstname @lastname (@username)</h4>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\t<input type='radio' name='sexe_@uid' data-name='sexe' id='sexeH_@uid'><label for='sexeH_@uid'>Homme</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' class='btm' name='sexe_@uid' data-name='sexe' id='sexeF_@uid'><label for='sexeF_@uid'>Femme</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\t<input type='number' min='5' max='120' data-name='age' placeholder='Age'>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\t<input type='number' min='5' max='120' data-name='age' placeholder='Age' value='@age'>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\t<span class='select-container'><select data-name='job'>"+
"\t\t\t<option value='.' disabled selected>Dernière profession exercée:</option>"+
"\t\t\t<option value='0'>Inconnue</option>"+
"\t\t\t<option value='1-' disabled>Agriculateur exploitants</option>"+
"\t\t\t\t<option value='10'>- Agriculteurs exploitants (Agriculteurs, maraîchers, viticulteurs…)</option>"+
"\t\t\t<option value='2-' disabled>Artisans, commerçants et chefs d'entreprises</option>"+
"\t\t\t\t<option value='21'>- Artisans (Maçons, électriciens, couturiers, boulangers, garagistes, coiffeurs…)</option>"+
"\t\t\t\t<option value='22'>- Commerçants et assimilés (Commerçants en détail ou en gros, buralistes, cafetiers, agents immobiliers…)</option>"+
"\t\t\t\t<option value='23'>- Chefs d'entreprise de 10 salariés ou plus</option>"+
"\t\t\t<option value='3-' disabled>Cadres et professions intellectuelles supérieures</option>"+
"\t\t\t\t<option value='31'>- Professions libérales et assimilés (Médecins, avocats, notaires, architectes libéraux…)</option>"+
"\t\t\t\t<option value='32'>- Cadres de la fonction publique, professions intellectuelles et artistiques (Personnels administratifs</option>"+
"\t\t\t\t <option class='pad' value='32'>de catégorie A, professeurs de lenseignement secondaire ou supérieur, médecins hospitaliers, artistes…)</option>"+
"\t\t\t\t<option value='36'>- Cadres d'entreprise (Cadres administratifs, cadres commerciaux, ingénieurs…)</option>"+
"\t\t\t<option value='4-' disabled>Professions Intermédiaires</option>"+
"\t\t\t\t<option value='41'>- Professions intermédiaires de l'enseignement, de la santé, de la fonction publique et assimilés </option>"+
"\t\t\t\t <option class='pad' value='41'>(Personnels administratifs de catégorie B, instituteurs, infirmiers, travailleurs sociaux…)</option>"+
"\t\t\t\t<option value='46'>- Professions intermédiaires administratives et commerciales des entreprises (Comptables, chargés de clientèles…)</option>"+
"\t\t\t\t<option value='47'>- Techniciens (Techniciens détudes, techniciens de contrôle, dessinateurs en bâtiment, géomètres…)</option>"+
"\t\t\t\t<option value='48'>- Contremaîtres, agents de maîtrise (Conducteurs de travaux, chefs déquipe…)</option>"+
"\t\t\t<option value='5-' disabled>Employés</option>"+
"\t\t\t\t<option value='51'>- Employés de la fonction publique (Personnels de catégorie C, agents administratifs, agents de service…)</option>"+
"\t\t\t\t<option value='54'>- Employés administratifs d'entreprise (Secrétaires, agents daccueil…)</option>"+
"\t\t\t\t<option value='55'>- Employés de commerce (Vendeurs, caissiers…)</option>"+
"\t\t\t\t<option value='56'>- Personnels des services directs aux particuliers (Serveurs, coiffeurs, assistantes maternelles…)</option>"+
"\t\t\t<option value='6-' disabled>Ouvriers</option>"+
"\t\t\t\t<option value='61'>- Ouvriers qualifiés de type industriel ou artisanal (Mécaniciens, chauffeurs, cuisiniers…)</option>"+
"\t\t\t\t<option value='66'>- Ouvriers non qualifiés de type industriel ou artisanal (Ouvrier de production, manœuvres…)</option>"+
"\t\t\t\t<option value='69'>- Ouvriers agricoles (Bergers, ouvriers de la viticulture, bûcherons, ouvrier forestiers…)</option>"+
"\t\t\t<option value='7-' disabled>Retraités</option>"+
"\t\t\t\t<option value='71'>- Anciens agriculteurs exploitants</option>"+
"\t\t\t\t<option value='72'>- Anciens artisans, commerçants, chefs d'entreprise</option>"+
"\t\t\t\t<option value='73'>- Anciens cadres</option>"+
"\t\t\t\t<option value='74'>- Anciennes professions intermédiaires</option>"+
"\t\t\t\t<option value='75'>- Anciens employés</option>"+
"\t\t\t\t<option value='76'>- Anciens ouvriers</option>"+
"\t\t\t<option value='8-' disabled>Sans activité professionnelle</option>"+
"\t\t\t\t<option value='81'>- Chômeurs n'ayant jamais travaillé</option>"+
"\t\t\t\t<option value='82'>- Inactifs divers (autres que retraités)</option>"+
"\t\t</select></span>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\t<span class='select-container'><select data-name='job'>\n"+
"\t\t\t<option value='.' disabled selected>Dernière profession exercée:</option>\n"+
"\t\t\t<option value='0'>Inconnue</option>\n"+
"\t\t\t<option value='1-' disabled>Agriculateur exploitants</option>\n"+
"\t\t\t\t<option value='10'>- Agriculteurs exploitants (Agriculteurs, maraîchers, viticulteurs…)</option>\n"+
"\t\t\t<option value='2-' disabled>Artisans, commerçants et chefs d'entreprises</option>\n"+
"\t\t\t\t<option value='21'>- Artisans (Maçons, électriciens, couturiers, boulangers, garagistes, coiffeurs…)</option>\n"+
"\t\t\t\t<option value='22'>- Commerçants et assimilés (Commerçants en détail ou en gros, buralistes, cafetiers, agents immobiliers…)</option>\n"+
"\t\t\t\t<option value='23'>- Chefs d'entreprise de 10 salariés ou plus</option>\n"+
"\t\t\t<option value='3-' disabled>Cadres et professions intellectuelles supérieures</option>\n"+
"\t\t\t\t<option value='31'>- Professions libérales et assimilés (Médecins, avocats, notaires, architectes libéraux…)</option>\n"+
"\t\t\t\t<option value='32'>- Cadres de la fonction publique, professions intellectuelles et artistiques (Personnels administratifs</option>\n"+
"\t\t\t\t\t<option class='pad' value='32'>de catégorie A, professeurs de lenseignement secondaire ou supérieur, médecins hospitaliers, artistes…)</option>\n"+
"\t\t\t\t<option value='36'>- Cadres d'entreprise (Cadres administratifs, cadres commerciaux, ingénieurs…)</option>\n"+
"\t\t\t<option value='4-' disabled>Professions Intermédiaires</option>\n"+
"\t\t\t\t<option value='41'>- Professions intermédiaires de l'enseignement, de la santé, de la fonction publique et assimilés </option>\n"+
"\t\t\t\t\t<option class='pad' value='41'>(Personnels administratifs de catégorie B, instituteurs, infirmiers, travailleurs sociaux…)</option>\n"+
"\t\t\t\t<option value='46'>- Professions intermédiaires administratives et commerciales des entreprises (Comptables, chargés de clientèles…)</option>\n"+
"\t\t\t\t<option value='47'>- Techniciens (Techniciens détudes, techniciens de contrôle, dessinateurs en bâtiment, géomètres…)</option>\n"+
"\t\t\t\t<option value='48'>- Contremaîtres, agents de maîtrise (Conducteurs de travaux, chefs déquipe…)</option>\n"+
"\t\t\t<option value='5-' disabled>Employés</option>\n"+
"\t\t\t\t<option value='51'>- Employés de la fonction publique (Personnels de catégorie C, agents administratifs, agents de service…)</option>\n"+
"\t\t\t\t<option value='54'>- Employés administratifs d'entreprise (Secrétaires, agents daccueil…)</option>\n"+
"\t\t\t\t<option value='55'>- Employés de commerce (Vendeurs, caissiers…)</option>\n"+
"\t\t\t\t<option value='56'>- Personnels des services directs aux particuliers (Serveurs, coiffeurs, assistantes maternelles…)</option>\n"+
"\t\t\t<option value='6-' disabled>Ouvriers</option>\n"+
"\t\t\t\t<option value='61'>- Ouvriers qualifiés de type industriel ou artisanal (Mécaniciens, chauffeurs, cuisiniers…)</option>\n"+
"\t\t\t\t<option value='66'>- Ouvriers non qualifiés de type industriel ou artisanal (Ouvrier de production, manœuvres…)</option>\n"+
"\t\t\t\t<option value='69'>- Ouvriers agricoles (Bergers, ouvriers de la viticulture, bûcherons, ouvrier forestiers…)</option>\n"+
"\t\t\t<option value='7-' disabled>Retraités</option>\n"+
"\t\t\t\t<option value='71'>- Anciens agriculteurs exploitants</option>\n"+
"\t\t\t\t<option value='72'>- Anciens artisans, commerçants, chefs d'entreprise</option>\n"+
"\t\t\t\t<option value='73'>- Anciens cadres</option>\n"+
"\t\t\t\t<option value='74'>- Anciennes professions intermédiaires</option>\n"+
"\t\t\t\t<option value='75'>- Anciens employés</option>\n"+
"\t\t\t\t<option value='76'>- Anciens ouvriers</option>\n"+
"\t\t\t<option value='8-' disabled>Sans activité professionnelle</option>\n"+
"\t\t\t\t<option value='81'>- Chômeurs n'ayant jamais travaillé</option>\n"+
"\t\t\t\t<option value='82'>- Inactifs divers (autres que retraités)</option>\n"+
"\t\t</select></span>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\tSituation familiale:<br>"+
"\t\t<h5 class='nobold color0'>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' checked name='famsit_@uid' data-name='famsit' id='famsitA_@uid'><label for='famsitA_@uid'>Seul</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='famsit_@uid' data-name='famsit' id='famsitB_@uid'><label for='famsitB_@uid'>En couple sans enfants</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='famsit_@uid' data-name='famsit' id='famsitC_@uid'><label for='famsitC_@uid'>En couple avec enfants</label>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\tSituation familiale:<br>\n"+
"\t\t<h5 class='nobold color0'>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='famsit_@uid' data-name='famsit' id='famsitA_@uid'><label for='famsitA_@uid'>Seul</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='famsit_@uid' data-name='famsit' id='famsitB_@uid'><label for='famsitB_@uid'>En couple sans enfants</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='famsit_@uid' data-name='famsit' id='famsitC_@uid'><label for='famsitC_@uid'>En couple avec enfants</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\t<span class='select-container'><select data-name='studies'>"+
"\t\t\t<option value='.' disabled selected>Niveau d'études maximal:</option>"+
"\t\t\t<option value='0'>Inconnue</option>"+
"\t\t\t<option value='01'>- Pas de scolarité</option>"+
"\t\t\t<option value='02'>- Aucun diplôme mais scolarité jusqu'en école primaire ou au collège</option>"+
"\t\t\t<option value='03'>- Aucun diplôme mais scolarité au-delà du collège</option>"+
"\t\t\t<option value='04'>- Certificat d'études primaires (CEP)</option>"+
"\t\t\t<option value='05'>- BEPC, brevet élémentaire, brevet des collèges</option>"+
"\t\t\t<option value='06'>- Certificat d'aptitudes professionnelles (CAP), brevet de compagnon, y compris CAPA</option>"+
"\t\t\t<option value='07'>- Brevet d'études professionnelles (BEP), y compris BEPA et diplômes agricoles (BAA, BPA)</option>"+
"\t\t\t\t<option value='07' class='pad'>Diplômes sociaux (aide-soignante, auxiliaire de puériculture, travailleuse familiale)</option>"+
"\t\t\t<option value='08'>- Baccalauréat général, brevet supérieur</option>"+
"\t\t\t\t<option class='pad' value='08'>BAC ( L, ES, S ou A, B , C, D, D, E )</option>"+
"\t\t\t<option value='09'>- Bac technologique ou professionnel, brevet professionnel ou de technicien</option>"+
"\t\t\t\t<option class='pad' value='09'>BAC (STI, STL, SMS, STT ou F, G, H)</option>"+
"\t\t\t\t<option class='pad' value='09'>BEC, BEI, BEH, capacité en droit</option>"+
"\t\t\t\t<option class='pad' value='09'>Brevet de technicien agricole (BTA)</option>"+
"\t<h5 class='nobold color0'>\n"+
"\t\t<span class='select-container'><select data-name='studies'>\n"+
"\t\t\t<option value='.' disabled selected>Niveau d'études maximal:</option>\n"+
"\t\t\t<option value='0'>Inconnue</option>\n"+
"\t\t\t<option value='01'>- Pas de scolarité</option>\n"+
"\t\t\t<option value='02'>- Aucun diplôme mais scolarité jusqu'en école primaire ou au collège</option>\n"+
"\t\t\t<option value='03'>- Aucun diplôme mais scolarité au-delà du collège</option>\n"+
"\t\t\t<option value='04'>- Certificat d'études primaires (CEP)</option>\n"+
"\t\t\t<option value='05'>- BEPC, brevet élémentaire, brevet des collèges</option>\n"+
"\t\t\t<option value='06'>- Certificat d'aptitudes professionnelles (CAP), brevet de compagnon, y compris CAPA</option>\n"+
"\t\t\t<option value='07'>- Brevet d'études professionnelles (BEP), y compris BEPA et diplômes agricoles (BAA, BPA)</option>\n"+
"\t\t\t\t<option value='07' class='pad'>Diplômes sociaux (aide-soignante, auxiliaire de puériculture, travailleuse familiale)</option>\n"+
"\t\t\t<option value='08'>- Baccalauréat général, brevet supérieur</option>\n"+
"\t\t\t\t<option class='pad' value='08'>BAC ( L, ES, S ou A, B , C, D, D, E )</option>\n"+
"\t\t\t<option value='09'>- Bac technologique ou professionnel, brevet professionnel ou de technicien</option>\n"+
"\t\t\t\t<option class='pad' value='09'>BAC (STI, STL, SMS, STT ou F, G, H)</option>\n"+
"\t\t\t\t<option class='pad' value='09'>BEC, BEI, BEH, capacité en droit</option>\n"+
"\t\t\t\t<option class='pad' value='09'>Brevet de technicien agricole (BTA)</option>\n"+
"\t\t\t<option value='10'>- Diplôme universitaire de 1er cycle</option>"+
"\t\t\t\t<option class='pad' value='10'>BTS, DUT, DEUG</option>"+
"\t\t\t\t<option class='pad' value='10'>Diplôme des professions sociales ou de santé, d'infirmier(ère)</option>"+
"\t\t\t\t<option class='pad' value='10'>Diplôme universitaire propédeutique, DUEL, DUES, DEUG, PCEM</option>"+
"\t\t\t<option value='11'>- Diplôme universitaire de 2ème ou 3ème cycle</option>"+
"\t\t\t\t<option class='pad' value='11'>MASTER, DOCTORAT (y compris médecine, pharmacie, dentaire),</option>"+
"\t\t\t\t<option class='pad' value='11'>Maîtrise, DEA, DESS,</option>"+
"\t\t\t\t<option class='pad' value='11'>CAPES, CAPET, agrégation</option>"+
"\t\t\t\t<option class='pad' value='11'>Diplôme d'ingénieur, d'une grande école, etc.</option>"+
"\t\t</select></span>"+
"\t</h5>"+
"\t\t\t<option value='10'>- Diplôme universitaire de 1er cycle</option>\n"+
"\t\t\t\t<option class='pad' value='10'>BTS, DUT, DEUG</option>\n"+
"\t\t\t\t<option class='pad' value='10'>Diplôme des professions sociales ou de santé, d'infirmier(ère)</option>\n"+
"\t\t\t\t<option class='pad' value='10'>Diplôme universitaire propédeutique, DUEL, DUES, DEUG, PCEM</option>\n"+
"\t\t\t<option value='11'>- Diplôme universitaire de 2ème ou 3ème cycle</option>\n"+
"\t\t\t\t<option class='pad' value='11'>MASTER, DOCTORAT (y compris médecine, pharmacie, dentaire),</option>\n"+
"\t\t\t\t<option class='pad' value='11'>Maîtrise, DEA, DESS,</option>\n"+
"\t\t\t\t<option class='pad' value='11'>CAPES, CAPET, agrégation</option>\n"+
"\t\t\t\t<option class='pad' value='11'>Diplôme d'ingénieur, d'une grande école, etc.</option>\n"+
"\t\t</select></span>\n"+
"\t</h5>\n"+
"\t<h4 data-icon='a'>Type de relation</h4>"+
"\t<h5 class='nobold color0'>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='reltype_@uid' id='reltype0_@uid' checked><label for='reltype0_@uid'>Père, mère ou équivalent</label><br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='reltype_@uid' id='reltype1_@uid'><label for='reltype1_@uid'>Frère ou soeur</label><br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='reltype_@uid' id='reltype2_@uid'><label for='reltype2_@uid'>Autre membre de la famille</label><br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='reltype_@uid' id='reltype3_@uid'><label for='reltype3_@uid'>Relation amoureuse</label><br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='reltype_@uid' id='reltype4_@uid'><label for='reltype4_@uid'>Collègue</label><br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='reltype_@uid' id='reltype5_@uid'><label for='reltype5_@uid'>Voisin</label><br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='reltype_@uid' id='reltype6_@uid'><label for='reltype6_@uid'>Ami</label><br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='reltype_@uid' id='reltype7_@uid'><label for='reltype7_@uid'>Copain</label><br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='reltype_@uid' id='reltype8_@uid'><label for='reltype8_@uid'>Autre : <input type='text' id='reltypeSpecial' placeholder='coéquipier de tennis, ..'></label><br>"+
"\t</h5>"+
"\t<h4 data-icon='a'>Type de relation</h4>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype_@uid' data-name='reltype' id='reltype0_@uid'><label for='reltype0_@uid'>Père, mère ou équivalent</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype_@uid' data-name='reltype' id='reltype1_@uid'><label for='reltype1_@uid'>Frère ou soeur</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype_@uid' data-name='reltype' id='reltype2_@uid'><label for='reltype2_@uid'>Autre membre de la famille</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype_@uid' data-name='reltype' id='reltype3_@uid'><label for='reltype3_@uid'>Relation amoureuse</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype_@uid' data-name='reltype' id='reltype4_@uid'><label for='reltype4_@uid'>Collègue</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype_@uid' data-name='reltype' id='reltype5_@uid'><label for='reltype5_@uid'>Voisin</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype_@uid' data-name='reltype' id='reltype6_@uid'><label for='reltype6_@uid'>Ami</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype_@uid' data-name='reltype' id='reltype7_@uid'><label for='reltype7_@uid'>Copain</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype_@uid' data-name='reltype' id='reltype8_@uid'><label for='reltype8_@uid'>Autre : <input type='text' id='reltypeSpecial' placeholder='coéquipier de tennis, ..'></label><br>\n"+
"\t</h5>\n"+
"\t<h4 data-icon='m'>Où habite t-elle/il ?</h4>"+
"\t<h5 class='nobold color0'>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' checked name='loc_@uid' data-name='loc' id='locA_@uid'><label for='locA_@uid'>- de 5 minutes</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='loc_@uid' data-name='loc' id='locB_@uid'><label for='locB_@uid'>de 5 à 15 minutes</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='loc_@uid' data-name='loc' id='locC_@uid'><label for='locC_@uid'>de 15 à 60 minutes</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='loc_@uid' data-name='loc' id='locD_@uid'><label for='locD_@uid'>+ d'une heure</label><br>"+
"\t</h5>"+
"\t<h4 data-icon='m'>Où habite t-elle/il ?</h4>\n"+
"\t<h5 class='nobold color0'>"+
"\t\tDepuis quand connaissez-vous cette personne ?"+
"\t\t<input type='number' data-name='duration' placeholder='Nombre de mois'>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\t<input type='text' data-name='city' placeholder='Ville'>\n"+
"\t</h5>\n"+
"\t<h4 data-icon='d'>Contexte de rencontre</h4>"+
"\t<h5 class='nobold color0'>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte0_@uid'> <label for='contexte0_@uid'>De la même famille</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte1_@uid'> <label for='contexte1_@uid'>Grandi ensemble</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte2_@uid'> <label for='contexte2_@uid'>Par mon mari/ma femme/relation amoureuse</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte3_@uid'> <label for='contexte3_@uid'>Par mes parents</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte4_@uid'> <label for='contexte4_@uid'>Par mes enfants</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte5_@uid'> <label for='contexte5_@uid'>Par un ami</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte6_@uid'> <label for='contexte6_@uid'>Comme voisin</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte7_@uid'> <label for='contexte7_@uid'>Par dautres membres de la famille</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte8_@uid'> <label for='contexte8_@uid'>Etudes</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte9_@uid'> <label for='contexte9_@uid'>Etudes supérieures</label><br>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='loc_@uid' data-name='loc' id='locA_@uid'><label for='locA_@uid'>- de 5 minutes</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='loc_@uid' data-name='loc' id='locB_@uid'><label for='locB_@uid'>de 5 à 15 minutes</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='loc_@uid' data-name='loc' id='locC_@uid'><label for='locC_@uid'>de 15 à 60 minutes</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='loc_@uid' data-name='loc' id='locD_@uid'><label for='locD_@uid'>+ d'une heure</label><br>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte10_@uid'><label for='contexte10_@uid'>Au travail</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte11_@uid'><label for='contexte11_@uid'>Internet (quel contexte ? préciser <input type='text' id='contexteSpecial1' placeholder='facebook, youtube, twitter, ..'>)</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte12_@uid'><label for='contexte12_@uid'>Par une association (quel type : <input type='text' id='contexteSpecial2' placeholder='aide à la personne, sport, ..'>)</label><br>"+
"\t\t&nbsp&nbsp&nbsp<input type='radio' name='contexte_@uid' id='contexte13_@uid'><label for='contexte13_@uid'>Autre : <input type='text' id='contexteSpecial3' placeholder='vacances, ..'></label><br>"+
"\t</h5>"+
"\t<h4 data-icon='b'>Avec quelle fréquence discutez-vous avec cette personne ?</h4>"+
"\t<h5 class='nobold color0'>"+
"\t\tFace à face<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq0_@uid' id='freq01_@uid'><label for='freq01_@uid'>plusieurs fois par semaine</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq0_@uid' id='freq02_@uid'><label for='freq02_@uid'>1 fois par semaine</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq0_@uid' id='freq03_@uid'><label for='freq03_@uid'>1 fois par mois</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq0_@uid' id='freq04_@uid'><label for='freq04_@uid'>1 fois par an ou moins</label>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>"+
"\t\tTéléphone ou skype et équivalent<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq1_@uid' id='freq11_@uid'><label for='freq11_@uid'>plusieurs fois par semaine</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq1_@uid' id='freq12_@uid'><label for='freq12_@uid'>1 fois par semaine</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq1_@uid' id='freq13_@uid'><label for='freq13_@uid'>1 fois par mois</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq1_@uid' id='freq14_@uid'><label for='freq14_@uid'>1 fois par an ou moins</label>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>"+
"\t\tSMS, et équivalents<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq2_@uid' id='freq21_@uid'><label for='freq21_@uid'>plusieurs fois par semaine</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq2_@uid' id='freq22_@uid'><label for='freq22_@uid'>1 fois par semaine</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq2_@uid' id='freq23_@uid'><label for='freq23_@uid'>1 fois par mois</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq2_@uid' id='freq24_@uid'><label for='freq24_@uid'>1 fois par an ou moins</label>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>"+
"\t\tCourrier électronique<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq3_@uid' id='freq31_@uid'><label for='freq31_@uid'>plusieurs fois par semaine</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq3_@uid' id='freq32_@uid'><label for='freq32_@uid'>1 fois par semaine</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq3_@uid' id='freq33_@uid'><label for='freq33_@uid'>1 fois par mois</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq3_@uid' id='freq34_@uid'><label for='freq34_@uid'>1 fois par an ou moins</label>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>"+
"\t\tFacebook ou autre réseau social<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq4_@uid' id='freq41_@uid'><label for='freq41_@uid'>plusieurs fois par semaine</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq4_@uid' id='freq42_@uid'><label for='freq42_@uid'>1 fois par semaine</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq4_@uid' id='freq43_@uid'><label for='freq43_@uid'>1 fois par mois</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='freq4_@uid' id='freq44_@uid'><label for='freq44_@uid'>1 fois par an ou moins</label>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\tDepuis quand connaissez-vous cette personne ?<br><br>\n"+
"\t\t<input type='number' style='width: 5em;' data-name='duration' min='0' max='11' step='1' placeholder='mois'>mois\n"+
"\t\tet &nbsp;&nbsp;&nbsp;<input type='number' style='width: 5em;' data-name='duration' min='0' max='100' step='1' placeholder='années'>ans.\n"+
"\t</h5>\n"+
"\t<h4 data-icon='r'>Comment êtes-vous « connecté » à cette personne ?</h4>"+
"\t<h5 class='nobold color0'>"+
"\t\tSes coordonnées sont dans votre carnet dadresse<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect1_@uid' id='connect11_@uid'><label for='connect11_@uid'>Oui</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect1_@uid' id='connect12_@uid' checked><label for='connect12_@uid'>Non</label>"+
"\t</h5>"+
"\t<h4 data-icon='d'>Contexte de rencontre</h4>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte0_@uid'> <label for='contexte0_@uid'>De la même famille</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte1_@uid'> <label for='contexte1_@uid'>Grandi ensemble</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte2_@uid'> <label for='contexte2_@uid'>Par mon mari/ma femme/relation amoureuse</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte3_@uid'> <label for='contexte3_@uid'>Par mes parents</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte4_@uid'> <label for='contexte4_@uid'>Par mes enfants</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte5_@uid'> <label for='contexte5_@uid'>Par un ami</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte6_@uid'> <label for='contexte6_@uid'>Comme voisin</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte7_@uid'> <label for='contexte7_@uid'>Par dautres membres de la famille</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte8_@uid'> <label for='contexte8_@uid'>Etudes</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte9_@uid'> <label for='contexte9_@uid'>Etudes supérieures</label><br>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\tSon numéro de mobile est enregistré sur votre mobile (ou vous-mêmes êtes sur le sien)<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect2_@uid' id='connect21_@uid'><label for='connect21_@uid'>Oui</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect2_@uid' id='connect22_@uid' checked><label for='connect22_@uid'>Non</label>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte10_@uid'><label for='contexte10_@uid'>Au travail</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte11_@uid'><label for='contexte11_@uid'>Internet (quel contexte ? préciser <input type='text' data-name='contextSpecial' placeholder='facebook, youtube, twitter, ..'>)</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte12_@uid'><label for='contexte12_@uid'>Par une association (quel type : <input type='text' data-name='contextSpecial' placeholder='aide à la personne, sport, ..'>)</label><br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte_@uid' data-name='context' id='contexte13_@uid'><label for='contexte13_@uid'>Autre : <input type='text' data-name='contextSpecial' placeholder='vacances, ..'></label><br>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\tElle figure parmi vos amis facebook<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect3_@uid' id='connect31_@uid'><label for='connect31_@uid'>Oui</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect3_@uid' id='connect32_@uid' checked><label for='connect32_@uid'>Non</label>"+
"\t</h5>"+
"\t<h4 data-icon='b'>Avec quelle fréquence discutez-vous avec cette personne ?</h4>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\tFace à face<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq0_@uid' data-name='freq0' id='freq01'><label for='freq01'>plusieurs fois par semaine</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq0_@uid' data-name='freq0' id='freq02'><label for='freq02'>1 fois par semaine</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq0_@uid' data-name='freq0' id='freq03'><label for='freq03'>1 fois par mois</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq0_@uid' data-name='freq0' id='freq04'><label for='freq04'>1 fois par an ou moins</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\tElle figure parmi vos amis facebook et vous interagissez avec elle sur ce dispositif régulièrement<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect4_@uid' id='connect41_@uid'><label for='connect41_@uid'>Oui</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect4_@uid' id='connect42_@uid' checked><label for='connect42_@uid'>Non</label>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\tTéléphone ou skype et équivalent<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq1' id='freq11'><label for='freq11'>plusieurs fois par semaine</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq1' id='freq12'><label for='freq12'>1 fois par semaine</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq1' id='freq13'><label for='freq13'>1 fois par mois</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq1' id='freq14'><label for='freq14'>1 fois par an ou moins</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\tVous le suivez sur Twitter<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect5_@uid' id='connect51_@uid'><label for='connect51_@uid'>Oui</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect5_@uid' id='connect52_@uid' checked><label for='connect52_@uid'>Non</label>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\tSMS, et équivalents<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq2' id='freq21'><label for='freq21'>plusieurs fois par semaine</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq2' id='freq22'><label for='freq22'>1 fois par semaine</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq2' id='freq23'><label for='freq23'>1 fois par mois</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq2' id='freq24'><label for='freq24'>1 fois par an ou moins</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\tVous communiquez avec cette personne sur Twitter<br>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect6_@uid' id='connect61_@uid'><label for='connect61_@uid'>Oui</label>"+
"\t\t\t&nbsp&nbsp&nbsp<input type='radio' name='connect6_@uid' id='connect62_@uid' checked><label for='connect62_@uid'>Non</label>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\tCourrier électronique<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq3' id='freq31'><label for='freq31'>plusieurs fois par semaine</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq3' id='freq32'><label for='freq32'>1 fois par semaine</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq3' id='freq33'><label for='freq33'>1 fois par mois</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq3' id='freq34'><label for='freq34'>1 fois par an ou moins</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\tVous communiquez dans autre réseau social : <input type='text' name='connectSpecial1_@uid'>"+
"\t</h5>"+
"\t<h5 class='nobold color0'>\n"+
"\t\tFacebook ou autre réseau social<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq4' id='freq41'><label for='freq41'>plusieurs fois par semaine</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq4' id='freq42'><label for='freq42'>1 fois par semaine</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq4' id='freq43'><label for='freq43'>1 fois par mois</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='freq4' id='freq44'><label for='freq44'>1 fois par an ou moins</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>"+
"\t\tVous communiquez dans un autre dispositif (blogs, jeu vidéo ou autre) : <input type='text' name='connectSpecial2_@uid'>"+
"\t</h5>"+
"</article>");
"\t<h4 data-icon='r'>Comment êtes-vous « connecté » à cette personne ?</h4>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\tSes coordonnées sont dans votre carnet dadresse<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect1' id='connect11'><label for='connect11'>Oui</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect1' id='connect12' checked><label for='connect12'>Non</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\tSon numéro de mobile est enregistré sur votre mobile (ou vous-mêmes êtes sur le sien)<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect2' id='connect21'><label for='connect21'>Oui</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect2' id='connect22' checked><label for='connect22'>Non</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\tElle figure parmi vos amis facebook<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect3' id='connect31'><label for='connect31'>Oui</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect3' id='connect32' checked><label for='connect32'>Non</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\tElle figure parmi vos amis facebook et vous interagissez avec elle sur ce dispositif régulièrement<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect4' id='connect41'><label for='connect41'>Oui</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect4' id='connect42' checked><label for='connect42'>Non</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\tVous le suivez sur Twitter<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect5' id='connect51'><label for='connect51'>Oui</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect5' id='connect52' checked><label for='connect52'>Non</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\tVous communiquez avec cette personne sur Twitter<br>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect6' id='connect61'><label for='connect61'>Oui</label>\n"+
"\t\t&nbsp;&nbsp;&nbsp;<input type='radio' name='connect6' id='connect62' checked><label for='connect62'>Non</label>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\tVous communiquez dans autre réseau social : <input type='text' name='connectSpecial1'>\n"+
"\t</h5>\n"+
"\t<h5 class='nobold color0'>\n"+
"\t\tVous communiquez dans un autre dispositif (blogs, jeu vidéo ou autre) : <input type='text' name='connectSpecial2'>\n"+
"\t</h5>\n"+
"</article>\n");

View File

@ -1,4 +1,4 @@
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"),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()};
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})}};
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()},
!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()};

View File

@ -55,7 +55,7 @@ inputPhoneContact.prototype.fieldsToStorage = function(){
}
// {7} On met à jour le rendu des contacts//
this.storageToFields();
// this.storageToFields();
};

10
js/includes/input-phone-fiche-min.js vendored Normal file
View File

@ -0,0 +1,10 @@
function inputPhoneFiche(a,c){this.container=a;this.nav_container=c}inputPhoneFiche.prototype={container:this.container,nav_container:this.nav_container,selected:0,handler:null};
inputPhoneFiche.prototype.fieldsToStorage=function(){console.log("MINI FICHE: FIELDS TO STORAGE");for(var a=$$("article.fiche-relation-panel .fiche-fiche-relation"),c=0;c<a.length;c++){var b=(new FormDeflater(a[c],["input","select"],["data-name"])).deflate(),d=lsi.get("fiche-fiches","form"+b.uid.value);!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("fiche-fiches","form"+b.uid,b)}};
inputPhoneFiche.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];this.container.innerHTML+=ficheFicheBuilder.build({firstname:a.firstname,lastname:a.lastname,username:a.username,uid:a.uid,age:a.age});$('[data-name="uid"][value="'+
a.uid+'"] ~ h5>span>select').value=a.job;for(var c=$$('[data-name="uid"][value="'+a.uid+'"] ~ h5>input[type="radio"][data-name="sexe"]'),b=0;b<c.length;b++)a.sexe[b]?c[b].setAttribute("checked","checked"):c[b].removeAttribute("checked");c=$$('[data-name="uid"][value="'+a.uid+'"] ~ h5>input[type="radio"][data-name="loc"]');for(b=0;b<c.length;b++)a.loc[b]?c[b].setAttribute("checked","checked"):c[b].removeAttribute("checked")};
inputPhoneFiche.prototype.storageToFields=function(){console.log("MINI FICHE: STORAGE TO FIELDS");var a=lsi.keys("fiche-fiches");this.container.innerHTML="";for(var c=[],b=0;b<a.length;b++){var d=lsi.get("fiche-fiches",a[b]);this.add({uid:d.uid,firstname:d.firstname,lastname:d.lastname,username:d.username,age:d.age,sexe:d.sexe,job:d.job,loc:d.loc});c.push(d.uid)}this.updateNavBar(c)};
inputPhoneFiche.prototype.sync=function(){console.log("MINI FICHE: SYNC");for(var a=lsi.keys("contacts"),c=0;c<a.length;c++){var b=lsi.get("contacts",a[c]),d=lsi.get("fiche-fiches",a[c]);null==d?lsi.set("fiche-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("fiche-fiches",a[c],d))}};
inputPhoneFiche.prototype.nav=function(a){if("undefined"==typeof a||isNaN(a.innerHTML))return!1;for(var c=$$("#nav-fiche > span.active"),b=0;b<c.length;b++)c[b].remClass("active");a.addClass("active");this.selected=parseInt(a.innerHTML)-1;a=$$("article.fiche-relation-panel .fiche-fiche-relation.active");for(b=0;b<a.length;b++)a[b].remClass("active");this.container.children[this.selected].addClass("active")};
inputPhoneFiche.prototype.updateNavBar=function(a){this.nav_container.innerHTML="";for(var c=0;c<a.length;c++){var b=parseInt(a[c])+1;this.nav_container.innerHTML+="<span>"+b+"</span>"}this.check();this.nav(this.nav_container.children[this.selected])};inputPhoneFiche.prototype.check=function(){for(var a=lsi.keys("fiche-fiches"),c=0;c<a.length;c++){var b=lsi.get("fiche-fiches",a[c]),d=!0;(d=(d=d&&!isNaN(parseInt(b.age)))&&"."!=b.job)?this.nav_container.children[b.uid].addClass("done"):this.nav_container.children[b.uid].remClass("done")}};
inputPhoneFiche.prototype.attach=function(a){console.log("MINI FICHE: ATTACH");lsi.createDataset("fiche-fiches");this.storageToFields();this.handler=a;var c=this,c=this;this.nav_container.addEventListener("click",function(a){c.nav(a.target);c.handler()},!1)};

View File

@ -0,0 +1,370 @@
/* [0] Constructeur -> définit le conteneur et le bouton d'ajout
=========================================================*/
function inputPhoneFiche(container, navContainer){
this.container = container;
this.nav_container = navContainer;
}
/* [1] Attributs
=========================================================*/
inputPhoneFiche.prototype = {
container: this.container, // Conteneur des fiche fiches relation
nav_container: this.nav_container, // Conteneur de la navigation entre les fiches
selected: 0, // UID de la FICHE sélectionnée
handler: null // Fonction pour l'enregistrement et la synchronisation des données
};
/* [2] Gestion de l'enregistrement des formulaires fiche fiches relation
=========================================================*/
inputPhoneFiche.prototype.fieldsToStorage = function(){
console.log('MINI FICHE: FIELDS TO STORAGE');
// {1} Pour chaque formulaire de contact présent //
var existingMiniFiches = $$('article.fiche-relation-panel .fiche-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();
// {4} On récupère les données du LSI si elles existent //
var existingData = lsi.get('fiche-fiches', 'form'+deflated.uid.value);
// 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('fiche-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
*
*/
inputPhoneFiche.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];
// {1} Création physique //
this.container.innerHTML += ficheFicheBuilder.build({
firstname: objectData.firstname,
lastname: objectData.lastname,
username: objectData.username,
uid: objectData.uid,
age: objectData.age
// sexe: objectData.sexe[0] ? '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'
});
/* (2) On sélectionne la valeur dans le select (manuellement) */
var createdSelect = $('[data-name="uid"][value="'+objectData.uid+'"] ~ h5>span>select');
createdSelect.value = objectData.job;
/* (3) On sélectionna la valeur des boutons <radio> pour le SEXE */
var sexeCreated = $$('[data-name="uid"][value="'+objectData.uid+'"] ~ h5>input[type="radio"][data-name="sexe"]');
for( var i = 0 ; i < sexeCreated.length ; i++ )
if( objectData.sexe[i] ) sexeCreated[i].setAttribute('checked', 'checked');
else sexeCreated[i].removeAttribute('checked');
/* (4) On sélectionna la valeur des boutons <radio> pour la LOCATION */
var locCreated = $$('[data-name="uid"][value="'+objectData.uid+'"] ~ h5>input[type="radio"][data-name="loc"]');
for( var i = 0 ; i < locCreated.length ; i++ )
if( objectData.loc[i] ) locCreated[i].setAttribute('checked', 'checked');
else locCreated[i].removeAttribute('checked');
};
/* [4] Gestion de l'affichage depuis le 'localStorage'
=========================================================*/
inputPhoneFiche.prototype.storageToFields = function(){
console.log('MINI FICHE: STORAGE TO FIELDS');
// {1} Pour chaque contact du 'localStorage' //
var existingMiniFiches = lsi.keys('fiche-fiches');
// On réinitialise le HTML
this.container.innerHTML = '';
// On récupère les UIDS
var UIDs = [];
for( var i = 0 ; i < existingMiniFiches.length ; i++ ){
// {2} On récupère les informations du contact //
var ficheData = lsi.get('fiche-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
});
UIDs.push(ficheData.uid);
}
// {4} On met à jour la navigation //
this.updateNavBar(UIDs);
};
/* [5] Synchronisation des CONTACT vers les MINI fiches
=========================================================*/
inputPhoneFiche.prototype.sync = function(){
console.log('MINI FICHE: SYNC');
/* (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 ficheData = lsi.get('fiche-fiches', contactUIDs[i]);
/* (5) Cas 1 : la MINI fiche n'exise pas */
if( ficheData == null ){
// On crée la MINI fiche
lsi.set('fiche-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
ficheData.firstname = contactData.firstname;
ficheData.lastname = contactData.lastname;
ficheData.username = contactData.username;
// On met à jour la MINI fiche
lsi.set('fiche-fiches', contactUIDs[i], ficheData);
}
}
};
/* [6] Gestion de la navigation entre les fiches
=========================================================*/
inputPhoneFiche.prototype.nav = function(element){
/* (1) On vérifie que l'élément contient un nombre et existe */
if( typeof element == 'undefined' )
return false;
if( isNaN(element.innerHTML) )
return false;
/* (2) On désactive tous les éléments actifs */
var activeElements = $$('#nav-fiche > span.active');
for( var i = 0 ; i < activeElements.length ; i++ )
activeElements[i].remClass('active');
/* (3) On active l'élément courant */
element.addClass('active');
this.selected = parseInt(element.innerHTML) - 1;
/* (4) On récupère toutes les MINI fiches visibles */
var visible = $$('article.fiche-relation-panel .fiche-fiche-relation.active');
for( var i = 0 ; i < visible.length ; i++ )
visible[i].remClass('active');
/* (5) On affiche la MINI fiche associée */
this.container.children[this.selected].addClass('active');
};
/* [7] Mise à jour de la navigation
=========================================================*/
inputPhoneFiche.prototype.updateNavBar = function(uid_list){
/* (1) On vide la nav bar */
this.nav_container.innerHTML = '';
/* (2) On la re-remplit avec toutes les données */
for( var i = 0 ; i < uid_list.length ; i++ ){
// On rajoute 1 pour la lisibilité
var realIndex = parseInt(uid_list[i]) + 1;
this.nav_container.innerHTML += '<span>'+realIndex+'</span>';
}
/* (3) On montre les MINI fiches qui sont correctes */
this.check();
/* (4) On séléctionne par défaut le dernier sélectionné */
this.nav( this.nav_container.children[this.selected] );
};
/* [8] Vérification des données du formulaire
=========================================================*/
inputPhoneFiche.prototype.check = function(){
/* (1) On parcours toutes les fiches */
var ficheKeys = lsi.keys('fiche-fiches');
for( var i = 0 ; i < ficheKeys.length ; i++ ){
var ficheData = lsi.get('fiche-fiches', ficheKeys[i]);
/* (2) On vérifie le formulaire complet */
var validForm = true;
// 1. L'age est un nombre
// 2. Le métier est défini
validForm = validForm && !isNaN(parseInt(ficheData.age));
validForm = validForm && ficheData.job != '.';
/* (3) Si le formulaire est valide, on le met en valeur dans la barre de navigation (pages) */
if( validForm )
this.nav_container.children[ficheData.uid].addClass('done');
else // sinon, on lui enlève la classe s'il l'a
this.nav_container.children[ficheData.uid].remClass('done');
}
};
/* [9] Point d'amorçage de la gestion des contacts
=========================================================*/
inputPhoneFiche.prototype.attach = function(handler){
console.log('MINI FICHE: ATTACH');
/* (1) On initialise le jeu de données */
lsi.createDataset('fiche-fiches');
/* (2) On charge les fiche fiches depuis la mémoire ('localStorage') */
this.storageToFields();
/* (3) On attache la barre de navigation à une fonction */
// On enregistre le handler
this.handler = handler;
var ptr = this;
/* (2) On attache l'évènement sur le bouton d'ajout de contact */
var ptr = this;
this.nav_container.addEventListener('click', function(e){
// 1. On gère la navigation
ptr.nav(e.target);
// 2. On gere le chargement dynamique
ptr.handler();
}, false);
};

View File

@ -1,9 +1,10 @@
function inputPhoneMini(a,b){this.container=a;this.nav_container=b}inputPhoneMini.prototype={container:this.container,nav_container:this.nav_container,selected:0};
inputPhoneMini.prototype.fieldsToStorage=function(){console.log("MINI FICHE: FIELDS TO STORAGE");for(var a=$$("article.mini-relation-panel .mini-fiche-relation"),b=0;b<a.length;b++){var c=(new FormDeflater(a[b],["input","select"],["data-name"])).deflate(),d=lsi.get("mini-fiches","form"+c.uid.value);!1===d&&(d.username="inconnu",d.firstname="inconnu",d.lastname="inconnu");c={uid:c.uid.value,firstname:d.firstname,lastname:d.lastname,username:d.username,sexe:[c.sexe[0].status,c.sexe[1].status],age:c.age.value,
job:c.job.value,loc:[c.loc[0].status,c.loc[1].status,c.loc[2].status,c.loc[3].status]};lsi.set("mini-fiches","form"+c.uid,c)}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];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",loca:a.loc[0]?"true":"false",locb:a.loc[1]?"true":"false",locc:a.loc[2]?"true":"false",locd:a.loc[3]?"true":"false"});var b=$('[data-name="uid"][value="'+a.uid+'"] ~ h5>span>select');console.log(b);b.value=a.job};
inputPhoneMini.prototype.storageToFields=function(){console.log("MINI FICHE: STORAGE TO FIELDS");var a=lsi.keys("mini-fiches");this.container.innerHTML="";for(var b=[],c=0;c<a.length;c++){var d=lsi.get("mini-fiches",a[c]);this.add({uid:d.uid,firstname:d.firstname,lastname:d.lastname,username:d.username,age:d.age,sexe:d.sexe,job:d.job,loc:d.loc});b.push(d.uid)}this.updateNavBar(b)};
inputPhoneMini.prototype.sync=function(){for(var a=lsi.keys("contacts"),b=0;b<a.length;b++){var c=lsi.get("contacts",a[b]),d=lsi.get("mini-fiches",a[b]);null==d?lsi.set("mini-fiches",a[b],{uid:c.uid,firstname:c.firstname,lastname:c.lastname,username:c.username,sexe:[!0,!1],age:"",job:".",loc:[!0,!1,!1,!1]}):(d.firstname=c.firstname,d.lastname=c.lastname,d.username=c.username,lsi.set("mini-fiches",a[b],d))}};
inputPhoneMini.prototype.show=function(){for(var a=$$("article.mini-relation-panel .mini-fiche-relation.active"),b=0;b<a.length;b++)a[b].remClass("active");this.container.children[this.selected].addClass("active")};inputPhoneMini.prototype.nav=function(a){if(isNaN(a.innerHTML))return!1;for(var b=$$("#nav-mini > span.active"),c=0;c<b.length;c++)b[c].remClass("active");a.addClass("active");this.selected=parseInt(a.innerHTML)-1;this.show()};
inputPhoneMini.prototype.updateNavBar=function(a){this.nav_container.innerHTML="";for(var b=0;b<a.length;b++){var c=parseInt(a[b])+1;this.nav_container.innerHTML+="<span>"+c+"</span>"}this.nav(this.nav_container.children[this.selected])};inputPhoneMini.prototype.attach=function(){console.log("MINI FICHE: ATTACH");lsi.createDataset("mini-fiches");this.storageToFields();var a=this;this.nav_container.addEventListener("click",function(b){a.nav(b.target)},!1)};
function inputPhoneMini(a,c){this.container=a;this.nav_container=c}inputPhoneMini.prototype={container:this.container,nav_container:this.nav_container,selected:0,handler:null};
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);!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)}};
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];this.container.innerHTML+=miniFicheBuilder.build({firstname:a.firstname,lastname:a.lastname,username:a.username,uid:a.uid,age:a.age});$('[data-name="uid"][value="'+
a.uid+'"] ~ h5>span>select').value=a.job;for(var c=$$('[data-name="uid"][value="'+a.uid+'"] ~ h5>input[type="radio"][data-name="sexe"]'),b=0;b<c.length;b++)a.sexe[b]?c[b].setAttribute("checked","checked"):c[b].removeAttribute("checked");c=$$('[data-name="uid"][value="'+a.uid+'"] ~ h5>input[type="radio"][data-name="loc"]');for(b=0;b<c.length;b++)a.loc[b]?c[b].setAttribute("checked","checked"):c[b].removeAttribute("checked")};
inputPhoneMini.prototype.storageToFields=function(){console.log("MINI FICHE: STORAGE TO FIELDS");var a=lsi.keys("mini-fiches");this.container.innerHTML="";for(var c=[],b=0;b<a.length;b++){var d=lsi.get("mini-fiches",a[b]);this.add({uid:d.uid,firstname:d.firstname,lastname:d.lastname,username:d.username,age:d.age,sexe:d.sexe,job:d.job,loc:d.loc});c.push(d.uid)}this.updateNavBar(c)};
inputPhoneMini.prototype.sync=function(){console.log("MINI FICHE: SYNC");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.nav=function(a){if("undefined"==typeof a||isNaN(a.innerHTML))return!1;for(var c=$$("#nav-mini > span.active"),b=0;b<c.length;b++)c[b].remClass("active");a.addClass("active");this.selected=parseInt(a.innerHTML)-1;a=$$("article.mini-relation-panel .mini-fiche-relation.active");for(b=0;b<a.length;b++)a[b].remClass("active");this.container.children[this.selected].addClass("active")};
inputPhoneMini.prototype.updateNavBar=function(a){this.nav_container.innerHTML="";for(var c=0;c<a.length;c++){var b=parseInt(a[c])+1;this.nav_container.innerHTML+="<span>"+b+"</span>"}this.check();this.nav(this.nav_container.children[this.selected])};inputPhoneMini.prototype.check=function(){for(var a=lsi.keys("mini-fiches"),c=0;c<a.length;c++){var b=lsi.get("mini-fiches",a[c]),d=!0;(d=(d=d&&!isNaN(parseInt(b.age)))&&"."!=b.job)?this.nav_container.children[b.uid].addClass("done"):this.nav_container.children[b.uid].remClass("done")}};
inputPhoneMini.prototype.attach=function(a){console.log("MINI FICHE: ATTACH");lsi.createDataset("mini-fiches");this.storageToFields();this.handler=a;var c=this,c=this;this.nav_container.addEventListener("click",function(a){c.nav(a.target);c.handler()},!1)};

View File

@ -10,7 +10,8 @@ function inputPhoneMini(container, navContainer){
inputPhoneMini.prototype = {
container: this.container, // Conteneur des mini fiches relation
nav_container: this.nav_container, // Conteneur de la navigation entre les fiches
selected: 0 // UID de la MINI fiche sélectionnée
selected: 0, // UID de la MINI fiche sélectionnée
handler: null // Fonction pour l'enregistrement et la synchronisation des données
};
@ -29,11 +30,6 @@ inputPhoneMini.prototype.fieldsToStorage = function(){
// {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);
@ -45,6 +41,7 @@ inputPhoneMini.prototype.fieldsToStorage = function(){
existingData.lastname = 'inconnu';
}
// {5} On récupère et met en forme les valeurs du deflater //
var obj = {
uid: deflated.uid.value,
@ -71,7 +68,7 @@ inputPhoneMini.prototype.fieldsToStorage = function(){
}
// {7} On met à jour le rendu //
this.storageToFields();
// this.storageToFields();
};
@ -106,30 +103,38 @@ inputPhoneMini.prototype.add = function(objectData){
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',
age: objectData.age
// sexe: objectData.sexe[0] ? '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'
// loca: objectData.loc[0] ? 'true' : 'false',
// locb: objectData.loc[1] ? 'true' : 'false',
// locc: objectData.loc[2] ? 'true' : 'false',
// locd: objectData.loc[3] ? 'true' : 'false'
});
/* (2) On sélectionne la valeur dans le select (manuellement) */
var createdSelect = $('[data-name="uid"][value="'+objectData.uid+'"] ~ h5>span>select');
console.log(createdSelect);
createdSelect.value = objectData.job;
/* (3) On sélectionna la valeur des boutons <radio> pour le SEXE */
var sexeCreated = $$('[data-name="uid"][value="'+objectData.uid+'"] ~ h5>input[type="radio"][data-name="sexe"]');
for( var i = 0 ; i < sexeCreated.length ; i++ )
if( objectData.sexe[i] ) sexeCreated[i].setAttribute('checked', 'checked');
else sexeCreated[i].removeAttribute('checked');
/* (4) On sélectionna la valeur des boutons <radio> pour la LOCATION */
var locCreated = $$('[data-name="uid"][value="'+objectData.uid+'"] ~ h5>input[type="radio"][data-name="loc"]');
for( var i = 0 ; i < locCreated.length ; i++ )
if( objectData.loc[i] ) locCreated[i].setAttribute('checked', 'checked');
else locCreated[i].removeAttribute('checked');
};
@ -192,6 +197,8 @@ inputPhoneMini.prototype.storageToFields = function(){
/* [5] Synchronisation des CONTACT vers les MINI fiches
=========================================================*/
inputPhoneMini.prototype.sync = function(){
console.log('MINI FICHE: SYNC');
/* (1) On récupère les clés de tous les CONTACTS */
var contactUIDs = lsi.keys('contacts');
@ -244,24 +251,14 @@ inputPhoneMini.prototype.sync = function(){
/* [6] Gestion de la visibilité des MINI fiches (pages)
=========================================================*/
inputPhoneMini.prototype.show = function(){
/* (1) On récupère toutes les MINI fiches visibles */
var visible = $$('article.mini-relation-panel .mini-fiche-relation.active');
for( var i = 0 ; i < visible.length ; i++ )
visible[i].remClass('active');
/* (2) On affiche la fiche associée */
this.container.children[this.selected].addClass('active');
};
/* [7] Gestion de la navigation entre les fiches
/* [6] Gestion de la navigation entre les fiches
=========================================================*/
inputPhoneMini.prototype.nav = function(element){
/* (1) On vérifie que l'élément contient un nombre */
/* (1) On vérifie que l'élément contient un nombre et existe */
if( typeof element == 'undefined' )
return false;
if( isNaN(element.innerHTML) )
return false;
@ -274,8 +271,13 @@ inputPhoneMini.prototype.nav = function(element){
element.addClass('active');
this.selected = parseInt(element.innerHTML) - 1;
/* (4) On affiche la MINI fiche associée */
this.show();
/* (4) On récupère toutes les MINI fiches visibles */
var visible = $$('article.mini-relation-panel .mini-fiche-relation.active');
for( var i = 0 ; i < visible.length ; i++ )
visible[i].remClass('active');
/* (5) On affiche la MINI fiche associée */
this.container.children[this.selected].addClass('active');
};
@ -284,7 +286,7 @@ inputPhoneMini.prototype.nav = function(element){
/* [8] Mise à jour de la navigation
/* [7] Mise à jour de la navigation
=========================================================*/
inputPhoneMini.prototype.updateNavBar = function(uid_list){
/* (1) On vide la nav bar */
@ -299,16 +301,50 @@ inputPhoneMini.prototype.updateNavBar = function(uid_list){
}
/* (3) On séléctionne par défaut */
/* (3) On montre les MINI fiches qui sont correctes */
this.check();
/* (4) On séléctionne par défaut le dernier sélectionné */
this.nav( this.nav_container.children[this.selected] );
};
/* [8] Vérification des données du formulaire
=========================================================*/
inputPhoneMini.prototype.check = function(){
/* (1) On parcours toutes les fiches */
var miniKeys = lsi.keys('mini-fiches');
for( var i = 0 ; i < miniKeys.length ; i++ ){
var miniData = lsi.get('mini-fiches', miniKeys[i]);
/* (2) On vérifie le formulaire complet */
var validForm = true;
// 1. L'age est un nombre
// 2. Le métier est défini
validForm = validForm && !isNaN(parseInt(miniData.age));
validForm = validForm && miniData.job != '.';
/* (3) Si le formulaire est valide, on le met en valeur dans la barre de navigation (pages) */
if( validForm )
this.nav_container.children[miniData.uid].addClass('done');
else // sinon, on lui enlève la classe s'il l'a
this.nav_container.children[miniData.uid].remClass('done');
}
};
/* [9] Point d'amorçage de la gestion des contacts
=========================================================*/
inputPhoneMini.prototype.attach = function(){
inputPhoneMini.prototype.attach = function(handler){
console.log('MINI FICHE: ATTACH');
/* (1) On initialise le jeu de données */
@ -318,7 +354,17 @@ inputPhoneMini.prototype.attach = function(){
this.storageToFields();
/* (3) On attache la barre de navigation à une fonction */
// On enregistre le handler
this.handler = handler;
var ptr = this;
this.nav_container.addEventListener('click', function(e){ ptr.nav(e.target); }, false);
/* (2) On attache l'évènement sur le bouton d'ajout de contact */
var ptr = this;
this.nav_container.addEventListener('click', function(e){
// 1. On gère la navigation
ptr.nav(e.target);
// 2. On gere le chargement dynamique
ptr.handler();
}, false);
};

View File

@ -171,8 +171,8 @@ FormDeflater.prototype = {
/* (1) Instanciation */
/*HIDDEN*/// var instance = new FormDeflater(
/*HIDDEN*/// document.getElementById('myform'),
/*HIDDEN*/// ['br', 'li'], // éléments à prendre en compte (tagName)
/*HIDDEN*/// ['id', 'name', 'data-elementname'] // Attributs par ordre de priorité
/*HIDDEN*/// ['input', 'select'], // éléments à prendre en compte (tagName)
/*HIDDEN*/// ['id', 'name', 'data-elementname'] // Attributs par ordre de priorité
/*HIDDEN*/// );
/*HIDDEN*///
/* (2) On récupère l'objet */

View File

@ -68,6 +68,8 @@
</article>
<h4 data-icon='+' class='add-contact' style='cursor: pointer;'>Ajouter un contact</h4>
<span data-space></span>
<span data-space></span>
<span data-space></span>
@ -83,6 +85,8 @@
</article>
<span data-space></span>
<span data-space></span>
<span data-space></span>
@ -93,245 +97,7 @@
<div class='arrow-container line'></div>
<article class='relation-panel'>
<article class='fiche-relation'>
<span data-space></span>
<h4 data-icon='o' class='color2'>Prénom1 Nom1 (Pseudo1)</h4>
<h5 class='nobold color0'>
<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>
<h5 class='nobold color0'>
<input type='number' min='5' max='120' data-name='age' placeholder='Age'>
</h5>
<h5 class='nobold color0'>
<span class='select-container'><select data-name='job'>
<option value='.' disabled selected>Dernière profession exercée:</option>
<option value='0'>Inconnue</option>
<option value='1-' disabled>Agriculateur exploitants</option>
<option value='10'>- Agriculteurs exploitants (Agriculteurs, maraîchers, viticulteurs…)</option>
<option value='2-' disabled>Artisans, commerçants et chefs d'entreprises</option>
<option value='21'>- Artisans (Maçons, électriciens, couturiers, boulangers, garagistes, coiffeurs…)</option>
<option value='22'>- Commerçants et assimilés (Commerçants en détail ou en gros, buralistes, cafetiers, agents immobiliers…)</option>
<option value='23'>- Chefs d'entreprise de 10 salariés ou plus</option>
<option value='3-' disabled>Cadres et professions intellectuelles supérieures</option>
<option value='31'>- Professions libérales et assimilés (Médecins, avocats, notaires, architectes libéraux…)</option>
<option value='32'>- Cadres de la fonction publique, professions intellectuelles et artistiques (Personnels administratifs</option>
<option class='pad' value='32'>de catégorie A, professeurs de lenseignement secondaire ou supérieur, médecins hospitaliers, artistes…)</option>
<option value='36'>- Cadres d'entreprise (Cadres administratifs, cadres commerciaux, ingénieurs…)</option>
<option value='4-' disabled>Professions Intermédiaires</option>
<option value='41'>- Professions intermédiaires de l'enseignement, de la santé, de la fonction publique et assimilés </option>
<option class='pad' value='41'>(Personnels administratifs de catégorie B, instituteurs, infirmiers, travailleurs sociaux…)</option>
<option value='46'>- Professions intermédiaires administratives et commerciales des entreprises (Comptables, chargés de clientèles…)</option>
<option value='47'>- Techniciens (Techniciens détudes, techniciens de contrôle, dessinateurs en bâtiment, géomètres…)</option>
<option value='48'>- Contremaîtres, agents de maîtrise (Conducteurs de travaux, chefs déquipe…)</option>
<option value='5-' disabled>Employés</option>
<option value='51'>- Employés de la fonction publique (Personnels de catégorie C, agents administratifs, agents de service…)</option>
<option value='54'>- Employés administratifs d'entreprise (Secrétaires, agents daccueil…)</option>
<option value='55'>- Employés de commerce (Vendeurs, caissiers…)</option>
<option value='56'>- Personnels des services directs aux particuliers (Serveurs, coiffeurs, assistantes maternelles…)</option>
<option value='6-' disabled>Ouvriers</option>
<option value='61'>- Ouvriers qualifiés de type industriel ou artisanal (Mécaniciens, chauffeurs, cuisiniers…)</option>
<option value='66'>- Ouvriers non qualifiés de type industriel ou artisanal (Ouvrier de production, manœuvres…)</option>
<option value='69'>- Ouvriers agricoles (Bergers, ouvriers de la viticulture, bûcherons, ouvrier forestiers…)</option>
<option value='7-' disabled>Retraités</option>
<option value='71'>- Anciens agriculteurs exploitants</option>
<option value='72'>- Anciens artisans, commerçants, chefs d'entreprise</option>
<option value='73'>- Anciens cadres</option>
<option value='74'>- Anciennes professions intermédiaires</option>
<option value='75'>- Anciens employés</option>
<option value='76'>- Anciens ouvriers</option>
<option value='8-' disabled>Sans activité professionnelle</option>
<option value='81'>- Chômeurs n'ayant jamais travaillé</option>
<option value='82'>- Inactifs divers (autres que retraités)</option>
</select></span>
</h5>
<h5 class='nobold color0'>
Situation familiale:<br>
<h5 class='nobold color0'>
&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' 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='famsitC_0'><label for='famsitC_0'>En couple avec enfants</label>
</h5>
<h5 class='nobold color0'>
<span class='select-container'><select data-name='studies'>
<option value='.' disabled selected>Niveau d'études maximal:</option>
<option value='0'>Inconnue</option>
<option value='01'>- Pas de scolarité</option>
<option value='02'>- Aucun diplôme mais scolarité jusqu'en école primaire ou au collège</option>
<option value='03'>- Aucun diplôme mais scolarité au-delà du collège</option>
<option value='04'>- Certificat d'études primaires (CEP)</option>
<option value='05'>- BEPC, brevet élémentaire, brevet des collèges</option>
<option value='06'>- Certificat d'aptitudes professionnelles (CAP), brevet de compagnon, y compris CAPA</option>
<option value='07'>- Brevet d'études professionnelles (BEP), y compris BEPA et diplômes agricoles (BAA, BPA)</option>
<option value='07' class='pad'>Diplômes sociaux (aide-soignante, auxiliaire de puériculture, travailleuse familiale)</option>
<option value='08'>- Baccalauréat général, brevet supérieur</option>
<option class='pad' value='08'>BAC ( L, ES, S ou A, B , C, D, D, E )</option>
<option value='09'>- Bac technologique ou professionnel, brevet professionnel ou de technicien</option>
<option class='pad' value='09'>BAC (STI, STL, SMS, STT ou F, G, H)</option>
<option class='pad' value='09'>BEC, BEI, BEH, capacité en droit</option>
<option class='pad' value='09'>Brevet de technicien agricole (BTA)</option>
<option value='10'>- Diplôme universitaire de 1er cycle</option>
<option class='pad' value='10'>BTS, DUT, DEUG</option>
<option class='pad' value='10'>Diplôme des professions sociales ou de santé, d'infirmier(ère)</option>
<option class='pad' value='10'>Diplôme universitaire propédeutique, DUEL, DUES, DEUG, PCEM</option>
<option value='11'>- Diplôme universitaire de 2ème ou 3ème cycle</option>
<option class='pad' value='11'>MASTER, DOCTORAT (y compris médecine, pharmacie, dentaire),</option>
<option class='pad' value='11'>Maîtrise, DEA, DESS,</option>
<option class='pad' value='11'>CAPES, CAPET, agrégation</option>
<option class='pad' value='11'>Diplôme d'ingénieur, d'une grande école, etc.</option>
</select></span>
</h5>
<h4 data-icon='a'>Type de relation</h4>
<h5 class='nobold color0'>
&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype' id='reltype0' checked><label for='reltype0'>Père, mère ou équivalent</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype' id='reltype1'><label for='reltype1'>Frère ou soeur</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype' id='reltype2'><label for='reltype2'>Autre membre de la famille</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype' id='reltype3'><label for='reltype3'>Relation amoureuse</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype' id='reltype4'><label for='reltype4'>Collègue</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype' id='reltype5'><label for='reltype5'>Voisin</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype' id='reltype6'><label for='reltype6'>Ami</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype' id='reltype7'><label for='reltype7'>Copain</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='reltype' id='reltype8'><label for='reltype8'>Autre : <input type='text' id='reltypeSpecial' placeholder='coéquipier de tennis, ..'></label><br>
</h5>
<h4 data-icon='m'> habite t-elle/il ?</h4>
<h5 class='nobold color0'>
<input type='text' data-name='city' placeholder='Ville'>
</h5>
<h5 class='nobold color0'>
&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' 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='locC_0'><label for='locC_0'>de 15 à 60 minutes</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='loc' data-name='loc' id='locD_0'><label for='locD_0'>+ d'une heure</label><br>
</h5>
<h5 class='nobold color0'>
Depuis quand connaissez-vous cette personne ?<br><br>
<input type='number' style='width: 5em;' data-name='durationM' min='0' max='11' step='1' placeholder='mois'>mois
et &nbsp;&nbsp;&nbsp;<input type='number' style='width: 5em;' data-name='durationY' min='0' max='100' step='1' placeholder='années'>ans.
</h5>
<h4 data-icon='d'>Contexte de rencontre</h4>
<h5 class='nobold color0'>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte0'> <label for='contexte0'>De la même famille</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte1'> <label for='contexte1'>Grandi ensemble</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte2'> <label for='contexte2'>Par mon mari/ma femme/relation amoureuse</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte3'> <label for='contexte3'>Par mes parents</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte4'> <label for='contexte4'>Par mes enfants</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte5'> <label for='contexte5'>Par un ami</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte6'> <label for='contexte6'>Comme voisin</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte7'> <label for='contexte7'>Par dautres membres de la famille</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte8'> <label for='contexte8'>Etudes</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte9'> <label for='contexte9'>Etudes supérieures</label><br>
</h5>
<h5 class='nobold color0'>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte10'><label for='contexte10'>Au travail</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte11'><label for='contexte11'>Internet (quel contexte ? préciser <input type='text' id='contexteSpecial1' placeholder='facebook, youtube, twitter, ..'>)</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte12'><label for='contexte12'>Par une association (quel type : <input type='text' id='contexteSpecial2' placeholder='aide à la personne, sport, ..'>)</label><br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='contexte' id='contexte13'><label for='contexte13'>Autre : <input type='text' id='contexteSpecial3' placeholder='vacances, ..'></label><br>
</h5>
<h4 data-icon='b'>Avec quelle fréquence discutez-vous avec cette personne ?</h4>
<h5 class='nobold color0'>
Face à face<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq0' id='freq01'><label for='freq01'>plusieurs fois par semaine</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq0' id='freq02'><label for='freq02'>1 fois par semaine</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq0' id='freq03'><label for='freq03'>1 fois par mois</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq0' id='freq04'><label for='freq04'>1 fois par an ou moins</label>
</h5>
<h5 class='nobold color0'>
Téléphone ou skype et équivalent<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq1' id='freq11'><label for='freq11'>plusieurs fois par semaine</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq1' id='freq12'><label for='freq12'>1 fois par semaine</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq1' id='freq13'><label for='freq13'>1 fois par mois</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq1' id='freq14'><label for='freq14'>1 fois par an ou moins</label>
</h5>
<h5 class='nobold color0'>
SMS, et équivalents<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq2' id='freq21'><label for='freq21'>plusieurs fois par semaine</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq2' id='freq22'><label for='freq22'>1 fois par semaine</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq2' id='freq23'><label for='freq23'>1 fois par mois</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq2' id='freq24'><label for='freq24'>1 fois par an ou moins</label>
</h5>
<h5 class='nobold color0'>
Courrier électronique<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq3' id='freq31'><label for='freq31'>plusieurs fois par semaine</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq3' id='freq32'><label for='freq32'>1 fois par semaine</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq3' id='freq33'><label for='freq33'>1 fois par mois</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq3' id='freq34'><label for='freq34'>1 fois par an ou moins</label>
</h5>
<h5 class='nobold color0'>
Facebook ou autre réseau social<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq4' id='freq41'><label for='freq41'>plusieurs fois par semaine</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq4' id='freq42'><label for='freq42'>1 fois par semaine</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq4' id='freq43'><label for='freq43'>1 fois par mois</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='freq4' id='freq44'><label for='freq44'>1 fois par an ou moins</label>
</h5>
<h4 data-icon='r'>Comment êtes-vous « connecté » à cette personne ?</h4>
<h5 class='nobold color0'>
Ses coordonnées sont dans votre carnet dadresse<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect1' id='connect11'><label for='connect11'>Oui</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect1' id='connect12' checked><label for='connect12'>Non</label>
</h5>
<h5 class='nobold color0'>
Son numéro de mobile est enregistré sur votre mobile (ou vous-mêmes êtes sur le sien)<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect2' id='connect21'><label for='connect21'>Oui</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect2' id='connect22' checked><label for='connect22'>Non</label>
</h5>
<h5 class='nobold color0'>
Elle figure parmi vos amis facebook<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect3' id='connect31'><label for='connect31'>Oui</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect3' id='connect32' checked><label for='connect32'>Non</label>
</h5>
<h5 class='nobold color0'>
Elle figure parmi vos amis facebook et vous interagissez avec elle sur ce dispositif régulièrement<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect4' id='connect41'><label for='connect41'>Oui</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect4' id='connect42' checked><label for='connect42'>Non</label>
</h5>
<h5 class='nobold color0'>
Vous le suivez sur Twitter<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect5' id='connect51'><label for='connect51'>Oui</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect5' id='connect52' checked><label for='connect52'>Non</label>
</h5>
<h5 class='nobold color0'>
Vous communiquez avec cette personne sur Twitter<br>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect6' id='connect61'><label for='connect61'>Oui</label>
&nbsp;&nbsp;&nbsp;<input type='radio' name='connect6' id='connect62' checked><label for='connect62'>Non</label>
</h5>
<h5 class='nobold color0'>
Vous communiquez dans autre réseau social : <input type='text' name='connectSpecial1'>
</h5>
<h5 class='nobold color0'>
Vous communiquez dans un autre dispositif (blogs, jeu vidéo ou autre) : <input type='text' name='connectSpecial2'>
</h5>
</article>
</article>
</section>

View File

@ -1,3 +1,4 @@
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: UPDATING");miniManager.fieldsToStorage();contactManager.fieldsToStorage();miniManager.sync();miniManager.storageToFields();contactManager.storageToFields()}
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"]'));
subjectManager.attach();contactManager=new inputPhoneContact($("article.contact-panel"),$("h4.add-contact"));contactManager.attach(dynamicUpdate);miniManager=new inputPhoneMini($("article.mini-relation-panel"),$("#nav-mini"));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);
subjectManager.attach();contactManager=new inputPhoneContact($("article.contact-panel"),$("h4.add-contact"));contactManager.attach(dynamicUpdate);miniManager=new inputPhoneMini($("article.mini-relation-panel"),$("#nav-mini"));miniManager.attach(dynamicUpdate);miniManager=new inputPhoneMini($("article.relation-panel"),$("#nav-mini"));miniManager.attach(dynamicUpdate)})})})});
importCallLog.addEventListener("change",function(b){api.send({path:"upload/call_log",file:importCallLog.files[0]},function(a){console.log(a);0==a.ModuleError&&importCallLog.addClass("active")})},!1);

View File

@ -134,12 +134,18 @@ include('/js/includes/input-phone-fiche.js', function(){
$('#nav-mini')
);
miniManager.attach();
miniManager.attach(dynamicUpdate);
/* [6] Gestion des fiches relation
=========================================================*/
/* (1) On crée une instance du gestionnaire des fiches relation */
miniManager = new inputPhoneMini(
$('article.relation-panel'),
$('#nav-mini')
);
miniManager.attach(dynamicUpdate);