<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh">
<head>
    <meta charset="utf-8">
    <!--suppress HtmlUnknownTarget -->
    <script src="{{static_url('echarts.min.js')}}"></script>
    <!--suppress HtmlUnknownTarget -->
    <script src="{{static_url('jquery-3.6.0.min.js')}}"></script>
    <title></title>
    <style>
        .chart {
            border-bottom: 2px solid #ccc;
            margin-bottom: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="main">

</div>
</body>
<script type="text/javascript">
    const chartsInstances = [];
    const server_port = "{{server_port}}";
    let server_name = "{{view_name}}";
    let chartId = 0;
    let ws_status = -1;
    const do_ws = function () {
        if (ws_status === 1 || ws_status === 0) {
            return;
        }
        ws_status = 0;
        document.title = "[" + server_name + "] CONNECTING";
        const ws = new WebSocket("ws://127.0.0.1:" + server_port + "/ws");
        ws.onopen = function () {
            ws.send("hello_open");
            document.title = "[" + server_name + "] CONNECTING-OPENED";
        }
        ws.onmessage = function (e) {
            const p = "hello_open_";
            if (e.data.startsWith(p)) {
                ws_status = 1;
                server_name = e.data.substring(p.length)
                document.title = "[" + server_name + "] CONNECTED";
                return;
            }
            const data = JSON.parse(e.data);
            for (let i = 0; i < chartsInstances.length; i++) {
                chartsInstances[i].dispose();
            }
            chartsInstances.splice(0, chartsInstances.length);
            $(".chart").remove();
            for (const _i in data) {
                const v = data[_i]
                console.log(v);
                const _chartId = "chart-" + chartId++;
                $("#main").append("<div id='" + _chartId + "' class='chart'></div>")
                let chart;
                try {
                    chart = echarts.init(document.getElementById(_chartId), null, {
                        width: v[0][0],
                        height: v[0][1]
                    });
                    chartsInstances.push(chart)
                    console.log(chartsInstances);
                    chart.setOption(v[1])
                } catch (e) {
                    if (chart) {
                        chart.dispose();
                        chartsInstances.pop()
                    }
                    $("#" + _chartId).html("<strong style='color: red'>" + e + "</strong>");
                    console.error(e)
                }
                console.log(chartsInstances);
            }
        }
        ws.onclose = function (e) {
            //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            ws_status = -1;
            document.title = "[" + server_name + "] DISCONNECT-CLOSED";
        }
        ws.onerror = function (e) {
            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
            ws_status = -1;
            document.title = "[" + server_name + "] DISCONNECT-ERROR";
        }
    }
    do_ws();
    setInterval(do_ws, 5_000);
</script>
</html>
