flask_tpm/templates/strategy_tw.html

{% extends 'base.html' %}
{% if session.tw == 1 %}
    {% set active_page = 'strategy_tw' %}
{% else %}
    {% set active_page = 'strategy' %}
{% endif %}



{% block title %}Strategy Page{% endblock%}
{% block style %}
div.input-group > * {
    border-radius: 0px;
}
div.card{
    border-radius: 2px;
}
.card-header {
    color: #000093;
}
@keyframes cursor {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0.9;
    }
}
{% endblock style %}

{% block content %}
<div class="container-fliud">
    <div class="card p-3">
        <div class="card mb-3" style="border-radius:10px;border:0.5rem outset #eee;">
            <!-- <img src="{{ url_for("static", filename="img/stock.jpeg") }}" class="card-img-top" alt="..."> -->
            <div class="card-body">
                
                <h5 class="card-title text-xl font-bold accordion-header">
                    {% if session.tw == 1 %}台股{% endif %}投資組合建立指南 <i class="bi bi-caret-left-fill" style="animation: cursor 1s 3;"></i></h5>
                <ol class="list-group list-group-flush list-group-numbered" id="collapseExample">
                    <li class="list-group-item"><span class="ps-2">輸入投資組合名稱</span></li>
                    <li class="list-group-item"><span class="ps-2">選擇所參加的課程或競賽</span></li>
                    <li class="list-group-item"><span class="ps-2">選擇資產後按下<span class="badge bg-secondary">加入</span></span></li>
                    <li class="list-group-item"><span class="ps-2">確認資產後按下<span class="badge bg-info">確認資產</span>後, 查看資產價格動態圖表</span></li>
                    <li class="list-group-item"><span class="ps-2">選擇建立策略相關參數</span></li>
                    <li class="list-group-item"><span class="ps-2">確認後按下<span class="badge bg-danger">確認建立</span>後, 查看回傳訊息</span></li>
                </ol>
                   
            </div>
        </div>
        <div class="card" id="buildName">
            <div class="card-header font-bold text-lg">
                投資組合名稱
            </div>
            <div class="card-body">
                <input if="imput1" name="portName" type="text" class="form-control" placeholder="EX. 韓總 No.1" required>
            </div>
            <div class="card-header font-bold text-lg">
                請選擇所參加的課程/競賽
            </div>
            <div class="card-body">
                <select id="competition" class="form-select" size="1">
                    {% include 'competitions.html' %}
                </select>
            </div>
        </div>
        <hr class="my-3">

        
        <div class="card">
            <div class="card-header d-flex">
                <div class="py-2 font-bold text-lg">
                    已選擇的資產
                </div>
                <div class="btn-group ms-auto">
                    <button type="button" class="btn btn-outline-primary btn-sm" id="submit-btn">
                        確認資產
                    </button>
                </div>
                
            </div>
            <div class="card-body d-flex mb-0">
                <input name="assetSelect" class="form-control" list="datalistOptions" id="stockAll" placeholder="輸入資產名稱...">
                <datalist id="datalistOptions">
                    {% if session.tw==0 %}
                        {% for key, data in data_us.items() -%}
                        <option value="{{ key|e }}">{{ key|e }} | {{ data|e }}</option>
                        {% endfor %}
                    {% endif %}
                    {% for key, data in data_tw.items() -%}
                    <option value="{{ key|e }}">{{ key|e }} | {{ data|e }} </option>
                    {% endfor %}
                </datalist>
                <button class="btn btn-secondary btn-sm"
                        type="button"
                        id="addStockBtn">
                    加入
                </button>
            </div>
            <div>
                <ol class="list-group list-group-numbered px-3 pb-3" id="stock-list" type="1">
                    <li class="list-group-item">
                        <span class="px-2">2330.TW</span> 
                        <a class="btn btn-sm btn-danger float-right delete-btn">
                            <i class="fas fa-trash-alt"></i>
                        </a>
                    </li>
                </ol>
            </div>
            <div class="card-header d-flex">
                <div class="py-2 font-bold text-lg">
                    價格動態圖表
                </div>
                
            </div>
            <div class="card-body">
                <div id="graph" style="max-height:60vh">
                    <span>
                        按下
                        <button type="button" class="btn btn-outline-primary btn-sm" disabled>確認資產</button>
                        後，圖表將在此渲染。
                    </span>
                </div>
            </div>
        </div>
        <hr>
        <div class="card mt-3">
            <div class="d-flex p-2">
                <div class="p-2 font-bold text-lg">
                    投組最佳化配置
                </div>
                <div class="btn-group ms-auto">
                    <button type="button" class="btn btn-outline-danger btn-sm" id="submit-port">
                        確認建立
                    </button>
                </div>
                
            </div>
            <div class="input-group"> 
                <span class="input-group-text bg-info">輸入數據時長</span>
                <select id="lookback" 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 id="opt-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 id="role-select" 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="util-gamma" name="targetAnnualVolatility" class="form-control fmt-pct" value="30" autocomplete="off">
                <span class="input-group-text">%</span>
            </div>
        </div>
        
        
        <div class="modal" id="portModal" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title font-bold text-xl">確認建立投資組合</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <span>
                        確認後將會暫時關閉建立按鈕，請等待完成訊息！
                    </span>
                    <div class="input-group mt-3">
                        <span class="input-group-text">輸入筆記</span>
                        <textarea id="commentPort" class="form-control" aria-label="With textarea"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button id="sendPort" type="button" class="btn btn-primary" data-bs-dismiss="modal">確認</button>
                </div>
              </div>
            </div>
        </div>



        <div class="modal" id="confirmModal" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 id='modalTitle' class="modal-title font-bold text-xl">投資組合建立訊息</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <span id="confirmMes">
                        <div id="sucMes">
                            <span>投資組合已開始建立，請1分鐘後至結果分析查詢。</span> 
                        </div>
                    </span>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">確認</button>
                </div>
              </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block script %}
<script src="{{ url_for('static', filename='js/addStock.js') }}"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
{% endblock script %}