WebhockTransfer/templates/admin/targets.html

{% extends "admin/base.html" %}
{% block title %}目标管理 - Webhook{% endblock %}
{% block content %}
<div class="row mb-3">
    <div class="col">
        <h3>转发目标列表</h3>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary" onclick="openAddModal()">添加目标</button>
    </div>
</div>

<div class="alert alert-info alert-dismissible fade show" role="alert">
    <strong>什么是“转发目标”？</strong>
    <p class="mb-0">
        转发目标（Targets）是您希望将接收到的Webhook数据<strong>转发到的外部系统地址</strong>。<br>
        例如：您的ERP系统接口、数据分析平台、或第三方业务系统的Webhook接收URL。
    </p>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>URL</th>
            <th>超时(ms)</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for t in targets %}
        <tr>
            <td>{{ t.id }}</td>
            <td>{{ t.name }}</td>
            <td>{{ t.url }}</td>
            <td>{{ t.timeout_ms }}</td>
            <td>
                <button class="btn btn-sm btn-outline-primary" 
                    onclick="openEditModal('{{ t.id }}', '{{ t.name }}', '{{ t.url }}', '{{ t.timeout_ms }}')">修改</button>
                <form action="/admin/targets/delete" method="post" style="display:inline" onsubmit="return confirm('确定删除？')">
                    <input type="hidden" name="id" value="{{ t.id }}">
                    <button type="submit" class="btn btn-sm btn-danger">删除</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="targetModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="targetForm" action="/admin/targets" method="post">
            <input type="hidden" name="id" id="targetId">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">添加新目标</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">名称 (内部标识)</label>
                        <input type="text" class="form-control" name="name" id="targetName" required placeholder="例如: erp_system_prod">
                        <div class="form-text">给这个目标起个名字，方便在路由规则中选择。</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Webhook URL (对方接收地址)</label>
                        <input type="url" class="form-control" name="url" id="targetUrl" required placeholder="https://api.example.com/receive">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">超时 (ms)</label>
                        <input type="number" class="form-control" name="timeout_ms" id="targetTimeout" value="5000">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    var modal = new bootstrap.Modal(document.getElementById('targetModal'));

    function openAddModal() {
        document.getElementById('modalTitle').innerText = "添加新目标";
        document.getElementById('targetForm').action = "/admin/targets";
        document.getElementById('targetId').value = "";
        document.getElementById('targetName').value = "";
        document.getElementById('targetUrl').value = "";
        document.getElementById('targetTimeout').value = "5000";
        modal.show();
    }

    function openEditModal(id, name, url, timeout) {
        document.getElementById('modalTitle').innerText = "修改目标";
        document.getElementById('targetForm').action = "/admin/targets/update";
        document.getElementById('targetId').value = id;
        document.getElementById('targetName').value = name;
        document.getElementById('targetUrl').value = url;
        document.getElementById('targetTimeout').value = timeout;
        modal.show();
    }
</script>
{% endblock %}