{% extends 'wgcomm/base.html' %}
{% block tail %}
    <script src="static/wgcomm/js/datepicker.js"></script>
    <script src="static/wgcomm/js/wgdatepicker.js"></script>
    <script src="{{ url_for('static',filename='wgcomm/js/help-startup.js') }}"></script>
{% endblock %}
{% block tail_min %}
    <script src="static/wgcomm/js/datepicker.min.js"></script>
    <script src="static/wgcomm/js/wgdatepicker.min.js"></script>
    <script src="{{ url_for('static',filename='wgcomm/js/help-startup.min.js') }}"></script>
{% endblock %}
{% block title %}
    webAPI Demo
{% endblock %}
{% block head %}

    <style>
        /* 定义 CSS 变量（如果需要） */
        :root {
            --neon-cyan: #00d4ff;
        }

        /* API服务地址徽章  2025-12-07 10:04:18 */
        .api-info-badge {
            padding: 0.5rem 1rem;
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 6px;
            font-size: 0.85rem;
            /*color: var(--neon-cyan);*/
            font-family: 'Courier New', monospace;
        }

        .editable-textarea {
            width: 100%;
            min-height: 200px;
            height: auto; /* 允许高度自动调整 */
            padding: 20px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            font-size: 16px;
            line-height: 1.6;
            resize: vertical;
            transition: border-color 0.3s ease;
        }
    </style>
{% endblock %}

