{% extends 'base.html' %}
{% block title %}ZFBOX{% endblock %}
{% block style %}
.btn-blue {
background-color: #007bff;
color: white;
}
.btn-blue:hover {
background-color: #0056b3;
}
.table-container {
min-height: 300px; /* 设置最小高度，可以根据需要调整 */
}
/* 缩小表格行高 */
.table-sm th,
.table-sm td {
padding: 0.2rem; /* 调整这里的值来改变行高 */
}
.pagination {
justify-content: flex-end; /* 右对齐 */
}
.section-title {
position: relative;
margin: 20px 0;
}
.section-title hr {
margin: 0;
border-color: #000; /* You can change the color of the line if needed */
}
{% endblock %}
{% block content %}
<div class="container d-flex flex-column" >
<!-- 模态框区域 -->
<!-- 配置IP模态框-->
<div class="modal fade" id="ipConfigModal" tabindex="-1" aria-labelledby="ipConfigModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ipConfigModalLabel">IP地址配置</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Tabs for Wired and Wireless IP -->
<ul class="nav nav-tabs" id="ipTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="wired-tab" data-bs-toggle="tab" data-bs-target="#wired" type="button" role="tab" aria-controls="wired" aria-selected="true">有线IP</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="wireless-tab" data-bs-toggle="tab" data-bs-target="#wireless" type="button" role="tab" aria-controls="wireless" aria-selected="false">无线IP</button>
</li>
</ul>
<!-- Tab content -->
<div class="tab-content mt-3" id="ipTabContent">
<!-- Wired IP Configuration -->
<div class="tab-pane fade show active" id="wired" role="tabpanel" aria-labelledby="wired-tab">
<div class="mb-3">
<div class="row">
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="radio" name="ip_lan"
id="dhcp_lan" checked onclick="handleRadioClick_lan(event)">
<label class="form-check-label" for="dhcp_lan">自动获取</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="radio" name="ip_lan"
id="static_lan" onclick="handleRadioClick_lan(event)">
<label class="form-check-label" for="static_lan">静态IP</label>
</div>
</div>
</div>
</div>
<div class="mb-3">
<label for="wiredIpAddress" class="form-label">有线IP地址</label>
<input type="text" class="form-control" id="wiredIpAddress" placeholder="例如: 192.168.1.2">
</div>
<div class="mb-3">
<label for="wiredSubnetMask" class="form-label">子网掩码</label>
<input type="text" class="form-control" id="wiredSubnetMask" placeholder="例如: 255.255.255.0">
</div>
<div class="mb-3">
<label for="wiredGateway" class="form-label">网关</label>
<input type="text" class="form-control" id="wiredGateway" placeholder="例如: 192.168.1.1">
</div>
<div>
<label for="wirelessGateway" class="form-label">DNS</label>
<input type="text" class="form-control" id="wiredDNS" placeholder="例如: 114.114.114.114">
</div>
</div>
<!-- Wireless IP Configuration -->
<div class="tab-pane fade" id="wireless" role="tabpanel" aria-labelledby="wireless-tab">
<div class="mb-2">
<label for="wirelessNetwork" class="form-label">选择无线网络</label>
<select class="form-select" id="wirelessNetwork">
<!-- 数据动态填充 -->
</select>
</div>
<div class="mb-4">
<div class="row justify-content-center align-items-center">
<div class="col-2"><label for="wirelessSubnetMask" class="form-label">密码:</label></div>
<div class="col-8"><input type="password" class="form-control" id="wifi_passwd"></div>
<div class="col-2"><button type="button" class="btn btn-primary" id="connectWifi">连接</button></div>
</div>
</div>
<div class="mb-2">
<div class="row">
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="radio" name="ip_wifi"
id="dhcp_wifi" checked onclick="handleRadioClick_wifi(event)">
<label class="form-check-label" for="dhcp_wifi">自动获取</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="radio" name="ip_wifi"
id="static_wifi" onclick="handleRadioClick_wifi(event)">
<label class="form-check-label" for="static_wifi">静态IP</label>
</div>
</div>
</div>
</div>
<div class="mb-2">
<label for="wirelessIpAddress" class="form-label">无线IP地址</label>
<input type="text" class="form-control" id="wirelessIpAddress" placeholder="例如: 192.168.1.3">
</div>
<div class="mb-2">
<label for="wirelessSubnetMask" class="form-label">子网掩码</label>
<input type="text" class="form-control" id="wirelessSubnetMask" placeholder="例如: 255.255.255.0">
</div>
<div class="mb-2">
<label for="wirelessGateway" class="form-label">网关</label>
<input type="text" class="form-control" id="wirelessGateway" placeholder="例如: 192.168.1.1">
</div>
<div>
<label for="wirelessGateway" class="form-label">DNS</label>
<input type="text" class="form-control" id="wirelessDNS" placeholder="例如: 114.114.114.114">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="saveIPConfig">保存设置</button>
</div>
</div>
</div>
</div>
<!-- 修改服务器IP模态框-->
<div class="modal fade" id="ServerIPModal" tabindex="-1" aria-labelledby="ServerIPModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">服务器IP地址配置</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="serviceIP_model" class="form-label">服务器IP</label>
<input type="text" class="form-control" id="serviceIP_model" placeholder="例如: 127.0.0.1">
</div>
<div class="mb-3">
<label for="servicePort_model" class="form-label">端口号</label>
<input type="text" class="form-control" id="servicePort_model" placeholder="例如: 8085">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="saveServerIP">保存设置</button>
</div>
</div>
</div>
</div>
<!-- 新增区域模态框-->
<div class="modal fade" id="addAreaModal" tabindex="-1" aria-labelledby="AreaModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="area_modal_title_id">新增区域</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="area_name" class="form-label">区域名称</label>
<input type="text" class="form-control" id="area_name">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="addArea">保存设置</button>
</div>
</div>
</div>
</div>
<!-- 修改区域模态框-->
<div class="modal fade" id="modifyAreaModal" tabindex="-1" aria-labelledby="AreaModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">修改区域</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="area_name" class="form-label">区域名称</label>
<input type="text" class="form-control" id="area_name_modif">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="modifArea">保存设置</button>
</div>
</div>
</div>
</div>
<!-- 系统信息区域 -->
<div class="container mt-4">
<div class="row justify-content-center align-items-center">
<div class="col-md-3 text-end"><label class="col-form-label form-label">系统版本号：</label></div>
<div class="col-md-9"><p class="form-control-plaintext" id="system_version">1.0.0.1</p></div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-md-3 text-end"><label class="col-form-label form-label">升级包：</label></div>
<div class="col-md-6"><input type="file" class="form-control" id="upgrade-system"></div>
<div class="col-md-3"><button class="btn btn-blue" id="upsystem">升级</button></div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-md-3 text-end"><label class="col-form-label form-label">设备ID：</label></div>
<div class="col-md-9"><p class="form-control-plaintext" id="dev_ID">1.0.0.1</p></div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-md-3 text-end"><label class="col-form-label form-label">设备IP：</label></div>
<div class="col-md-6"><p class="form-control-plaintext" id="dev_IP">
有线--192.168.3.45 WIFI--192.168.3.45 5G--192.168.3.45</p></div>
<div class="col-md-3"><button class="btn btn-blue" id="showIPConfig">配置</button></div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-md-3 text-end"><label class="col-form-label form-label">服务器IP：</label></div>
<div class="col-md-3"><input type="text" class="form-control" id="service_ip"></div>
<div class="col-md"><label class="col-form-label form-label">端口号：</label></div>
<div class="col-md"><input type="text" class="form-control" id="service_port"></div>
<div class="col-md-3"><button class="btn btn-blue" id="showServerIP">修改</button></div>
</div>
</div>
<!-- 区域管理区域 -->
<div class="section-title">
<hr>
</div>
<div class="mb-3">
<button id="addAreaButton" type="button" class="btn btn-primary">
新增区域
</button>
</div>
<div class="table-container">
<table class="table">
<thead class="table-light">
<tr>
<th scope="col" style="width: 20%;">ID</th>
<th scope="col" style="width: 50%;">区域名称</th>
<th scope="col" style="width: 30%;">操作</th>
</tr>
</thead>
<tbody id="table-body-area" class="table-group-divider">
<!-- 表格数据动态填充 -->
</tbody>
</table>
<nav>
<ul id="pagination-area" class="pagination">
<!-- 分页控件将动态生成 -->
</ul>
</nav>
</div>
</div>
{% endblock %}
{% block script %}
<script src="{{ url_for('main.static', filename='scripts/jquery-3.2.1.slim.min.js') }}"></script>
<script src="{{ url_for('main.static', filename='scripts/system_manager.js') }}"></script>
{% endblock %}