diff options
Diffstat (limited to 'webapp/polls/templates')
| -rw-r--r-- | webapp/polls/templates/base-poll.html | 11 | ||||
| -rw-r--r-- | webapp/polls/templates/builder.html | 153 | ||||
| -rw-r--r-- | webapp/polls/templates/image_option_thumbnail.html | 7 | ||||
| -rw-r--r-- | webapp/polls/templates/mustache/field.html | 56 | ||||
| -rw-r--r-- | webapp/polls/templates/mustache/group.html | 37 | ||||
| -rw-r--r-- | webapp/polls/templates/mustache/option.html | 34 | ||||
| -rw-r--r-- | webapp/polls/templates/mustache/option_default.html | 13 | ||||
| -rw-r--r-- | webapp/polls/templates/mustache/option_image_thumbnail.html | 24 | ||||
| -rw-r--r-- | webapp/polls/templates/mustache/option_image_upload.html | 31 | ||||
| -rw-r--r-- | webapp/polls/templates/poll-form.html | 81 | ||||
| -rw-r--r-- | webapp/polls/templates/poll-list.html | 50 | ||||
| -rw-r--r-- | webapp/polls/templates/poll-structure-form.html | 62 | ||||
| -rw-r--r-- | webapp/polls/templates/poll-success.html | 19 | ||||
| -rw-r--r-- | webapp/polls/templates/sucess.html | 28 | ||||
| -rw-r--r-- | webapp/polls/templates/tags/field-options.html | 243 | ||||
| -rw-r--r-- | webapp/polls/templates/tags/field-widget-types.html | 6 | ||||
| -rw-r--r-- | webapp/polls/templates/tags/structure.html | 71 |
17 files changed, 496 insertions, 430 deletions
diff --git a/webapp/polls/templates/base-poll.html b/webapp/polls/templates/base-poll.html new file mode 100644 index 0000000..0a47444 --- /dev/null +++ b/webapp/polls/templates/base-poll.html @@ -0,0 +1,11 @@ +{% extends "base-main.html" %} + +{% block messages %} + {% if messages %} + {% for message in messages %} + <div class="alert alert-{{ message.tags }}"> + {{ message }} + </div> + {% endfor %} + {% endif %} +{% endblock %}
\ No newline at end of file diff --git a/webapp/polls/templates/builder.html b/webapp/polls/templates/builder.html deleted file mode 100644 index 81752f2..0000000 --- a/webapp/polls/templates/builder.html +++ /dev/null @@ -1,153 +0,0 @@ -{% extends "base-main.html" %} -{% load i18n poll_tags %} - -{% block title %}Builder{% endblock %} - -{% block extra_css %} - <style type="text/css"> - body { - padding-top: 70px; - } - </style> -{% endblock %} - -{% block main_container %} - <div class="alert alert-info navbar-fixed-top">Para generar dependencias, arrastré el ID de la opción hacia el campo "Depende de la opción". Las dependencias validas se realizan desde una opción de una pregunta de menor orden hacia una pregunta de mayor orden.</div> - - <center><h3>Creación de la estructura de encuesta</h3></center> - - <form class="form-inline" method="post" action=""> - - {% for group in structure.groups %} - <legend> - <label><h4>Nombre del Grupo:</h4></label> - <input - type="text" - name="groups.{{ forloop.counter0 }}.name" - value="{{ group.name|default_if_none:'' }}" - /> - <button class="toggle" group_index="{{ forloop.counter0 }}"><i class="icon-arrow-down"></i> Desplegar campos</button> - </legend> - - <fieldset id="Group{{ forloop.counter0 }}" class="field_area"> - - - {% for field in group.fields %} - {% with group_index=forloop.parentloop.counter0 %} - - <div class="well"> - - {% if field.errors %} - <div class="control-group error"> - <label class="control-label"> - <ul> - {% for error in field.errors %} - <li>{{ error }}</li> - {% endfor %} - </ul> - </label></br> - </div> - {% endif %} - - <div class="row-fluid"> - - <label>Depende de la opción:</label> - <input - class="input-medium droppable" - type="text" - name="groups.{{ group_index }}.fields.{{ forloop.counter0 }}.dependence" - value="{{ field.dependence|default_if_none:'' }}" - placeholder="nro. ID" - _group_index="{{ group_index }}" - _field_index="{{ forloop.counter0 }}" - /> - - {% render_widget_types field %} - - </div> - - <div class="row-fluid"> - - <label>Pregunta:</label> - <input - class="input-xxlarge" - type="text" - name="groups.{{ group_index }}.fields.{{ forloop.counter0 }}.name" - value="{{ field.name|default_if_none:'' }}" - placeholder="Pregunta..." - /> - - </div> - - {% render_options field %} - </div> - - {% endwith %} - <hr /> - {% endfor %} - - </fieldset> - - {% endfor %} - - <div class="ps-form-toolbar btn-toolbar clearfix"> - <div class="btn-group"> - <button class="btn btn-primary"><i class="icon-white icon-circle-arrow-right"></i> {% trans 'Generar encuesta' %}</button> - </div> - </div> - - {% csrf_token %} - - </form> - -<script type="text/javascript"> - (function($){ - $(document).ready(function() { - $(".field_area").toggle(); - $(".toggle").on('click', function(event) { - event.preventDefault(); - var group_index = $(this).attr("group_index"); - $("#Group" + group_index).toggle("showOrHide"); - - /* Hide groups that are visible and have no errors */ - $("fieldset[id!='Group" + group_index +"']:visible") - .not(":has('.error')") - .toggle("slow"); - }); - - /* Keep visible the groups that have errors */ - $('fieldset:has(".error"):hidden').toggle("fast"); - - }); - })(jQuery); -</script> - -{% endblock %} - -{% block main_footer %} - <hr /> - <div class="alert alert-success"> - <button type="button" class="close" data-dismiss="alert">×</button> - <h4>Version 1.0</h4> - <ul> - <li><p>La dependencia se puede realizar: "Una pregunta depende de una opción de alguna pregunta anterior".</p></li> - <li><p>Las validaciones en las dependencias (ej: opcion 3 de la pregunta 2, habilita pregunta 3) serán correctas si se usa la opcion de arrastre para generarla, de lo contrario solo validará que sea una opción dentro de los ID existentes.</p></li> - <li><p>Solo se dispone de 2 grupos y 2 preguntas por grupo.</p></li> - <li><p>El archivo de generación de encuesta, tendrá como nombre: fecha_hora actual de generación, pero puede ser modificado a la hora del guardado.</p></li> - <li><p>No existen ningún otro dato relacionado a la encuesta, mas que la generación de su estructura y el salvado de la misma, en un archivo (archivo necesario para la aplicación de llenado de encuestas).</p></li> - <li>La cantidad de opciones por pregunta, es dinámica, pero se restringe a 4 como maximo.</li> - </ul> - </div> - - <div class="alert alert-info"> - <button type="button" class="close" data-dismiss="alert">×</button> - <h4>Version 2.0</h4> - <ul> - <li><p>Las dependencias tendrán todas las reglas de validación cuando se ingrese manualmente un ID de opción.</p></li> - <li><p>Se agregarán y quitarán preguntas y grupos dinamicamente (sin restricción de cantidad).</p></li> - <li><p>No tendrá restricción la cantidad de opciones por pregunta.</p></li> - <li><p>Se gestionarán las encuestas que ya se crearon, y se podrá asociar a ellas, nombre, y otros atributos, ademas de la estructura en sí.</p></li> - <li><p>Se podrá reorganizar el orden en que aparecen las preguntas por grupo, y el orden de los grupos.</p></li> - </ul> - </div> -{% endblock %}
\ No newline at end of file diff --git a/webapp/polls/templates/image_option_thumbnail.html b/webapp/polls/templates/image_option_thumbnail.html new file mode 100644 index 0000000..d65b169 --- /dev/null +++ b/webapp/polls/templates/image_option_thumbnail.html @@ -0,0 +1,7 @@ +{% load thumbnail %} + +<div class="thumbnail" style="width: 150px; height: 150px;" > + {% thumbnail img "150x150" crop="center" as im %} + <img src="{{ im.url }}" img_src="{{ img_src }}" /> + {% endthumbnail %} +</div>
\ No newline at end of file diff --git a/webapp/polls/templates/mustache/field.html b/webapp/polls/templates/mustache/field.html new file mode 100644 index 0000000..3987571 --- /dev/null +++ b/webapp/polls/templates/mustache/field.html @@ -0,0 +1,56 @@ +<!-- Template: Field --> +<script type="text/x-mustache-template" name="field"> + <div class="row-fluid field well well-small"> + + <input type="hidden" name="groups.[[ group_order ]].fields.[[ order ]].order" value="[[ order ]]" class="field_order" /> + + [[ #visible_errors ]] + <div class="control-group error"> + <label class="control-label"> + <ul> + [[ #errors ]] <li>[[ error ]]</li> [[ /errors ]] + </ul> + <label> + </div> + [[ /visible_errors ]] + + <div class="row-fluid"> + + <button class="WField_remove btn btn-danger"> + <i class="icon-remove-sign icon-white"></i> + </button> + + <label><b>Pregunta</b>:</label> + <input + class="input-xxlarge" + type="text" + name="groups.[[ group_order ]].fields.[[ order ]].name" + value="[[ name ]]" + placeholder="Pregunta..." /> + + </div> + + <div class="row-fluid"> + <label><b>Tipo de pregunta</b>:</label> + <select class="WFieldWidgetType" name="groups.[[ group_order ]].fields.[[ order ]].widget_type" style="width: 300px;"> + [[ #WIDGET_TYPES ]] + <option value="[[ key ]]" [[ #selected ]]selected="selected"[[ /selected ]]>[[ value ]]</option> + [[ /WIDGET_TYPES ]] + </select> + + <label><b>Depende de la opción</b>:</label> + <input + class="input-medium droppable" + type="text" + name="groups.[[ group_order ]].fields.[[ order ]].dependence" + value="[[ dependence ]]" + placeholder="nro. ID" /> + + </div> + + <div class="WFieldAddOptionButton_container" style="margin: 5px;"></div> + + <div class="WFieldOptions_container well"></div> + + </div> +</script>
\ No newline at end of file diff --git a/webapp/polls/templates/mustache/group.html b/webapp/polls/templates/mustache/group.html new file mode 100644 index 0000000..3ea1cde --- /dev/null +++ b/webapp/polls/templates/mustache/group.html @@ -0,0 +1,37 @@ +<!-- Template: Group --> +<script type="text/x-mustache-template" name="group"> + <div class="group row-fluid"> + + <legend> + + <button class="WGroup_remove btn btn-danger"> + <i class="icon-remove-sign icon-white"></i> + </button> + + <label> + <h4>Nombre del Grupo:</h4> + </label> + + <input type="text" name="groups.[[ order ]].name" value="[[ name ]]" /> + <input type="hidden" name="groups.[[ order ]].order" value="[[ order ]]" class="group_order" /> + + <button class="WGroup_add_field btn btn-success"> + <i class="icon-plus-sign icon-white"></i> Agregar pregunta + </button> + + [[ #visible_errors ]] + <div class="control-group error"> + <label class="control-label"> + <ul> + [[ #errors ]] <li>[[ error ]]</li> [[ /errors ]] + </ul> + </label> + </div> + [[ /visible_errors ]] + + </legend> + + <fieldset class="WGroup_field_containter"> + </fieldset> + </div> +</script>
\ No newline at end of file diff --git a/webapp/polls/templates/mustache/option.html b/webapp/polls/templates/mustache/option.html new file mode 100644 index 0000000..0527f05 --- /dev/null +++ b/webapp/polls/templates/mustache/option.html @@ -0,0 +1,34 @@ +<!-- Template: Field Option --> +<script type="text/x-mustache-template" name="field_option"> + <div class="span6" style="margin-left: 20px"> + <label style="padding: 5px;"> + <b>ID</b>: <span class="draggable"><i class="icon-move"></i>[[ id ]]</span> + </label> + <input + class="input-large" + type="text" + name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].text" + value="[[ value ]]" + placeholder="opción" /> + <input + class="input-small" + type="text" + name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].weight" + value="[[ weight ]]" + placeholder="peso" /> + <button class="WFieldOptions_remove btn btn-danger"> + <i class="icon-trash icon-white"></i> + </button> + </div> +</script> + +<!-- Template: Add Option button --> +<script type="text/x-mustache-template" name="field_add_option_button"> + <div class="WFieldOptions_add_button control-group"> + <div class="controls"> + <button class="btn btn-success"> + <i class="icon-plus-sign icon-white"></i> Agregar opción + </button> + </div> + </div> +</script>
\ No newline at end of file diff --git a/webapp/polls/templates/mustache/option_default.html b/webapp/polls/templates/mustache/option_default.html new file mode 100644 index 0000000..130acbf --- /dev/null +++ b/webapp/polls/templates/mustache/option_default.html @@ -0,0 +1,13 @@ +<!-- Template: Field Option default (widget type: RadioButton) --> +<script type="text/x-mustache-template" name="field_option_default"> + <label>Texto default:</label> + <input + class="input-xlarge" + type="text" + name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].text" + value="[[ value ]]" + placeholder="(opcional)" /> + <span> + Si ingresa un texto default, estará escrito en la respuesta a esta pregunta. + </span> +</script>
\ No newline at end of file diff --git a/webapp/polls/templates/mustache/option_image_thumbnail.html b/webapp/polls/templates/mustache/option_image_thumbnail.html new file mode 100644 index 0000000..43244a7 --- /dev/null +++ b/webapp/polls/templates/mustache/option_image_thumbnail.html @@ -0,0 +1,24 @@ +<!-- Template: Field Image option thumbnail --> +<script type="text/x-mustache-template" name="field_option_image_thumbnail"> + <div class="span3 WFieldImageOption_container well well-small" style="margin: 10px;"> + <span class="pull-right"> + <a href="#" class="WFieldImageOptions_remove_button btn btn-danger"> + <i class="icon-trash icon-white"></i> + </a> + </span> + <label> + <b>ID</b>: <span class="draggable"><i class="icon-move"></i>[[ id ]]</span> + </label><br /> + <center> + <input type="hidden" name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].img_name" value="[[ img_name ]]" /> + <div class="img_container"></div> + <b>Peso</b>: + <input + class="input-small" + type="text" + name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].weight" + value="[[ weight ]]" + placeholder="peso" /> + </center> + </div> +</script>
\ No newline at end of file diff --git a/webapp/polls/templates/mustache/option_image_upload.html b/webapp/polls/templates/mustache/option_image_upload.html new file mode 100644 index 0000000..325596d --- /dev/null +++ b/webapp/polls/templates/mustache/option_image_upload.html @@ -0,0 +1,31 @@ +<!-- Template: Field Image option upload --> +<script type="text/x-mustache-template" name="field_option_image_upload"> + + <div class="fileupload fileupload-new span3 well well-small" data-provides="fileupload" style="margin: 10px;"> + <label> + <b>ID</b>: <span class="draggable"><i class="icon-move"></i>[[ id ]]</span> + </label><br /> + <center> + <div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"> + <img src="{{ STATIC_URL }}img/no_image.gif" /> + </div> + <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 150px; max-height: 150px; line-height: 20px;"></div> + <div> + <b>Peso</b>: + <input + class="input-small" + type="text" + name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].weight" + value="[[ weight ]]" + placeholder="peso" /> + </center> + <span class="btn btn-file"> + <span class="fileupload-new">Elegir</span> + <span class="fileupload-exists">Cambiar</span> + <input type="file" name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].img" /> + </span> + <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Quitar</a> + </div> + </div> + +</script>
\ No newline at end of file diff --git a/webapp/polls/templates/poll-form.html b/webapp/polls/templates/poll-form.html new file mode 100644 index 0000000..a182e5a --- /dev/null +++ b/webapp/polls/templates/poll-form.html @@ -0,0 +1,81 @@ +{% extends "base-poll.html" %} +{% load i18n %} + +{% block title %}Formulario de encuesta{% endblock %} + +{% block main_container %} + + <div class="center"> + <h2>{% trans 'Formulario de encuesta' %}</h2> + </div> + + <form id="poll_form" class="form-inline" action="" method="post">{% csrf_token %} + + {% if poll.id %} + <input type="hidden" name="id" value="{{ poll.id }}" /> + {% endif %} + + {% if user.is_superuser and poll.id %} + <div class="control-group {% if form.status.errors %}error{% endif %}"> + <div class="controls"> + <label class="control-label" for="id_status">{{ form.status.label }}:</label> + <select id="id_status" name="status"> + {% for value, status in STATUS_CHOICES %} + <option value="{{ value }}" {% if status == poll.status %}selected="selected"{% endif %}>{{ status }}</option> + {% endfor %} + </select> + <span class="help-block"> + <p>Una encuesta "cerrada" no podrá ser modificada. Una vez "cerrada", solo pordrá ser "abierta" por un usuario de mas alto privilegio. + </p> + </span> + {% if form.status.errors %} + <span class="help-inline">{{ form.status.errors }}</span> + {% endif %} + </div> + </div> + {% endif %} + + <div class="control-group {% if form.name.errors %}error{% endif %}"> + <div class="controls"> + <label class="control-label" for="id_name">{{ form.name.label }}:</label> + <input type="text" name="name" id="id_name" placeholder="{{ form.name.label }}" value="{{ poll.name|default_if_none:'' }}" /> + <span class="help-inline">{{ form.name.errors }}</span> + </div> + </div> + + <div class="ps-form-toolbar btn-toolbar clearfix"> + <div class="btn-group"> + <!-- Save --> + <button class="btn btn-primary"><i class="icon-white icon-edit"></i> {% trans 'Guardar' %}</button> + + <!-- Save and continue with poll structure --> + <button id="continue" class="btn btn-success"><i class="icon-white icon-circle-arrow-right"></i> {% trans 'Guardar y modificar estructura de encuesta' %}</button> + </div> + </div> + </form> + + +<script type="text/javascript"> + + (function($){ + + var url = { + form_submit: '{% if poll.id %}{% url polls:edit poll.id %}{% else %}{% url polls:add %}{% endif %}?continue=true', + }; + + var form; + + $(document).ready(function(){ + + form = $('#poll_form'); + + $('#continue').click(function(){ + form.attr('action', url.form_submit); + form.trigger('submit'); + }); + }); + })(jQuery); + +</script> + +{% endblock %}
\ No newline at end of file diff --git a/webapp/polls/templates/poll-list.html b/webapp/polls/templates/poll-list.html new file mode 100644 index 0000000..bfa0eb3 --- /dev/null +++ b/webapp/polls/templates/poll-list.html @@ -0,0 +1,50 @@ +{% extends "base-poll.html" %} + +{% block main_container %} + + <table class="table table-hover table-bordered"> + <thead> + <tr> + <th class="span5">Nombre</th> + <th>Estado</th> + <th colspan="3"><center>Acciones</center></th> + </tr> + </thead> + <tbody> + {% for poll in polls %} + <tr style="background-color: {% if poll.is_open %}#f2dede;{% else %}#e8f4db{% endif %}"> + <td>{{ poll.name|capfirst }}</td> + <td>{{ poll.status|capfirst }}</td> + <td> + <a class="btn {% if not poll.is_open and not user.is_superuser %}disabled{% endif %}" href="{% url polls:edit id=poll.id %}"> + <i class="icon-edit"></i> Modificar datos de encuesta + </a> + </td> + <td> + <a class="btn {% if not poll.is_open %}disabled{% endif %}" href="{% url polls:structure.builder poll_id=poll.id %}"> + <i class="icon-wrench"></i> Modificar estructura + </a> + </td> + <td> + <a class="btn {% if poll.is_open %}disabled{% endif %}" href="{% url polls:download poll_id=poll.id %}"> + <i class="icon-download-alt"></i> Descargar encuesta + </a> + </td> + </tr> + {% endfor %} + </tbody> + </table> + +<script type="text/javascript"> + + (function($){ + + $(document).ready(function(){ + $('a.disabled').click(function() { return false; }); + }); + + })(jQuery); + +</script> + +{% endblock %}
\ No newline at end of file diff --git a/webapp/polls/templates/poll-structure-form.html b/webapp/polls/templates/poll-structure-form.html new file mode 100644 index 0000000..b695395 --- /dev/null +++ b/webapp/polls/templates/poll-structure-form.html @@ -0,0 +1,62 @@ +{% extends "base-poll.html" %} +{% load i18n poll_tags %} + +{% block title %}Estructura de encuesta{% endblock %} + +{% block extra_css %} + <style type="text/css"> + body { padding-top: 40px; } + </style> + + <link href="{{ STATIC_URL }}css/bootstrap-fileupload.css" rel="stylesheet" /> +{% endblock %} + +{% block main_container %} + <script src="{{ STATIC_URL }}js/bootstrap-fileupload.js"></script> + + <div class="alert alert-info"> + <ul> + <li> + Para generar dependencias, arrastre el ID de la opción hacia el campo "Depende de la opción", o bien, escriba el ID indicado. <i class="icon-warning-sign"></i> En esta version no existen criterios sobre las dependecias, tenga cuidado de realizarlas correctamente y no generar inconsistencias (ej: no haga dependiente una pregunta de una opción perteneciente a la misma pregunta.) + </li> + <li> + La opciones con imagenes deberán ser de dimensiones menores a 250px de ancho y 250px de alto. Formatos validos: GIF, JPG, PNG. + </li> + </ul> + </div> + + <center><h2>{{ poll.name|capfirst }}</h2></center> + + {% if errors %} + <div class="control-group error"> + <label class="control-label"> + <ul> + {% for error in errors %} + <li>{{ error }}</li> + {% endfor %} + </ul> + </label> + </div> + {% endif %} + + <form class="form-inline" method="post" action="" enctype="multipart/form-data"> + + <input type="hidden" name="poll_id" value="{{ poll.id }}" > + + {% if structure.id %} + <input type="hidden" name="id" value="{{ structure.id }}" /> + {% endif %} + + {% render_structure structure %} + + <div class="ps-form-toolbar btn-toolbar clearfix"> + <div class="btn-group"> + <button class="btn btn-primary"><i class="icon-white icon-edit"></i> {% trans 'Guardar' %}</button> + </div> + </div> + + {% csrf_token %} + + </form> + +{% endblock %}
\ No newline at end of file diff --git a/webapp/polls/templates/poll-success.html b/webapp/polls/templates/poll-success.html new file mode 100644 index 0000000..5d92d17 --- /dev/null +++ b/webapp/polls/templates/poll-success.html @@ -0,0 +1,19 @@ +{% extends "base-poll.html" %} + +{% block title %}Exito!{% endblock %} + +{% block main_container %} + + <div class="row-fuild span12"> + <form class="form-inline" method="post" action="">{% csrf_token %} + + <div class="ps-form-toolbar btn-toolbar clearfix"> + <div class="btn-group"> + <button class="btn btn-primary"><i class="icon-white icon-download-alt"></i> Descargar encuesta</button> + </div> + </div> + + </form> + </div> + +{% endblock %}
\ No newline at end of file diff --git a/webapp/polls/templates/sucess.html b/webapp/polls/templates/sucess.html deleted file mode 100644 index 364b31b..0000000 --- a/webapp/polls/templates/sucess.html +++ /dev/null @@ -1,28 +0,0 @@ -{% extends "base-main.html" %} - -{% block title %}Success!{% endblock %} - -{% block main_container %} - - <div class="row-fuild alert alert-success span10"> - La estructura de la encuesta se generó con exito, puede descargarla. - </div> - - <div class="row-fuild span12"> - <form class="form-inline" method="post" action=""> - - <div class="ps-form-toolbar btn-toolbar clearfix"> - <div class="btn-group"> - <button class="btn btn-primary"><i class="icon-white icon-download-alt"></i> Descargar encuesta</button> - </div> - <div class="btn-group"> - <a class="btn btn-warning " href="{% url polls:builder %}"><i class="icon-white icon-wrench"></i> Volver al constructor de estructuras</a> - </div> - </div> - - {% csrf_token %} - - </form> - </div> - -{% endblock %}
\ No newline at end of file diff --git a/webapp/polls/templates/tags/field-options.html b/webapp/polls/templates/tags/field-options.html deleted file mode 100644 index 6f352db..0000000 --- a/webapp/polls/templates/tags/field-options.html +++ /dev/null @@ -1,243 +0,0 @@ -{% load i18n %} - -<!-- +++++++++++++++++++++++++++++++ --> -<!-- ++ Widget: Field Options ++ --> -<!-- +++++++++++++++++++++++++++++++ --> - -<div id="WAddOptionButton_container_{{ group_index }}_{{ field_index }}"></div> - -<div id="WFieldOptions_{{ group_index }}_{{ field_index }}"> - <div id="WFieldOptions_container_{{ group_index }}_{{ field_index }}"></div> -</div> - -<!-- Template: Field Option --> -<script type="text/x-mustache-template" name="field_option"> - <div class="span6 input-append"> - <label> - Opción (ID: <span _group_index="[[ group_index ]]" - _field_index="[[ field_index ]]" class="draggable"><i class="icon-move"></i>[[ id ]]</span>)</label><br /> - <input - class="input-large" - type="text" - name="groups.[[ group_index ]].fields.[[ field_index ]].options.[[ id ]].text" - value="[[ value ]]" - placeholder="opción" /> - <button class="WFieldOptions_remove btn btn-danger"> - <i class="icon-remove-sign icon-white"></i> - </button> - </div> -</script> - -<!-- Template: Add Option button --> -<script type="text/x-mustache-template" name="add_button"> - <div class="control-group"> - <div class="controls"> - <button id="WFieldOptions_add_[[ group_index ]]_[[ field_index ]]" class="btn btn-success"> - <i class="icon-plus-sign icon-white"></i> {% trans "Agregar opción" %} - </button> - </div> - </div> -</script> - -<!-- Template: Field Option default (widget type: RadioButton) --> -<script type="text/x-mustache-template" name="field_option_default"> - <label>Texto default:</label> - <input - class="input-xlarge" - type="text" - name="groups.[[ group_index ]].fields.[[ field_index ]].options.[[ id ]].text" - value="[[ value ]]" - placeholder="(opcional)" /> -</script> - -<script type="text/javascript"> - /***************************/ - /** Widget: Field Options **/ - /***************************/ - - (function($){ - - var options = {{ options }}, - offset_option_id = {{ offset_option_id }}, - default_value = '', - field_widget_type = $('#WFieldWidgetType_{{ group_index }}_{{ field_index }}'), - group_index = {{ group_index }}, - field_index = {{ field_index }}, - field_options_count = parseInt({% if field.options|length %}{{ field.options|length }}{% else %}0{% endif %}), - max_field_options = 4, - widget, - container, - button_container; - - TEMPLATES = {}; - - var factoryOptionDefault = function(id, value) { - - var option_default = $( - Mustache.render(TEMPLATES['field_option_default'], { - "id": id, - "value": value, - "group_index": group_index, - "field_index": field_index - }) - ), - row_fluid = $('<div class="row-fluid"></div>'); - - row_fluid.append(option_default); - container.append(row_fluid); - } - - var factoryOption = function(id, value) { - // TODO: Desacoplar los widgets de este lugar. - var with_options = [ "MultipleCheckBox", "DropDownList", "RadioButton" ], - type = field_widget_type.attr('value'); - - if ($.inArray(type, with_options) != -1){ - var option = $( - Mustache.render(TEMPLATES['field_option'], { - "id": id, - "value": value, - "group_index": group_index, - "field_index": field_index - }) - ); - - option.find('button').on('click', function(event) { - event.preventDefault(); - var container_row_fuild = option.parent(".row-fluid"); - - option.remove(); - - /* Check for remove row of options */ - if (container_row_fuild.contents().length == 0) { - console.log(container_row_fuild); - container_row_fuild.remove(); - } - - /* Allow add more options */ - field_options_count = $("#WFieldOptions_container_" + group_index + "_" + field_index + " [type='text']").length; - var add_button = $("#WFieldOptions_add_" + group_index + "_" + field_index); - if (field_options_count <= max_field_options){ - add_button.removeClass("disabled"); - add_button.removeAttr("disabled"); - } - }); - - row_fluid = $('<div class="row-fluid"></div>'); - row_fluid.append(option); - container.append(row_fluid); - - } else { - factoryOptionDefault(id, value); - } - - /** Draggable option ID to dependence field **/ - $( ".draggable" ).draggable({'helper': 'clone'}); - $( ".droppable" ).droppable({ - drop: function( event, ui ) { - var drag_group_index = parseInt($(ui.draggable).attr('_group_index')), - drag_field_index = parseInt($(ui.draggable).attr('_field_index')), - drop_group_index = parseInt($(this).attr('_group_index')), - drop_field_index = parseInt($(this).attr('_field_index')); - - // TODO: Hacer comprobacion del lado del server tmb. - if (drag_group_index == drop_group_index && drag_field_index < drop_field_index) { - var value = ui.draggable[0]['innerText']; - $(this) - .addClass( "ui-state-highlight" ) - .attr("value", value); - } else { - alert('No se puede hacer una dependencia hacia atras.'); - } - } - }); - $( '.droppable[type="text"]' ).focusout(function(){ - if ($(this).attr('value') == ""){ - $(this).removeClass( "ui-state-highlight" ); - } - }); - - }; - - var bind_add_button = function(add_button) { - add_button.on('click', function(event){ - event.preventDefault(); - - factoryOption(offset_option_id, default_value); - offset_option_id++; - - /* Deny add more options */ - field_options_count++; - if (field_options_count >= max_field_options){ - add_button.addClass("disabled"); - add_button.attr("disabled", "disabled"); - } - }); - } - - var factoryAddButton = function() { - /** render and get add button **/ - var add_button = $( - Mustache.render(TEMPLATES['add_button'], { - "group_index": group_index, - "field_index": field_index - }) - ).find('button'); - - /** Bind change event for field widget type select box **/ - // TODO: Desacoplar los widgets de este lugar. - field_widget_type.on('change', function(event) { - field_options_count = 0; - var with_options = [ "MultipleCheckBox", "DropDownList", "RadioButton" ]; - var type = $(this).attr('value'); - container.contents().remove() - if ($.inArray(type, with_options) == -1) { - offset_option_id++; - add_button.remove(); - factoryOptionDefault(offset_option_id, ''); - } else { - bind_add_button(add_button) - button_container.append(add_button); - } - /* Allow add more options */ - if (field_options_count < max_field_options){ - add_button.removeClass("disabled"); - add_button.removeAttr("disabled"); - } - }); - - if ("{{ field.need_options }}" == "True"){ - button_container.append(add_button); - bind_add_button(add_button) - } - - }; - - $(document).ready(function() { - - /** Preparing TEMPLATES **/ - $('script[type="text/x-mustache-template"]').each(function(i, obj){ - TEMPLATES[$(obj).attr('name')] = $(obj).text(); - }); - - /** get the widget **/ - widget = $('#WFieldOptions_{{ group_index }}_{{ field_index }}'); - container = widget.find('#WFieldOptions_container_{{ group_index }}_{{ field_index }}'); - - /** Populate the current options **/ - $.each(options, factoryOption); - - /** get the container for buttons **/ - button_container = $('#WAddOptionButton_container_{{ group_index }}_{{ field_index }}'); - - /** Prepare add_button **/ - factoryAddButton(); - - }); - - })(jQuery); -</script> - -<!-- +++++++++++++++++++++++++++++++++++ --> -<!-- ++ END Widget: Field Options ++ --> -<!-- +++++++++++++++++++++++++++++++++++ -->
\ No newline at end of file diff --git a/webapp/polls/templates/tags/field-widget-types.html b/webapp/polls/templates/tags/field-widget-types.html deleted file mode 100644 index f8768c3..0000000 --- a/webapp/polls/templates/tags/field-widget-types.html +++ /dev/null @@ -1,6 +0,0 @@ -<label>Tipo de pregunta:</label> -<select id="WFieldWidgetType_{{ group_index }}_{{ field_index }}" name="groups.{{ group_index }}.fields.{{ field_index }}.widget_type"> - {% for k, v in WIDGET_TYPES %} - <option value="{{ k }}" {% if k == field.widget_type %}selected="selected"{% endif %}>{{ v }}</option> - {% endfor %} -</select>
\ No newline at end of file diff --git a/webapp/polls/templates/tags/structure.html b/webapp/polls/templates/tags/structure.html new file mode 100644 index 0000000..9b525b8 --- /dev/null +++ b/webapp/polls/templates/tags/structure.html @@ -0,0 +1,71 @@ +{% load i18n poll_tags %} + +<!-- Containers --> +<button id="WGroup_add" class="btn btn-primary"> + <i class="icon-plus-sign icon-white"></i> {% trans 'Agregar grupo' %} +</button> + +<div id="WGroupContainer"></div> + + +<!-- Mustache templates --> +{% include "mustache/group.html" %} + +{% include "mustache/field.html" %} + +{% include "mustache/option.html" %} + +{% include "mustache/option_default.html" %} + +{% include "mustache/option_image_upload.html" %} + +{% include "mustache/option_image_thumbnail.html" %} + +<!-- Global variables for dynamic_structure.js --> +<script type="text/javascript"> + + var groups = {{ groups|json }}, + WIDGET_TYPES = {{ WIDGET_TYPES|json }}, + WITH_OPTIONS = {{ WITH_OPTIONS|json }}, + WITH_IMAGES = {{ WITH_IMAGES|json }}, + OFFSET_OPTION_ID = {{ OFFSET_OPTION_ID|json }}, + IMAGE_OPTIONS_TMP_MEDIA_URL = {{ IMAGE_OPTIONS_TMP_MEDIA_URL|json }}, + POLL_ID = {{ POLL_ID|json }}; + +</script> + + +<!-- Dynamic structure methods --> +<script src="{{ STATIC_URL }}js/dynamic_structure.js"></script> + + +<!-- Dynamic structure initialization --> +<script type="text/javascript"> + (function($){ + + $(document).ready(function() { + + // Preparing TEMPLATES + $('script[type="text/x-mustache-template"]').each(function(i, obj){ + TEMPLATES[$(obj).attr('name')] = $(obj).text(); + }); + + // Get group container widget + container = $('#WGroupContainer'); + + // Render of groups + $.each(groups, factoryGroup); + + // Bind group add event + $("#WGroup_add").on('click', function(event){ + event.preventDefault(); + + // TODO: Que la estructura de grupo vacio la de un metodo. + var next_group_order = $('.group').length; + factoryGroup(next_group_order, {"name": '', "fields": []}) + }); + + }); + + })(jQuery); +</script>
\ No newline at end of file |