<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}"/>
    <link rel="stylesheet" href="{{ url_for('static', filename='lib/easyui/themes/bootstrap/easyui.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='lib/easyui/themes/icon.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/auto.css') }}">

    <link rel="stylesheet" href="{{ url_for('static', filename='lib/codemirror/lib/codemirror.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='lib/codemirror/addon/hint/show-hint.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='lib/codemirror/theme/dracula.css') }}">

    <title>测试环境</title>

    <script src="{{ url_for('static', filename='lib/easyui/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='lib/easyui/jquery.easyui.min.js') }}"></script>
    <!-- 自定义js库 -->
    <script type="text/javascript" src="{{ url_for('static', filename='lib/auto.js') }}"></script>
</head>
<body>
        <!-- 版本、机器、组件信息 -->
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',split:false" style="width:30%">  <!-- 版本 + 机器列表 ;padding:10px -->
                <div class="easyui-layout" data-options="fit:true">
                    <div data-options="region:'north',split:false" style="height:100px">  <!-- 版本 信息 -->
                        <div class="easyui-panel" style="width:100%;height:100%;padding:10px 10px;">
                            <div style="margin-bottom:10px">
                                <h3>被测系统名称：{{test_project}}</h3>
                            </div>
                            <div style="margin-bottom:5px">
                                 <h3>被测系统版本号：{{test_projectversion}}</h3>
                            </div>
                        </div>
                    </div>
                    <div data-options="region:'center',split:true">
                        <table id="machine_list" class="easyui-datagrid" style="width:100%;height:auto;"
                               data-options="singleSelect:true,
                               fitColumns:true,
                               url:'/api/v1/settings?method=machines',
                               method:'get' "
                        >
                            <thead>
                            <tr>
                                <th data-options="field:'ip',align:'center' , halign: 'center'">机器IP</th>
                                <th data-options="field:'os',align:'center' , halign: 'center'">操作系统</th>
                                <th data-options="field:'cpus',align:'center' , halign: 'center'">核数</th>
                                <th data-options="field:'mem',align:'center' , halign: 'center'">内存</th>
                                <th data-options="field:'ontime',align:'center' , halign: 'center'">更新时间</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
            <div data-options="region:'east'" style="width:40%">

                <div style="margin: 10px">
                    <h3>自动化配置文件</h3>
                    <p style="color:#0099FF;">{{key}}</p>
                </div>

                <div style="margin-bottom:5px; margin-top:5px">
                    <textarea id="code_editor" name="code_editor"></textarea>
                </div>
                <div style="padding:5px">
                    <a href="#" id="btn_save" onclick="save_file()" class="easyui-linkbutton" data-options="iconCls:'icon-save',disabled:true">保存修改</a>
                </div>

                <script src="{{ url_for('static', filename='lib/codemirror/lib/codemirror.js') }}"></script>
                <script src="{{ url_for('static', filename='lib/codemirror/mode/yaml/yaml.js') }}"></script>
                <script src="{{ url_for('static', filename='lib/codemirror/mode/python/python.js') }}"></script>
                <script src="{{ url_for('static', filename='lib/codemirror/addon/display/placeholder.js') }}"></script>

                <SCRIPT type="text/javascript">
                    $(document).ready(function(){
                    CodeMirror.commands.autocomplete = function(cm) {
                      cm.showHint({hint: CodeMirror.hint.anyword});

                    }
                    //charis added
                    var key = "{{ key }}";
                    editor = CodeMirror.fromTextArea(document.getElementById("code_editor"), {
                        mode: 'python',
                        lineNumbers: true,
                        lineWrapping: true,
                        styleActiveLine: true,
                        styleSelectedText: true,
                        theme: "dracula",
                        indentUnit:4,
                        completeSingle: false,
                        extraKeys: {
                            "Ctrl": "autocomplete"
                        }
                        //keyMap: "sublime",
                        //foldGutter: true,
                        //highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true},
                        //gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
                    });
                    /*editor.on("change", function(cm, event)
                    {

                        var data = {
                            "method": "save",
                            "key": key,
                            "data": editor.getValue()
                        };

                    do_ajax("post", "/api/v1/case/", data, do_nop);

                    });*/
                    editor.on("keypress", function(cm, event)
                    {
                        $('#btn_save').linkbutton('enable');
                        cm.showHint({hint: CodeMirror.hint.robotScript});
                    });
                    editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});

                    do_ajax("get", "/api/v1/case/", {"key": key}, do_init);
                    });

            function save_file(){
                var key = "{{ key }}";
                var data = {
                            "method": "save",
                            "key": key,
                            "data": editor.getValue()
                        };
                    do_ajax("post", "/api/v1/case/", data, after_save);
            }

            function after_save(data){
                var success = "success"
                if (data["status"] == success){
                    $('#btn_save').linkbutton('disable');
                }
                do_msg(data)
            }

        </SCRIPT>

            </div>
            <div data-options="region:'center'" style="width:30%">  <!-- 组件信息 -->
                <div id="submodule" style="margin: 10px">
                    <h3>组件信息</h3>
                </div>
                <table id="mudule_list" class="easyui-datagrid" style="width:100%;height:auto;"
                               data-options="singleSelect:true,
                               fitColumns:true,
                               url:'/api/v1/settings?method=modules',
                               method:'get' "
                        >
                            <thead>
                            <tr>
                                <th data-options="field:'name',align:'center' , halign: 'center'">组件名称</th>
                                <th data-options="field:'machines',align:'center' , halign: 'center'">机器列表</th>
                                <th data-options="field:'status',align:'center' , halign: 'center'">组件状态</th>
                                <th data-options="field:'ontime',align:'center' , halign: 'center'">更新时间</th>
                            </tr>
                            </thead>
                        </table>
            </div>
        </div>


</div>
</body>
</html>