ninesurvey/src/ninesurvey-1.0/templates/Quest/edit.html.twig

766 lines
26 KiB
Twig

{% extends 'base.html.twig' %}
{% block title %}Creation d'une enquête{% endblock %}
{% block localstyle %}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.hourdel, .guestdel {
position: absolute;
top: 0px;
right: 13px;
}
#addGuestMail {
position: absolute;
top: 33px;
right: 13px;
}
// CSS timepicki non insérer en asset car le natif est en contradiction avec d'autres CSS de lib
.ti_tx,
.mi_tx,
.mer_tx {
width: 100%;
text-align: center;
margin: 10px 0;
}
.time,
.mins,
.meridian {
width: 60px;
float: left;
margin: 0 10px;
font-size: 20px;
color: #2d2e2e;
font-family: arial;
font-weight: 700;
text-align: center;
}
.timepicker_wrap .prev,
.timepicker_wrap .next {
cursor: pointer;
padding: 18px;
width: 42px;
border: 1px solid #ccc;
margin: auto;
border-radius: 5px;
height:40px;
}
.timepicker_wrap .prev:after {
content: '\f077';
font-family: 'Font Awesome 5 Free';
position: relative;
top: -12px;
left: -6px;
}
.timepicker_wrap .next:after {
content: '\f078';
font-family: 'Font Awesome 5 Free';
position: relative;
top: -12px;
left: -6px;
}
.timepicker_wrap .prev:hover,
.timepicker_wrap .next:hover {
background-color: #ccc;
}
.timepicker_wrap .next {
background-position: 50% 150%;
}
.timepicker_wrap .prev {
background-position: 50% -50%;
}
.time_pick {
position: relative;
}
.timepicker_wrap {
padding: 10px;
border-radius: 5px;
z-index: 998;
display: none;
box-shadow: 2px 2px 5px 0 rgba(50,50,50,0.35);
background: #f6f6f6;
border: 1px solid #ccc;
float: left;
position: absolute;
top: 27px;
left: 0;
}
.arrow_top {
position: absolute;
top: -10px;
left: 20px;
background: url("") no-repeat;
width: 18px;
height: 10px;
z-index: 999;
}
input.timepicki-input {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
float: none;
margin: 0;
text-align: center;
width: 70%;
}
a.reset_time {
float: left;
margin-top: 5px;
color: #000;
width: 100%;
text-align: center;
}
{% endblock %}
{% block body %}
{% set submitaction = "Créer une Enquête" %}
{% if id is defined %}
{% set submitaction = "Modifier l'Enquête" %}
{% endif %}
<div class="container">
{% if id is defined %}
{{ form_start(form, {'action': path(app.request.attributes.get('_route'), {id:id} | craue_removeDynamicStepNavigationParameters(flow))}) }}
{% else %}
{{ form_start(form, {'action': path(app.request.attributes.get('_route'), app.request.query.all | craue_removeDynamicStepNavigationParameters(flow))}) }}
{% endif %}
<h1 class="page-header">
{% if id is defined %}
Modification d'une Enquête
{% else %}
Création d'une Enquête
{% endif %}
</h1>
<!-- Affichage des erreurs -->
{% if app.session.flashbag.has('error') %}
<div class='alert alert-danger' style='margin: 5px 0px'>
<strong>Erreur</strong><br>
{% for flashMessage in app.session.flashbag.get('error') %}
{{ flashMessage }}<br>
{% endfor %}
</div>
{% endif %}
<!-- Affichage des alertes -->
{% if app.session.flashbag.has('notice') %}
<div class='alert alert-info' style='margin: 5px 0px'>
<strong>Information</strong><br>
{% for flashMessage in app.session.flashbag.get('notice') %}
{{ flashMessage }}<br>
{% endfor %}
</div>
{% endif %}
<!-- Navigation flowform -->
{% include 'Quest/step.html.twig' %}
{% include '@CraueFormFlow/FormFlow/buttons.html.twig' with {
craue_formflow_button_class_next: 'btn btnnextstep btn-primary',
craue_formflow_button_class_back: 'btn btn-secondary mr-3',
craue_formflow_button_class_finish: 'btn btn-primary',
craue_formflow_button_label_next: 'Étape suivante',
craue_formflow_button_label_back: 'Étape précédente',
craue_formflow_button_label_finish: submitaction,
craue_formflow_button_render_reset: false,
} %}
<!-- ETAPE 01 = Informations ------------------------------------------------------------------------------------------------------------------------------------ -->
{% if flow.getCurrentStepNumber() == 1 %}
<div class="card mb-3 mt-3">
<div class="card-body">
<div class="row">
<div class="col-md-12">
{{ form_row(form.title) }}
{{ form_row(form.private) }}
{{ form_row(form.anonymous) }}
{{ form_row(form.notification) }}
{{ form_row(form.description) }}
</div>
</div>
</div>
</div>
{% endif %}
<!-- ETAPE 02 = Options ----------------------------------------------------------------------------------------------------------------------------------------- -->
{% if flow.getCurrentStepNumber() == 2 %}
{{ form_row(form.jsonquestoptions) }}
<div id="options" class="row"></div>
{% endif %}
<!-- ETAPE 03 = Invités ----------------------------------------------------------------------------------------------------------------------------------------- -->
{% if flow.getCurrentStepNumber() == 3 %}
{{ form_row(form.jsonquestguests) }}
{% if not quest.private %}
<div class="card mb-3 mt-3">
<div class="card-body">
<div class="row">
<div class="col-md-12">
Cette enquête étant public, vous devez gérer vous même l'envoi des invitations. Vous pouvez copier/coller le message type ci-dessous qui contient l'adresse à laquelle vos invités pourront répondre.
<br><br>
<blockquote class="blockquote" style="border-left: 5px solid #eee; padding-left:15px; ">
Bonjour,<br>
Je vous invite à répondre à l'enquête suivante : {{quest.title}}.<br>
Pour ce faire, veuillez cliquer sur le lien ci-après: <a href="{{ absolute_url(path('app_quest_byquestkey', {'key' : quest.key})) }}">accéder à l'enquête</a>.<br>
</blockquote>
<strong>Attention n'envoyez le mail qu'après avoir finaliser l'enregistrement de votre enquête.</strong>
</div>
</div>
</div>
</div>
{% endif %}
<div id="gueststools" class="card mb-3 mt-3" style="display:none">
<div class="card-body">
<div class="row" >
<div class="col-md-6">
{{ form_row(form.user) }}
</div>
<div class="col-md-6">
{{ form_row(form.group) }}
</div>
<div class="col-lg-12">
<div class="form-group">
<label class="control-label" for="guestmail">Ajouter une liste de mail séparée par des virgules</label>
<input type="text" id="guestmail" class="form-control">
<button id="addGuestMail" type="button" class="btn" aria-hidden="true"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</div>
</div>
<div id="guests" class="card mb-3 mt-3" style="display:none">
<div class="card-header">Liste des Invités</div>
<div class="card-body">
<div class="row"></div>
</div>
</div>
{% endif %}
<!-- ETAPE 04 = Confirmation ------------------------------------------------------------------------------------------------------------------------------------ -->
{% if flow.getCurrentStepNumber() == 4 %}
{{ form_row(form.jsonquestoptions) }}
{{ form_row(form.jsonquestguests) }}
<div class="alert alert-info mt-3">
{% if id is defined %}
La modification de l'enquête est presque terminée. Vérifiez les informations et cliquez sur "Modifier l'enquête".
{% else %}
La création de l'enquête est presque terminée. Vérifiez les informations et cliquez sur "Créer l'enquête".
{% endif %}
</div>
<div class="card mb-3 mt-3">
<div class="card-body">
<div class="row">
<div class="col-md-4">
TITRE = {{ quest.title }}<br>
TYPE = {% if quest.private %} Privé {% else %} Public {% endif %}<br>
ANONYME = {% if quest.anonymous %} oui {% else %} non {% endif %}<br>
NOTIFICATION = {% if quest.notification %} oui {% else %} non {% endif %}
<div id="containerguests"></div>
{% if not quest.private %}
<br>
Cette enquête étant public, vous devez gérer vous même l'envoi des invitations. Vous pouvez copier/coller le message type ci-dessous qui contient l'adresse à laquelle vos invités pourront répondre.
<br><br>
<blockquote class="blockquote" style="border-left: 5px solid #eee; padding-left:15px; ">
Bonjour,<br>
Je vous invite à répondre à l'enquête suivante : {{quest.title}}.<br>
Pour ce faire, veuillez cliquer sur le lien ci-après: <a href="{{ absolute_url(path('app_quest_byquestkey', {'key' : quest.key})) }}">accéder à l'enquête</a>.<br>
</blockquote>
<strong>Attention n'envoyez le mail qu'après avoir finaliser l'enregistrement de votre enquête.</strong>
{% endif %}
</div>
<div class="col-md-8">
<div id="containeroptions"></div>
</div>
</div>
</div>
</div>
{% endif %}
<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------------- -->
<!-- Navigation flowform -->
{% include '@CraueFormFlow/FormFlow/buttons.html.twig' with {
craue_formflow_button_class_next: 'btn btnnextstep btn-primary',
craue_formflow_button_class_back: 'btn btn-secondary mr-3',
craue_formflow_button_class_finish: 'btn btn-primary',
craue_formflow_button_label_next: 'Étape suivante',
craue_formflow_button_label_back: 'Étape précédente',
craue_formflow_button_label_finish: submitaction,
craue_formflow_button_render_reset: false,
} %}
{{ form_end(form) }}
</div>
{% endblock %}
{% block localjavascript %}
$(document).ready(function() {
var stepper = new Stepper($('.bs-stepper')[0]);
html='<a href="{{path('app_quest')}}" class="btn btn-secondary float-left">Annuler</a>';
$(".craue_formflow_buttons").prepend(html);
});
<!-- ETAPE 02 = Options ----------------------------------------------------------------------------------------------------------------------------------------- -->
{% if flow.getCurrentStepNumber() == 2 %}
$(document).ready(function() {
if ($("#questoptions_jsonquestoptions").val() == ''||$("#questoptions_jsonquestoptions").val()=='[]'){
$("#questoptions_jsonquestoptions").val('[]');
}
var obj = JSON.parse($("#questoptions_jsonquestoptions").val());
initOptions(obj);
});
function initOptions(json) {
$.each(json, function(i, option) {
addBlockOption(option);
});
addBtnOption();
$( "#options" ).sortable({
axis: "y",
handle: ".fa-arrows-alt-v",
});
}
function addBlockOption(option) {
strdata='data-id="'+option.id+'" data-code="'+option.code+'"';
html ='<div '+strdata+' id="optioncontainer'+option.code+'" class="col-md-12 optioncontainer">';
html+='<div class="card mb-3 mt-3">';
html+='<div class="card-header">';
html+='<i class="fas fa-arrows-alt-v ui-sortable-handle"></i>&nbsp;';
html+='Question';
html+='<button '+strdata+' id="optionbtndel'+option.code+'" type="button" class="btn optiondel float-right" aria-hidden="true"><i class="fa fa-trash"></i></button>';
html+='</div>';
html+='<div class="card-body">';
html+='<div class="form-group">';
html+='<label class="control-label required">Code<span class="mandatory">*</span></label>';
html+='<input '+strdata+' id="optioncode'+option.code+'" name="optioncode'+option.code+'" disabled="disabled" class="form-control optioncode" value="'+option.code+'">';
html+='</div>';
html+='<div class="form-group">';
html+='<label class="control-label required">Intitulé de la question<span class="mandatory">*</span></label>';
html+='<input '+strdata+' id="optionname'+option.code+'" name="optionname'+option.code+'" class="form-control optionname" value="'+option.name+'">';
html+='</div>';
html+='<div class="form-group">';
html+='<label class="control-label required">Obligatoire<span class="mandatory">*</span></label>';
html+='<select '+strdata+' id="optionrequired'+option.code+'" name="optionrequired'+option.code+'" class="form-control optionrequired">';
html+='<option value="0">non</option>';
html+='<option value="1">oui</option>';
html+='</select>';
html+='</div>';
html+='<div class="form-group">';
html+='<label class="control-label required">Type de la question<span class="mandatory">*</span></label>';
html+='<select '+strdata+' id="optiontype'+option.code+'" name="optiontype'+option.code+'" class="form-control optiontype">';
html+='<option value="10">oui / non</option>';
html+='<option value="20">oui / non / peut-être</option>';
html+='<option value="30">oui / non / en partie</option>';
html+='<option value="40">niveau de satisfaction</option>';
html+='<option value="50">niveau de satisfaction avec commentaire</option>';
html+='<option value="60">note sur 5</option>';
html+='<option value="70">note sur 10</option>';
html+='<option value="80">note sur 20</option>';
html+='<option value="90">text court</option>';
html+='<option value="100">text long</option>';
html+='<option value="110">choix</option>';
html+='</select>';
html+='</div>';
html+='<div id="blockoptionparameters'+option.code+'"class="form-group">';
html+='<label class="control-label required">Liste de choix séparée par des ;<span class="mandatory">*</span></label>';
html+='<input '+strdata+' id="optionparameters'+option.code+'" name="optionparameters'+option.code+'" class="form-control optionparameters" value="'+option.parameters+'">';
html+='</div>';
html+='</div>';
html+='</div>';
html+='</div>';
$("#options").append(html);
if(option.required) option.required=1;
else option.required=0;
$('#optionrequired'+option.code).val(option.required);
$('#optiontype'+option.code).val(option.type);
if(option.type==110) $('#blockoptionparameters'+option.code).show();
else $('#blockoptionparameters'+option.code).hide();
$('#optionname'+option.code).focus();
}
function addBtnOption(){
html ='<div id="addoption" class="center" style="width:100%">';
html+='<div class="text-center">';
html+='<button type="button" class="btn btn-link" onClick="addOption()">';
html+='<i class="fa fa-plus fa-4x"></i>';
html+='<br>Ajouter une question';
html+='</button>';
html+='</div>';
html+='</div>';
$("#options").append(html);
}
function addOption() {
// On supprime le bouton adddate
$("#addoption").remove();
// boucler sur l'ensemble des block pour déterminer le prochain code et roworder libre
code=1;
roworder=1;
$(".optioncontainer").each(function() {
if($(this).data("code")>=code) code=$(this).data("code")+1;
if($(this).data("roworder")>=roworder) roworder=$(this).data("roworder")+1;
});
// Chaine vide
var option = JSON.parse('{"id":"","code":"'+code+'","roworder":"'+roworder+'", "name":"" , "required":1, "type":"10", "parameters":"" }');
// Construction d'un bloc de option vide
addBlockOption(option);
// On regen le bouton add option
addBtnOption();
}
$('#options').on('change', '.optiontype', function(event) {
code=$(this).attr("data-code");
type=$('#optiontype'+code).val();
if(type==110) $('#blockoptionparameters'+code).show();
else $('#blockoptionparameters'+code).hide();
});
$('#options').on('click', '.optiondel', function(event) {
code=$(this).attr("data-code");
$("#optioncontainer"+code).remove();
});
$('#mycontent').on('click', '.btnnextstep', function(event) {
// Construction du tableau des horaires en fusionnant les potentiels doublons
var tboptions=[];
roworder=0;
$(".optioncontainer").each(function() {
roworder=roworder+1;
id=$(this).data("id")
code=$(this).data("code");
name=$("#optionname"+code).val();
required=$("#optionrequired"+code).val();
type=$("#optiontype"+code).val();
parameters=$("#optionparameters"+code).val();
tboptions[roworder]=[];
tboptions[roworder]["id"]=id;
tboptions[roworder]["code"]=code;
tboptions[roworder]["roworder"]=roworder;
tboptions[roworder]["name"]=name;
tboptions[roworder]["required"]=required;
tboptions[roworder]["type"]=type;
tboptions[roworder]["parameters"]=parameters;
});
// On recalcul la chaine json
options="";
for (const [key, option] of Object.entries(tboptions)) {
if(options!="") options+=',';
if(options=="") options='[';
options+='{ "id":"'+option["id"]+'", "code":"'+option["code"]+'", "roworder":"'+option["roworder"]+'", "name":"'+option["name"]+'", "required":"'+option["required"]+'", "type":"'+option["type"]+'", "parameters":"'+option["parameters"]+'"}';
}
if(options!="") options+=']';
if(options=="") options="[]";
var ordered = JSON.parse(options);
// Valoriser le formulaire
$("#questoptions_jsonquestoptions").val(JSON.stringify(ordered));
//event.preventDefault();
});
{% endif %}
<!-- ETAPE 03 = Guests ------------------------------------------------------------------------------------------------------------------------------------------ -->
{% if flow.getCurrentStepNumber() == 3 %}
$(document).ready(function() {
if ("{{ quest.private }}"=="1"){
$("#gueststools").show();
var tbmails = JSON.parse($("#questguests_jsonquestguests").val());
var toshow=false;
tbmails.forEach(function(mail) {
addGuest(mail);
toshow=true;
});
if(toshow) $("#guests").show();
}
else {
$("#gueststools").hide();
$("#guests").hide();
}
});
$('#questguests_user').on('select2:select', function (e) {
// récupérer l'id du user
id=$(this).val();
if(id) {
// Récupérer les infomations de l'utilisateur selectionné
$.ajax({
method: "POST",
url: "{{ path('app_user_info') }}",
data: "id="+id,
success: function(data, dataType)
{
addGuest(data.email)
},
});
$('#questguests_user').val(null).trigger('change');
}
});
$('#questguests_group').on('select2:select', function (e) {
// récupérer l'id du group
id=$(this).val();
if(id) {
// Récupérer les infomations du groupe selectionné
$.ajax({
method: "POST",
url: "{{ path('app_group_info') }}",
data: "id="+id,
success: function(data, dataType)
{
users=data.users;
users.forEach(function(user) {
addGuest(user.email);
});
},
});
$('#questguests_group').val(null).trigger('change');
}
});
function addGuest(email) {
if(!$('*[data-email="'+email+'"]').length) {
html ='';
html+='<div data-id="container-'+email+'" class="col-md-4">';
html+='<div class="form-group">';
html+='<input type="text" data-email="'+email+'" class="guest form-control" value="'+email+'">';
html+='<button onClick="delGuest(\''+email+'\')" type="button" class="btn guestdel" data-id="'+email+'" aria-hidden="true"><i class="fa fa-trash"></i></button>';
html+='</div>';
html+='</div>';
$("#guests .card-body .row").append(html);
$("#guests").show();
}
}
$( "#addGuestMail" ).click(function() {
lstmails=$("#guestmail").val();
tbmails =lstmails.split(",");
tbmails.forEach(function(mail) {
addGuest(mail);
});
});
function delGuest(id) {
$("[data-id='container-"+id+"']").remove();
}
$('#mycontent').on('click', '.btnnextstep', function(event) {
{% if quest.private %}
// Construction du tableau des horaires en fusionnant les potentiels doublons
var tbmails=[];
$(".guest").each(function() {
if($(this).val()!="") {
tbmails.push($(this).val());
}
});
tbmails.sort();
// Valoriser le formulaire
$("#questguests_jsonquestguests").val(JSON.stringify(tbmails));
{% endif %}
});
{% endif %}
<!-- ETAPE 04 = Récap ------------------------------------------------------------------------------------------------------------------------------------------- -->
{% if flow.getCurrentStepNumber() == 4 %}
$(document).ready(function() {
if ("{{ quest.private }}"=="1"){
var tbmails = JSON.parse($("#createQuest_jsonquestguests").val());
tbmails.forEach(function(mail,index) {
addRecapGuest(mail,index);
});
}
var tboptions = JSON.parse($("#createQuest_jsonquestoptions").val());
html ='<h2>{{ quest.title }}</h2>';
html+='{{ quest.description|escape("js")}}';
$("#containeroptions").append(html);
tboptions.forEach(function(option,index) {
addRecapOption(option);
});
});
function addRecapGuest(mail,index) {
html ="";
if(index>0) html+="- ";
else html+="<br>LISTE DES INVITES<br>";
html+=mail+" ";
$("#containerguests").append(html);
}
function addRecapOption(option) {
html ="";
html+="<hr>";
html+="<strong>"+option.name;
if(option.required) html+=" *";
html+="</strong><br>";
switch(option.type) {
case "10":
html+='<select class="form-control">';
html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
html+='<option value="0">non</option>';
html+='<option value="1">oui</option>';
html+='</select>';
break;
case "20":
html+='<select class="form-control">';
html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
html+='<option value="0">non</option>';
html+='<option value="1">oui</option>';
html+='<option value="2">peut-être</option>';
html+='</select>';
break;
case "30":
html+='<select class="form-control">';
html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
html+='<option value="0">non</option>';
html+='<option value="1">oui</option>';
html+='<option value="2">en partie</option>';
html+='</select>';
break;
case "40":
html+='<select class="form-control">';
html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
html+='<option value="0">Très Satisfait</option>';
html+='<option value="1">Satisfait</option>';
html+='<option value="2">Peu Satisfait</option>';
html+='<option value="3">Insatisfait</option>';
html+='</select>';
break;
case "50":
html+='<select class="form-control">';
html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
html+='<option value="0">Très Satisfait</option>';
html+='<option value="1">Satisfait</option>';
html+='<option value="2">Peu Satisfait</option>';
html+='<option value="3">Insatisfait</option>';
html+='</select>';
html+='<textarea class="form-control" style="height:100px;"></textarea>';
break;
case "60":
html+='<i><small>note sur 5</small></i>';
html+='<input type="number" class="form-control" min="0" max="5">';
break;
case "70":
html+='<i><small>note sur 10</small></i>';
html+='<input type="number" class="form-control" min="0" max="10">';
break;
case "80":
html+='<i><small>note sur 20</small></i>';
html+='<input type="number" class="form-control" min="0" max="20">';
break;
case "90":
html+='<textarea class="form-control" style="height:100px;"></textarea>';
break;
case "100":
html+='<textarea class="form-control" style="height:300px;"></textarea>';
break;
case "110":
console.log(option.parameters);
tbparameters=option.parameters.split(';');
html+='<select class="form-control">';
html+='<option disabled selected hidden><i>Veuillez sélectionner une valeur</i></option>';
tbparameters.forEach(function(parameter,index) {
html+='<option value="'+parameter+'">'+parameter+'</option>';
});
break;
}
$("#containeroptions").append(html);
}
{% endif %}
{% endblock %}