<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>协议通讯状态</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <script type="text/javascript" src="/static/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.js"></script>
    <style>
        td, th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="margin: 30px 0">
        <table id="tunnelStatusTable" class="table table-bordered table-dark">
            <h4 style="text-align: center">通道状态</h4>
            <thead>
            <tr>
                <th>通道名称</th>
                <th>通道状态</th>
            </tr>
            </thead>
            <tbody id="tunnelStatusTbody">

            </tbody>
        </table>
    </div>
    <div>
        <table id="realTimeDataTable" class="table table-bordered table-dark">
            <h4 style="text-align: center">实时数据</h4>
            <thead>
            <tr>
                <th>点位</th>
                <th>值</th>
                <th>点位</th>
                <th>值</th>
                <th>点位</th>
                <th>值</th>
            </tr>
            </thead>
            <tbody id="realTimeDataTbody">

            </tbody>
        </table>
    </div>
</div>


<script>

    function getRealTimeData() {
        var v;
        $.ajax({
            type: "GET",
            url: "/protocol/getRealTimeData",
            dataType: "json",
            async: false,
            success: function (data) {
                console.log(data)
                v = data;
            }
        });
        return v;
    }

    function buildPage() {
        const realTimeData = getRealTimeData();
        if (realTimeData === undefined || realTimeData === null) {
            return
        }
        if (realTimeData.dataValue !== undefined && realTimeData.dataValue !== null) {
            const d = realTimeData.dataValue;
            let f = 0;
            $("#realTimeDataTbody").empty()
            let trLab = $("<tr></tr>");
            for (const i in d) {
                trLab.append("<td id='key-" + i + "'>" + i + "</td><td id='value-" + i + "'>" + d[i] + "</td>")
                f++;
                if (f % 3 == 0) {
                    $("#realTimeDataTbody").append(trLab);
                    trLab = $("<tr></tr>")
                }
            }
            $("#realTimeDataTbody").append(trLab);
        }

        if (realTimeData.tunnel !== undefined && realTimeData.tunnel !== null) {
            const t = realTimeData.tunnel;
            $("#tunnelStatusTbody").empty()
            for (const i in t) {
                $("#tunnelStatusTbody").append("<tr><td>"+i+"</td><td>"+t[i]+"</td></tr>");
            }
        }
    }

    $(function () {
        buildPage()
        setInterval(buildPage, 10000)
    })

</script>
</body>
</html>