SeanChenTaipei 2 years ago
parent dfed112429
commit 28d4c2726f
  1. 28
      main.py
  2. 1044
      static/img/Strategy Page.html
  3. 9
      static/img/Strategy Page_files/all.min.css
  4. 2018
      static/img/Strategy Page_files/bootstrap-icons.css
  5. 7
      static/img/Strategy Page_files/bootstrap.bundle.min.js
  6. 6
      static/img/Strategy Page_files/bootstrap.min.css
  7. 4
      static/img/Strategy Page_files/font-awesome.min.css
  8. 10881
      static/img/Strategy Page_files/jquery-3.6.0.js
  9. 1
      static/img/Strategy Page_files/tailwind.min.css
  10. 24
      static/js/addStock.js
  11. 14
      templates/base.html
  12. 4
      templates/login.html
  13. 111
      templates/strategy_tw.html

@ -243,19 +243,21 @@ def submit_stock_list():
conn.close() conn.close()
fig = port.plot(title='資產價格走勢', labels=dict(index="Date", value="Price", variable="Assets")) fig = port.plot(title='資產價格走勢', labels=dict(index="Date", value="Price", variable="Assets"))
fig['layout'] = dict( fig['layout'] = {}
autosize=True, # dict(
legend={'title': {'text': '資產價格走勢'}, 'tracegroupgap': 0}, # autosize=True,
title= {'text': 'Assets in portfolio'}, # legend={'title': {'text': ''}, 'tracegroupgap': 0},
xaxis= {'anchor': 'y', 'domain': [0.0, 1.0], 'title': {'text': '日期'}}, # title= {'text': 'Assets'},
yaxis= {'anchor': 'x', 'domain': [0.0, 1.0], 'title': {'text': '價格'}} # xaxis= {'anchor': 'y', 'domain': [0.0, 1.0], 'title': {'text': 'Date'}, 'rangeslider':{'visible':True}},
) # yaxis= {'anchor': 'x', 'domain': [0.0, 1.0], 'title': {'text': 'Price'}}
fig.update_layout(legend=dict( # )
yanchor="top", # fig.update_layout(
y=0.99, # legend=dict(yanchor="top",
xanchor="left", # y=0.99,
x=0.01 # xanchor="left",
)) # x=0.01),
# margin=dict(l=20, r=5, t=40, b=40),
# paper_bgcolor="LightSteelBlue")
print(type(stock_list)) print(type(stock_list))

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -1,5 +1,12 @@
// Initialize empty stock list // Initialize empty stock list
let stockList = ['2330.TW']; let stockList = ['2330.TW'];
let currentList = [];
const layout={'autosize': true, 'legend': {'title': {'text': ''},
'tracegroupgap': 0}, 'title': {'text': 'Assets'}, 'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0],
'title': {'text': 'Date'}, 'rangeslider': {'visible': true}},
'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title': {'text': 'Price'}},
'legend': {'yanchor': 'top', 'y': 1.3, 'xanchor': 'left', 'x': 0.01}, 'margin': {'l': 40, 'r': 40, 't': 40, 'b': 40},
}
// Cache frequently-used DOM elements // Cache frequently-used DOM elements
const $stockForm = $('#stock-form'); const $stockForm = $('#stock-form');
// const $stockSelect = $('#stock-select'); // const $stockSelect = $('#stock-select');
@ -58,7 +65,6 @@ $addStockBtn.click(function(event) {
var text = $('input[name=assetSelect]').val(); var text = $('input[name=assetSelect]').val();
// const selectedStock = text; // const selectedStock = text;
// var text = $('#stock-select option:selected').text(); // var text = $('#stock-select option:selected').text();
console.log(text) console.log(text)
if (text != null && text!= '' && stockList.indexOf(text)===-1) { if (text != null && text!= '' && stockList.indexOf(text)===-1) {
// Add new item to list // Add new item to list
@ -125,9 +131,15 @@ $submitBtn.click(function(event) {
// console.log(event.target) // console.log(event.target)
// console.log(stockList) // console.log(stockList)
// console.log(cacheList.value, stockList); // console.log(cacheList.value, stockList);
if (stockList.length > 0) { var texts = [];
$('#stock-list span').each(function(){
texts.push($(this).text());
});
// alert(currentList.includes(texts));
if (stockList.length > 0 && JSON.stringify(currentList)!==JSON.stringify(stockList)) {
// cacheList = stockList; // cacheList = stockList;
$('#graph').html('<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>') $('#graph').html('<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>')
$.ajax({ $.ajax({
url: '/postStock', //todo create_strategy url: '/postStock', //todo create_strategy
method: 'POST', method: 'POST',
@ -135,10 +147,12 @@ $submitBtn.click(function(event) {
success: function(response) { success: function(response) {
$('#graph').html('') $('#graph').html('')
var graphs = JSON.parse(response); var graphs = JSON.parse(response);
console.log(graphs.data);
Plotly.newPlot("graph", Plotly.newPlot("graph",
graphs.data, graphs.layout, {responsive: true}); graphs.data, layout, {responsive: true});
console.log(response.layout); // console.log(response.layout);
currentList = stockList.map(obj => obj);
}, },
error: function(xhr) { error: function(xhr) {
$('#graph').html('<div><span class="badge bg-warning">錯誤</span></div>') $('#graph').html('<div><span class="badge bg-warning">錯誤</span></div>')

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="zh-Hant-TW">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -57,10 +57,10 @@
{% set navigation_bar = [ {% set navigation_bar = [
('/', 'index', '首頁', 'bi bi-house-fill'), ('/', 'index', '首頁', 'bi bi-house-fill'),
('/strategy', 'strategy', '建立策略', 'bi bi-piggy-bank-fill'), ('/strategy', 'strategy', '建立策略', 'fa-solid fa-chart-pie'),
('/strategy_tw', 'strategy_tw', '台股建立策略', 'bi bi-piggy-bank-fill'), ('/strategy_tw', 'strategy_tw', '台股建立策略', 'fa-solid fa-chart-pie'),
('/custom', 'custom', '自訂數據建立策略', 'bi bi-database-fill-add'), ('/custom', 'custom', '自訂數據建立策略', 'bi bi-database-fill-add'),
('/result', 'result', '分析結果排行', 'bi bi-graph-up-arrow'), ('/result', 'result', '分析結果排行', 'fa-solid fa-chart-simple'),
('mailto:r10246002@ntu.edu.tw', 'error', '錯誤回報', 'bi bi-bug-fill') ('mailto:r10246002@ntu.edu.tw', 'error', '錯誤回報', 'bi bi-bug-fill')
] -%} ] -%}
{% set active_page = active_page|default('index') -%} {% set active_page = active_page|default('index') -%}
@ -95,8 +95,14 @@
</ul> </ul>
</li> </li>
{% endif %} {% endif %}
<li>
</li>
</ul> </ul>
</div> </div>
<button <button
class="navbar-toggler" class="navbar-toggler"
type="button" type="button"

@ -18,11 +18,11 @@
<div class="container-fluid py-4"> <div class="container-fluid py-4">
<div class="row d-flex justify-content-center align-items-center h-100"> <div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-11"> <div class="col-lg-12 col-xl-11">
<div class="card text-black" style="border-radius: 25px;"> <div class="card text-black mt-3" style="border-radius: 25px;">
<div class="card-body p-md-5" style="border-radius: 25px;"> <div class="card-body p-md-5" style="border-radius: 25px;">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-10 col-lg-6 col-xl-5 order-1 order-lg-1"> <div class="col-md-10 col-lg-6 col-xl-5 order-1 order-lg-1">
<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-2 mt-4">登入</p> <p class="text-center h1 fw-bold mb-2">登入</p>
<form method="post"> <form method="post">
{% with messages = get_flashed_messages(with_categories=true) %} {% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %} {% if messages %}

@ -9,47 +9,50 @@
{% block title %}Strategy Page{% endblock%} {% block title %}Strategy Page{% endblock%}
{% block style %} {% block style %}
<!-- .input-group > input {
border: 2px solid #8E8E8E;
border-radius: 7px;
}
.input-group-lg > input {
border: 2px solid #8E8E8E;
border-radius: 7px;
}
.input-group-lg > select {
border: 2px solid #8E8E8E;
border-radius: 7px;
} -->
<!-- .input-group > span{
bg-dark;
font-bold;
} -->
div.input-group > * { div.input-group > * {
border-radius: 0px; border-radius: 0px;
} }
div.card{ div.card{
border-radius: 2px; border-radius: 2px;
} }
@keyframes cursor {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0.9;
}
}
{% endblock style %} {% endblock style %}
{% block content %} {% block content %}
<div class="container-md"> <div class="container-lg">
<div class="container-md m-1"> <div class="container-lg m-1">
<div class="card mb-3 p-4"> <div class="card m-4 p-4">
<div class="card mb-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="..."> --> <!-- <img src="{{ url_for("static", filename="img/stock.jpeg") }}" class="card-img-top" alt="..."> -->
<div class="card-body"> <div class="card-body">
<h5 class="card-title text-xl font-bold">{% if session.tw == 1 %}台股{% endif %}投資組合建立指南 <i class="bi bi-arrow-down-right-circle-fill"></i></h5>
<ol class="list-group list-group-flush list-group-numbered"> <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></li> <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 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></li>
<li class="list-group-item"><span class="ps-2">確認後按下<span class="badge bg-danger">確認建立</span>, 後查看回傳訊息</span></li> <li class="list-group-item"><span class="ps-2">確認後按下<span class="badge bg-danger">確認建立</span>, 查看回傳訊息</span></li>
</ol> </ol>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -73,31 +76,14 @@ div.card{
</div> </div>
<hr class="my-3"> <hr class="my-3">
<div class="card">
<div class="card-header ">
<div class="py-2 font-bold text-lg">
價格動態圖表
</div>
</div>
<div class="card-body">
<div id="graph">
<span>
按下
<button type="button" class="btn btn-outline-primary btn-sm" disabled>確認資產</button>
後,圖表將在此渲染。
</span>
</div>
</div>
</div>
<div class="card"> <div class="card">
<div class="card-header d-flex"> <div class="card-header d-flex">
<div class="py-2 font-bold text-lg-center"> <div class="py-2 font-bold text-lg-center">
已選擇的資產 已選擇的資產
</div> </div>
<div class="btn-group ms-auto"> <div class="btn-group ms-auto">
<button type="button" class="btn btn-outline-primary btn-sm" id="submit-btn">
確認資產
</button>
<button type="button" class="btn btn-outline-danger btn-sm" id="submit-port"> <button type="button" class="btn btn-outline-danger btn-sm" id="submit-port">
確認建立 確認建立
</button> </button>
@ -106,6 +92,7 @@ div.card{
<div class="card-body d-flex mb-0"> <div class="card-body d-flex mb-0">
<input name="assetSelect" class="form-control" list="datalistOptions" id="stockAll" placeholder="輸入資產名稱..."> <input name="assetSelect" class="form-control" list="datalistOptions" id="stockAll" placeholder="輸入資產名稱...">
<datalist id="datalistOptions"> <datalist id="datalistOptions">
<span>美股</span>
{% if session.tw==0 %} {% if session.tw==0 %}
{% for key, data in data_us.items() -%} {% for key, data in data_us.items() -%}
<option value="{{ key|e }}">{{ key|e }} | {{ data|e }}</option> <option value="{{ key|e }}">{{ key|e }} | {{ data|e }}</option>
@ -115,24 +102,44 @@ div.card{
<option value="{{ key|e }}">{{ key|e }} | {{ data|e }} </option> <option value="{{ key|e }}">{{ key|e }} | {{ data|e }} </option>
{% endfor %} {% endfor %}
</datalist> </datalist>
<button class="btn btn-secondary" <button class="btn btn-secondary btn-sm"
type="button btn-lg" type="button"
id="addStockBtn"> id="addStockBtn">
加入 加入
</button> </button>
</div> </div>
<hr class="mb-3">
<div> <div>
<ol class="list-group list-group-numbered px-3 pb-3" id="stock-list" type="1"> <ol class="list-group list-group-numbered px-3 pb-3" id="stock-list" type="1">
<li class="list-group-item"> <li class="list-group-item">
<span class="px-2">2330.TW | 台積電</span> <span class="px-2">2330.TW</span>
<a class="btn btn-sm btn-danger float-right delete-btn"> <a class="btn btn-sm btn-danger float-right delete-btn">
<i class="fas fa-trash-alt"></i> <i class="fas fa-trash-alt"></i>
</a> </a>
</li> </li>
</ol> </ol>
</div> </div>
</div>
<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">
<div id="graph">
<span>
按下
<button type="button" class="btn btn-outline-primary btn-sm" disabled>確認資產</button>
後,圖表將在此渲染。
</span>
</div>
</div>
</div>
<hr> <hr>
<div> <div>
<div class="d-flex p-2 mt-2 font-bold text-lg">策略參數選擇</div> <div class="d-flex p-2 mt-2 font-bold text-lg">策略參數選擇</div>
@ -155,7 +162,6 @@ div.card{
</select> </select>
</div> </div>
</div> </div>
</div>
<div class="modal" id="portModal" tabindex="-1"> <div class="modal" id="portModal" tabindex="-1">
@ -169,7 +175,7 @@ div.card{
<span> <span>
確認後將會暫時關閉建立按鈕,請等待完成訊息! 確認後將會暫時關閉建立按鈕,請等待完成訊息!
</span> </span>
<div class="input-group"> <div class="input-group mt-3">
<span class="input-group-text">輸入筆記</span> <span class="input-group-text">輸入筆記</span>
<textarea id="commentPort" class="form-control" aria-label="With textarea"></textarea> <textarea id="commentPort" class="form-control" aria-label="With textarea"></textarea>
</div> </div>
@ -216,5 +222,6 @@ div.card{
{% block script %} {% block script %}
<script src="{{ url_for('static', filename='js/addStock.js') }}"></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://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
{% endblock script %} {% endblock script %}

Loading…
Cancel
Save