You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
240 lines
11 KiB
240 lines
11 KiB
{% extends 'base.html.twig' %}
|
|
{% block stylesheets %}
|
|
<link rel="stylesheet" type="text/css" href="{{ asset('bootstrap/css/bootstrap.min.css')}}" />
|
|
<link href="{{ asset('css/main.css')}}" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="{{ asset('fonts/material-design-iconic-font/css/material-design-iconic-font.css')}}" />
|
|
<link href="{{ asset('css/datepicker.min.css')}}" rel="stylesheet">
|
|
<link href="{{ asset('css/style.css')}}" rel="stylesheet">
|
|
<meta name="Author" content="">
|
|
<style type="text/css">
|
|
body {
|
|
padding-top: 60px;
|
|
}
|
|
{% for seccion in tarea[0].SeccionesTareaId %}
|
|
{% if seccion.posicion == 1 %}
|
|
.steps {
|
|
height: 2px;
|
|
position: absolute;
|
|
width: calc(100% /{{ loop.length }});
|
|
background: #b7b2ab;
|
|
bottom: -52px;
|
|
left: 50%;
|
|
transform: translateX(-50%); }
|
|
.steps ul {
|
|
height: 2px;
|
|
position: absolute;
|
|
background: #333;
|
|
width: calc(100% /{{ loop.length }});
|
|
bottom: 0;
|
|
left: 0;
|
|
transition: all 0.3s ease; }
|
|
.steps:before {
|
|
content: "1";
|
|
color: #333;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 3px;
|
|
font-size: 13px;
|
|
font-family: "Poppins-Regular";
|
|
transition: all 0.3s ease; }
|
|
.steps:after {
|
|
content: "{{loop.length}}";
|
|
color: #333;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 3px;
|
|
font-size: 13px;
|
|
font-family: "Poppins-Regular"; }
|
|
{% elseif seccion.posicion == loop.length %}
|
|
|
|
.steps.step-{{seccion.posicion }} ul {
|
|
width: 100%;
|
|
transition: all 0.3s ease; }
|
|
.steps.step-{{seccion.posicion}}:before {
|
|
content: '';
|
|
left: 100%;
|
|
transition: all 0.1s ease; }
|
|
{% else %}
|
|
.steps.step-{{seccion.posicion}} ul {
|
|
width: calc({{seccion.posicion}}*(100% /{{ loop.length }}));
|
|
transition: all 0.3s ease; }
|
|
.steps.step-{{seccion.posicion}}:before {
|
|
content: '{{seccion.posicion}}';
|
|
left: calc({{seccion.posicion}}*(100% /{{ loop.length }}));
|
|
transition: all 0.3s ease; }
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
</style>
|
|
<!-- Google Fonts call. Font Used Open Sans & Raleway -->
|
|
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300" rel="stylesheet" type="text/css">
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
|
|
{% endblock %}
|
|
{% block javascripts %}
|
|
<script type="text/javascript" src="{{ asset('js/jquery-3.3.1.min.js')}}"></script>
|
|
<script type="text/javascript" src="{{ asset('js/jquery.steps.js')}}"></script>
|
|
|
|
<script type="text/javascript" src="{{ asset('js/datepicker.js')}}"></script>
|
|
|
|
<script type="text/javascript" src="{{ asset('js/datepicker.en.js')}}"></script>
|
|
<script type="text/javascript" >
|
|
$(document).ready(function () {
|
|
$("#wizard").steps({
|
|
headerTag: "h4",
|
|
bodyTag: "section",
|
|
transitionEffect: "fade",
|
|
enableAllSteps: true,
|
|
transitionEffectSpeed: 300,
|
|
labels: {
|
|
next: "Next",
|
|
previous: "Back"
|
|
},
|
|
onFinished: function (event, currentIndex) {
|
|
$("#wizard").submit();
|
|
},
|
|
onStepChanging: function (event, currentIndex, newIndex) {
|
|
{% for seccion in tarea[0].SeccionesTareaId %}
|
|
if ( newIndex === {{seccion.posicion}} ) {
|
|
$('.steps').addClass('step-{{seccion.posicion + 1}}');
|
|
} else {
|
|
$('.steps').removeClass('step-{{seccion.posicion + 1}}');
|
|
}
|
|
{% endfor %}
|
|
|
|
return true;
|
|
}
|
|
});
|
|
// Custom Jquery Steps
|
|
$('.forward').click(function(){
|
|
$("#wizard").steps('next');
|
|
})
|
|
$('.backward').click(function(){
|
|
$("#wizard").steps('previous');
|
|
})
|
|
// Select
|
|
$('html').click(function() {
|
|
$('.select .dropdown').hide();
|
|
});
|
|
$('.select').click(function(event){
|
|
event.stopPropagation();
|
|
});
|
|
$('.select .select-control').click(function(){
|
|
$(this).parent().next().toggle().toggleClass('active');
|
|
})
|
|
$('.select .dropdown li').click(function(){
|
|
$(this).parent().toggle();
|
|
var text = $(this).attr('rel');
|
|
$(this).parent().prev().find('div').text(text);
|
|
})
|
|
// Payment
|
|
$('.payment-block .payment-item').click(function(){
|
|
$('.payment-block .payment-item').removeClass('active');
|
|
$(this).addClass('active');
|
|
})
|
|
// Date Picker
|
|
});
|
|
</script>
|
|
<![endif]-->
|
|
{% endblock %}
|
|
{% block container %}
|
|
|
|
<div class="container">
|
|
<h4><strong>Cuestionario de {{ tarea[0].nombre }}</strong></h4>
|
|
<div class="wrapper" >
|
|
<form action="{{ path('respuestas_tarea', {'id':tarea[0].id}) }}" id="wizard" method="post">
|
|
{% set preguntasIndex=1%}
|
|
{% set cambioSeccion=false %}
|
|
{% set lastcambio=1 %}
|
|
{% for seccion in tarea[0].SeccionesTareaId %}
|
|
{% if (preguntasIndex - lastcambio)== seccion.numeroPreguntas %}
|
|
{% set cambioSeccion=true %}
|
|
{% endif %}
|
|
{% set pregunta= preguntas[preguntasIndex-1] %}
|
|
{% if (preguntasIndex==1) or (cambioSeccion) %}
|
|
{% set lastcambio=preguntasIndex %}
|
|
<h4></h4>
|
|
<section>
|
|
{% endif %}
|
|
<div class="inner">
|
|
{% if (preguntasIndex==1) or (cambioSeccion) %}
|
|
<h5>{{ seccion.nombre }}</h5>
|
|
<a href="#" class="avartar">
|
|
<img height="50px" src="{{ asset('images/toolbox.png')}}" alt="">
|
|
</a>
|
|
{% endif %}
|
|
{% for pregunta in 1..seccion.numeroPreguntas %}
|
|
{% if pregunta.TipoPreguntaId.nombre=="string" %}
|
|
|
|
<div class="form-row">
|
|
<div class="form-holder">
|
|
<label for="{{ pregunta.alias }}">{{ pregunta.nombre }}</label>
|
|
{% if respuestas is empty %}
|
|
<input type="text" class="form-control" id="{{ pregunta.alias }}" name="{{ pregunta.alias }}" placeholder="{{ pregunta.nombre }} {% if not pregunta.editable %} readonly {% endif %}">
|
|
{% else %}
|
|
{% for respuesta in respuestas %}
|
|
{% if respuesta.preguntas.id == pregunta.id %}
|
|
<input type="text" class="form-control" id="{{ pregunta.alias }}" name="{{ pregunta.alias }}" placeholder="{{ pregunta.nombre }}" value="{{ respuesta.valor }}" {% if not pregunta.editable %} readonly {% endif %}>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% elseif pregunta.TipoPreguntaId.nombre== "text" %}
|
|
|
|
<div class="form-row">
|
|
<div class="form-holder">
|
|
<label for="{{ pregunta.alias }}">{{ pregunta.nombre }}</label>
|
|
{% if respuestas is empty %}
|
|
<textarea class="form-control" id="{{ pregunta.alias }}" name="{{ pregunta.alias }}" placeholder="{{ pregunta.nombre }}" rows="10" {% if not pregunta.editable %} readonly {% endif %}></textarea>
|
|
{% else %}
|
|
{% for respuesta in respuestas %}
|
|
{% if respuesta.preguntas.id == pregunta.id %}
|
|
<textarea class="form-control" id="{{ pregunta.alias }}" name="{{ pregunta.alias }}" placeholder="{{ pregunta.nombre }}" rows="10" {% if not pregunta.editable %} readonly {% endif %}>{{ respuesta.valor }}</textarea>
|
|
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% elseif pregunta.TipoPreguntaId.nombre== "select" %}
|
|
|
|
<div class="form-row">
|
|
<div class="select">
|
|
<div class="form-holder">
|
|
<label for="{{ pregunta.alias }}">{{ pregunta.nombre }}</label>
|
|
<div class="select-control">{{ pregunta.nombre }}</div>
|
|
<i class="zmdi zmdi-caret-down small"></i>
|
|
</div>
|
|
<ul class="dropdown" style="display: none;">
|
|
{% for valor in pregunta.tipoPregunta.valoresPosibles|split(',') %}
|
|
<li rel="{{valor}}">{{valor}}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
|
|
<div class="form-row">
|
|
<div class="form-holder">
|
|
<input type="text" class="form-control" id="{{ pregunta.alias }}" name="{{ pregunta.alias }}" placeholder="{{ pregunta.nombre }}" {% if not pregunta.editable %} readonly {% endif %}>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
</div>
|
|
{% set preguntasIndex= preguntasIndex+1%}
|
|
{% endfor %}
|
|
|
|
|
|
{% if (preguntasIndex - lastcambio)== seccion.numeroPreguntas %}
|
|
</section>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</form>
|
|
</div>
|
|
</div><!-- /container -->
|
|
{% endblock container %}
|