backtest/templates/simple_backtest.html

<style>
    @media (max-width: 768px) {
        .table td, .table th {
            padding: .5rem; /* 减小填充 */
            font-size: .875rem; /* 减小字体大小 */
        }
    }

    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .table th, .table td {
        word-wrap: break-word; /* 允许单词内换行 */
    }
</style>

{% extends "base_index.html" %}
{% block content %}
<div class="container-fluid mt-2">
    <h1 class="text-center mb-4">上传CSV文件</h1>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <form action="/simple_backtest" method="post" enctype="multipart/form-data" class="mb-3">
                <div class="input-group mb-3">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="file" id="fileInput"
                               onchange="updateLabel()">
                        <label class="custom-file-label" for="fileInput">选择文件</label>
                    </div>
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="submit">上传</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!--  增大表格展示  -->

    {% if tables %}
    <h3 class="text-center" style="margin-bottom: 3vh">{{ file_name }}分析结果</h3>
    <div class="d-table mx-auto">
        {% for table in tables %}
        <table class="table text-center">
            {{ table|safe }}
        </table>
        {% endfor %}
    </div>
    {% endif %}

</div>

<script>
    // 当文件选择变化时，保存文件名到本地存储
    function updateLabel() {
        var input = document.getElementById('fileInput');
        if (input.files.length > 0) {  // 确保选择了文件
            var label = input.nextElementSibling;
            var fileName = input.files[0].name;
            label.innerHTML = fileName;
            localStorage.setItem('lastUploadedFileName', fileName); // 保存文件名到本地存储
        } else {
            localStorage.removeItem('lastUploadedFileName'); // 如果没有文件被选择，清除存储的文件名
        }
    }

    // 页面加载完成后，检查是否有保存的文件名
    document.addEventListener('DOMContentLoaded', function () {
        var input = document.getElementById('fileInput');
        var label = document.querySelector('.custom-file-label');
        if (input.files.length > 0) {  // 如果实际上有文件被选中
            var fileName = input.files[0].name;
            label.innerHTML = fileName;
        } else {
            label.innerHTML = '选择文件';  // 如果没有文件，显示默认文本
            localStorage.removeItem('lastUploadedFileName'); // 清除本地存储中的文件名
        }
    });

</script>

{% endblock %}