flask_tpm/templates/custom.html

{% extends 'base.html' %}
{% set active_page = 'custom' %}


{% block title %}Strategy Page{% endblock%}
{% block content %}
<div class="container-fluid" style="min-height:92%;position:relative;">
    <div class="card my-3">
        <div class="card-header">
            <h1 class="modal-title font-bold text-xl" style="color: #000055;">格式規範與上傳檔案</h1>
        </div>
        <div class="card-body">
            <div class="row justify-content-center">
                <div class="col-lg-5 col-md-5 col-sm-10">
                    <ul class="fa-ul">
                        <li><span class="fa-li"><i class="fa-solid fa-flag"></i></span>上傳之csv檔需包含header，且第一行為時間資訊。</li>
                        <li><span class="fa-li"><i class="fa-solid fa-flag"></i></span>價格資訊需長度相同，且資產數量大於1檔才會進行回測。</li>
                        <li><span class="fa-li"><i class="fa-solid fa-flag"></i></span>範例如下圖所示。</li>
                    </ul>
                    <img src="{{ url_for('static', filename='img/file.jpg') }}" class="img-fluid mb-3" alt="SINGUP IMAGE">
                </div>
                <div class="col-lg-7 col-md-7 col-sm-10">
                    <form method="POST" enctype="multipart/form-data">
                        <div class="p-2 font-bold text-lg">
                            投組最佳化配置
                        </div>
                        <div class="input-group"> 
                            <span class="input-group-text bg-info">輸入數據時長</span>
                            <select name="lookback" class="form-select">
                                <option value="21">1個月</option>
                                <option value="63">3個月</option>
                                <option selected value="126">6個月</option>
                                <option value="252">12個月</option>
                            </select>
                        </div>
                        <div class="input-group"> 
                            <span class="input-group-text bg-info">再平衡頻率</span>
                            <select name="frequency" class="form-select">
                                <option value="21">每月</option>
                                <option value="63">每季</option>
                                <option selected value="126">每半年</option>
                                <option value="252">每年</option>
                            </select>
                        </div>
                        <div class="input-group"> 
                            <span class="input-group-text bg-info">最佳化目標函數</span>
                            <select name="role" class="form-select" onchange="changeFunc(value);">
                                <option selected value="max_sharpe">最大化夏普比率</option>
                                <option value="max_sortino">最大化索提諾比率</option>
                                <option value="min_volatility">最小化波動率</option>
                                <option value="quadratic_utility">最大化效用函數</option>
                            </select>
                        </div>
                        <div class="input-group" style="display: none;" id="gamma"> 
                            <span class="input-group-text bg-info">風險厭惡係數</span>
                            <input type="number" id="gamma" name="gamma" name="targetAnnualVolatility" class="form-control fmt-pct" value="30" autocomplete="off">
                            <span class="input-group-text">%</span>
                        </div>
                        <div class="form-group d-flex mt-3">
                            <input type="file" class="form-control-file" id="csv_file" name="csv_file" accept=".csv" max-file="3" required>
                            <button id="uploadCheck" type="submit" class="btn btn-outline-primary ms-auto">確認上傳</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block script %}
<script>
    function changeFunc(value) {
        console.log(value);
        if (value === 'quadratic_utility') {
            $('#gamma').css("display", "flex");
        } else {
            $('#gamma').css("display", "none");
        }
    }
</script>
<script>
    $("#csv_file").on("change", function () {
     if(this.files[0].size > 1000000) {
       alert("檔案大小請勿超過 1MB !!");
       $(this).val(null);
     }
    });
</script>
{% endblock script %}