{% extends "layout_wide.html" %}

{% block head %}
<script type="text/javascript">

var global_list = {};

/* render_flavor & render_image */
function render_option(obj){
    var option = document.createElement("option");
    option.text = obj["@name"];
    option.value = obj["@name"];
    return option;
}
function render_description(platform, obj, type){
    if($('#'+platform+'_'+type).length==0){
        $('#'+platform+'_add').append("<div id='"+platform+"_"+type+"'>");
    }
    var d = platform+'_'+type+'_'+obj['@name'];
    d = d.replace(/ /g, '');
    id = d.replace( /(:|\.|\[|\])/g, "\\$1" );
    if($('#'+id).length==0){
        $('#'+platform+'_'+type).append("<div id='"+d+"' class='alert-success col-md-5' style='margin-top:10px;display:none;border-style:solid;border-color:white;border-width:2px;'></div>");
    }
    if($('#'+id+' div').length==0){
        jQuery.each(obj, function(key,val){
            if (key != 'openstack:image'){
                $('#'+id).append("<div>"+key.replace('@','')+": "+val+"</div>");
            }
        });
    }
}
function toogle_div(platform, value, type){
    $("#"+platform+"_add").show();
    $("[id^='"+platform+"_"+type+"_"+"']").hide();
    d = platform+'_'+type+'_'+value;
    d = d.replace(/ /g, '');
    id = d.replace( /(:|\.|\[|\])/g, "\\$1" );
    $('#'+id).show();
}
function render_cloud(platform, node){
    elm = document.getElementById(platform+'_select');
    //newElement = document.createElement('p');
    //elm.appendChild(newElement); 
    global_list[platform]={};
    if('openstack:sliver' in node){
        selectFlavor = document.createElement('select');
        selectFlavor.id = platform+"_selectFlavor";
        selectFlavor.name = platform+"_selectFlavor";
        selectFlavor.onchange = function(){
            /* 1) Display corresponding Flavor div - hide others - reset selectImage value */
            toogle_div(platform, this.value, 'flavor');
            /* 3) Disable Images, Enable only compatible ones in selectImage */
            console.log(this.value);
            console.log(global_list[platform][this.value]);
            $("#"+platform+"_selectImage option[value=0]").prop('selected', true);
            $("[id^='"+platform+"_image_"+"']").hide();
            $("#"+platform+"_selectImage option").attr("disabled",true);
            $.each(global_list[platform][this.value], function (i,v){
                $("#"+platform+"_selectImage option[value='" + v + "']").attr("disabled",false);
            });
        }
        var option = document.createElement("option");
        option.text = "-- select a flavor --";
        option.value = 0;
        selectFlavor.appendChild(option);
        jQuery.each( node['openstack:sliver'], function( i, sliver ) {
            if('openstack:flavor' in sliver){
                f = render_option(sliver['openstack:flavor']);
                selectFlavor.appendChild(f);
                flavor = sliver["openstack:flavor"];
                /* 1) create hidden div to explain caracteristics of the flavor */
                render_description(platform, flavor, 'flavor');
                flavor_name = flavor['@name'];
                global_list[platform][flavor_name]=[];
                if ("openstack:image" in flavor){
                    selectImage = document.createElement('select');
                    selectImage.id = platform+"_selectImage";
                    selectImage.name = platform+"_selectImage";
                    selectImage.onchange = function(){
                        /* 2) display corresponding Image div - hide others */
                        toogle_div(platform, this.value, 'image');
                    }
                    var option = document.createElement("option");
                    option.text = "-- select an image --";
                    option.value = 0;
                    selectImage.appendChild(option);
                    if(flavor["openstack:image"] instanceof Array){
                        jQuery.each( flavor["openstack:image"], function( i, img ) {
                           image = render_option(img);
                           selectImage.appendChild(image);
                           /* 2) create hidden div to explain caracteristics of the image */
                           render_description(platform, img, 'image');
                           global_list[platform][flavor_name].push(img['@name']);
                        });
                    }else{
                        image = render_option(flavor["openstack:image"]);
                        selectImage.appendChild(image);
                        /* 2) create hidden div to explain caracteristics of the image */
                        render_description(platform, flavor["openstack:image"], 'image');
                        global_list[platform][flavor_name].push(flavor['openstack:image']['@name']);
                    }
                }

            }
        });
        elm.appendChild(selectFlavor); 
        elm.appendChild(selectImage); 
    }
    //$("#"+platform+"_selectFlavor").css("width","50%");
    //$("#"+platform+"_selectImage").css("width","50%");
}
function is_finished(len_platforms, pf_status){
    if(len_platforms == pf_status){
        return true;
    }else{
        return false;
    }
}
function send_delete(platform, sliver_name){
    jQuery('#'+platform+'_vm').val(sliver_name);
    jQuery('#'+platform+'_form_delete').submit();
}
function render_node(platform, node){
    if('openstack:sliver' in node){
        sliver = node['openstack:sliver']
        var d = platform+'_existing_'+sliver['@sliver_name'];
        d = d.replace(/ /g, '');
        id = d.replace( /(:|\.|\[|\])/g, "\\$1" );
        $("#"+platform+"_existing").append("<div id='"+platform+'_existing_'+sliver['@sliver_name']+"' class='row'></div>");
        //$("#"+id).append("<input type='hidden' name='"+platform+"_"+sliver['@sliver_name']+"' value='"+sliver['@sliver_name']+"'>");
        $("#"+id).append("<div class='col-md-2' style='margin-left:15px;'>"+sliver['@sliver_name']+"</div>");
        $("#"+id).append("<div class='col-md-4'>"+sliver['openstack:flavor']['@name']+"</div>");
        $("#"+id).append("<div class='col-md-4'>"+sliver['openstack:flavor']['openstack:image']['@name']+"</div>");
        $("#"+id).append("<div class='col-md-1'><input id='"+platform+"_delete_"+sliver['@sliver_name']+"' type='submit' form='"+platform+"_form_delete' value='Delete' onclick=send_delete('"+platform+"','"+sliver['@sliver_name']+"');></div>");
        /*
        sliver['openstack:address']
        sliver['openstack:flavor']
        */
    }
}

