new.html

{% extends "base.html" %}
{% block content %}
<h1>新建端口分配</h1>
<div id="notification-area" class="mb-3"></div>
<form id="port-form">
    <div class="mb-3">
        <label for="ip-address" class="form-label">IP 地址</label>
        <div class="input-group">
            <select class="form-select" id="ip-address" name="ip_address" required>
                {% for ip, nickname in ip_addresses %}
                <option value="{{ ip }}" {% if ip==default_ip %}selected{% endif %}>
                    {{ ip }}{% if nickname %} ({{ nickname }}){% endif %}
                </option>
                {% endfor %}
            </select>
            <button class="btn btn-outline-secondary" type="button" id="add-ip-btn">添加 IP</button>
        </div>
    </div>
    <div class="mb-3">
        <label for="description" class="form-label">描述</label>
        <input type="text" class="form-control" id="description" name="description" required>
    </div>
    <div class="mb-3">
        <label for="protocol" class="form-label">协议</label>
        <select class="form-select" id="protocol" name="protocol" required>
            <option value="TCP">TCP</option>
            <option value="UDP">UDP</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">生成</button>
</form>
<div id="result" class="mt-3"></div>

<!-- New IP Modal -->
<div class="modal fade" id="newIpModal" tabindex="-1" aria-labelledby="newIpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="newIpModalLabel">输入新 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="new-ip" class="form-label">IP 地址</label>
                    <input type="text" class="form-control" id="new-ip" placeholder="输入新 IP 地址">
                </div>
                <div class="mb-3">
                    <label for="new-nickname" class="form-label">名称（可选）</label>
                    <input type="text" class="form-control" id="new-nickname" placeholder="Enter nickname">
                </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="save-new-ip">保存</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script type="module" src="{{ url_for('static', filename='js/core/new.js') }}"></script>
{% endblock %}