330 lines
12 KiB
Twig
330 lines
12 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block localstyle %}
|
|
table {
|
|
margin:10px auto 250px auto;
|
|
}
|
|
td {
|
|
text-align:center;
|
|
padding:5px;
|
|
min-width: 80px;
|
|
height: 80px;
|
|
border: 1px solid #aaa;
|
|
|
|
}
|
|
|
|
thead td {
|
|
background-color: #aaa;
|
|
color: #fff;
|
|
}
|
|
.surveyguest {
|
|
text-align:left;
|
|
min-width:300px;
|
|
}
|
|
.dayname {
|
|
font-size: 70%;
|
|
}
|
|
|
|
.daynumber {
|
|
font-size: 200%;
|
|
margin-top: -10px;
|
|
}
|
|
.month {
|
|
font-size: 80%;
|
|
margin-top: -10px;
|
|
}
|
|
.time {
|
|
font-size:150%
|
|
}
|
|
.surveyvote {
|
|
background-color: transparent;
|
|
border: none;
|
|
width: 90px;
|
|
}
|
|
.ok {
|
|
color:#1e824c;
|
|
}
|
|
.none {
|
|
color: #aaa;
|
|
}
|
|
.maybe {
|
|
color: #f89406;
|
|
}
|
|
.ko {
|
|
color: #cf000f;
|
|
}
|
|
.choice {
|
|
position:relative;
|
|
top:0px;
|
|
left:0px;
|
|
height:70px;
|
|
width:70px;
|
|
}
|
|
.choice .choicesurveyoption {
|
|
width: 30px;
|
|
height: 35px;
|
|
display: inline-block;
|
|
line-height: 35px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.choicesurveyoption.active {
|
|
background-color:#eee;
|
|
border-radius:100%
|
|
}
|
|
.separateur td {
|
|
border: none;
|
|
height:20px;
|
|
}
|
|
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
{{ form_start(form) }}
|
|
<div class="container">
|
|
<h1 class="title">{{surveyguest.survey.title}}</h1>
|
|
{% if by=="byuserkey" %}
|
|
<a class="btn btn-secondary mb-3" href={{ path('app_home') }}>Retour</a>
|
|
{% endif %}
|
|
{{ surveyguest.survey.description|raw }}
|
|
<!-- Affichage des erreurs -->
|
|
{% if app.session.flashbag.has('error') %}
|
|
<div class='alert alert-danger'>
|
|
<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'>
|
|
<strong>Information</strong><br>
|
|
{% for flashMessage in app.session.flashbag.get('notice') %}
|
|
{{ flashMessage|raw }}<br>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="text-center">
|
|
{% if form.submit is defined %}
|
|
{% set result=surveyguest.survey.result %}
|
|
{% if not result is empty %}
|
|
<i class="fas fa-trophy"></i> Résultat temporaire<br>
|
|
<small>
|
|
<div style="line-height:18px">
|
|
{% for surveyoption in result|slice(0, 2) %}
|
|
{{ surveyoption.date|date("d/m/Y H:i")}}<br>
|
|
{%endfor%}
|
|
</div>
|
|
</small>
|
|
<br>
|
|
{% endif %}
|
|
{% else %}
|
|
{% set choiced = "" %}
|
|
{% for surveyoption in surveyguest.survey.surveyoptions %}
|
|
{% if surveyoption.choiced %}
|
|
{% set choiced = surveyoption.date %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<i class="fas fa-trophy"></i> Résultat définitif<br>
|
|
<div style="font-size:25px">
|
|
{{ choiced|date("d/m/Y H:i")}}<br>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td class="surveyvote"></td>
|
|
<td class="surveyguest">Invités</td>
|
|
{% set totsurveyoptions=surveyguest.survey.surveyoptions|length %}
|
|
|
|
{% for surveyoption in surveyguest.survey.surveyoptions %}
|
|
<td>
|
|
<div class="dayname">{{ surveyoption.date|format_datetime(pattern="eeee",locale='fr') }}</div>
|
|
<div class="daynumber">{{ surveyoption.date|date("d") }}</div>
|
|
<div class="month">{{ surveyoption.date|format_datetime(pattern="LLLL",locale='fr') }}
|
|
<div class="time">{{ surveyoption.date|format_datetime(pattern="kk:ss",locale='fr') }}
|
|
</td>
|
|
{% endfor %}
|
|
<td class="surveyvote"></td>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr id="row-surveyguest">
|
|
<td class="surveyvote"></td>
|
|
<td class="surveyguest">
|
|
{{surveyguest.displayname}}
|
|
{% if surveyguest.displayname!=surveyguest.email %}<small><em><br>{{surveyguest.email}}</em></small>{%endif%}
|
|
</td>
|
|
{% for surveyoption in surveyguest.survey.surveyoptions %}
|
|
<td id="div-{{surveyoption.id}}">
|
|
<input id="input-{{surveyoption.id}}" class="input-response" value="" style="display:none">
|
|
<div class="response ok" style="display:none"><i class="fa fa-check fa-2x" title="oui"></i></div>
|
|
<div class="response ko" style="display:none"><i class="fas fa-times fa-2x" title="non"></i></div>
|
|
<div class="response maybe" style="display:none"><i class="fa fa-check fa-2x" title="peut-être"></i></div>
|
|
<div class="response none" style="display:none"><i class="fas fa-question fa-2x" title="non répondu"></i></div>
|
|
|
|
<div id="choice-{{surveyoption.id}}" class="choice" style="display:none">
|
|
<div class="choicesurveyoption ok" onClick="surveyvoteChoice(2 ,'{{surveyoption.id}}')"><i class="fa fa-check" title="oui"></i></div>
|
|
<div class="choicesurveyoption ko" onClick="surveyvoteChoice(0 ,'{{surveyoption.id}}')"><i class="fas fa-times" title="non"></i></div>
|
|
<div class="choicesurveyoption maybe" onClick="surveyvoteChoice(1 ,'{{surveyoption.id}}')"><i class="fa fa-check" title="peut-être"></i></div>
|
|
<div class="choicesurveyoption none" onClick="surveyvoteChoice('','{{surveyoption.id}}')"><i class="fas fa-question" title="non répondu"></i></div>
|
|
</div>
|
|
</td>
|
|
{% endfor %}
|
|
|
|
<td class="surveyvote">{% if form.submit is defined %}{{ form_widget(form.submit) }}{%endif%}</td>
|
|
<tr>
|
|
|
|
<tr class="separateur"><td colspan="{{(totsurveyoptions+3)}}"></td></tr>
|
|
|
|
{% for other in surveyguest.survey.surveyguests %}
|
|
{% if other!=surveyguest %}
|
|
<tr>
|
|
<td class="surveyvote"></td>
|
|
<td class="surveyguest">
|
|
{{other.displayname}}
|
|
{% if other.displayname!=other.email %}<small><em><br>{{other.email}}</em></small>{%endif%}
|
|
</td>
|
|
{% if other.surveyvotes is empty %}
|
|
<td colspan="{{totsurveyoptions}}">Non répondu</td>
|
|
{% else %}
|
|
|
|
{% for surveyoption in surveyguest.survey.surveyoptions %}
|
|
{% for surveyvote in other.surveyvotes %}
|
|
{%if surveyvote.surveyoption.id==surveyoption.id %}
|
|
<td>
|
|
{% if surveyvote.vote is empty %}
|
|
<div class="response none"><i class="fas fa-question fa-2x" title="non répondu"></i></div>
|
|
{% elseif surveyvote.vote==0 %}
|
|
<div class="response ko"><i class="fas fa-times fa-2x" title="non"></i></div>
|
|
{% elseif surveyvote.vote==1 %}
|
|
<div class="response maybe"><i class="fa fa-check fa-2x" title="peut-être"></i></div>
|
|
{% else %}
|
|
<div class="response ok"><i class="fa fa-check fa-2x" title="oui"></i></div>
|
|
{% endif %}
|
|
|
|
|
|
</td>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
<td class="surveyvote"></td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
{{ form_end(form) }}
|
|
{% endblock %}
|
|
|
|
{% block localjavascript %}
|
|
|
|
$(document).ready(function() {
|
|
if ($("#surveyguest_jsonsurveyvotes").val() == ''||$("#surveyguest_jsonsurveyvotes").val()=='[]'){
|
|
$(".response.none").addClass("active");
|
|
$(".choicesurveyoption.none").addClass("active");
|
|
|
|
}
|
|
|
|
var surveyvotes = JSON.parse($("#surveyguest_jsonsurveyvotes").val());
|
|
|
|
$.each(surveyvotes, function(i, surveyvote) {
|
|
console.log(surveyvote.id+" "+surveyvote.val);
|
|
// Ajout de la l'attribut active
|
|
var toactive;
|
|
switch(surveyvote.val) {
|
|
case "": toactive="none"; break;
|
|
case 0: case "0": toactive="ko"; break;
|
|
case 1: case "1": toactive="maybe"; break;
|
|
case 2: case "2": toactive="ok"; break;
|
|
}
|
|
$("#input-"+surveyvote.id).val(surveyvote.val);
|
|
$("#div-"+surveyvote.id).children("."+toactive).addClass("active");
|
|
$("#choice-"+surveyvote.id).children(".choicesurveyoption."+toactive).addClass("active");
|
|
});
|
|
$(".active").show();
|
|
});
|
|
|
|
{% if form.submit is defined %}
|
|
$(".response").mouseover(function() {
|
|
$(".choice").hide();
|
|
$(".active").show();
|
|
id=$(this).parent().attr("id").replace("div-","");
|
|
$(this).hide();
|
|
$("#choice-"+id).show();
|
|
});
|
|
|
|
|
|
$("#row-surveyguest").mouseleave(function() {
|
|
$(".choice").hide();
|
|
$(".active").show();
|
|
});
|
|
|
|
$("#row-surveyguest .surveyguest").mouseover(function() {
|
|
$(".choice").hide();
|
|
$(".active").show();
|
|
});
|
|
|
|
$("#surveyguest_submit").mouseover(function() {
|
|
$(".choice").hide();
|
|
$(".active").show();
|
|
});
|
|
|
|
function surveyvoteChoice(choice,id) {
|
|
$("#input-"+id).val(choice);
|
|
|
|
// Suppression de l'attribut active
|
|
$("#div-"+id).children(".response").removeClass("active");
|
|
$("#choice-"+id).children(".choicesurveyoption").removeClass("active");
|
|
|
|
// Ajout de la l'attribut active
|
|
var toactive;
|
|
switch(choice) {
|
|
case "": toactive="none"; break;
|
|
case 0: toactive="ko"; break;
|
|
case 1: toactive="maybe"; break;
|
|
case 2: toactive="ok"; break;
|
|
}
|
|
$("#div-"+id).children("."+toactive).addClass("active");
|
|
$("#choice-"+id).children(".choicesurveyoption."+toactive).addClass("active");
|
|
}
|
|
|
|
$('#mycontent').on('click', '#surveyguest_submit', function(event) {
|
|
// Construction du tableau des surveyvotes
|
|
var tbsurveyvotes=[];
|
|
$(".input-response").each(function() {
|
|
keysurveyvote=$(this).attr("id").replace("input-","");
|
|
valsurveyvote=$(this).val();
|
|
tbsurveyvotes[keysurveyvote]=valsurveyvote;
|
|
});
|
|
|
|
// On recalcul la chaine json
|
|
surveyvotes="";
|
|
for (const [keysurveyvote, valsurveyvote] of Object.entries(tbsurveyvotes)) {
|
|
if(surveyvotes!="") surveyvotes+=',';
|
|
if(surveyvotes=="") surveyvotes='[';
|
|
surveyvotes+='{ "id":"'+keysurveyvote+'", "val":"'+valsurveyvote+'"}';
|
|
}
|
|
|
|
if(surveyvotes!="") surveyvotes+=']';
|
|
if(surveyvotes=="") surveyvotes="[]";
|
|
|
|
// Valoriser le formulaire
|
|
$("#surveyguest_jsonsurveyvotes").val(surveyvotes);
|
|
});
|
|
{%endif%}
|
|
{% endblock %}
|