{% load static %}
{% load i18n %}
<head>
    <title>{% trans 'Task log' %}</title>
    <script src="{% static 'js/jquery-3.6.1.min.js' %}"></script>
    <script src="{% static 'js/plugins/xterm/xterm.js' %}"></script>
    <script src="{% static 'js/plugins/xterm/addons/fit/fit.js' %}"></script>
    <link rel="stylesheet" href="{% static 'js/plugins/xterm/xterm.css' %}" />
    <link rel="shortcut icon" href="{{ INTERFACE.favicon }}" type="image/x-icon">
    <script src="{% url 'javascript-catalog' %}"></script>
    <script src="{% static "js/jumpserver.js" %}?_=9"></script>
    <style>
        body {
            background-color: black;
            margin: 0;
        }

        .xterm-rows {
            font-family: "Bitstream Vera Sans Mono", Monaco, "Consolas", Courier, monospace;
            font-size: 13px;
        }

        .terminal .xterm-viewport {
            background-color: #1f1b1b;
            overflow: auto;
        }

        body ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
            background-color: #272323;
            border-radius: 6px;
        }

        body ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        body ::-webkit-scrollbar-thumb {
            background-color: #494141;
            border-radius: 6px;
        }
        #term {
            padding: 0 8px;
        }
        .info {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            padding: 6px 8px 6px 24px;
            margin: 0;
            background-color: #F3F3F5;
        }
        .info .item {
            flex: auto;
            list-style-type: square;
            font-size: 14px;
            color: #585757;
        }
        .info .item .value {
            color: black;
        }
    </style>
</head>
<ul class="info">
    <li class="item">
        <span>ID:</span>
        <span class="value task-id"></span>
    </li>
    <li class="item">
        <span>{% trans 'Task name' %}:</span>
        <span class="value task-type"></span>
    </li>
    <li class="item">
        <span>{% trans 'Date start' %}:</span>
        <span class="value date-start"></span>
    </li>
</ul>
<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 taskId = "{{ task_id }}";
    var url = "/ws/ops/tasks/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;
    var extraQuery = Object.fromEntries(new URLSearchParams(window.location.search));

    $(document).ready(function () {
        term = new Terminal({
            cursorBlink: false,
            screenKeys: false,
            fontFamily: '"Monaco", "Consolas", "monospace"',
            fontSize: 13,
            lineHeight: 1.2,
            rightClickSelectsWord: true,
            disableStdin: true
        });
        term.open(document.getElementById('term'));
        window.fit.fit(term);

        ws = new WebSocket(wsURL);
        ws.onmessage = function(e) {
            var data = JSON.parse(e.data);
            term.write(data.message);
        };
        ws.onopen = function() {
            var msg = {"task": taskId};
            ws.send(JSON.stringify(msg))
        };
        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")
            }
        }
        getAutomationExecutionInfo();
    }).on('resize', window, function () {
        window.fit.fit(term);
    });
    function getAutomationExecutionInfo() {
        let url =  "{% url 'api-ops:task-executions-detail' pk=task_id %}";

        requestApi({
            url: url,
            method: "GET",
            flash_message: false,
            success(data) {
                const dateStart = new Date(data.date_start).toLocaleString();
                $('.task-id').html(data.id);
                $('.task-type').html(data.task_name);
                $('.date-start').html(dateStart);
            }
        })
    }
</script>
