Commit 7aef6c20 authored by Patrick Etcheverry's avatar Patrick Etcheverry

Travail sur le JS des séquences...

parent 1b0e633b
......@@ -414,8 +414,10 @@ class PedagogicalScenarioController extends Controller
$sequencesPrecedementSpecifiees = null;
// On récupère la réponse séquence si on y a déjà répondu auparavant
if ($reponseAlaQuestionCourante != null && !empty($reponseAlaQuestionCourante->getSequencesArray()))
$sequencesPrecedementSpecifiees = $reponseAlaQuestionCourante->getSequencesArray();
// array filter pour se débarasser des éléments 'null'
$sequencesPrecedementSpecifiees = array_filter($reponseAlaQuestionCourante->getSequencesArray());
$createurFormulaires->add("answer_$i", 'collection', array(
'data' => $sequencesPrecedementSpecifiees,
'required' => false,
......@@ -427,7 +429,7 @@ class PedagogicalScenarioController extends Controller
$createurFormulaires->add("observation_$i", 'textarea', array(
'data' => $engineerObservation,
'read_only' => $readonly,
'required' => false,
'required' => false,
'attr' => array(
'placeholder' => $placeholderEngineerObservation)));
......@@ -487,7 +489,10 @@ class PedagogicalScenarioController extends Controller
/* Le lien SequenceQuestion 1 <-> * SequenceAnswer (la raciproque est faire de l'autre coté) */
$answer->setSequenceQuestion($Questions[$i]->getQuestion());
}
$answer->setSequencesArray($tabbReponses["answer_$i"]);
// Fonction "Array Filter" au cas où l'utilisateur aurait laissé des cases vides (null)
$answer->setSequencesArray(array_filter($tabbReponses["answer_$i"]));
}
// La remarque ingé et la validité sont propores à tous les types de questions
$answer->setPedagogicalEngineerObservation($tabbReponses["observation_$i"]);
......
......@@ -9,6 +9,7 @@
<link rel="stylesheet" href="{{ asset('css/questionAnswering.css')}}">
<link rel="stylesheet" href="{{ asset('css/dynamicSequenceTab.css')}}">
{% endblock %}
{# The displayed language of the questions is choosen with the current locale #}
{% set locale = app.request.locale %}
......@@ -31,7 +32,6 @@
<div style="max-width : 300px;" class="alert alert-success" role="alert"> Données correctement enregistrées</div>
{% endif %}
<form method="post" {{ form_enctype(formulaireReponses) }}>
{# Pour chacune des questions de l'étape #}
{% for questionOrder in questions %}
......@@ -47,10 +47,17 @@
{{ form_widget(formulaireReponses["answer_" ~ loop.index0]) }}
{% elseif questionOrder.question.getType == 'sequenceQuestion' %}
<div {{ form_enctype(formulaireReponses["answer_" ~ loop.index0]) }}>
<div id="sequenceQuestion">
<div {{form_enctype(formulaireReponses["answer_" ~ loop.index0])}}>
{{ form_widget(formulaireReponses["answer_" ~ loop.index0]) }}
</div>
</div>
<table id="tableauSequences">
</table>
<button type="button" onclick="ajouter()">Ajouter!</button>
{% elseif questionOrder.question.getType == 'sessionQuestion' %}
......@@ -72,87 +79,129 @@
{% else %}
<p><i>Aucune question associée à l'étape courante.</i></p>
{% endif %}
<script>
var nbItem = 0;
var modeleDataPrototype = $('div#sequenceQuestion').children().children().attr('data-prototype');
var nbLignes = 0;
var nbItem = 0; // Il s'agit du nombre de cases
creertableau();
recupereDonnees();
supprimerConneriesSymfony();
mettreBoutonsGestionLigne();
function creertableau()
{
// Creation du tbody
var tbody = document.createElement("tbody");
document.getElementById('tableauGenere').appendChild(tbody);
// Creation de la ligne d'entete
var entete = document.createElement("tr");
entete.setAttribute("id","entete");
//document.getElementById('tableauGenere').appendChild(entete);
tbody.appendChild(entete);
// Dans l'entete, on ajoute les 4 cases
var case1 = document.createElement("th");
case1.setAttribute("id","c1_l1");
case1.innerHTML = "Nom";
//document.getElementById('entete').appendChild(case1);
document.getElementById('entete').appendChild(case1);
var case2 = document.createElement("th");
case2.setAttribute("id","c2_l1");
case2.innerHTML = "Prenom";
document.getElementById('entete').appendChild(case2);
var case3 = document.createElement("th");
case3.setAttribute("id","c3_l1");
case3.innerHTML = "Age";
document.getElementById('entete').appendChild(case3);
var case4 = document.createElement("th");
case4.setAttribute("id","c4_l1");
case4.innerHTML = "Gestion";
document.getElementById('entete').appendChild(case4);
// Creation du tbody
var tbody = document.createElement("tbody");
document.getElementById('tableauSequences').appendChild(tbody);
// Creation de la ligne d'entete
var entete = document.createElement("tr");
entete.setAttribute("id","entete");
//document.getElementById('tableauSequences').appendChild(entete);
tbody.appendChild(entete);
// Dans l'entete, on ajoute les 4 cases
var case1 = document.createElement("th");
case1.setAttribute("id","c1_l1");
case1.innerHTML = "Title";
//document.getElementById('entete').appendChild(case1);
document.getElementById('entete').appendChild(case1);
var case2 = document.createElement("th");
case2.setAttribute("id","c2_l1");
case2.innerHTML = "Duration";
document.getElementById('entete').appendChild(case2);
var case3 = document.createElement("th");
case3.setAttribute("id","c3_l1");
case3.innerHTML = "Gestion";
document.getElementById('entete').appendChild(case3);
}
function recupereDonnees()
{
$.each($('div#sequenceQuestion').children().children().children(), function(index, value)
{
// Ajouter une ligne au tableau
if (nbItem % 2 == 0)
{
nouvelleLigne = document.getElementById("tableauSequences").insertRow();
nbLignes++;
}
// On retire le 'label' inutile
value = value.innerHTML.replace(/<label.*<\/label>/,"");
nouvelleLigne.insertCell().innerHTML = value;
alert(nbItem);
nbItem = nbItem + 1;
});
}
function supprimerConneriesSymfony()
{
$('div#sequenceQuestion').remove();
}
function mettreBoutonsGestionLigne()
{
var tailleTab = document.getElementById("tableauSequences").rows.length;
// Si il y a autre chose que l'entete (si il y a des données)
if (tailleTab > 1)
{
for (var i = 1; i < tailleTab; i++)
{
document.getElementById("tableauSequences").rows.item(i).insertCell();
document.getElementById("tableauSequences").rows.item(i).cells.item(2).innerHTML = '<span onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);">X</span>';
document.getElementById("tableauSequences").rows.item(i).cells.item(2).innerHTML += ' | <span onclick="monterLigne(this.parentNode.parentNode.rowIndex);">^</span>';
document.getElementById("tableauSequences").rows.item(i).cells.item(2).innerHTML += ' | <span onclick="descendreLigne(this.parentNode.parentNode.rowIndex);">v</span>';
}
}
}
function ajouter()
{
var tableau = document.getElementById("tableauGenere");
var tableau = document.getElementById("tableauSequences");
var nbColonnes = tableau.rows.item(0).cells.length;
var nbLignes = tableau.rows.length;
// On crée une nouvelle ligne
nouvelleLigne = tableau.insertRow();
nbLignes = nbLignes + 1;
// On crée toutes les cellules
for (colonneCourante = 0 ; colonneCourante < nbColonnes ; colonneCourante++)
{
nouvelleLigne.insertCell().innerHTML = "<input type='text' name='item" + nbItem++ + "'>";
nouvelleLigne.insertCell().innerHTML = modeleDataPrototype.replace(/__name__label__/g, ' ').replace(/__name__/g, nbItem);
nbItem++;
}
// Dans la dernière, on ajoute la croix de suppression
tableau.rows.item(tableau.rows.length - 1).cells.item(3).innerHTML = '<span onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);">X</span>';
tableau.rows.item(tableau.rows.length - 1).cells.item(2).innerHTML = '<span onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);">X</span>';
// Si on n'est pas à la première ligne, on ajoute la possibilité de monter
tableau.rows.item(tableau.rows.length - 1).cells.item(3).innerHTML += ' | <span onclick="monterLigne(this.parentNode.parentNode.rowIndex);">^</span>';
tableau.rows.item(tableau.rows.length - 1).cells.item(2).innerHTML += ' | <span onclick="monterLigne(this.parentNode.parentNode.rowIndex);">^</span>';
// Si on n'est pas à la dernière ligne, on ajoute la possiblité de descendre
tableau.rows.item(tableau.rows.length - 1).cells.item(3).innerHTML += ' | <span onclick="descendreLigne(this.parentNode.parentNode.rowIndex);">v</span>';
tableau.rows.item(tableau.rows.length - 1).cells.item(2).innerHTML += ' | <span onclick="descendreLigne(this.parentNode.parentNode.rowIndex);">v</span>';
}
function supprimerLigne(num)
{
document.getElementById("tableauGenere").deleteRow(num);
document.getElementById("tableauSequences").deleteRow(num);
nbLignes--;
// Comme on vient de supprimer une ligne, on vient également de supprimer un certain nombre de cellules
// correspondant aux colonnes. Il faut le retrancher au nombre d'items
for (i=0 ; i < document.getElementById("tableauGenere").rows.item(0).cells.length ; i++)
{
nbItem--;
}
nbItem = nbItem - 2;
}
function monterLigne(num)
{
var tableau = document.getElementById("tableauGenere");
var tableau = document.getElementById("tableauSequences");
var nbLignes = tableau.rows.length;
if (num > 1 && num < nbLignes+1)
......@@ -170,7 +219,7 @@
function descendreLigne(num)
{
var tableau = document.getElementById("tableauGenere");
var tableau = document.getElementById("tableauSequences");
var nbLignes = tableau.rows.length;
if (num > 0 && num < nbLignes-1)
......@@ -187,71 +236,10 @@
}
</script>
{# On charge la bibliothèque jQuery #}
<script src="{{ asset('js/jquery.js')}}"></script>
{# Script permettant d'ajouter et supprimer dynamiquement des formulaires auteurs #}
<script type="text/javascript">
$(document).ready(function() {
// On récupère la balise <div>qui contient l'attribut « data-prototype » qui nous intéresse.
var $codeHtmlFormulaireAuteur = $('div#form_answer_4');
// On ajoute un lien pour ajouter une nouvel auteur
var $lienAjoutAuteur = $('<a href="#" id="add_auteur">Ajouter un auteur</a>');
$codeHtmlFormulaireAuteur.append($lienAjoutAuteur);
// On ajoute un nouveau champ auteur à chaque clic sur le lien d'ajout.
$lienAjoutAuteur.click(function(e) {
addAuteur($codeHtmlFormulaireAuteur);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
<script src="{{ asset('js/insertionDynamiqueSequences.js')}}"></script>
// On définit un compteur unique pour nommer les champs Auteur qu'on va ajouter dynamiquement
var compteurAuteurs = $codeHtmlFormulaireAuteur.find(':input').length;
// On ajoute le code html d'un premier formulaire Auteur s'il n'en existe pas déjà un (cas d'ajout d'un nouveau livre).
if (compteurAuteurs == 0) {
addAuteur($codeHtmlFormulaireAuteur);
} else {
// Pour chaque formulaire auteur affiché, on ajoute un lien de suppression
$codeHtmlFormulaireAuteur.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
{# Script permettant d'ajouter et supprimer dynamiquement des champs sequences dans une réponse de type sequence #}
<script type="text/javascript"> </script>
// La fonction qui ajoute un formulaire Auteur
function addAuteur($codeHtmlFormulaireAuteur) {
// Dans le contenu de l'attribut « data-prototype », on remplace :
// - le texte "__name__label__" qu'il contient par notre label (ici un label vide pour ne pas surcharger le formulaire)
// - le texte "__name__" qu'il contient par le numéro du champ
var $codeHtmlNouvelAuteur = $($codeHtmlFormulaireAuteur.attr('data-prototype').replace(/__name__label__/g, ' ')
.replace(/__name__/g, compteurAuteurs));
// On ajoute au code html un lien pour pouvoir supprimer l'auteur
ajouterLienSuppression($codeHtmlNouvelAuteur);
// On ajoute le code html qu'on vient de modifier à la fin de la balise <div>
$codeHtmlFormulaireAuteur.append($codeHtmlNouvelAuteur);
// On incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
compteurAuteurs++;
}
// La fonction qui ajoute un lien de suppression d'un auteur
function ajouterLienSuppression($codeHtmlNouvelAuteur) {
// Création du lien
$lienSuppression = $('<a href="#">Supprimer cet auteur</a>');
// Ajout du lien
$codeHtmlNouvelAuteur.append($lienSuppression);
// Ajout du listener sur le clic du lien
$lienSuppression.click(function(e) {
$codeHtmlNouvelAuteur.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}
});
</script>
{% endblock %}
$(document).ready(function() {
// On récupère la balise <div>qui contient l'attribut « data-prototype » qui nous intéresse.
var $codeHtmlFormulaireSequence = $('div#sequenceQuestion').children().children();
// On ajoute un lien pour ajouter une nouvelle sequence
//var $lienAjoutSequence = $('<a href="#" id="add_sequence">Ajouter une séquence</a>');
//$codeHtmlFormulaireSequence.append($lienAjoutSequence);
// On ajoute un nouveau champ auteur à chaque clic sur le lien d'ajout.
$lienAjoutSequence.click(function(e) {
addSequence($codeHtmlFormulaireSequence);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
// On définit un compteur unique pour nommer les champs Auteur qu'on va ajouter dynamiquement
var compteurSequences = $codeHtmlFormulaireSequence.find(':input').length;
// On ajoute le code html d'un premier formulaire Sequence s'il n'en existe pas déjà un
if (compteurSequences == 0) {
addSequence($codeHtmlFormulaireSequence);
} else {
// Pour chaque formulaire sequence affiché, on ajoute un lien de suppression
$codeHtmlFormulaireSequence.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
// La fonction qui ajoute un formulaire Auteur
/*function addSequence($codeHtmlFormulaireSequence) {
// Dans le contenu de l'attribut « data-prototype », on remplace :
// - le texte "__name__label__" qu'il contient par notre label (ici un label vide pour ne pas surcharger le formulaire)
// - le texte "__name__" qu'il contient par le numéro du champ
var $codeHtmlNouvelleSequence = $($codeHtmlFormulaireSequence.attr('data-prototype').replace(/__name__label__/g, ' ')
.replace(/__name__/g, compteurSequences));
// On ajoute au code html un lien pour pouvoir supprimer l'auteur
ajouterLienSuppression($codeHtmlNouvelleSequence);
// On ajoute le code html qu'on vient de modifier à la fin de la balise <div>
$codeHtmlFormulaireSequence.append($codeHtmlNouvelleSequence);
// On incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
compteurSequences++;
}*/
// La fonction qui ajoute un lien de suppression d'un auteur
/*function ajouterLienSuppression($codeHtmlNouvelleSequence) {
// Création du lien
$lienSuppression = $('<a href="#">Supprimer cette séquence</a>');
// Ajout du lien
$codeHtmlNouvelleSequence.append($lienSuppression);
// Ajout du listener sur le clic du lien
$lienSuppression.click(function(e) {
$codeHtmlNouvelleSequence.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}*/
});
function recupereDonnees(mesCouilles)
{
alert(mesCouilles);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment