home.html

{% extends "base.html" %}
{% load staticfiles %}
{% load crispy_forms_tags %}
{% load thumbnail %}

{% block title %}{{ block.super }}Questionnaire{% endblock %}
{% block extrahead %}
<style type="text/css">
    .active_green {
  background-color: green !important;
}
</style>
{% endblock extrahead %}
{% block container %}
<div class="container">
    <h1 class="text-primary">Questionnaire</h1>
    <hr>
    <p><a class="btn btn-default" href="{% url 'app_questionnaire_list' %}">Questionnaire Listing</a></p>
    <form method="post" id="questionForm">
    {% csrf_token %}
        <div class="row">
            <div class="col-md-6">
                    {{form|crispy}}
            </div>
        </div>
    <hr>


    <div class="row">
		<div class="col-xs-12">
			<!-- tabs -->
			<div class="tabbable tabs-left">
				<ul class="nav nav-tabs">
                    {% for type in tagtypes %}
					<li {% if type.id == 1 %} class="active" {% endif %}><a href="#{{type.slug}}" data-toggle="tab">{{type.name}}</a></li>
				    {% endfor %}
                </ul>
				<div class="tab-content">
                    {% for type in tagtypes %}
					<div {% if type.id == 1 %} class="tab-pane active" {% else %} class="tab-pane disable"  {% endif %} id="{{type.slug}}">
						<div class="col-sm-6">
                            <select multiple class="form-control" id="id_{{type.id}}" onchange="selectedIds({{type.id}})" >
                                {% for tag in type.tag_set.all %}
                                <option id="id_{{tag}}" value="{{tag}}" onclick="selectUnselect(this)" class="btn btn-default">
                                    {{tag}}
                                </option>
                                {% endfor %}
                            </select>
						</div>
					</div>
					{% endfor %}
				</div>
			</div>
			<!-- /tabs -->
		</div>
	</div>
</div>
    <span>
        <button class="btn btn-success pull-right" onsubmit="postForm()">Submit</button>
        <button class="btn btn-danger pull-right">Cancel</button>
    </span>
    </form>

</div>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
$(document).ready(function () {
    $("option").click(function () {
        if ($(this).hasClass('btn')) {
            $(this).toggleClass('btn-success');
        } else {
            $(this).toggleClass('btn-default');
        }
    });
});

var select_ids = []
var obj_id = ''
function isInArray(value, array) {
  return array.indexOf(value) > -1;
}
function remove(array, element) {
    const index = array.indexOf(element);

    if (index !== -1) {
        array.splice(index, 1);
    }
}
function selectUnselect(opt) {
    const isInArray = select_ids.includes(opt.value);
    console.log(isInArray);
    if (isInArray === true) {
        remove(select_ids, opt.value);
        console.log('Remove: ',select_ids);
        selectedIds(obj_id);
    }else{
        select_ids.push(opt.value);
        console.log('Add: ',select_ids)
        var obj_id = opt.id;
        selectedIds(obj_id);
    }
}
console.log(select_ids);
function selectedIds(obj) {
    obj_id = obj
    $('select#id_'+obj).val(select_ids);
}
function makeActive(obj) {
    $('#id_'+obj+'_child').attr('display', 'block');
}

function makeDisable(obj) {
    $('#id_2_child').hide();
}

function postData() {
    var data = {};
    data['application_name'] = $('#id_application_name').val();
    data['tags'] = select_ids;
    console.log('Data: ',data);

}

function disableDiv() {
    var div = $('#select_div')
    div.style.display = "none";
}


function postForm() {

    var c = getCookie('csrftoken');

    var data = $('#application_name').attr("value");
    console.log("data: ", data);

    $.ajax({
        context: this,
        type: 'POST',
        <!--//dataType: 'json',-->
        <!--url: "{% url 'app_questionnaire_create' %}",-->
        data: {
              csrfmiddlewaretoken: c,
              application_name: $('#application_name').attr("value"),
              description: $('#description').attr("value"),
              order: $('#order').attr("value")
        },
        success: function(response) {
            console.log('Success: ', response);
        },
        error: function(error) {
            console.log('Error: ', error);
        }

    });
}

var frm = $('#questionForm');

console.log("Form: ", frm);
frm.submit(function () {
    var data = frm.serializeArray();
    data.push({name:'tags', value:select_ids});
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: data,
        success: function (data) {
            window.location.href = "{% url 'app_view' %}";
        },
        error: function(data) {
            console.log('Error: ', data);
        }
    });
    return false;
});
</script>

{% endblock %}