{% block main_content %}
    <!--app-content open-->
    <div class="app-content main-content mt-0">
        <div class="side-app">
            <!-- CONTAINER -->
            <div class="main-container container-fluid">

                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <div>
                        {#                        <h1 class="page-title">webAPI Demo</h1>#}
                        <h1 class="page-title">HTTP POST Interface (JSON-RPC 2.0)</h1>
                        <div class="api-info-badge"><span id="serverip">Service URL: http://127.0.0.1:61080</span>&nbsp;&nbsp;<button
                                class="btn btn-outline-info" onclick="displayEditPage()" name="Edit">Edit
                        </button>
                        </div>
                    </div>
                    <div class="ms-auto pageheader-btn">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">Help</li>
                            <li class="breadcrumb-item"><a href="javascript:void(0);">webAPI Demo</a></li>
                        </ol>
                    </div>
                    <div>
                    </div>
                </div>
                <!-- PAGE-HEADER END -->
                {% with messages = get_flashed_messages() %}
                    {% if messages %}
                        <div class="form-group">
                            <ul>
                                {% for message in messages %}
                                    <li class="text-danger">{{ message }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                {% endwith %}
                <!--ROW OPENED-->
                <input type="hidden" name="wgserver1001" id="wgserver1001"
                       value="{{ g.wgwsserver1001 }}">

                <script>
                    {#let cloudserverIP = "127.0.0.1" //默认的服务器IP#}
                    let cloudserverIP = "{{ g.server1001_ip }}"

                    async function webapi_post(source) {
                        console.log('webapi_post');
                        console.log(source)
                        console.log(source.name)

                        try {
                            if (document.getElementById("f_ControllerSN")) {

                            } else {
                                return; // 2025-12-09 09:20:34 没有Controllers
                            }
                            const controllersn = parseInt(document.getElementById("f_ControllerSN").value)
                            const operator = source.name
                            document.getElementById("testingFunc").textContent = operator
                            {#const api = apiExamples[selectedApi];#}
                            {#const requestBody = editableRequest ? JSON.parse(editableRequest) : api.request;#}
                            let requestBody = null
                            if (operator === "RemoteOpenDoor") {
                                requestBody = {
                                    "jsonrpc": "2.0",
                                    "method": "RemoteOpenDoor",
                                    "params": [{
                                        "ControllerSN": controllersn,
                                        "DoorNO": 1
                                    }],
                                    "id": Date.now() // 使用Time戳作为ID 1001
                                }
                            }
                            if (operator === "Remote Door Opening (Simulate Card Number)") {
                                requestBody = {
                                    "jsonrpc": "2.0",
                                    "method": "RemoteOpenDoor",
                                    "params": [{
                                        "ControllerSN": controllersn,
                                        "DoorNO": 1,
                                        "InExit": 1,
                                        "VirtualCardNO": 9991
                                    }],
                                    "id": Date.now() // 使用Time戳作为ID 1001
                                }
                            }
                            if (operator === "QueryControllerStatus") {
                                requestBody = {
                                    "jsonrpc": "2.0",
                                    "method": "QueryControllerStatus",
                                    "params": [{
                                        "ControllerSN": controllersn
                                    }],
                                    "id": Date.now() // 使用Time戳作为ID 1001
                                }
                            }
                            if (operator === "Enable log door sensor/button alarm events  ") {
                                requestBody = {
                                    "jsonrpc": "2.0",
                                    "method": "FunctionConfig",
                                    "params": [{
                                        "ControllerSN": controllersn,
                                        "ActiveRecordDSPushButtonEvent": "Enabled"
                                    }],
                                    "id": Date.now() // 使用Time戳作为ID 1001
                                }
                            }
                            if (operator === "Disable log door sensor/button alarm events  ") {
                                requestBody = {
                                    "jsonrpc": "2.0",
                                    "method": "FunctionConfig",
                                    "params": [{
                                        "ControllerSN": controllersn,
                                        "ActiveRecordDSPushButtonEvent": "停用"
                                    }],
                                    "id": Date.now() // 使用Time戳作为ID 1001
                                }
                            }

                            if (operator === "Enable QR code Transparent Transmission") {
                                requestBody = {
                                    "jsonrpc": "2.0",
                                    "method": "FunctionConfig",
                                    "params": [{
                                        "ControllerSN": controllersn,
                                        "QRCodeTransparentTransmission": "Enabled"
                                    }],
                                    "id": Date.now() // 使用Time戳作为ID 1001
                                }
                            }
                            if (operator === "Disable QR code Transparent Transmission") {
                                requestBody = {
                                    "jsonrpc": "2.0",
                                    "method": "FunctionConfig",
                                    "params": [{
                                        "ControllerSN": controllersn,
                                        "QRCodeTransparentTransmission": "停用"
                                    }],
                                    "id": Date.now() // 使用Time戳作为ID 1001
                                }
                            }
                            if (operator === "Enable serial port Transparent Transmission") {
                                let modbusaddr = 1
                                const element = document.getElementById("modbusaddr");
                                if (element) {
                                    modbusaddr = parseInt(element.value);
                                }
                                requestBody = {
                                    "jsonrpc": "2.0",
                                    "method": "FunctionConfig",
                                    "params": [{
                                        "ControllerSN": controllersn,
                                        "SerialPortTransparentTransmission": "Enabled",
                                        "ModbusAddress": modbusaddr
                                    }],
                                    "id": Date.now() // 使用Time戳作为ID 1001
                                }
                            }
                            if (operator === "Disable serial port Transparent Transmission") {
                                requestBody = {
                                    "jsonrpc": "2.0",
                                    "method": "FunctionConfig",
                                    "params": [{
                                        "ControllerSN": controllersn,
                                        "SerialPortTransparentTransmission": "停用"
                                    }],
                                    "id": Date.now() // 使用Time戳作为ID 1001
                                }
                            }
                            if (operator === "Run directly  ") {
                                let requestBodyStr = ''
                                try {
                                    const element2 = document.getElementById("sendcommand");
                                    if (element2) {
                                        requestBodyStr = element2.value; // .textContent; // = "请先Copy Code, 再运行...";
                                    }
                                    if (requestBodyStr.length === 0) {
                                        return;
                                    }
                                    requestBody = JSON.parse(requestBodyStr);
                                } catch (error2) {
                                    return;
                                }
                            }
                            if (operator === "Run with Controller SN replacement") {
                                let requestBodyStr = ''
                                try {
                                    const element2 = document.getElementById("sendcommand");
                                    if (element2) {
                                        //Run with Controller SN replacement
                                        // 解析JSON
                                        jsonString = element2.value
                                        const jsonData = JSON.parse(jsonString);

                                        // 检查params是否存在且为数组
                                        if (jsonData.params && Array.isArray(jsonData.params)) {
                                            // 遍历params数组
                                            jsonData.params.forEach(param => {
                                                // 如果存在ControllerSN且值为226000002，则替换为253118302
                                                if (param['ControllerSN']) {
                                                    param['ControllerSN'] = controllersn;
                                                }
                                            });
                                        }
                                        console.log("jsonData", jsonData)
                                        // Back格式化后的JSON字符串
                                        element2.value = JSON.stringify(jsonData, null, 4);
                                        //element2.value = element2.value.replace()

                                        requestBodyStr = element2.value; // .textContent; // = "请先Copy Code, 再运行...";
                                    }
                                    if (requestBodyStr.length === 0) {
                                        return;
                                    }
                                    requestBody = JSON.parse(requestBodyStr);
                                    document.getElementById("testingFunc").textContent = operator + "[" + controllersn + "]"
                                } catch (error2) {
                                    console.log("error2", error2)
                                    return;
                                }
                            }
                            if (operator === "ExtendedFunctions") {
                                const element = document.getElementById("externfunc");
                                if (element) {
                                    element.hidden = !element.hidden;
                                }
                                return;
                            }
                            if (!requestBody) {
                                return;
                            }

                            const cmdjson = JSON.stringify(requestBody)
                            if ((operator === "Run directly  ") || (operator === "Run with Controller SN replacement")) {
                                //不Edit
                            } else {
                                const element = document.getElementById("sendcommand");
                                if (element) {
                                    {#element.textContent = JSON.stringify(requestBody,null,4);#}
                                    element.value = JSON.stringify(requestBody, null, 4);
                                    element.style.height = 'auto'; // 重置高度以准确计算Content高度
                                    element.style.height = element.scrollHeight + 'px'; // Configuration高度为Content实际高度

                                }
                            }
                            const element2 = document.getElementById("result");
                            if (element2) {
                                element2.textContent = "";
                            }
                            let data = {
                                cmdjson: cmdjson,//requestBody  //consumername.innerText.trim()
                                cloudserverip: cloudserverIP  // 2025-12-13 18:07:21服务器
                            }
                            wgajax.post({
                                url: "/web_help_faq_webapi_post", //parm_url , //"/department_del",
                                data: data
                            }).done(function (msg) {
                                console.log(msg)
                                {#document.getElementById("result").innerHTML =  JSON.stringify(msg);#}
                                {#document.getElementById("result").hidden = false;#}
                                const element2 = document.getElementById("result");
                                if (element2) {
                                    // 使用 JSON.stringify 的第三Unit参数In行缩In
                                    {#const formattedJson = JSON.stringify(msg, null, 2);#}
                                    {#element.textContent = formattedJson;#}
                                    element2.textContent = msg;
                                }

                            }).fail(function (error) {
                                wgjslog.alert(error); //2023-12-25 14:05:03
                                if (1 < 0)  //2023-12-23 22:28:26 不显示 alert
                                {
                                    alert(error.message);
                                }
                            })
                        } catch (error) {
                            const element3 = document.getElementById("result");
                            if (element3) {
                                element3.textContent = (JSON.stringify({
                                    error: "Request failed  ",
                                    message: error.message,
                                    tip: "Please ensure 1001CloudServer is running (port 61080)  "
                                }, null, 2));
                            }

                        }

                    }

                    async function webapi_copecode() {
                        const element = document.getElementById("sendcommand");
                        if (element) {
                            {#const codeText = element.innerText || element.textContent;#}
                            const codeText = element.value;
                            await navigator.clipboard.writeText(codeText);
                            alert("Copy code completed  ")

                        }
                    }

                    async function webapi_coperesult() {
                        const element = document.getElementById("result");
                        if (element) {
                            const codeText = element.innerText || element.textContent;
                            await navigator.clipboard.writeText(codeText);
                            alert("Copy result completed  ")
                        }
                    }

                    function webapi_portdetail() {
                        const element = document.getElementById("detailports");
                        if (element) {
                            element.hidden = !element.hidden;
                        }
                    }

                    //Edit服务器IP
                    function displayEditPage() {
                        document.getElementById('editServerIPGroup').hidden = !document.getElementById('editServerIPGroup').hidden;

                    }

                    function validateIP(ip) {
                        const segments = ip.split('.');
                        if (segments.length !== 4) return false;

                        for (let i = 0; i < 4; i++) {
                            const num = parseInt(segments[i]);
                            if (isNaN(num) || num < 0 || num > 255) {
                                return false;
                            }
                        }
                        return true;
                    }

                    function validateControllerSN(sn) {
                        if (sn.length !== 9) return false;
                        const num = parseInt(sn);
                        if (isNaN(num)) {
                            return false;
                        }
                        // if (num>100000000 && num < 2)
                        const sn1 = num;
                        if ((sn1 < 100000000) || (sn1 > 500000000)) {
                            return false;
                        }
                        if ((sn1 >= 300000000) && (sn1 < 400000000)) {
                            return false;
                        }

                        return true;
                    }


                    async function updateIP() {
                        const newIp = document.getElementById('ipInput').value.trim();
                        const errorElement = document.getElementById('errorMsg');
                        //  const newSN = document.getElementById('contollerInput').value.trim();

                        // if (validateControllerSN(newSN)){

                        // }
                        // else
                        // {
                        //     errorElement.textContent = '请输入Valid的9位Controllers序列号 (如 226000999)';
                        //     return
                        // }
                        if (validateIP(newIp)) {
                            {#document.getElementById('currentIp').textContent = newIp;#}
                            errorElement.textContent = '';
                            cloudserverIP = newIp
                            //alert('IP Address已Update  为: ' + newIp);
                            document.getElementById('serverip').textContent = "Service URI: http://" + cloudserverIP + ":61080"
                            document.getElementById('interface-api-url').textContent = "http://" + cloudserverIP + ":61080"
                            document.getElementById('currentServerIp').textContent = cloudserverIP
                            const lbla = document.getElementById('notFouncControllerLabel')
                            const divController = document.getElementById('selectController');
                            divController.hidden = true
                            lbla.textContent = "Fetching controller information from server  ..."
                            lbla.hidden = false


                            await getconSN()
                            {#document.getElementById('f_ControllerSN').innerText = newSN#}
                            {#document.getElementById('f_ControllerSN').textContent = '<option value="'+newSN+'">' + newSN + '</option>'#}
                            document.getElementById('editServerIPGroup').hidden = true

                            {#const selectElement = document.getElementById('f_ControllerSN');#}
                            {# if (selectElement) {#}
                            {#        selectElement.innerHTML = '';#}
                            {#        const newOption = document.createElement('option');#}
                            {#        newOption.value = newSN;#}
                            {#        newOption.textContent = newSN;#}
                            {#        selectElement.appendChild(newOption);#}
                            {#        selectElement.value = newSN;#}
                            {#    }#}
                        } else {
                            errorElement.textContent = 'Invalid IP address format (should be xxx.xxx.xxx.xxx)  ';
                        }
                    }

                    async function getconSN() {
                        try {
                            let data = {
                                cloudserverip: cloudserverIP  // 2025-12-13 18:07:21服务器
                            }
                            wgajax.post({
                                url: "/web_help_faq_webapi_newcloudserver", //parm_url , //"/department_del",
                                data: data
                            }).done(function (arrmsg) {
                                console.log(arrmsg)
                                let arrmessage = arrmsg.split(";")
                                const lbla = document.getElementById('notFouncControllerLabel')
                                const divController = document.getElementById('selectController');
                                if (arrmessage.length === 1) {
                                    lbla.textContent = arrmessage
                                    lbla.hidden = false
                                    divController.hidden = true
                                } else {
                                    lbla.hidden = true
                                    divController.hidden = false

                                }
                                let msg;
                                const selectElement = document.getElementById('f_ControllerSN');
                                if (selectElement) {
                                    selectElement.innerHTML = '';
                                    // 强制Configuration宽度
                                    selectElement.style.width = '150px';
                                    selectElement.style.minWidth = '150px';
                                    selectElement.style.maxWidth = '150px';
                                    for (let i = 1; i < arrmessage.length; i++) {
                                        msg = arrmessage[i]
                                        const newOption = document.createElement('option');
                                        newOption.value = msg;
                                        newOption.textContent = msg;
                                        selectElement.appendChild(newOption);

                                    }
                                    selectElement.value = arrmessage[1];
                                }
                            }).fail(function (error) {
                                wgjslog.alert(error); //2023-12-25 14:05:03
                                if (1 < 0)  //2023-12-23 22:28:26 不显示 alert
                                {
                                    alert(error.message);
                                }
                            })
                        } catch (error) {
                            const element3 = document.getElementById("result");
                            if (element3) {
                                element3.textContent = (JSON.stringify({
                                    error: "Request failed  ",
                                    message: error.message,
                                    tip: "Please ensure 1001CloudServer is running (port 61080)  "
                                }, null, 2));
                            }

                        }
                    }
                </script>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body" id="editServerIPGroup" hidden="hidden">
                                <div class="col-sm-12 col-md-12 col-xl-3">
                                    <div class="form-group"><label>Current server IP  </label>: <span id="currentServerIp"
                                                                                               class="ip-display">127.0.0.1</span>
                                    </div>
                                    <div class="form-group">
                                        <label for="ipInput">New server IP  </label>
                                        <input class="form-control text-dark" id="ipInput" name="ipInput" type="text"
                                               value="" placeholder="Enter new server IP (e.g., 192.168.1.100)  ">
                                    </div>
                                    {#                <div class="form-group">#}
                                    {#                    <label for="contollerInput">指定测试用Controllers序列号(9位数)</label>#}
                                    {#                    <input class="form-control text-dark" id="contollerInput" name="contollerInput" type="text" value="" placeholder="输入Controllers9位数序列号 (如 226000999)">#}
                                    {#                </div>#}
                                    <div class="btn-list text-end">
                                        <button class="btn btn-outline-info" onclick="updateIP()" name="Update  ">Update  
                                        </button>
                                    </div>
                                    <div class="form-group"><label id="errorMsg"></label></div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <div class="form-group" style="font-size: large">
                                    <label for="f_ControllerSN" {% if  objlist %}hidden{% endif %}
                                           id="notFouncControllerLabel">No controllers found  </label>
                                    <div id="selectController" {% if not objlist %}hidden{% endif %}>
                                        <label for="f_ControllerSN">Controller SN  : </label>
                                        <select id="f_ControllerSN"
                                                name="f_ControllerSN">
                                         {% if  objlist %}
                                            {% for ControllerSN in objlist %}
                                                <option value="{{ ControllerSN }}">{{ ControllerSN }}</option>
                                            {% endfor %}
                                        {% endif %}
                                        </select>

                                    </div>


                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <div>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)" name="RemoteOpenDoor">
                                        RemoteOpenDoor
                                    </button>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)"
                                            name="Remote Door Opening (Simulate Card Number)">Remote Door Opening (Simulate Card Number)
                                    </button>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)"
                                            name="QueryControllerStatus">QueryControllerStatus
                                    </button>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)"
                                            name="Enable log door sensor/button alarm events  ">Enable log door sensor/button alarm events  
                                    </button>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)" name="ExtendedFunctions">
                                        ...More extension functions  
                                    </button>
                                </div>
                                <p class="card-text text-warning" id="opSelectedResultInfo" hidden>
                                </p>
                            </div>
                            <div class="card-body" id="externfunc" hidden="hidden">
                                <div>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)"
                                            name="Enable log door sensor/button alarm events  ">✅ Enable log door sensor/button alarm events  
                                    </button>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)"
                                            name="Disable log door sensor/button alarm events  ">Disable log door sensor/button alarm events  
                                    </button>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)"
                                            name="Enable QR code Transparent Transmission">✅ Enable QR code Transparent Transmission  
                                    </button>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)"
                                            name="Disable QR code Transparent Transmission">Disable QR code Transparent Transmission  
                                    </button>

                                    <div class="modbus-address-group"><label class="address-label" for="modbusaddr">Modbus address:  </label>
                                        {#                     <div class="number-input-group">#}
                                        {#                     <button class="btn-number-decrease">-</button>#}
                                        <input class="input number-field" min="1" max="255" type="number" value="1"
                                               id="modbusaddr">
                                        {#                     <button class="btn-number-increase">+</button></div>#}
                                        <button class="btn btn-outline-info" onclick="webapi_post(this)"
                                                name="Enable serial port Transparent Transmission">✅ Enable serial port Transparent Transmission  
                                        </button>

                                        <button class="btn btn-outline-info" onclick="webapi_post(this)"
                                                name="Disable serial port Transparent Transmission">Disable serial port Transparent Transmission  
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12">
                        <div class="card" id="webapi_code">
                            {#                <div class="card-body api-info" style="font-size: large">#}
                            {#                    <div class="info-row"><span class="info-label">Test function  :</span><span class="method-badge method-post">Remote Open</span></div>#}
                            {#                    <div class="info-row"><span class="info-label">Test function  :</span><code class="api-url" id="testingFunc"></code></div>#}
                            {#                </div>#}
                            <div class="card-body api-info" style="font-size: large">
                                <div class="info-row"><span class="info-label">Interface Address  :</span><code class="api-url"
                                                                                                     id="interface-api-url">http://127.0.0.1:61080</code>
                                </div>
                                <div class="info-row"><span class="info-label">Request Method:</span><code class="api-url">POST</code>
                                </div>
                                <div class="info-row"><span class="info-label">Content-Type:</span><code
                                        class="api-url">application/json; charset=UTF-8</code></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--ROW CLOSED-->
                <div class="row">
                    <div class="col-lg-6 col-xl-6">
                        <div class="card" id="webapi_code_send">
                            <div class="card-body code-section" style="font-size: large">
                                <span class="info-label">Test function  :</span><code class="api-url" id="testingFunc"></code>
                                <div class="code-header"><span>Request body  （JSON-RPC 2.0）</span>
                                    <button class="btn btn-outline-info" onclick="webapi_copecode()" name="Copy Code">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                             stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"
                                             aria-hidden="true">
                                            <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                                            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
                                        </svg>
                                        Copy Code
                                    </button>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)" name="Run directly  ">
                                        {#                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="white">#}
                                        {#                            <path d="M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M11,4H20V6H11V4M8,16V4H6V16H8M11,12H20V8H11V12M11,16H20V14H11V16M2,6V20A2,2 0 0,0 4,22H18V20H4V6H2Z"/>#}
                                        {#                        </svg>#}
                                        ▷Run directly  
                                    </button>
                                    <button class="btn btn-outline-info" onclick="webapi_post(this)"
                                            name="Run with Controller SN replacement">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                             viewBox="0 0 24 24" fill="white">
                                            <path d="M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M11,4H20V6H11V4M8,16V4H6V16H8M11,12H20V8H11V12M11,16H20V14H11V16M2,6V20A2,2 0 0,0 4,22H18V20H4V6H2Z"/>
                                        </svg>
                                        ▷Run with Controller SN replacement  
                                    </button>

                                    {#                                                <pre class="code-block"><code id="sendcommand2">#}
                                    {##}
                                    {#                                                </code>#}
                                    {#                                                </pre>#}
                                    <textarea
                                            id="sendcommand"
                                            class="editable-textarea"
                                    >

                           </textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-xl-6">
                        <div class="card" id="webapi_code_reply">
                            <div class="card-body response-section" style="font-size: large">
                                <div><span>Response result  </span>
                                    <button class="btn btn-outline-info" onclick="webapi_coperesult()" name="Copy result">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                             stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"
                                             aria-hidden="true">
                                            <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                                            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
                                        </svg>
                                        Copy result
                                    </button>
                                </div>
                                <pre class="code-block response-block"><code id="result">

                        </code>
                        </pre>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-lg-12 col-md-12">
                        <div class="card" id="webapi_code22">
                            <div class="card-header border-bottom">
                                <h4 class="mb-0" style="color: red">Important: (Ensure firewall opens the following ports: 61005, 61080, 61081, 1883)  </h4>
                                <button class="btn btn-outline-info" onclick="webapi_portdetail()" name="Port function description  ">
                                    Details  ..
                                </button>
                            </div>
                            <div class="row p-5" id="detailports" hidden="hidden">
                                <h5 class="mb-0">UDP port: 61005 (controller communication)  </h5>
                                <h5 class="mb-0">TCP port: 61005 (controller communication)  </h5>
                                <h5 class="mb-0">TCP port: 61080 (HTTP service)  </h5>
                                <h5 class="mb-0">TCP port: 61081 (WebSocket service)  </h5>
                                <h5 class="mb-0">TCP port: 1883 (MQTT service)</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 此时DOM已经加载Finished
        console.log('Script executes at end of body — DOM ready');

        // 也可以调用函数
        init();

        function init() {
            // 初始化操作
            const element2 = document.getElementById("sendcommand");
            if (element2) {
                element2.value = ""
            }
            document.getElementById('currentServerIp').textContent = cloudserverIP
            document.getElementById('serverip').textContent = "Service URI: http://" + cloudserverIP + ":61080"
            document.getElementById('interface-api-url').textContent = "http://" + cloudserverIP + ":61080"

        }
    </script>
    <!-- CONTAINER CLOSED -->
{% endblock %}