synergiser : essai

-->

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script src="js/foundation.min.js"></script>

<script src="js/jscolor.js"></script>

<!--

= Imports Scripts pour d3 js

-->

<script src="js/vendor/jquery.js"></script>

<script src="js/foundation.min.js"></script>

<script src="js/foundation/foundation.reveal.js"></script>

<script src="js/jquery.autosize.min.js"></script>



<script src="css-tricks.com/examples/ViewSourceButton?/prettify/prettify.js"></script>

<link rel="stylesheet" href="css-tricks.com/examples/ViewSourceButton?/css/prettify.css">

<script>

$(document).foundation();

$(document).ready(function() {

var $erreur = $('#erreur'),

$resultat = $('#resultat'),

$erreur_donnees = $('#erreur_donnees'),

$resultat_donnees = $('#resultat_donnees'),

$erreur_txt = $('#erreur_txt'),

$resultat_txt = $('#resultat_txt'),

$test_co = $('#test_connexion'),

$valider = $('#valider_donnees'),

$bt_plus = $('.add'),

$valid_constel = $('#valider_constellation'),

$bt_moins = $('.del'),

$bd_hote = $('#bd_hote'),

$bd_nom = $('#bd_nom'),

$bd_user = $('#bd_user'),

$champ = $('.champ'),

$btn_radio = $('.type_rel'),

$chk_box = $('.type_niv'),

$btn_txt = $('#valide_txt'),

$btn_add_champ = $('.add_champ'),

$btn_del_champ = $('.del_champ'),

$bd_pswd = $('#bd_pswd');

$('header .logo').animate({ letterSpacing: '10px' }, 500);

setTimeout(function() { $('header .logo').removeAttr("style"); }, 1000);

Ajuster la taille des textarea

$('textarea').autosize();

affichage du formulaire adéquat selon la source de données choisie dans la liste déroulante

$('#type_bd').change(function() {

$('#formgene-etape3').slideUp();

$('#formgene-etapefinale').slideUp();

$('#div_constellation').slideUp();

$('html, body').animate({

scrollTop: $("#formgene").offset().top

}, 1000);

if ($(this).val()

""){

$('#formgene-etape1').slideUp();
$('#formgene-txt').slideUp();

}

else if ($(this).val()

"mysql"){

$('#formgene-txt').slideUp();

$('#formgene-etape1').slideDown();

}

else if($(this).val()"txt"){

$('#formgene-etape1').slideUp();
$('#formgene-txt').slideDown();

}

});

Changement de la couleur des cercles feuilles de la constellation par rapport au choix de la palette

A COMPLETER

/*$('#feuille_couleur').change(function() {

var couleur = this.value;

})*/

= GESTION DE L'AJOUT DE CHAMPS SUPPLEMENTAIRES POUR LES CERCLES FEUILLES

la fonction récupère l'id du bouton cliqué pour ajouter des champs à la table correspondante

$btn_add_champ.click(function(e){

var el = e.target||event.srcElement;

var id = el.id;

if(id
"btn_add_champ2"){

var scntDiv = $('#p_scents2');

var i = $('#p_scents2 p').size() + 1;

$('<p><label for="p_scnts"><input type="text" id="p_scnt2_'+i+'" size="20" name="p_scnt_' + i +'" value= placeholder="Champ supplémentaire" />
').appendTo(scntDiv); } else if(id=="btn_add_champ3"){ var scntDiv = $('#p_scents3'); var i = $('#p_scents3 p').size() + 1; $('

}

else if(id
"btn_add_champ4"){

var scntDiv = $('#p_scents4');

var i = $('#p_scents4 p').size() + 1;

$('<p><label for="p_scnts"><input type="text" id="p_scnt4_'+i+'" size="20" name="p_scnt_' + i +'" value="" placeholder="Champ supplémentaire" /></label></p>').appendTo(scntDiv);

}

})

$btn_del_champ.click(function(e){

var el = e.target||event.srcElement;

var id = el.id;

if(id
"btn_del_champ2"){

var i = $('#p_scents2 p').size();

$('#p_scnt2_'+i).parents('p').remove();

}

else if(id
"btn_del_champ3"){

var i = $('#p_scents3 p').size();

$('#p_scnt3_'+i).parents('p').remove();

}

else if(id"btn_del_champ4"){

var i = $('#p_scents4 p').size();

$('#p_scnt4_'+i).parents('p').remove();

}

})

Lorsque je clique sur "+" (ajout d'un niveau ) : ouverture des formulaires relatifs à l'ajout d'une table

$bt_plus.click(function(e) {

var el = e.target||event.srcElement;

var id = el.id;

if(id
"btn_plus1"){

$('html, body').animate({

scrollTop: $("#formgene-etape2").offset().top

}, 1000);

$('#formniv2').slideDown();

$('#btn_plus1').hide();

}

else if(id "btn_plus2"){

$('html, body').animate({

scrollTop: $("#formniv2").offset().top

}, 1000);

$('#formniv3').slideDown();

$('#btn_plus2').hide();

$('#btn_moins2').hide();

$('#est_feuille2').slideUp();

}

else if(id
"btn_plus3"){

$('html, body').animate({

scrollTop: $("#formniv3").offset().top

}, 1000);

$('#formniv4').slideDown();

$('#btn_plus3').hide();

$('#btn_moins3').hide();

$('#est_feuille3').slideUp();

}

})

Lorsque je soumets le fichier .txt

$('input[type="file"]').change(function(a){

lecture du fichier

var reader = new FileReader?();

reader.onload = function(e) {

var text = e.target.result;

var lines = text.split("\n");

var pile = []

reconstruction du JSON

var addToArray = function(t, path) {

var item = path.slice(-1)[0] Dernier element, on l'insere dans t[...path]

let r = t

for (var i = 0; i < path.length - 1; i++) {

r = r.children.find(function(c) {

return c.name
path[i]
})

}

r.children.push({

name: item,

children: []

})

}

var depth = 0

var pile = []

var data = {

name: "root",

children: []

}

lines.forEach(function(line) {

var title = line.replace(/\t/g, "");

var nTab = line.length - title.length;

var diff = nTab - pile.length

for (var i = diff; i <= 0; i++) {

pile.pop()

}

pile.push(title)

addToArray(data, pile.slice())

})

renderConstellation(data)

}

reader.readAsText(a.target.files[0]);

});

Lorsque je soumets le test de connexion

$test_co.click(function(e) {

e.preventDefault();

$erreur.css('display','none');

$resultat.css('display','none');

var champ = $('.champ');

champ.css({

borderColor:'#cccccc'

});

Vérification que les champs adéquats sont bien remplis

var src = $('#type_bd option:selected').val();

var b_hote = verifier($bd_hote, "test_co");

var b_bdnom = verifier($bd_nom, "test_co");

var b_user = verifier($bd_user, "test_co");

if(b_hote && b_bdnom && b_user){

$.post(

'traitement_generateur.php',

{

envoi des données

source : src,

hote : $bd_hote.val(),

bdname : $bd_nom.val(),

bduser : $bd_user.val(),

bdpswd : $bd_pswd.val(),

bouton : "btn_connexion"

},

function(data){

if(data
"Success"){ connexion réussie

$resultat.html("<p>La connexion avec votre base de données a été établie avec succès !</p>");

$resultat.css('display','block');

le formulaire de connexion à la base ne peut plus être changé

$("#bd_hote").attr('disabled','disabled');

$("#bd_nom").attr('disabled','disabled');

$("#bd_user").attr('disabled','disabled');

$("#bd_pswd").attr('disabled','disabled');

$(test_connexion).attr("disabled", true);

$("#type_bd").attr('disabled','disabled');

$('html, body').animate({

scrollTop: $("#formgene").offset().top}, 1000);

$('#formgene-etape2').slideUp();

$('#formgene-etape2').slideDown();

}

else { erreur avec la connexion

$erreur.html("<p>Un problème est survenu lors de la connexion. Veuillez vérifier vos informations de connexion. <br> "+data+"</p>");

$erreur.css('display','block');

}

},

'text' Format des données reçues

);

}

});

Lorsque je soumets les données afin de générer la constellation

A RE STRUCTURER

$valider.click(function(e){

e.preventDefault();

$erreur_donnees.css('display','none');

$resultat_donnees.css('display','none');

var b_niv2 = false,

b_niv3 = false,

b_niv4 = false,

dataOk = false;

nb_niv = 1; contrôle le nombre de niveaux (profondeur) au niveau du JSON

var champ = $('.champ');

champ.css({

borderColor:'#cccccc'

});

Vérification que les champs sont bien remplis (vérification partielle) + détermine la profondeur

A compléter avec la vérification de tous les champs

var src = $('#type_bd option:selected').val();

var b_sphere0 = verifier($('#niv0'), "valider_donnees");

var b_sphere1 = verifier($('#niv1'), "valider_donnees");

var b_id1 = verifier($('#idniv1'), "valider_donnees");

var b_titre1 = verifier($('#titreniv1'), "valider_donnees");

if($('#formniv2').css('display') != 'none'){

b_niv2 = true;

var b_sphere2 = verifier($('#niv2'), "valider_donnees");

var b_id2 = verifier($('#idniv2'), "valider_donnees");

var b_titre2 = verifier($('#titreniv2'), "valider_donnees");

nb_niv = 2;

feuille = $('#p_scents2 p');

feuille = '#p_scents2';

if($('#formniv3').css('display') != 'none'){

b_niv3 = true;

var b_sphere3 = verifier($('#niv3'), "valider_donnees");

var b_id3 = verifier($('#idniv3'), "valider_donnees");

var b_titre3 = verifier($('#titreniv3'), "valider_donnees");

nb_niv = 3;

feuille = $('#p_scents3 p');

feuille = '#p_scents3';

if($('#formniv4').css('display') != 'none'){

b_niv4 = true;

var b_sphere4 = verifier($('#niv4'), "valider_donnees");

var b_id4 = verifier($('#idniv4'), "valider_donnees");

var b_titre4 = verifier($('#titreniv4'), "valider_donnees");

nb_niv = 4;

feuille = $('#p_scents4 p');

feuille = '#p_scents4';

}

}

}

var nb_champs = count_champ(feuille);

Vérification du remplissage des champs obligatoires, selon le nombre de sphère à générer

var liste_donnees = "";

if(b_sphere0 && b_sphere1 && b_id1 && b_titre1){

if(!b_niv2){

dataOk = true;

}

else {

if(b_sphere2 && b_id2 && b_titre2){

if(!b_niv3){

dataOk = true;

}

else{

if(b_sphere3 && b_id3 && b_titre3){

if(!b_niv4){

dataOk = true;

}

else{

if(b_sphere4 && b_id4 && b_titre4){

dataOk = true;

}

}

}

}

}

}

}

if(dataOk){

$.post(

'traitement_generateur.php',

{

= envoi des données récupérées dans tous les champs

= A Compléter avec les champs supplémentaires ajoutés

bouton : "btn_validation",

source : src,

hote : $bd_hote.val(),

bdname : $bd_nom.val(),

bduser : $bd_user.val(),

bdpswd : $bd_pswd.val(),

nom_root : $("#niv0").val(),

nom_sphere_1 : $('#niv1').val(),

id_sphere_1 : $('#idniv1').val(),

titre_sphere_1 : $('#titreniv1').val(),

nom_sphere_2 : $('#niv2').val(),

id_sphere_2 : $('#idniv2').val(),

titre_sphere_2 : $('#titreniv2').val(),

nom_sphere_3 : $('#niv3').val(),

id_sphere_3 : $('#idniv3').val(),

titre_sphere_3 : $('#titreniv3').val(),

nom_sphere_4 : $('#niv4').val(),

id_sphere_4 : $('#idniv4').val(),

titre_sphere_4 : $('#titreniv4').val(),

nom_relation_2 : $('#tablerelniv2').val(), relation n..n

id1_relation_2 : $('#tableid1relniv2').val(), relation n..n

id2_relation_2 : $('#tableid2relniv2').val(), relation n..n

id_relation_2 : $('#idrelniv2').val(), relation 1..n

nom_relation_3 : $('#tablerelniv3').val(), relation n..n

id1_relation_3 : $('#tableid1relniv3').val(), relation n..n

id2_relation_3 : $('#tableid2relniv3').val(), relation n..n

id_relation_3 : $('#idrelniv3').val(), relation 1..n

nom_relation_4 : $('#tablerelniv4').val(), relation n..n

id1_relation_4 : $('#tableid1relniv4').val(), relation n..n

id2_relation_4 : $('#tableid2relniv4').val(), relation n..n

id_relation_4 : $('#idrelniv4').val(), relation 1..n

nombre_niveau : nb_niv

Fonction qui affiche la constellation à partir du "root" (en JSON) passé en paramètre

function renderConstellation(root) {

$('#div_constellation').slideDown(); affichage de la zone d'affichage pour la constellation

var margin = 1,

diameter = 900; diamètre minimum du cercle "root"

if(window.innerWidth >= 1700){ si grand écran, root plus grand

diameter = window.innerWidth/1.7;

}

var color = d3.scale.linear()

.domain([-1, 5]) plages de couleur (du plus clair au plus foncé)

.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) Pour le dégradé

.interpolate(d3.interpolateHcl);

var pack = d3.layout.pack()

.padding(7) espacement entre les cercles

.size([diameter - margin, diameter - margin]) taille cercle root dans son conteneur

.value(function (d) { taille des feuilles

if ( typeof d.size !
'undefined'){

return d.size; cas où l'utilisateur a saisie une taille pour les cercles

}

else {

return Math.floor(Math.random()*501); taille aléatoire sinon

}

});

var svg = d3.select("#svgdiv").append("svg")

.attr("width", diameter) largeur du "rectangle" contenant le cercle root

.attr("height", diameter) hauteur du "rectangle" contenant le cercle root

.attr("id","carto")

.append("g") pour grouper

.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

Définition des tooltips

var myTooltip = d3.select("#svgdiv")

.append("div")

.attr("class", "myTooltip")

.style("opacity", 0); elles sont invisibles de base

Dimensions du volet

Fonction qui adapte la taille du volet selon la taille de la fenetre - Responsive

-->

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script src="js/foundation.min.js"></script>

<script src="js/jscolor.js"></script>

<!--

= Imports Scripts pour d3 js

$('#type_bd').change(function() {

$('#formgene-etape3').slideUp();

$('#formgene-etapefinale').slideUp();

$('#div_constellation').slideUp();

$('html, body').animate({

scrollTop: $("#formgene").offset().top

}, 1000);

if ($(this).val()

"mysql"){

$('#formgene-txt').slideUp();

$('#formgene-etape1').slideDown();

Changement de la couleur des cercles feuilles de la constellation par rapport au choix de la palette

A COMPLETER

/$('#feuille_couleur').change(function() {

var couleur = this.value;

})/

= GESTION DE L'AJOUT DE CHAMPS SUPPLEMENTAIRES POUR LES CERCLES FEUILLES

la fonction récupère l'id du bouton cliqué pour ajouter des champs à la table correspondante

$btn_add_champ.click(function(e){

var el = e.target||event.srcElement;

var id = el.id;

if(id

"btn_add_champ4"){

var scntDiv = $('#p_scents4');

var i = $('#p_scents4 p').size() + 1;

$('<p><label for="p_scnts"><input type="text" id="p_scnt4_'+i+'" size="20" name="p_scnt_' + i +'" value="" placeholder="Champ supplémentaire" /></label></p>').appendTo(scntDiv);

$btn_del_champ.click(function(e){

var el = e.target||event.srcElement;

var id = el.id;

if(id

"btn_del_champ3"){

var i = $('#p_scents3 p').size();

$('#p_scnt3_'+i).parents('p').remove();

Lorsque je clique sur "+" (ajout d'un niveau ) : ouverture des formulaires relatifs à l'ajout d'une table

"btn_plus1"){

$('html, body').animate({

scrollTop: $("#formgene-etape2").offset().top

}, 1000);

"btn_plus3"){

$('html, body').animate({

scrollTop: $("#formniv3").offset().top

}, 1000);

Lorsque je soumets le fichier .txt

Lorsque je soumets le test de connexion

Lorsque je soumets les données afin de générer la constellation

if(dataOk){

$.post(

'traitement_generateur.php',

{

Définition des tooltips

Dimensions du volet

Fonction qui adapte la taille du volet selon la taille de la fenetre - Responsive

--> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="js/foundation.min.js"></script> <script src="js/jscolor.js"></script> <!--

= Imports Scripts pour d3 js

$('#type_bd').change(function() { $('#formgene-etape3').slideUp(); $('#formgene-etapefinale').slideUp(); $('#div_constellation').slideUp(); $('html, body').animate({ scrollTop: $("#formgene").offset().top }, 1000); if ($(this).val()

"mysql"){ $('#formgene-txt').slideUp(); $('#formgene-etape1').slideDown();

Changement de la couleur des cercles feuilles de la constellation par rapport au choix de la palette A COMPLETER /*$('#feuille_couleur').change(function() { var couleur = this.value; })*/

= GESTION DE L'AJOUT DE CHAMPS SUPPLEMENTAIRES POUR LES CERCLES FEUILLES

la fonction récupère l'id du bouton cliqué pour ajouter des champs à la table correspondante $btn_add_champ.click(function(e){ var el = e.target||event.srcElement; var id = el.id; if(id

"btn_add_champ4"){ var scntDiv = $('#p_scents4'); var i = $('#p_scents4 p').size() + 1; $('<p><label for="p_scnts"><input type="text" id="p_scnt4_'+i+'" size="20" name="p_scnt_' + i +'" value="" placeholder="Champ supplémentaire" /></label></p>').appendTo(scntDiv);

$btn_del_champ.click(function(e){ var el = e.target||event.srcElement; var id = el.id; if(id

"btn_del_champ3"){ var i = $('#p_scents3 p').size(); $('#p_scnt3_'+i).parents('p').remove();

Lorsque je clique sur "+" (ajout d'un niveau ) : ouverture des formulaires relatifs à l'ajout d'une table

"btn_plus1"){ $('html, body').animate({ scrollTop: $("#formgene-etape2").offset().top }, 1000);

"btn_plus3"){ $('html, body').animate({ scrollTop: $("#formniv3").offset().top }, 1000);

Lorsque je soumets le fichier .txt

Lorsque je soumets le test de connexion

Lorsque je soumets les données afin de générer la constellation

if(dataOk){ $.post( 'traitement_generateur.php', {

Définition des tooltips

Dimensions du volet

Fonction qui adapte la taille du volet selon la taille de la fenetre - Responsive

-->

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script src="js/foundation.min.js"></script>

<script src="js/jscolor.js"></script>

<!--

$('#type_bd').change(function() {

$('#formgene-etape3').slideUp();

$('#formgene-etapefinale').slideUp();

$('#div_constellation').slideUp();

$('html, body').animate({

scrollTop: $("#formgene").offset().top

}, 1000);

if ($(this).val()

"mysql"){

$('#formgene-txt').slideUp();

$('#formgene-etape1').slideDown();

Changement de la couleur des cercles feuilles de la constellation par rapport au choix de la palette

A COMPLETER

/$('#feuille_couleur').change(function() {

var couleur = this.value;

})/

la fonction récupère l'id du bouton cliqué pour ajouter des champs à la table correspondante

$btn_add_champ.click(function(e){

var el = e.target||event.srcElement;

var id = el.id;

if(id

"btn_add_champ4"){

var scntDiv = $('#p_scents4');

var i = $('#p_scents4 p').size() + 1;

$('<p><label for="p_scnts"><input type="text" id="p_scnt4_'+i+'" size="20" name="p_scnt_' + i +'" value="" placeholder="Champ supplémentaire" /></label></p>').appendTo(scntDiv);

$btn_del_champ.click(function(e){

var el = e.target||event.srcElement;

var id = el.id;

if(id

"btn_del_champ3"){

var i = $('#p_scents3 p').size();

$('#p_scnt3_'+i).parents('p').remove();

"btn_plus1"){

$('html, body').animate({

scrollTop: $("#formgene-etape2").offset().top

}, 1000);

"btn_plus3"){

$('html, body').animate({

scrollTop: $("#formniv3").offset().top

}, 1000);

if(dataOk){

$.post(

'traitement_generateur.php',

{