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

694 lines
22 KiB
Twig
Raw Normal View History

2020-11-12 11:58:50 +01:00
{% extends 'base.html.twig' %}
{% block title %}Creation d'un sondage{% 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 le Sondage" %}
{% if id is defined %}
{% set submitaction = "Modifier le Sondage" %}
{% 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'un Sondage
{% else %}
Création d'un Sondage
{% 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 'Survey/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.notification) }}
{{ form_row(form.description) }}
</div>
</div>
</div>
</div>
{% endif %}
<!-- ETAPE 02 = Options ----------------------------------------------------------------------------------------------------------------------------------------- -->
{% if flow.getCurrentStepNumber() == 2 %}
{{ form_row(form.jsonoptions) }}
<div id="options" class="row"></div>
{% endif %}
<!-- ETAPE 03 = Invités ----------------------------------------------------------------------------------------------------------------------------------------- -->
{% if flow.getCurrentStepNumber() == 3 %}
{{ form_row(form.jsonguests) }}
{% if not survey.private %}
<div class="card mb-3 mt-3">
<div class="card-body">
<div class="row">
<div class="col-md-12">
Ce sondage é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 au sondage suivant : {{survey.title}}.<br>
Pour ce faire, veuillez cliquer sur le lien ci-après: <a href="{{ absolute_url(path('app_survey_bysurveykey', {'key' : survey.key})) }}">accéder au sondage</a>.<br>
</blockquote>
<strong>Attention n'envoyez le mail qu'après avoir finaliser l'enregistrement de votre sondage.</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.jsonoptions) }}
{{ form_row(form.jsonguests) }}
<div class="alert alert-info mt-3">
{% if id is defined %}
La modification du sondage est presque terminée. Vérifiez les informations et cliquez sur "Modifier le sondage".
{% else %}
La création du sondage est presque terminée. Vérifiez les informations et cliquez sur "Créer le sondage".
{% endif %}
</div>
<div class="card mb-3 mt-3">
<div class="card-body">
<div class="row">
<div class="col-md-12">
TITRE = {{ survey.title }}<br>
TYPE = {% if survey.private %} Privé {% else %} Public {% endif %}<br>
NOTIFICATION = {% if survey.notification %} oui {% else %} non {% endif %}
<div id="containeroptions"></div>
<div id="containerguests"></div>
{% if not survey.private %}
<br>
Ce sondage é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 au sondage suivant : {{survey.title}}.<br>
Pour ce faire, veuillez cliquer sur le lien ci-après: <a href="{{ absolute_url(path('app_survey_bysurveykey', {'key' : survey.key})) }}">accéder au sondage</a>.<br>
</blockquote>
<strong>Attention n'envoyez le mail qu'après avoir finaliser l'enregistrement de votre sondage.</strong>
{% endif %}
</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_home')}}" class="btn btn-secondary float-left">Annuler</a>';
$(".craue_formflow_buttons").prepend(html);
});
<!-- ETAPE 02 = Options ----------------------------------------------------------------------------------------------------------------------------------------- -->
{% if flow.getCurrentStepNumber() == 2 %}
var timeoptions = {
show_meridian:false,
step_size_minutes:5,
//reset: true,
min_hour_value:0,
max_hour_value:23,
start_time: ["", "00"],
increase_direction:'up'
};
$(document).ready(function() {
if ($("#surveyoptions_jsonoptions").val() == ''||$("#surveyoptions_jsonoptions").val()=='[]'){
$("#surveyoptions_jsonoptions").val('[{"date":"" , "hours":["",""] }, { "date":"" , "hours":["",""] } ]');
}
var obj = JSON.parse($("#surveyoptions_jsonoptions").val());
initDates(obj);
});
function initDates(json) {
$.each(json, function(i, date) {
addBlockDate(i,date);
});
addBtnDate();
}
function addBlockDate(i,date) {
html ='<div id="datecontainer'+i+'" class="col-md-6 datecontainer" data-id="'+i+'">';
html+='<div class="card mb-3 mt-3">';
html+='<div class="card-header">';
html+='Date';
html+='<button type="button" class="btn datedel float-right" data-id="'+i+'" aria-hidden="true"><i class="fa fa-trash"></i></button>';
html+='</div>';
html+='<div class="card-body">';
html+='<input type="date" id="date'+i+'" name="date'+i+'" data-id="'+i+'" class="form-control dateinput" value="'+date.date+'">';
html+='<br>';
html+='<div id="hourcontainer'+i+'" class="row">';
$.each(date.hours, function(j, hour) {
html+=addBlockHour(i,j,hour);
});
html+='</div>';
html+=addBtnHour(i);
html+='</div>';
html+='</div>';
html+='</div>';
$("#options").append(html);
$('.timepicker').timepicki(timeoptions);
}
function addBlockHour(i,j,hour) {
if(hour!="") {
tbhour=hour.replace(' ','').split(':');
data='data-timepicki-tim="'+tbhour[0]+'" data-timepicki-mini="00"';
}
else {
data='data-timepicki-tim="10" data-timepicki-mini="00"';
}
html ='<div id="hourcontainer'+i+'-'+j+'" class="col-lg-6 hourcontainer'+i+'" data-id="'+j+'" style="margin-bottom: 15px;">';
html+='<span>';
html+='<input id="date'+i+'hour'+j+'" name="date'+i+'hour'+j+'" class="form-control hourinput'+i+' timepicker" value="'+hour+'" '+data+'>';
html+='</span>';
html+='<button type="button" class="btn hourdel" data-id="'+i+'-'+j+'" aria-hidden="true"><i class="fa fa-trash"></i></button>';
html+='</div>';
return html;
}
function addBtnDate(){
html ='<div id="adddate" class="center" style="width:100%">';
html+='<div class="text-center">';
html+='<button type="button" class="btn btn-link" onClick="addDate()">';
html+='<i class="fa fa-plus fa-4x"></i>';
html+='<br>Ajouter une date';
html+='</button>';
html+='</div>';
html+='</div>';
$("#options").append(html);
}
function addBtnHour(i){
html ='<div id="addhour" class="center" style="width:100%">';
html+='<div class="text-center">';
html+='<button type="button" class="btn btn-link" onClick="addHour('+i+')">';
html+='<i class="fa fa-plus"></i>';
html+='<br>Ajouter une heure';
html+='</button>';
html+='</div>';
html+='</div>';
return html;
}
function addDate() {
// On supprime le bouton adddate
$("#adddate").remove();
// Recherche du dernier blockdate généré
var i = $(".datecontainer").last().data("id") + 1;
// Chaine vide
var date = JSON.parse('{"date":"" , "hours":["",""] }');
// Construction d'un bloc de date vide
addBlockDate(i,date);
// On regen le bouton add date
addBtnDate();
}
function addHour(i) {
// Recherche du dernier blockdate généré
var j = $(".hourcontainer"+i).last().data("id") + 1;
// Récupéer le code html
html=addBlockHour(i,j,"");
// Ajouter le code au conteneur
$("#hourcontainer"+i).append(html);
$('.timepicker').timepicki(timeoptions);
}
$('#options').on('click', '.datedel', function(event) {
id=$(this).attr("data-id");
$("#datecontainer"+id).remove();
});
$('#options').on('click', '.hourdel', function(event) {
id=$(this).attr("data-id");
$("#hourcontainer"+id).remove();
});
$('#mycontent').on('click', '.btnnextstep', function(event) {
// Construction du tableau des horaires en fusionnant les potentiels doublons
var tbdates=[];
$(".dateinput").each(function() {
if($(this).val()!="") {
keydate=$(this).val();
var pos = tbdates.indexOf($(this).val());
if(tbdates[keydate]==undefined) {
tbdates[keydate]=[];
tbdates[keydate]["date"]=keydate;
tbdates[keydate]["int"]=parseInt(keydate.replace("-",""));
tbdates[keydate]["hours"]=[];
}
$(".hourinput"+$(this).data("id")).each(function() {
if($(this).val()!="") {
var pos = tbdates[keydate]["hours"].indexOf($(this).val());
if(pos==-1) {
tbdates[keydate]["hours"].push($(this).val());
}
}
});
// Trier par heure
tbdates[keydate]["hours"].sort();
}
});
// On recalcul la chaine json
dates="";
for (const [keydate, date] of Object.entries(tbdates)) {
hours="";
intdate=date["int"];
date["hours"].forEach(function(vlhour) {
if(hours!="") hours+=',';
if(hours=="") hours=',"hours":[';
hours+='"'+vlhour+'"';
});
if(hours!="") {
hours+=']';
if(dates!="") dates+=',';
if(dates=="") dates='[';
dates+='{ "date":"'+keydate+'"'+hours+'}';
}
}
if(dates!="") dates+=']';
if(dates=="") dates="[]";
// Trier par date
var ordered = JSON.parse(dates);
ordered.sort(function(a, b){
if(a.date < b.date) { return -1; }
if(a.date > b.date) { return 1; }
return 0;
})
// Valoriser le formulaire
$("#surveyoptions_jsonoptions").val(JSON.stringify(ordered));
});
{% endif %}
<!-- ETAPE 03 = Guests ------------------------------------------------------------------------------------------------------------------------------------------ -->
{% if flow.getCurrentStepNumber() == 3 %}
$(document).ready(function() {
if ("{{ survey.private }}"=="1"){
$("#gueststools").show();
var tbmails = JSON.parse($("#surveyguests_jsonguests").val());
var toshow=false;
tbmails.forEach(function(mail) {
addGuest(mail);
toshow=true;
});
if(toshow) $("#guests").show();
}
else {
$("#gueststools").hide();
$("#guests").hide();
}
});
$('#surveyguests_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)
},
});
$('#surveyguests_user').val(null).trigger('change');
}
});
$('#surveyguests_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);
});
},
});
$('#surveyguests_group').val(null).trigger('change');
}
});
function addGuest(email) {
if(!$('*[data-email="'+email+'"]').length) {
html ='';
html+='<div 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 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);
});
});
$('#mycontent').on('click', '.btnnextstep', function(event) {
{% if survey.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
$("#surveyguests_jsonguests").val(JSON.stringify(tbmails));
{% endif %}
});
{% endif %}
<!-- ETAPE 04 = Récap ------------------------------------------------------------------------------------------------------------------------------------------- -->
{% if flow.getCurrentStepNumber() == 4 %}
$(document).ready(function() {
var tbdates = JSON.parse($("#createSurvey_jsonoptions").val());
tbdates.forEach(function(date,indexdate) {
date.hours.forEach(function(hour,indexhour) {
addRecapOption(date.date, hour,indexdate, indexhour);
});
});
if ("{{ survey.private }}"=="1"){
var tbmails = JSON.parse($("#createSurvey_jsonguests").val());
tbmails.forEach(function(mail,index) {
addRecapGuest(mail,index);
});
}
});
function addRecapOption(date, hour,indexdate, indexhour) {
html ="";
if(indexdate>0||indexhour>0) html+="<br>";
else html+="<br>LISTE DES OPTIONS<br>";
html+=date+" "+hour;
$("#containeroptions").append(html);
}
function addRecapGuest(mail,index) {
html ="";
if(index>0) html+="- ";
else html+="<br>LISTE DES INVITES<br>";
html+=mail+" ";
$("#containerguests").append(html);
}
{% endif %}
{% endblock %}