$(document).ready(function() {
    var data = Array(); 
    var platform_status = Array();
    var platform_empty = Array();
{% for platform in platforms %}
    console.log('{{platform}}');
    {% if platform in cloud_platforms %}
    $.post("/sfa/Describe",{'hrn':'{{slicename}}', 'type':'slice', 'platform':['{{platform}}']}, function( data ) {
        console.log(data);
        if('parsed' in data['{{platform}}'] && 'rspec' in data['{{platform}}']['parsed']){
           rspec = data['{{platform}}']['parsed']['rspec'];
           if('node' in rspec){
               if(rspec['node'] instanceof Array) {
                   jQuery.each( rspec['node'], function( i, node ) {
                       render_node('{{platform}}',node);
                   });
               }else{
                   render_node('{{platform}}',rspec['node']);
               }
           }
        }
    });
    $.post("/sfa/ListResources",{'platform':['{{platform}}']}, function( d ) {
        $.extend(data,d);
        console.log(data);
        if('parsed' in data['{{platform}}'] && 'rspec' in data['{{platform}}']['parsed']){
           rspec = data['{{platform}}']['parsed']['rspec'];
           if('node' in rspec){
               if(rspec['node'] instanceof Array) {
                   jQuery.each( rspec['node'], function( i, node ) {
                       render_cloud('{{platform}}',node);
                   });
               }else{
                   render_cloud('{{platform}}',rspec['node']);
               }
           }else{
               platform_empty.push('{{platform}}');
           }
        }else{
            platform_empty.push('{{platform}}');
        }
        platform_status.push('{{platform}}');
        if(is_finished({{len_platforms}},platform_status.length)){
            $("#loading").hide();
            if(platform_empty.length == {{len_platforms}}){
                $("#warning_message").show();
            }
        }
    });

    {% endif %}
{% endfor %}
});
</script>
{% endblock %}

{% block content %}
{{post_values}}
{% for platform in platforms %}
    {% if platform in cloud_platforms %}
    <div style="padding-left:20px;padding-top:20px;padding-right:20px;padding-bottom:20px;border-style:solid;border-width:1px;width:700px;">
        <h2>{{ platform }}</h2>
        <form id="{{platform}}_form_add" method="post">
        {% csrf_token %}
        <div id="{{platform}}_input" class="row">
            <div class="col-md-1">
            <input type="text" maxlength="2" id="{{platform}}_number" name="{{platform}}_number" style="width:2.2em;min-width:2.2em;">
            </div>
            <div id="{{platform}}_select" class="col-md-11"></div>
        </div>
        <div id="{{platform}}_add" class="row" style="display:none;">
            <div class="col-md-1" style="padding-top:50px;">
            <input type="hidden" name="action" id="action" value="add">
            <input type="hidden" name="platform" id="platform" value="{{platform}}">
            <input type="submit" form="{{platform}}_form_add" value="Add" onclick="this.form.submit();">
            </div>
        </div>
        </form>
        <br>
        // display only if VMs already in slice
        <form id="{{platform}}_form_delete" method="post">
        {% csrf_token %}
        <div id="{{platform}}_existing" class="row">
        <input type="hidden" name="{{platform}}_vm" id="{{platform}}_vm">
        <input type="hidden" name="action" id="action" value="delete">
        <input type="hidden" name="platform" id="platform" value="{{platform}}">
        </div> 
        </form>
        <br>
        // display only pending changes
        <br>
        <form id="{{platform}}_form_reserve" method="post">
        {% csrf_token %}
        <div id="{{platform}}_pending" class="row"></div> 
        <input type="hidden" name="action" id="action" value="reserve">
        <input type="hidden" name="platform" id="platform" value="{{platform}}">
        <input type="submit" form="{{platform}}_form_reserve" value="Reserve" onclick="this.form.submit();">
        </form>
    </div>
    {% endif %}
{% endfor %}
{% endblock %}