{% extends theme("layout.html") %}
{% block head %}
    {{ super() }}

    <style type="text/css">

        @media (min-width: 768px) {
            .form-horizontal .control-label {
                text-align: left;
            }
        }
        
        label>span {
            color: deepskyblue;
        }

        .btn,
        .form-group>div>div,
        .form-control {
            border-radius: 0;
        }

        .btn-ability {
            margin-right: 16px;
            height: 50px;
            padding: 8px 50px;
            margin-bottom: 30px;
        }
    </style>
{% endblock head %}
{% block body %}
<script>
    $(document).ready(function() {
        $('body').addClass('add-transition');
        $('.add-page-transition').on('click', function(){
            var transAttr = $(this).attr('data-transition');
            $('.add-transition').attr('class', 'add-transition');
            $('.add-transition').addClass(transAttr);
        });

        $.ajax({
            url: '/api/config',
            type : 'GET',
            dataType: "json",
            error : function(data, textStatus, xhr) {
            },
            success : function(data, textStatus, xhr) {
                if (data['data']['storage_mode'] === 0) {
                    refresh_hosts_selectpicker($('#node_id'));
                } else {
                    $('#on_host_form').remove();
                }
            }
        });

        $('#create_disk_form').formValidation({
            framework: 'bootstrap4',
            icon: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            // Since the Bootstrap Button hides the radio and checkbox
            // We exclude the disabled elements only
            excluded: ':disabled',
            locale: 'zh_CN',
            fields: {
                size: {
                    validators: {
                        between: {
                            min: 1,
                            max: 10240
                        }
                    }
                },
                quantity: {
                    validators: {
                        between: {
                            min: 1,
                            max: 20
                        }
                    }
                },
                remark: {
                    validators: {
                        stringLength: {
                            max: 64
                        }
                    }
                }
            }
        }).on('success.field.fv', function(e, data) {
            if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                data.fv.disableSubmitButtons(true);
            }
        }).on('success.form.fv', function (e, data) {
            create();
        });
    });

    $(function() { "use strict";
        $("#size").TouchSpin({
            max: 10240,
            min: 100,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    $(function() { "use strict";
        $("#quantity").TouchSpin({
            max: 20,
            min: 1,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    function refresh_hosts_selectpicker(selectpicker) {
        $.ajax({
            url : '/api/hosts',
            type : 'GET',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            error : function() {
            },
            success : function(data, textStatus, xhr) {
                selectpicker.empty();
                $.each(data.data, function(k, v) {
                    selectpicker.append(
                        $('<option>', {value: v['node_id'], text: v['hostname']})
                    );
                });
                selectpicker.selectpicker('refresh');
            }
        });
    }

    function create() {
        var data = {
            size: parseInt($('#size').val()),
            quantity: parseInt($('#quantity').val()),
            remark: $('#remark').val(),
            node_id: $('#node_id').val()
        };

        var go_back_url = '/disks';

        $.ajax({
            url : '/api/disk',
            type : 'POST',
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: "json",
            data : JSON.stringify(data),
            error : function(data, textStatus, xhr) {
                alter_warning('创建磁盘失败！');
                alter_danger(data.responseText);
            },
            success : function(data, textStatus, xhr) {
                alter_success('您所提交的资源正在创建中。根据所提交资源的大小，需要等待几到十几秒钟。页面将在3秒钟后自动跳转到实例列表页面！');

                $.ajax({
                    url: '/api/disks?filter=sequence:eq:-1',
                    type : 'GET',
                    dataType: "json",
                    error : function(data, textStatus, xhr) {
                    },
                    success : function(data, textStatus, xhr) {
                        var page_size = 10;
                        var last_page = Math.ceil(data['paging']['total'] / page_size);
                        go_back_url = "/disks?page_size=" + page_size + "&page=" + last_page;
                    }
                });
            }
        });

        setTimeout(function() {
            window.location.href=go_back_url;
        }, 3000);
    }
</script>
<div id="page-content-wrapper">
    <div id="alert-success-tip" class="alert alert-success alert-top">
    </div>
    <div id="alert-warning-tip" class="alert alert-warning alert-top">
    </div>
    <div id="alert-danger-tip" class="alert alert-danger alert-top">
    </div>
</div>
<div class="container" style="padding-top: 100px;">
    <div class="panel">
        <div class="panel-body">
            <h3 class="title-hero" style="display: inline;">
                创建磁盘
            </h3>
            <a href="/disks" class="btn btn-xs btn-default add-page-transition" data-transition="pt-page-moveFromLeft-init" style="margin-bottom: 4px; margin-left: 10px;">
                <span class="glyph-icon icon-separator" style="transform: rotateY(-180deg);">
                    <i class="glyph-icon icon-level-up"></i>
                </span>
                <span class="button-content">
                    返回磁盘列表
                </span>
            </a>
            <div class="example-box-wrapper">
                <form id="create_disk_form" class="form-horizontal bordered-row" action="javascript:;">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-hdd"></span>&nbsp;&nbsp;磁盘大小 (GB)</label>
                        <div class="col-sm-6">
                            <input id="size" title="磁盘大小" class="form-control" type="text" value="100" name="size">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-th-list"></span>&nbsp;&nbsp;数量</label>
                        <div class="col-sm-6">
                            <input id="quantity" title="实例数量" class="form-control" type="text" value="1" name="quantity">
                        </div>
                    </div>
                    <div id="on_host_form" class="form-group">
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-desktop"></span>&nbsp;&nbsp;计算节点</label>
                        <div class="col-sm-6">
                            <select id="node_id" name="node_id" title="计算节点" class="selectpicker">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-compass-circled"></span>&nbsp;&nbsp;标识</label>
                        <div class="col-sm-6">
                            <div style="height: 10px;"></div>
                            <div class="row form-group">
                                <label class="col-sm-2 control-label">磁盘标识：</label>
                                <div class="col-sm-6">
                                    <input id="remark" name="remark" type="text" title="磁盘标识" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-3 pull-right">
                            <button id="create_disk_form_button" type="submit" class="btn btn-blue-alt" style="width: 180px; height: 40px; font-size: 16px;">创建</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock body %}