zfbox/web/main/static/resources/scripts/system_manager.js

let currentPage = 1;
const rowsPerPage = 10;
let currentEditingRow = null;
let areaData = [];
let areaData_bak = [];
//网络信息
let wired_type;
let wired_ip;
let wired_mask;
let wired_gateway;
let wired_dns;
let wireless_type;
let wireless_ip;
let wireless_mask;
let wireless_gateway;
let wireless_dns;
let wireless_ssid;
let wireless_passwd;
let wifi_list = [];

//页面加载初始化
document.addEventListener('DOMContentLoaded', function () {
    fetchSystemData(); //初始化系统信息
    fetchAreaData();//初始化区域信息
    //升级按钮
    document.getElementById('upsystem').addEventListener('click',function () {upgrade_system();});

    //设备IP配置按钮--显示模态框
    document.getElementById('showIPConfig').addEventListener('click',function () {show_IPConfigModel();});
    //设备IP配置模态框--保存按钮
    document.getElementById('saveIPConfig').addEventListener('click',function () {save_IPConfig();});
    document.getElementById('connectWifi').addEventListener('click',function () {connect_wifi();});

    //服务器IP配置
    document.getElementById('showServerIP').addEventListener('click',function () {show_ServerIPConfig();});
    document.getElementById('saveServerIP').addEventListener('click',function () {save_ServerIPConfig();});

    //区域管理
    document.getElementById('addAreaButton').addEventListener('click',function () {show_AreaManager();});
    document.getElementById('addArea').addEventListener('click',function () {add_Area();});

    //修改区域模态框
    document.getElementById('modifArea').addEventListener('click',function () {modify_Area();});
});

//刷新系统信息
async function fetchSystemData() {
    try{
        let response = await fetch('/api/system/info');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        data = await response.json();

        document.getElementById('system_version').textContent = data.version;
        document.getElementById('dev_ID').textContent = data.ID;
        document.getElementById('service_ip').value = data.service_ip;
        document.getElementById('service_port').value = data.service_port;
        //网络信息
        wired_type = data.wired_type;
        wired_ip = data.wired_ip;
        wired_mask = data.wired_mask;
        wired_gateway = data.wired_gateway;
        wired_dns = data.wired_dns;
        wireless_type = data.wireless_type;
        wireless_ip = data.wireless_ip;
        wireless_mask = data.wireless_mask;
        wireless_gateway = data.wireless_gateway;
        wireless_dns = data.wireless_dns;
        wireless_ssid = data.ssid;
        wireless_passwd = data.wifi_passwd;
        //wifi -list
        wifi_list = data.wifi_list;
        wifi_list.unshift("请选择");
        document.getElementById('dev_IP').textContent = `有线--${wired_ip}  无线--${wireless_ip}`;


    }catch (error) {
        console.error('Error fetching model data:', error);
    }
}

//刷新区域信息--
async function fetchAreaData() {
    try{
        let response = await fetch('/api/system/area');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        areaData = await response.json();
        areaData_bak = areaData;
        currentPage = 1; // 重置当前页为第一页
        renderTable();          //刷新表格
        renderPagination();
    }catch (error) {
        console.error('Error fetching model data:', error);
    }
}

