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

    <style type="text/css">

        label>span {
            color: deepskyblue;
        }

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

        .form-horizontal > .form-group {
            margin: 0;
        }
    </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);
        });

        $('#storage_mode').on('changed.bs.select', function (me) {
            if ($('#storage_mode').val() === '2' || $('#storage_mode').val() === '3') {
                $('#dfs_volume_label').css('display', 'unset');
                $('#dfs_volume').css('display', 'unset');
            } else {
                $('#dfs_volume_label').css('display', 'none');
                $('#dfs_volume').css('display', 'none');
            }
        });
    });

    function create() {
        var data = {
            jimv_edition: 0,
            storage_mode: parseInt($('#storage_mode').val()),
            vm_network: $('#vm_network').val(),
            vm_manage_network: $('#vm_manage_network').val(),
            dfs_volume: $('#dfs_volume').val(),
            storage_path: $('#storage_path').val(),
            hdd_type: $('#hdd_type').val(),

            iops_base: parseInt($('#iops_base').val()),
            iops_pre_unit: parseInt($('#iops_pre_unit').val()),
            iops_cap: parseInt($('#iops_cap').val()),
            iops_max: parseInt($('#iops_max').val()),
            iops_max_length: parseInt($('#iops_max_length').val()),
            bps_base: parseInt($('#bps_base').val()),
            bps_pre_unit: parseInt($('#bps_pre_unit').val()),
            bps_cap: parseInt($('#bps_cap').val()),
            bps_max: parseInt($('#bps_max').val()),
            bps_max_length: parseInt($('#bps_max_length').val())
        };

        var go_back_url = '/';

        $.ajax({
            url : '/api/config',
            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('JimV 已被初始化。页面将在3秒钟后自动跳转到首页！！');
            }
        });

        setTimeout(function() {
            window.location.href=go_back_url;
        }, 3000);
    }

    function hdd_type_select(me) {
        var hdd_type = $(me).val();

        if (hdd_type === 'sas') {
            $('#iops_base').val('1000');
            $('#iops_pre_unit').val('1');
            $('#iops_cap').val('2000');
            $('#iops_max').val('3000');
            $('#iops_max_length').val('20');
            // 200 MiB
            $('#bps_base').val('209715200');
            // 0.3 MiB
            $('#bps_pre_unit').val('314572');
            // 500 MiB
            $('#bps_cap').val('524288000');
            // 1 GiB
            $('#bps_max').val('1073741824');
            $('#bps_max_length').val('10')

        } else if (hdd_type === 'ssd') {
            $('#iops_base').val('1000');
            $('#iops_pre_unit').val('30');
            $('#iops_cap').val('10000');
            $('#iops_max').val('20000');
            $('#iops_max_length').val('20');
            $('#bps_base').val('209715200');
            // 1 MiB
            $('#bps_pre_unit').val('1048576');
            $('#bps_cap').val('524288000');
            $('#bps_max').val('1073741824');
            $('#bps_max_length').val('10')

        } else {
            $('#iops_base').val('100');
            $('#iops_pre_unit').val('0');
            $('#iops_cap').val('100');
            $('#iops_max').val('200');
            $('#iops_max_length').val('20');
            // 30 MiB
            $('#bps_base').val('31457280');
            // 0.1 MiB
            $('#bps_pre_unit').val('104857');
            // 50 MiB
            $('#bps_cap').val('52428800');
            // 100 MiB
            $('#bps_max').val('104857600');
            $('#bps_max_length').val('10')
        }
    }
</script>
    <div class="container" style="padding-top: 100px;">
        <div class="panel">
            <div class="panel-body">
                <h3 class="title-hero" style="text-transform: unset;">
                    初始化 JimV
                </h3>
                <div class="example-box-wrapper">
                    <form class="form-horizontal bordered-row" action="javascript:;">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">网桥(业务网络)</label>
                            <div class="col-sm-3">
                                <input title="Guest 业务网络" class="form-control" id="vm_network" name="vm_network" type="text" value="net-br0" disabled>
                            </div>
                            <label class="col-sm-2 control-label">网桥(管理网络)</label>
                            <div class="col-sm-3">
                                <input title="Guest 管理网络" class="form-control" id="vm_manage_network" name="vm_manage_network" type="text" value="net-br0" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">虚拟机磁盘存储模式</label>
                            <div class="col-sm-3">
                                <select id="storage_mode" title="虚拟机磁盘存储模式" class="selectpicker" name="storage_mode" data-width="100%">
                                    <option value="0" selected>本地存储</option>
                                    <option value="1" data-subtext="NFS">挂载共享</option>
                                    <option value="2">Ceph</option>
                                    <option value="3">Glusterfs</option>
                                </select>
                            </div>
                            <label id="dfs_volume_label" class="col-sm-2 control-label" style="display: none;">分布式文件系统存储卷</label>
                            <div class="col-sm-3">
                                <input id="dfs_volume" title="分布式文件系统存储卷" class="form-control" name="dfs_volume" type="text" style="display: none;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">虚拟机磁盘存放路径</label>
                            <div class="col-sm-3">
                                <input title="虚拟机磁盘存放路径" class="form-control" id="storage_path" name="storage_path" type="text" value="/opt/Images">
                            </div>
                            <!-- HDD for Hard Disk Drive -->
                            <label id="hdd_type_label" class="col-sm-2 control-label">磁盘类型</label>
                            <div class="col-sm-1">
                                <label>STAT<input class="form-control" name="hdd_type" type="radio" value="stat" onclick="hdd_type_select(this)" /></label>
                            </div>
                            <div class="col-sm-1">
                                <label>SAS<input class="form-control" name="hdd_type" type="radio" checked value="sas" onclick="hdd_type_select(this)" /></label>
                            </div>
                            <div class="col-sm-1">
                                <label>SSD<input class="form-control" name="hdd_type" type="radio" value="ssd" onclick="hdd_type_select(this)" /></label>
                            </div>
                            <div>
                                <input class="form-control" id="iops_base" name="iops_base" type="hidden" value="1000" />
                                <input class="form-control" id="iops_pre_unit" name="iops_pre_unit" type="hidden" value="1" />
                                <input class="form-control" id="iops_cap" name="iops_cap" type="hidden" value="2000" />
                                <input class="form-control" id="iops_max" name="iops_max" type="hidden" value="3000" />
                                <input class="form-control" id="iops_max_length" name="iops_max_length" type="hidden" value="20" />
                                <input class="form-control" id="bps_base" name="bps_base" type="hidden" value="209715200" />
                                <input class="form-control" id="bps_pre_unit" name="bps_pre_unit" type="hidden" value="314572" />
                                <input class="form-control" id="bps_cap" name="bps_cap" type="hidden" value="524288000" />
                                <input class="form-control" id="bps_max" name="bps_max" type="hidden" value="1073741824" />
                                <input class="form-control" id="bps_max_length" name="bps_max_length" type="hidden" value="10" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-3 pull-right">
                                <button class="btn btn-blue-alt" style="width: 180px; height: 40px; font-size: 16px;" onclick="create()">初始化</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock body %}