horizon/openstack_dashboard/dashboards/project/data_processing/cluster_templates/templates/data_processing.cluster_templates/cluster_node_groups_template.html

{% load i18n %}
<script>
    var template =
            '<tr class="row data-template-row" id_attr="$id" style="padding:5px">' +
                '<td class="col-sm-4 small-padding">' +
                    '<input id="template_id_$id" value="$template_id" type="hidden" name="template_id_$id">' +
                    '<input id="group_name_$id" value="$group_name" type="text" name="group_name_$id" class="form-control">' +
                '</td>' +
                '<td class="col-sm-3 small-padding">' +
                    '<input disabled value="$template_name" class="form-control" />' +
                '</td>' +
                '<td class="col-sm-3 small-padding">' +
                    '<span class="input-group input-append">' +
                        '<input id="count_$id" class="count-field form-control" value="$node_count" type="text" max="4" maxlength="4" name="count_$id" size="4">' +
                        '<span class="input-group-btn">' +
                            '<div class="btn btn-default dec-btn" data-count-id="count_$id"><i class="glyphicon-minus"></i></div>' +
                            '<div class="btn btn-default inc-btn" data-count-id="count_$id"><i class="glyphicon-plus"></i></div>' +
                        '</span>' +
                    '</span>' +
                '</td>' +
                '<td class="col-sm-2 small-padding">' +
                    '<input type="button" class="btn btn-danger" id="delete_btn_$id" data-toggle="dropdown" onclick="delete_node_group(this)" value="Remove" />' +
                    '<input type="text" id="serialized_$id" name="serialized_$id" value="$serialized" style="display:None;">' +
                '</td>' +
            '</tr>';

     function mark_element_as_wrong(id){
         $("#"+id).parent("div").addClass("error");
     }

    function get_next_id() {
        var max = -1;
        $(".data-template-row").each(function () {
            max = Math.max(max, parseInt($(this).attr("id_attr")));
        });
        return max + 1;
    }

    function set_nodes_ids() {
        var ids = [];
        $(".data-template-row").each(function () {
            var id = parseInt($(this).attr("id_attr"));
            if (!isNaN(id)) {
                ids.push(id);
            }
        });
        $("#forms_ids").val(JSON.stringify(ids));
    }

    function add_node(node_count, group_name, template_id, id, deletable, serialized) {
        var template_name = $("select option[value='" + template_id + "']").html();
        var tmp = template.
                replace(/\$id/g, id).
                replace(/\$group_name/g, group_name).
                replace(/\$template_id/g, template_id).
                replace(/\$node_count/g, node_count).
                replace(/\$serialized/g, serialized).
                replace(/\$template_name/g, template_name);
        $("#groups_table").find("tr:last").after(tmp);
        if (!deletable) {
            $("#delete_btn_" + id).remove();
            $("#group_name_" + id).prop('readonly', true);
        }
        $("#node-templates").show();
        set_nodes_ids();
    }

    function add_node_group_template(node_count) {
        if ($("select option:selected").html() == "Select") {
            return;
        }
        var template_id = $("#template_id option:selected").val();
        var template_name = $("#template_id option:selected").html();
        add_node(node_count, template_name, template_id, get_next_id(), true, null);
        $(".count-field").change();
    }
    function delete_node_group(el) {
        $(el).closest("tr").remove();
        var id = get_next_id();
        if (id == 0) {
            $("#node-templates").hide();
        }
        set_nodes_ids();
    }
    $("#template_id").change(function () {
        if ($("select option:selected").html() == "Select") {
            $("#add_group_button").addClass("disabled");
        } else {
            $("#add_group_button").removeClass("disabled");
        }
    });
    $("#node-templates").hide();
</script>
<input type="hidden" value="[]" name="forms_ids" id="forms_ids">
<label for="template_id">{% trans "Select a Node Group Template to add:" %}</label>
<span class="row">
    <span class="input-group col-sm-4">
        <select id="template_id" name="template" class="form-control">
            <option>Select</option>
            {% for template in form.templates %}
                <option value="{{ template.id }}">{{ template.name }}</option>
            {% endfor %}
        </select>
        <span class="input-group-btn">
            <button type="button" id="add_group_button" class="btn btn-default disabled" onclick="add_node_group_template(1);">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </span>
    </span>
</span>
<br/>
<div id="node-templates">
    <table id="groups_table">
        <tr id="header_row" class="row">
            <th class="col-sm-4 small-padding"><label>Group Name</label></th>
            <th class="col-sm-3 small-padding"><label>Template</label></th>
            <th class="col-sm-3 small-padding"><label>Count</label></th>
        </tr>
    </table>
</div>
<script>

    {% for group in form.groups %}
        add_node("{{ group.count }}", "{{ group.name }}", "{{ group.template_id }}", "{{ group.id }}", {{ group.deletable }}, "{{ group.serialized }}");
    {% endfor %}
    {% for field_id in form.errors_fields %}
        mark_element_as_wrong("{{ field_id }}");
    {% endfor %}

     var handlers_registred;
     var lower_limit = 1;
     $(function() {
         if (!handlers_registred) {
             handlers_registred = true;
             $(".inc-btn").live("click", function(e) {
                 var id = $(this).attr("data-count-id");
                 $("#" + id).val(parseInt($("#" + id).val()) + 1);
                 $(".count-field").change();
             });
            $(".dec-btn").live("click", function(e) {
                var id = $(this).attr("data-count-id");
                var val = parseInt($("#" + id).val());
                if (val > lower_limit) {
                    $("#" + id).val(val - 1);
                }
                $(".count-field").change();
            });
         }

         $(".count-field").live("change", function() {
             var val = $(this).val();
             if (val > lower_limit) {
                 $(this).parent("div").find(".dec-btn").removeClass("disabled");
             } else {
                 $(this).parent("div").find(".dec-btn").addClass("disabled");
             }
         }).change();
     });
</script>