2006_WEB/templates/firmware.html

{% extends "base.html" %}

{% block content %}
<section class="firmware-upload">
    <h2>上传固件</h2>
    {% if error %}
    <div class="error-message">{{ error }}</div>
    {% endif %}
    <form method="POST" enctype="multipart/form-data" id="upload-form">
    {% if firmwares %}
    <input type="hidden" id="existing-filenames" value="{% for firmware in firmwares %}{{ firmware.filename }}{% if not loop.last %},{% endif %}{% endfor %}">
    {% else %}
    <input type="hidden" id="existing-filenames" value="">
    {% endif %}
        <div class="form-group">
            <label for="file">选择固件文件</label>
            <input type="file" id="file" name="file" accept=".bin,.zip,.tar,.rar" required>
            <small>支持的格式: bin, zip, tar, rar</small>
        </div>
        <div class="form-group">
            <label for="remark">备注信息</label>
            <textarea id="remark" name="remark" required placeholder="请输入固件描述信息"></textarea>
            <small>备注信息不能为空</small>
        </div>
        <button type="submit" class="upload-btn">上传固件</button>
    </form>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取现有文件名列表
        const existingFilenamesInput = document.getElementById('existing-filenames');
        const existingFilenames = existingFilenamesInput.value ? existingFilenamesInput.value.split(',') : [];
        // 过滤掉空字符串
        const validFilenames = existingFilenames.filter(filename => filename.trim() !== '');
        
        // 获取文件输入框和表单
        const fileInput = document.getElementById('file');
        const uploadForm = document.getElementById('upload-form');
        
        // 监听文件选择事件
        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) {
                const selectedFilename = this.files[0].name;
                
                // 检查文件名是否重复
                if (validFilenames.includes(selectedFilename)) {
                    alert(`文件名 "${selectedFilename}" 已存在，请更改文件名后再上传`);
                    this.value = ''; // 清除文件选择
                }
            }
        });
        
        // 表单提交前再次检查
        uploadForm.addEventListener('submit', function(e) {
            if (fileInput.files.length > 0) {
                const selectedFilename = fileInput.files[0].name;
                
                if (validFilenames.includes(selectedFilename)) {
                    e.preventDefault(); // 阻止表单提交
                    alert(`文件名 "${selectedFilename}" 已存在，请更改文件名后再上传`);
                }
            }
        });
    });
</script>

<section class="firmware-list">
    <h2>固件信息</h2>
    <table class="data-table">
        <thead>
            <tr>
                <th>文件名</th>
                <th>文件大小</th>
                <th>上传时间</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for firmware in firmwares %}
            <tr>
                <td>{{ firmware.filename }}</td>
                <td>{{ firmware.filesize }}</td>
                <td>{{ firmware.upload_time }}</td>
                <td>{{ firmware.remark }}</td>
                <td class="actions">
                    <button class="edit-btn" data-id="{{ firmware.id }}" data-remark="{{ firmware.remark }}">编辑</button>
                    <a href="{{ url_for('firmware', download=firmware.id) }}" class="download-btn">下载</a>
                    <a href="{{ url_for('firmware', delete=firmware.id) }}" class="delete-btn" onclick="return confirm('确定要删除吗?')">删除</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>

<!-- 编辑备注模态框 -->
<div id="edit-modal" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h3>编辑备注</h3>
        <form id="edit-form" method="GET" action="{{ url_for('firmware') }}">
            <input type="hidden" id="edit-id" name="edit">
            <div class="form-group">
                <label for="new-remark">备注信息</label>
                <textarea id="new-remark" name="remark" required></textarea>
            </div>
            <button type="submit" class="save-btn">保存</button>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 编辑功能实现
    const modal = document.getElementById('edit-modal');
    const editBtns = document.querySelectorAll('.edit-btn');
    const closeBtn = document.querySelector('.close-btn');
    const editForm = document.getElementById('edit-form');
    const editId = document.getElementById('edit-id');
    const newRemark = document.getElementById('new-remark');

    editBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            editId.value = btn.getAttribute('data-id');
            newRemark.value = btn.getAttribute('data-remark');
            modal.style.display = 'block';
        });
    });

    closeBtn.addEventListener('click', () => {
        modal.style.display = 'none';
    });

    window.addEventListener('click', (e) => {
        if (e.target == modal) {
            modal.style.display = 'none';
        }
    });
</script>
{% endblock %}