Conjunto 1731833 en consulta_publica

Fecha y hora:

21/03/2017 11:33:08 (hace 7 años)

Autor:

rudmanmrrod <rudman22@…>

Branches:

master, base, constituyente, estudiantes, general, plan_patria, sala

Children:

95b08c1, bae8490

Parents:

a1ac8b8

Mensaje:

Agregado estilo a la caja de la encuesta, agregada barra de progreso de la encuesta y validación para avanzar o retroceder

Ficheros:

• participacion/templates/participacion.create.html (modificado) (3 diferencias)
• participacion/views.py (modificado) (1 diferencia)
• static/css/style.css (modificado) (3 diferencias)
• static/js/funciones.js (modificado) (1 diferencia)

participacion/templates/participacion.create.html

@@ -7 +7 @@
         <div class="row text-center">
             <h1>Consulta</h1><hr>
-            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false" style="height:350px;">
+            <div class="row">
+                <div class="progress non-null" role="progressbar" id="status" >
+                  <div class="progress-bar progress-bar active" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
+                    <div class="bar" style="width:100%"><span style="color:black;">Progreso</span></div>
+                  </div>
+                </div>
+            </div>
+            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                 <!-- Indicators -->
                 <ol class="carousel-indicators">
                     {% for key, value in preguntas.items  %}
-                        <li data-target="#myCarousel" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.counter0 == 0 %}active{%endif%}"></li>
+                        <li data-target="#myCarousel" class="{% if forloop.counter0 == 0 %}active{%endif%}"></li>
                     {% endfor %}
+                    <li data-target="#myCarousel"></li>
                 </ol>
               
@@ -29 +37 @@
                         </div>
                      {% endfor %}
+                        <div class="col-md-6 col-sm-6 col-xs-6 col-xs-offset-3 col-md-offset-3 col-sm-offset-3 item">
+                            <div class="row">
+                                <button type="submit" onclick="validate_poll(event);" class="btn btn-success">
+                                    Registrar Participación
+                                </button>
+                            </div>
+                        </div>
                 </div>
 
               
                 <!-- Left and right controls -->
-                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+                <a class="left carousel-control" href="#myCarousel" role="button" onclick="go_back();">
                     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                     <span class="sr-only">Anterior</span>
                 </a>
-                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+                <a class="right carousel-control" href="#myCarousel" role="button" onclick="control_progress();">
                     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                     <span class="sr-only">Siguiente</span>
@@ -44 +59 @@
              <div class="col-md-12 col-sm-12 col-xs-12">
                 <a type="button" class="btn btn-info pull-left" href="{% url 'participacion_index' %}">Regresar</a>
-                <button type="submit" class="btn btn-success pull-right">Participar</button>
              </div>
         </div>

participacion/views.py

@@ -102 +102 @@
                 campo = ''
                 for opcion in Opcion.objects.filter(pregunta_id=pregunta.id).all():
-                    campo += '<label for="'+kwargs['pk']+'">'+opcion.texto_opcion+'</label><input type="radio" name="consulta_respuesta_radio_'+str(opcion.id)+'" id="'+kwargs['pk']+'"value="'+str(opcion.id)+'" class="icheck">'
+                    campo += '<label for="'+kwargs['pk']+'">'+opcion.texto_opcion+'</label><input type="radio" name="consulta_respuesta_radio_'+kwargs['pk']+'" id="'+kwargs['pk']+'"value="'+str(opcion.id)+'" class="icheck">'
             elif pregunta.tipo_pregunta.id == 2:
                 campo = ''

static/css/style.css

@@ -96 +96 @@
 .carousel-control .glyphicon-chevron-left,
 .carousel-control .icon-prev {
-        left: 0;
+        left: 10px;
 }
 
 .carousel-control .glyphicon-chevron-right,
 .carousel-control .icon-next {
-        right: 0;
+        right: 10px;
 }
 
@@ -108 +108 @@
         background-color: #000;
 }*/
+
+.carousel-indicators .active {
+    background-color: gray;
+}
+
+.carousel-indicators li {
+    border: 1px solid gray;
+}
 
 .carousel-control.left span:hover,
@@ -157 +165 @@
   width:100%; 
   position:absolute; 
-  bottom:; 
-  left:; 
+  bottom:0; 
+  left:0; 
 }
+
+#myCarousel{
+    height:350px;
+    background-color: white;
+    color: gray;
+    padding: 10px 10px 10px 10px;
+    border: solid 5px #deddde;
+}

static/js/funciones.js

@@ -489 +489 @@
     }); 
 }
+
+/**
+ * Función para validar la encuesta
+ * @param event Recibe el evento
+**/
+function validate_poll(event) {
+    event.preventDefault();
+}
+
+/**
+ * Función para retroceder en el carrusel y bajar el valor de la
+ * barra de progreso
+**/
+function go_back() {
+    var first_element = $('.carousel-indicators li')[0];
+    if($(first_element).attr('class')!=='active')
+    {
+        $('#myCarousel').carousel('prev');
+        var elements = $('.carousel-indicators li').length-1;
+        var current_value = ($('#status .progress-bar').width()/$('#status').width())*100;
+        var final_value = current_value-(100/elements);
+        $('#status .progress-bar').width(final_value+"%");
+        if (final_value!=100) {
+            $('#status .bar span').text() == "Finalizado" ? $('#status .bar span').text('Progreso'):'';
+            $('#status .progress-bar').removeClass('progress-bar-success');
+        }
+        if (final_value==0) {
+            $('#status .bar span').css({'color':'black'});
+        }
+    }
+}
+
+/**
+ * Función para aumentar la barra de progreso si se responde la encuesta
+**/
+function control_progress() {
+    var content = $('.carousel-inner .active');
+    var not_empty = 0;
+    var elements = $('.carousel-indicators li').length-1;
+    $.each(content.find('input'),function(index,value){
+        var name = $(value).attr('name');
+        if(name.search('radio')!=-1 || name.search('check')!=-1 || name.search('sino')!=-1)
+        {
+            not_empty = $(value).parent().attr('class').search('checked') !== -1 ? 1:not_empty;
+        }
+    });
+    $.each(content.find('textarea'),function(index,value){
+        var name = $(value).attr('name');
+        if (name.search('abierta')!==-1) {
+            not_empty = $(value).val().trim() !== '' ? 1:not_empty;
+        }
+    });
+    if (not_empty) {
+        $('#status .bar span').css({'color':'white'});
+        $('#myCarousel').carousel('next');
+        var current_value = ($('#status .progress-bar').width()/$('#status').width())*100;
+        var final_value = current_value+(100/elements);
+        $('#status .progress-bar').width(final_value+"%");
+        
+        if (final_value==100) {
+            $('#status .bar span').text("Finalizado");
+            $('#status .progress-bar').addClass('progress-bar-success');
+        }
+    }
+}