//刷新表格
function renderTable(){
  const tableBody = document.getElementById('table-body-area');
  tableBody.innerHTML = '';

  const start = (currentPage - 1) * rowsPerPage;
  const end = start + rowsPerPage;
  const pageData = areaData.slice(start, end);
  const surplus_count = rowsPerPage - pageData.length;

  pageData.forEach((area) => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${area.ID}</td>
      <td>${area.area_name}</td>
      <td>
          <button class="btn btn-primary btn-sm modify-btn">修改</button>
          <button class="btn btn-danger btn-sm delete-btn">删除</button>
      </td>
    `;
    tableBody.appendChild(row);
    row.querySelector('.modify-btn').addEventListener('click', () => show_modify_Area(row));
    row.querySelector('.delete-btn').addEventListener('click', () => del_Area(row));
    });
}

//刷新分页标签
function renderPagination() {
  const pagination = document.getElementById('pagination-area');
  pagination.innerHTML = '';

  const totalPages = Math.ceil(areaData.length / rowsPerPage);
  for (let i = 1; i <= totalPages; i++) {
    const pageItem = document.createElement('li');
    pageItem.className = 'page-item' + (i === currentPage ? ' active' : '');
    pageItem.innerHTML = `<a class="page-link" href="#">${i}</a>`;
    pageItem.addEventListener('click', (event) => {
      event.preventDefault();
      currentPage = i;
      renderTable();
      renderPagination();
    });
    pagination.appendChild(pageItem);
  }
}

//系统升级
async function upgrade_system(){
    alert("点击了系统升级按钮");
}

//设备IP地址配置 --- 显示模态框---------------------
function show_IPConfigModel(){
    //wired页面
    const el_wired_dhcp = document.getElementById('dhcp_lan');
    const el_wired_static = document.getElementById('static_lan');
    const el_wired_ip = document.getElementById('wiredIpAddress');
    const el_wired_mask = document.getElementById('wiredSubnetMask');
    const el_wired_gateway = document.getElementById('wiredGateway');
    const el_wired_dns = document.getElementById('wiredDNS');
    if(wired_type==0){ //dhcp
        el_wired_dhcp.checked = true;
    }else{
        el_wired_static.checked = true;
    }
    el_wired_ip.value = wired_ip;
    el_wired_mask.value = wired_mask;
    el_wired_gateway.value = wired_gateway;
    el_wired_dns.value = wired_dns;

    //wireless页面
    //document.getElementById('wirelessNetwork');

    const el_wireless_passwd = document.getElementById('wifi_passwd');
    const el_wireless_dhcp = document.getElementById('dhcp_wifi');
    const el_wireless_static = document.getElementById('static_wifi');
    const el_wireless_ip = document.getElementById('wirelessIpAddress');
    const el_wireless_mask = document.getElementById('wirelessSubnetMask');
    const el_wireless_gateway = document.getElementById('wirelessGateway');
    const el_wireless_dns = document.getElementById('wirelessDNS');

    //wireless_ssid = data.ssid;
    //wireless_passwd = data.wifi_passwd;
    if(wired_type==0){ //dhcp
        el_wireless_dhcp.checked = true;
    }else{
        el_wireless_static.checked = true;
    }
    set_select_data("wirelessNetwork",wifi_list);
    if(wireless_ssid == null || wireless_ssid == ""){
        //控件不可操作
        el_wireless_dhcp.disabled=true;
        el_wireless_static.disabled=true;
        el_wireless_ip.disabled=true;
        el_wireless_mask.disabled=true;
        el_wireless_gateway.disabled=true;
        el_wireless_dns.disabled=true;
    }else{
        let bfind = set_select_selct("wirelessNetwork",wireless_ssid);
        if(bfind== false){
            el_wireless_dhcp.disabled=true;
            el_wireless_static.disabled=true;
            el_wireless_ip.disabled=true;
            el_wireless_mask.disabled=true;
            el_wireless_gateway.disabled=true;
            el_wireless_dns.disabled=true;
        }else{
            el_wireless_passwd.value = wireless_passwd;
            el_wireless_ip.value = wireless_ip;
            el_wireless_mask.value = wireless_mask;
            el_wireless_gateway.value = wireless_gateway;
            el_wireless_dns.value = wireless_dns;
        }
    }
    $('#ipConfigModal').modal('show');
}
//点击连接wifi 按钮
async function connect_wifi(){
    alert("点击了连接wifi按钮");
}

//设备IP地址配置 --- 点击保存按钮
async function save_IPConfig(){
    alert("点击了设备IP保存按钮");
}

//IP配置模态框，单选按钮点击
function handleRadioClick_lan(event){
    const selectedRadio = event.target;
    const el_ip = document.getElementById('wiredIpAddress');
    const el_mask = document.getElementById('wiredSubnetMask');
    const el_gateway = document.getElementById('wiredGateway');
    const el_dns = document.getElementById('wiredDNS');
    let net_type = 0;   //0--dhcp，1--static
    if (selectedRadio.id === 'dhcp_lan') {
        net_type = 1;
        el_ip.disabled = true;
        el_mask.disabled = true;
        el_gateway.disabled = true;
        el_dns.disabled = true;
    }
    else if(selectedRadio.id === 'static_lan'){
        net_type = 2;
        el_ip.disabled = false;
        el_mask.disabled = false;
        el_gateway.disabled = false;
        el_dns.disabled = false;
    }
}

//IP配置模态框，单选按钮点击
function handleRadioClick_wifi(event){
    const selectedRadio = event.target;
    let wifi_type = 0;   //0--dhcp，1--static
    const el_ip = document.getElementById('wirelessIpAddress');
    const el_mask = document.getElementById('wirelessSubnetMask');
    const el_gateway = document.getElementById('wirelessGateway');
    const el_dns = document.getElementById('wirelessDNS');
    if (selectedRadio.id === 'dhcp_wifi') {
        net_type = 1;
        el_ip.disabled = true;
        el_mask.disabled = true;
        el_gateway.disabled = true;
        el_dns.disabled = true;
    }
    else if(selectedRadio.id === 'static_wifi'){
        net_type = 2;
        el_ip.disabled = false;
        el_mask.disabled = false;
        el_gateway.disabled = false;
        el_dns.disabled = false;
    }

}

//服务器IP配置-----------------------------------------
function show_ServerIPConfig(){
    const el_serviceIP = document.getElementById('serviceIP_model');
    const el_servicePort = document.getElementById('servicePort_model');
    el_serviceIP.value = document.getElementById('service_ip').value;
    el_servicePort.value = document.getElementById('service_port').value;
    $('#ServerIPModal').modal('show');
}

async function save_ServerIPConfig(){
    const el_serverIP = document.getElementById('serviceIP_model');
    const el_serverPort = document.getElementById('servicePort_model');
    const btn = document.getElementById('saveServerIP');
    serverIP = el_serverIP.value;
    serverPort = el_serverPort.value;
    if(serverIP==="" || serverPort===""){
        alert("服务端IP和端口号不能为空！")
    }
    else{
        if(isValidIP(serverIP)){
            btn.disabled = true;
            const formData = new FormData();
            formData.append('ip', serverIP);
            formData.append('port', serverPort);
            fetch("/api/system/changeserver", {
                method: 'POST',
                body: formData,
            })
            .then(response => response.json())
            .then(data => {
                btn.disabled = false;
                const istatus = data.status;
                alert(data.msg);
                if(istatus == 1){
                    fetchSystemData();
                    $('#ServerIPModal').modal('hide');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('修改失败，请重试。');
                btn.disabled = false;
            });
        }
        else{
            alert("请输入正确的IP地址！")
        }
    }
}

//区域管理-------------------------------------------
function show_AreaManager(){
    $('#addAreaModal').modal('show');
}

async function add_Area(){
    const el_ereaname = document.getElementById('area_name');
    const btn = document.getElementById('addArea');
    area_name = el_ereaname.value;
    if(area_name===""){
        alert("请输入区域名称");
    }else{
        btn.disabled = true;
        //提交数据
        const url = '/api/channel/area/add';
        const data = {"name":area_name};
        // 发送 POST 请求
        fetch(url, {
            method: 'POST', // 指定请求方法为 POST
            headers: {
                'Content-Type': 'application/json' // 设置请求头，告诉服务器请求体的数据类型为 JSON
            },
            body: JSON.stringify(data) // 将 JavaScript 对象转换为 JSON 字符串
        })
        .then(response => response.json()) // 将响应解析为 JSON
        .then(data => {
            btn.disabled = false;
            const istatus = data.status;
            alert(data.msg);
            if(istatus == 1){
                fetchAreaData();
                $('#addAreaModal').modal('hide');
            }
        })
        .catch((error) => {
            alert(`Error: ${error.message}`);
            btn.disabled = false;
        });
    }
}

//显示修改区域信息
function show_modify_Area(row){
    currentEditingRow = row;
    area_name = row.cells[1].innerText;
    const el_areaname = document.getElementById('area_name_modif');
    el_areaname.value = area_name;
    $('#modifyAreaModal').modal('show');
}

//点击修改模态框的保存按钮
async function modify_Area(){
    area_id = currentEditingRow.cells[0].innerText;
    area_name = document.getElementById('area_name_modif').value;
    const btn = document.getElementById('modifArea');
    if(area_name===""){
        alert("请输入区域名称！")
    }else{
        btn.disabled = true;
        //提交数据
        const url = '/api/channel/area/change';
        const formData = new FormData();
        formData.append('name', area_name);
        formData.append('id', area_id);
        //const data = {"name":area_name,"id":area_id};
        // 发送 POST 请求
        fetch(url, {
            method: 'POST',
                body: formData,
        })
        .then(response => response.json()) // 将响应解析为 JSON
        .then(data => {
            btn.disabled = false;
            const istatus = data.status;
            alert(data.msg);
            if(istatus == 1){
                fetchAreaData();
                $('#modifyAreaModal').modal('hide');
            }
        })
        .catch((error) => {
            alert(`Error: ${error.message}`);
            btn.disabled = false;
        });
    }
}

//删除区域信息
async function del_Area(row){
    if (confirm('确定删除此区域吗？')){
        currentEditingRow = row;
        area_id =row.cells[0].innerText;
        const url = '/api/channel/area/del';
        const formData = new FormData();
        formData.append('id', area_id);
        //const data = {"name":area_name,"id":area_id};
        // 发送 POST 请求
        fetch(url, {
            method: 'POST',
            body: formData,
        })
        .then(response => response.json()) // 将响应解析为 JSON
        .then(data => {
            const istatus = data.status;
            alert(data.msg);
            if(istatus == 1){
                //刷新列表
                row.remove();
            }
        })
        .catch((error) => {
            alert(`Error: ${error.message}`);
            btn.disabled = false;
        });
    }
}