source: sapic/explicacion_situacional/templates/caracterizacion.economica.html @ 61114b7

{% extends 'explicacion.situacional.html' %}
{% load staticfiles %}
{% block titulo %}_-=SAPIC-Caracterización Económica=-_{% endblock titulo %}
{% block extracss %}
  {% load staticfiles %}
  <link rel="stylesheet" type="text/css" href="{% static "DataTables/media/css/jquery.dataTables.min.css" %}">
  <link rel="stylesheet" type="text/css" href="{% static "DataTables/extensions/Buttons/css/buttons.dataTables.min.css" %}">
  <link rel="stylesheet" type="text/css" href="{% static "DataTables/extensions/Select/css/select.dataTables.min.css" %}">
  <link rel="stylesheet" type="text/css" href="{% static "DataTables/extensions/Responsive/css/responsive.dataTables.min.css" %}">
<style>

.container{
  display: block;
  position: relative;
  margin: 40px auto;
  height: auto;
  width: 500px;
  padding: 20px;
}

.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
        overflow: auto;
}

.siono{
  color: #000000;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #333;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.45em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
        color: red;
}

ul li .check{
  display: block;
  position: absolute;
  border: 3px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
        z-index: 5;
        transition: border .25s linear;
        -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid red;
}

ul li .check::before {
  display: block;
  position: absolute;
        content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 2px;
        left: 2px;
  margin: auto;
        transition: background 0.25s linear;
        -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 3px solid #0DFF92;
}

input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

input[type=radio]:checked ~ label{
  color: #0DFF92;
}


  </style>
{% endblock extracss %}

{% block extrajs %}
<script type="text/javascript" language="javascript" src="{% static "DataTables/media/js/jquery.dataTables.min.js" %}">
</script>
<script type="text/javascript" language="javascript" src="{% static "DataTables/extensions/Buttons/js/dataTables.buttons.min.js" %}">
</script>
<script type="text/javascript" language="javascript" src="{% static "DataTables/extensions/Buttons/js/buttons.print.min.js" %}">
</script>
<script type="text/javascript" language="javascript" src="{% static "DataTables/extensions/Buttons/js/buttons.jqueryui.js" %}">
</script>
<script type="text/javascript" language="javascript" src="{% static "DataTables/extensions/Buttons/js/buttons.html5.min.js" %}">
</script>
<script type="text/javascript" language="javascript" src="{% static "DataTables/extensions/Select/js/dataTables.select.min.js" %}">
</script>
<script type="text/javascript" language="javascript" src="{% static "DataTables/extensions/Responsive/js/dataTables.responsive.min.js" %}">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    var table = $('#TablaEncuesta').DataTable({
        "processing": true,
        //"serverSide": true,
        "ajax": {
           "dataSrc": '',
           "type": "GET",
           "url": "{% url 'serializer:respuestasino-list' %}",
           "contentType": "application/json; charset=utf-8",
           "dataType": "json",
           "processData": true,
        },

         responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Pregunta: '+data['pregunta']['texto_pregunta'];
                    }
                } ),
                renderer: function ( api, rowIdx ) {
                    // Select hidden columns for the given row
                    var data = api.cells( rowIdx, '' ).eq(0).map( function ( cell ) {
                        var header = $( api.column( cell.column ).header() );
                        if (header.text() == 'Respuesta') {
                              var str1 = '<div class="form-group">'+
    '<h3>Respuesta</h3>'+
    '<div class="form-group">'+
    '<ul><li class="siono">  '+
    '  <input type="radio" value=True name="respuesta" id="Si" '+(api.cell( cell ).data()? "checked":"")+'><label for="Si">Si</label> <div class="check"></div>'+
    '</li><li class="siono">  '+
    '  <input type="radio" value=False name="respuesta" id="No" '+(api.cell( cell ).data()? "":"checked")+'><label for="No">No</label> <div class="check"><div class="inside"></div></div></li></ul>'+

    '</div>'+
  '</div> '
                            var str = "{% csrf_token %}";
                            var res = str.replace(/'/g, "\"");
                            return str1 + res+

                                   '<div class="modal-footer">' +
                                   '<button class="btn bg-purple btn-flat margin" type="submit">Guardar</button>' +

                                  '</div>';
                    //        return '<tr>'+ '<td>'+ header.text()+':'+ '</td> '+ '<td>'+ api.cell( cell ).data()+ '</td>'+ '</tr>';
                        }
                        return '<input type="hidden" name="'+header.text()+'" value="'+api.cell( cell ).data()+'">';
                        } ).toArray().join('');
                return data ? $('<form action={% url "explicacion:modificar_respuesta" %} method="POST"/>').append( data ) : false;
                }
            }
        },
        "dom": '<lf<t>Bip>',
         buttons: [
           'csv','print','pdf'
        ],
        "columns": [
            { "data": "id" },
            { "data": "pregunta.texto_pregunta" },
            { "data": "respuesta",
                "render": function (data, type, row) {
                           return (data === true) ? 'Si <span class="glyphicon glyphicon-ok"></span>':'No <span class="glyphicon glyphicon-remove"></span>';
                           }
            },

            { "data": "user.username" }
        ],

        "columnDefs": [
            {
                "targets": [0],
                "visible": false,
                "searchable": false
            },
       ]
    });


    $('#TablaEncuesta tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );


   table.buttons().container().appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

});
</script>
{% endblock extrajs %}
{% block contenido_principal %}
    <div class="col-xs-12">
        <div class="panel-sapic">
            <section class="content-header">
                  <h2>
                    Caracterización Económica
                    <small>Encuesta características Económica de la comunidad</small>
                  </h2>
            </section>
            <section class="content">
                <div class="col-lg-12 col-xs-12">
                <table id="TablaEncuesta" class="display">
                  <thead>
                    <tr>
                        <th>ID</th>
                        <th>Pregunta</th>
                        <th>Respuesta</th>
                        <th>User</th>
                    </tr>
                  </thead>
                  <!--<tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                  </tbody>-->
                </table>
                </div>

            </section>
        </div>
    </div>
{% endblock contenido_principal %}