imgsearcher/app/static/js/main.js

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化图片预览功能
    initImagePreview('uploadFile', 'uploadPreview');
    initImagePreview('searchFile', 'searchPreview');
    
    // 初始化表单提交事件
    initUploadForm();
    initSearchForm();
    initUpdateForm();
    initDeleteForm();
});

// 初始化图片预览功能
function initImagePreview(inputId, previewId) {
    const input = document.getElementById(inputId);
    const preview = document.getElementById(previewId);
    
    if (input && preview) {
        input.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.classList.remove('d-none');
                };
                
                reader.readAsDataURL(this.files[0]);
            }
        });
    }
}

// 初始化上传表单
function initUploadForm() {
    const form = document.getElementById('uploadForm');
    
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const resultDiv = document.getElementById('uploadResult');
            
            resultDiv.innerHTML = '<div class="alert alert-info"><div class="spinner-border text-primary" role="status"></div>正在上传，请稍候...</div>';
            
            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    resultDiv.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
                } else {
                    resultDiv.innerHTML = `
                        <div class="alert alert-success">
                            <h5>上传成功！</h5>
                            <p>图片签名: ${data.cont_sign}</p>
                            <p>日志ID: ${data.log_id}</p>
                        </div>
                    `;
                    // 重置表单
                    form.reset();
                    document.getElementById('uploadPreview').classList.add('d-none');
                }
            })
            .catch(error => {
                resultDiv.innerHTML = `<div class="alert alert-danger">上传失败: ${error.message}</div>`;
            });
        });
    }
}

// 初始化搜索表单
function initSearchForm() {
    const form = document.getElementById('searchForm');
    
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const resultDiv = document.getElementById('searchResult');
            const resultList = document.getElementById('searchResultList');
            const resultStats = document.getElementById('searchStats');
            const resultCount = document.getElementById('resultCount');
            
            resultList.innerHTML = '<div class="col-12 text-center"><div class="spinner-border text-primary" role="status"></div> 正在搜索，请稍候...</div>';
            resultStats.classList.add('d-none');
            
            fetch('/search', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    resultList.innerHTML = `<div class="col-12"><div class="alert alert-danger">${data.error}</div></div>`;
                } else {
                    // 显示搜索结果统计
                    resultCount.textContent = data.result_num || 0;
                    resultStats.classList.remove('d-none');
                    
                    // 清空结果列表
                    resultList.innerHTML = '';
                    
                    if (data.result && data.result.length > 0) {
                        // 显示搜索结果
                        data.result.forEach(item => {
                            // 解析brief信息
                            let briefInfo = {};
                            try {
                                briefInfo = JSON.parse(item.brief);
                            } catch (e) {
                                briefInfo = { name: '未知', id: '未知' };
                            }
                            
                            const resultItem = document.createElement('div');
                            resultItem.className = 'col-md-4 col-sm-6 result-item';
                            resultItem.innerHTML = `
                                <div class="card result-card">
                                    <div class="result-img-container">
                                        <img class="result-img" src="/static/img/placeholder.png" alt="${briefInfo.name || '图片'}">
                                    </div>
                                    <div class="result-info">
                                        <h5>${briefInfo.name || '未命名图片'}</h5>
                                        <p>ID: ${briefInfo.id || '无ID'}</p>
                                        <p>相似度: <span class="result-score">${(item.score * 100).toFixed(2)}%</span></p>
                                        <div class="result-actions">
                                            <button class="btn btn-sm btn-outline-primary update-btn" 
                                                data-cont-sign="${item.cont_sign}" 
                                                data-name="${briefInfo.name || ''}" 
                                                data-id="${briefInfo.id || ''}"
                                                data-bs-toggle="modal" 
                                                data-bs-target="#updateModal">
                                                编辑
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger delete-btn" 
                                                data-cont-sign="${item.cont_sign}"
                                                data-bs-toggle="modal" 
                                                data-bs-target="#deleteModal">
                                                删除
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            `;
                            resultList.appendChild(resultItem);
                        });
                        
                        // 初始化编辑和删除按钮事件
                        initResultButtons();
                    } else {
                        resultList.innerHTML = '<div class="col-12"><div class="alert alert-warning">没有找到匹配的图片</div></div>';
                    }
                }
            })
            .catch(error => {
                resultList.innerHTML = `<div class="col-12"><div class="alert alert-danger">搜索失败: ${error.message}</div></div>`;
            });
        });
    }
}

// 初始化搜索结果中的按钮事件
function initResultButtons() {
    // 更新按钮点击事件
    document.querySelectorAll('.update-btn').forEach(button => {
        button.addEventListener('click', function() {
            const contSign = this.getAttribute('data-cont-sign');
            const name = this.getAttribute('data-name');
            const id = this.getAttribute('data-id');
            
            document.getElementById('updateContSign').value = contSign;
            document.getElementById('updateName').value = name;
            document.getElementById('updateId').value = id;
        });
    });
    
    // 删除按钮点击事件
    document.querySelectorAll('.delete-btn').forEach(button => {
        button.addEventListener('click', function() {
            const contSign = this.getAttribute('data-cont-sign');
            document.getElementById('deleteContSign').value = contSign;
        });
    });
}

// 初始化更新表单
function initUpdateForm() {
    const updateButton = document.getElementById('updateSubmit');
    
    if (updateButton) {
        updateButton.addEventListener('click', function() {
            const contSign = document.getElementById('updateContSign').value;
            const name = document.getElementById('updateName').value;
            const id = document.getElementById('updateId').value;
            const tags = document.getElementById('updateTags').value;
            
            // 创建brief信息
            const brief = {
                name: name,
                id: id
            };
            
            // 发送更新请求
            fetch('/update', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    cont_sign: contSign,
                    brief: brief,
                    tags: tags
                })
            })
            .then(response => response.json())
            .then(data => {
                // 关闭模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('updateModal'));
                modal.hide();
                
                if (data.error) {
                    alert(`更新失败: ${data.error}`);
                } else {
                    alert('更新成功！');
                    // 如果当前在搜索标签页，刷新搜索结果
                    if (document.getElementById('search-tab').classList.contains('active')) {
                        document.getElementById('searchForm').dispatchEvent(new Event('submit'));
                    }
                }
            })
            .catch(error => {
                alert(`更新失败: ${error.message}`);
            });
        });
    }
}

// 初始化删除表单
function initDeleteForm() {
    const deleteButton = document.getElementById('deleteSubmit');
    
    if (deleteButton) {
        deleteButton.addEventListener('click', function() {
            const contSign = document.getElementById('deleteContSign').value;
            
            // 发送删除请求
            fetch('/delete', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    cont_sign: contSign
                })
            })
            .then(response => response.json())
            .then(data => {
                // 关闭模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
                modal.hide();
                
                if (data.error) {
                    alert(`删除失败: ${data.error}`);
                } else {
                    alert('删除成功！');
                    // 如果当前在搜索标签页，刷新搜索结果
                    if (document.getElementById('search-tab').classList.contains('active')) {
                        document.getElementById('searchForm').dispatchEvent(new Event('submit'));
                    }
                }
            })
            .catch(error => {
                alert(`删除失败: ${error.message}`);
            });
        });
    }
}