{% extends base %}

{% block head %}

<link rel="stylesheet" href="{{_server_home}}/static/lib/codemirror/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="{{_server_home}}/static/lib/codemirror/theme/monokai.min.css">
<script type="text/javascript" src="/static/lib/codemirror/codemirror.min.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/shell.js"></script>

<style>
.CodeMirror {
    width: 100%;
    font-size:16px;
    border: 1px solid #ccc;
}
</style>

{% end %}

{% block body_left %}

{% from xnote.plugin import LinkConfig %}
{% init code = "" %}
{% init output = "" %}

<div class="card">
    {% init title = "Shell控制台" %}
    {% include common/title/base_title.html %}
</div>

<div class="card">
    <div class="col-md-12">
        <textarea id="editor" class="col-md-12" rows="20" id="code">{{code}}</textarea>
        <input type="button" class="btn margin-top-sm" value="运行" onclick="runShellCode()"/>
    </div>
</div>

<div class="col-md-12 card">
    <h3 class="card-title">输出</h3>
    <textarea id="output" class="col-md-12" rows="5" placeholder="标准输出">{{output}}</textarea>
</div>

<script type="text/javascript">
$(function () {
    var editor = CodeMirror.fromTextArea($("#editor")[0], {
        lineNumbers: true,
        mode: "text/x-sh"
    });
    editor.on("update", function (codeMirror, changeObj) {
        console.log("update");
        $("#editor").val(codeMirror.doc.getValue());
    });
});

function runShellCode() {
    $("#output").val("");
    var code = $("#editor").val();
    xnote.http.post("/system/command", {type:"shell", command:code}, 
        function (data, status) {
            // alert(status);
            $("#output").val(data);
        });
};


</script>

{% end %}


{% block body_right %}
    {% include system/component/admin_nav.html %}
{% end %}