{% load static %}
{% load i18n %}
<head>
    <title>{% trans 'Task log' %}</title>
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/plugins/xterm/xterm.js' %}"></script>
    <link rel="stylesheet" href="{% static 'js/plugins/xterm/xterm.css' %}" />
    <style>
        body {
            background-color: black;
        }
        .xterm-rows {
            {#padding: 15px;#}
            font-family: "Bitstream Vera Sans Mono", Monaco, "Consolas", Courier, monospace;
            font-size: 13px;
        }
    </style>
</head>
<div id="term" style="height: 100%;width: 100%">
</div>

<script>
    var scheme = document.location.protocol === "https:" ? "wss" : "ws";
    var port = document.location.port ? ":" + document.location.port : "";
    var url = "/ws/ops/tasks/" + "{{ task_id }}" + "/log/";
    var wsURL = scheme + "://" + document.location.hostname + port + url;
    var failOverPort = "{{ ws_port }}";
    var failOverWsURL = scheme + "://" + document.location.hostname + ':' + failOverPort + url;
    var term;
    var ws;

    $(document).ready(function () {
        term = new Terminal({
            cursorBlink: false,
            screenKeys: false,
            fontFamily: '"Monaco", "Consolas", "monospace"',
            fontSize: 12,
            rightClickSelectsWord: true,
            disableStdin: true
        });
        term.open(document.getElementById('term'));
        term.resize(120, 30);

        ws = new WebSocket(wsURL);
        ws.onmessage = function(e) {
            var data = JSON.parse(e.data);
            term.write(data.message);
        };
        ws.onerror = function (e) {
            ws = new WebSocket(failOverWsURL);
            ws.onmessage = function(e) {
                var data = JSON.parse(e.data);
                term.write(data.message);
            };
            ws.onerror = function (e) {
                term.write("Connect websocket server error")
            }
        }
    });
</script>
