brighter-trading/templates/index.html

476 lines
28 KiB
HTML

<html>
<head>
<!-- Load style sheets and set the title -->
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='brighterStyles.css') }}">
<title>{{ title }}</title>
<!-- Load lightweight charts -->
<script src="{{ url_for('static', filename='lightweight-charts.standalone.production.js') }}"></script>
<!-- The server places initiation data in the HTML. This loads it into the DOM. -->
<script type="text/javascript">
function get_init_data(vars) {return vars}
bt_data = get_init_data({{js_data|tojson}});
</script>
<!-- Load javascript -->
<script src="{{ url_for('static', filename='Alerts.js') }}"></script>
<script src="{{ url_for('static', filename='strategies.js') }}"></script>
<script src="{{ url_for('static', filename='data.js') }}"></script>
<script src="{{ url_for('static', filename='indicators.js') }}"></script>
<script src="{{ url_for('static', filename='charts.js') }}"></script>
<script src="{{ url_for('static', filename='communication.js') }}"></script>
<script src="{{ url_for('static', filename='controls.js') }}"></script>
<script src="{{ url_for('static', filename='signals.js') }}"></script>
<script src="{{ url_for('static', filename='trade.js') }}"></script>
<script src="{{ url_for('static', filename='general.js') }}"></script>
</head>
<body>
<!-- Pop up forms for interface -->
<div class="form-popup" id="new_trade_form">
<form action="/new_trade" class="form-container">
<!-- Panel 1 of 1 (8 rows, 4 columns) -->
<div id="trade_pan_1" class="form_panels" style="display: grid;grid-template-columns:repeat(4,1fr);grid-template-rows: repeat(8,1fr);">
<!-- Panel title (row 1/8)-->
<h1 style="grid-column: 1 / span 2; grid-row: 1;">Create New Trade</h1>
<!-- Target input field (row 2/8)-->
<div id = "trade_target_div" style="grid-column: 1 / span 2; grid-row:2;">
<label for='trade_target' >Trade target:</label>
<select name="trade_target" id="trade_target" style="grid-column: 2; grid-row: 2;" >
<option>backtester</option>
<option>exchange</option>
</select>
</div>
<!-- Side Input field (row 3/8)-->
<label for="side" style="grid-column: 1; grid-row: 3;"><b>Side:</b></label>
<select name="side" id="side" style="grid-column: 2; grid-row: 3;" >
<option>buy</option>
<option>sell</option>
</select>
<!-- orderType Input field (row 4/8)-->
<label for="orderType" style="grid-column: 1; grid-row: 4;"><b>Order type:</b></label>
<select name="orderType" id="orderType" style="grid-column: 2; grid-row: 4;" >
<option>MARKET</option>
<option>LIMIT</option>
</select>
<!-- Price Input field (row 5/8)-->
<label id="price-label" for="price" style="grid-column: 1; grid-row: 5;"><b>Price:</b></label>
<input type="number" min="0" value="0.1" step="0.1" name="price" id="price" style="grid-column: 2; grid-row: 5;" >
<output name="current_price" id="current_price" style="grid-column: 2; grid-row: 5;" >
</output>
<!-- quantity Input field (row 6/8)-->
<label for="quantity" style="grid-column: 1; grid-row: 6;"><b>Quantity:</b></label>
<input type="number" min="0" value="0" step="0.01" name="quantity" id="quantity" style="grid-column: 2; grid-row: 6;" >
</input>
<!-- Value field (row 7/8)-->
<label for="trade_value" style="grid-column: 1; grid-row: 7;"><b>Value</b></label>
<output name="trade_value" id="trade_value" for="quantity price" style="grid-column: 2; grid-row: 7;"></output>
<!-- buttons (row 8/8)-->
<div style="grid-column: 1 / span 4; grid-row: 8;">
<button type="button" class="btn cancel" onclick="UI.trade.close_tradeForm()">Close</button>
<button type="button" class="btn next" onclick="UI.trade.submitNewTrade()">Create Trade</button>
</div>
</div><!----End panel 1--------->
</form>
</div>
<div class="form-popup" id="new_strat_form">
<form action="/new_strategy" class="form-container">
<!-- Panel 1 of 1 (5 rows, 2 columns) -->
<div id="strat_pan_1" class="form_panels" style="grid-template-columns:repeat(2,1fr);grid-template-rows: repeat(5,1fr);">
<!-- Panel title (row 1/5)-->
<h1 style="grid-column: 1 / span 2; grid-row: 1;">Create New Strategy</h1>
<!-- Name Input field (row 2/5)-->
<div id = "strat_name_div" style="grid-column: 1 / span 2; grid_row:2;">
<label for='stg_name' >Strategy Name:</label>
<input type="text" id="stg_name" name="strat_name" />
</div>
<!-- Source Input field (row 3/5)-->
<label for="strat_type" style="grid-column: 1; grid-row: 3;"><b>Strategy type</b></label>
<select name="strat_type" id="strat_type" style="grid-column: 2; grid-row: 3;" onchange= "UI.strats.fill_field('strat_opt', this.value)">
<option>in-out</option>
<option>incremental_profits</option>
<option>swing</option>
</select>
<div id="strat_opt"></div>
<div style="grid-column: 1 / span 2; grid-row: 5;">
<button type="button" class="btn cancel" onclick="UI.strats.close_form()">Close</button>
<button type="button" class="btn next" onclick="UI.strats.submit()">Create Strategy</button>
</div>
</div><!----End panel 1--------->
</form>
</div>
<div class="form-popup" id="new_sig_form">
<form action="/new_signal" class="form-container">
<!-- Panel 1 of 3 (5 rows, 2 columns) -->
<div id="panel_1" class="form_panels" style="grid-template-columns:repeat(2,1fr);grid-template-rows: repeat(5,1fr);">
<!-- Panel title (row 1/5)-->
<h1 style="grid-column: 1 / span 2; grid-row: 1;">Add New Signal</h1>
<!-- Name Input field (row 2/5)-->
<div id = "SigName_div" style="grid-column: 1 / span 2; grid_row:2;">
<label for='signal_name' >Signal Name:</label>
<input type="text" id="signal_name" name="signal_name" />
</div>
<!-- Source Input field (row 3/5)-->
<label for="sig_source" style="grid-column: 1; grid-row: 3;"><b>Signal source</b></label>
<select name="sig_source" id="sig_source" style="grid-column: 2; grid-row: 3;" onchange= "UI.signals.fill_prop('sig_prop', this.value)">
<!-- Jinja2 loop through and populate the options -->
<!-- Uses namespace to set a var in global scope, so we can pass info to javascript later. -->
{% set ns = namespace(optonVal=0) %}
{% for each in indicator_list %}
<option>{{each}}</option>
{% if loop.index0 == 0 %}
{% set ns.optonVal = each %}
{% endif %}
{% endfor %}
</select>
<!-- Property Input field (row 4/5)-->
<label style="grid-column: 1; grid-row: 4;" for="sig_prop"><b>Property</b></label>
<select style="grid-column: 2; grid-row: 4;" id="sig_prop" name="sig_prop" >
</select>
<script>UI.signals.fill_prop('sig_prop', '{{ns.optonVal}}')</script>
<!-- Input controls (row 5/5)-->
<div style="grid-column: 1 / span 2; grid-row: 5;">
<button type="button" class="btn cancel" onclick="UI.signals.close_signal_Form()">Close</button>
<button type="button" class="btn next" onclick="UI.signals.ns_next(1)">Next</button>
</div>
</div><!----End panel 1--------->
<!-- Panel 2 of 3 (6 rows, 2 columns) -->
<div id="panel_2" class="form_panels" style="grid-template-columns:repeat(2,1fr);grid-template-rows: 1fr 35px 35px repeat(3,1fr);">
<!-- Panel title(Signal_type) (row 1/6)-->
<h1 style="grid-column: 1 / span 2; grid-row: 1;">Signal Type</h1>
<!-- Type Input field (row 2/6) -->
<div id = "Signal_type" style="grid-column: 1 / span 2; grid_row:2;">
<label for="signal_type"><b>Signal Type:</b></label>
<select name="signal_type" id="select_s_type" onchange="UI.signals.hideIfTrue(this.value,'Value','subpanel_1');UI.signals.hideIfTrue(this.value,'Comparison','subpanel_2');">
<option>Value</option>
<option>Comparison</option>
</select>
</div>
<!-- display signal (row 3/6) -->
<span id="sig_display" style="grid-column: 1 / span 2; grid_row: 3;">name:{property}(operator)name:{property}</span>
<!-- Operator field (row 4/6) -->
<div id="sig_operator" style="grid-column: 1 / span 2; grid_row: 4;">
<input type = "radio" id="gt" name="Operator" value=">">
<label for = "gt">Greater than</label>
<input type="radio" id="lt" name="Operator" value="<">
<label for = "lt">lessthan</label><br>
<input type = "radio" id="eq" name="Operator" value="==" checked="checked">
<label for = "eq">Equals</label>
<input type="radio" id="within" name="Operator" value="+/-">
<label for = "within">Within range</label>
<input type="range" id="rangeSlider" min="0" max="1000" value="100" onchange="document.getElementById('rangeVal').value=this.value;">
<input type="text" id="rangeVal" value="100" onchange="document.getElementById('rangeSlider').value=this.value;"/>
</div>
<!-- Compare sub-panel (row 5,6) -->
<div id="subpanel_2" style="grid-column: 1 / span 2; grid_row: 5 / span 3;">
<label for="value">Value:</label>
<input id="value" name="value" type="number" value="100"/>
</div>
<div id="subpanel_1" style="grid-column: 1 / span 2; grid_row: 5 / span 3;">
<!-- Source Input field -->
<label for="sig2_source" ><b>Signal source</b></label>
<select name="sig2_source" id="sig2_source" onchange= "UI.signals.fill_prop('sig2_prop', this.value)">
<!-- Jinja2 loop through and populate the options -->
<!-- Uses namespace to set a var in global scope, so we can pass info to javascript later. -->
{% set ns = namespace(optonVal=0) %}
{% for each in indicator_list %}
<option>{{each}}</option>
{% if loop.index0 == 0 %}
{% set ns.optonVal = each %}
{% endif %}
{% endfor %}
</select><br>
<!-- Property Input field -->
<label for="sig2_prop"><b>Property</b></label>
<select id="sig2_prop" name="sig2_prop" >
</select>
<script>UI.signals.fill_prop('sig2_prop', '{{ns.optonVal}}')</script>
</div>
<!-- Input controls (row 6/6) -->
<div class="padDiv" style="grid-column: 1/3; grid-row: 6;">
<button type="button" class="btn" onclick="UI.signals.switch_panel('panel_2','panel_1')">Back</button>
<button type="button" class="btn submit" onclick="UI.signals.ns_next(2)">Next</button>
</div>
</div><!----End panel 2--------->
<!-- Panel 3 of 3 (6 rows, 2 columns) -->
<div id="panel_3" class="form_panels" style="grid-template-columns:repeat(2,1fr);grid-template-rows: 1fr 35px 35px repeat(3,1fr);">
<!-- Panel title(Create Signal) (row 1/6)-->
<h1 style="grid-column: 1 / span 2; grid-row: 1;">Create Signal</h1>
<!-- display signal (row 2/6) -->
<span id="sig_display2" style="grid-column: 1 / span 2; grid_row: 2;"></span>
<!-- display current Values (row 3/6) -->
<span style="grid-column: 1 / span 2; grid_row: 3;">Current values</span>
<!-- display realtime values (row 4/6) -->
<span id="sig_realtime" style="grid-column: 1 / span 2; grid_row: 4;"></span>
<!-- display current evaluation (row 4/6) -->
<span style="grid-column: 1; grid_row: 4;">Currently evaluates to :</span>
<span id="sig_eval" style="grid-column: 2; grid_row: 4;"></span>
<!-- Input controls (row 6/6) -->
<div class="padDiv" style="grid-column: 1/3; grid-row: 6;">
<button type="button" class="btn" onclick="UI.signals.switch_panel('panel_3','panel_2')">Back</button>
<button type="button" class="btn submit" onclick="UI.signals.submitNewSignal()">Next</button>
</div>
</div><!----End panel 3--------->
</form>
</div>
<!-- End pop up -->
<!-- Hidden Div elements containing markup for popup context menus.-->
<div id='indicators' onmouseleave="document.getElementById('indicators').style.display = 'none' ">
<form action="/settings" method="post">
<input type="hidden" name="setting" value="toggle_indicator"/>
{% for indicator in indicator_list %}
<input type="checkbox" id="{{ indicator }}" name="{{ indicator }}" value="indicator"{% if indicator in checked %} checked{%endif%}>
<label for = "{{ indicator }}">{{ indicator }}</label><br>
{% endfor %}
<input type="submit" value="Submit Changes">
</form>
</div>
<!-- Container for the whole user interface -->
<div id="master_panel" class="master_panel">
<!-- Chart Header -->
<div id="app_header" name="app_header">
<H1 id="app_title">{{ title }}</H1>
</div><!-- end Chart Header -->
<!-- Container for the javascript chart -->
<div id="chart">
<div class="a1" >
<!-- Chart specific controls -->
<div id="chart_controls">
<!-- Container target for any indicator output -->
<div id="indicator_output" ></div>
<!-- Trading pair selector -->
<form id="tp_selector" action="/settings" method="post">
<input type="hidden" name="setting" value="trading_pair" />
<label for="symbols" >Trading Pair</label>
<input list="symbols" name="symbol" id="symbol" style="width: 96px;">
<datalist id="symbols">
{% for symbol in symbols %}
<option>{{ symbol['symbol'] }}</option>
{% endfor %}
</datalist>
</form>
<!-- Time interval selector -->
<form action="/settings" method="post">
<input type="hidden" name="setting" value="interval" />
<select id="timeframe" name="timeframe" selected="{{interval_state}}" onchange="this.form.submit()">
{% for time_frame in intervals %}
<option {% if time_frame == interval_state %} selected="selected" {%endif%}>{{ time_frame }}</option>
{% endfor %}
</select>
</form>
<!-- Toggle On/Off indicators-->
<button id="enable_indicators" type="button" onclick="UI.controls.showAtPos(event,'indicators')">Indicators</button>
</div>
</div>
</div>
<!-- Indicator charts -->
<div id="chart2"></div>
<div id="chart3"></div>
<!-- Right Panel -->
<div id="right_panel">
<button class="collapsible bg_red" id="alerts_btn">Alerts</button>
<div class="content" id="alerts_content">
<p id="alert_list">No Alerts</p>
</div>
<button class="collapsible bg_blue">Exchange Info</button>
<div id="bal_content" class="content">
<div>
<h3>Status</h3>
<span id="exc_status">Not connected</span>
</div>
<div>
<h3>Balances</h3>
<div id="balances">
<div id="balances_tbl">
<table style="width:25%;">
{% for balance in my_balances %}
<tr><td>Asset</td><td>Balance</td><td>Profit&Loss</td></tr>
<tr>
<td>
{{ balance['asset'] }}
</td>
<td>
{{ balance['crossWalletBalance'] }}
</td>
<td>
{{ balance['crossUnPnl'] }}
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
<div>
<h3>Active Tades</h3>
<span>None</span>
</div>
<div>
<h3>Open orders</h3>
<span>None</span>
</div>
</div>
<button class="collapsible bg_blue">Signals</button>
<div class="content" id="signal_content">
<button class="new_btn" id="new_signal" onclick="UI.signals.open_signal_Form()">New Signal</button>
<hr>
<h3>Signals</h3>
<div><ul id="signal_list"></ul></div>
</div>
<button class="collapsible bg_blue">Strategies</button>
<div class="content" id="strats_content">
<button class="new_btn" id="new_strats_btn" onclick="UI.strats.open_stg_form()">New Strategy</button>
<hr>
<h3>Strategies</h3>
<div><ul id="strats_display"></ul></div>
</div>
<button class="collapsible bg_blue">Statistics</button>
<div class="content">
<h3>Statistics</h3>
</div>
<button class="collapsible bg_blue">Backtesting</button>
<div class="content">
<h3>Back Testing</h3>
</div>
<button class="collapsible bg_blue">Trade</button>
<div class="content">
<div id="trade_content" class="cp_content">
<button class="new_btn" id="new_trade" onclick="UI.trade.open_tradeForm()">New Trade</button>
</div>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</div> <!-- End RightPanel -->
<!-- Edit Indicator Panel -->
<div id="edit_indcr_panel">
<!-- Edit Indicator Heading -->
<div id="edit_indcr_head">
<div id="h_name">Indicator Name</div>
<div id="h_properties">Properties</div>
</div>
<hr>
<!-- Edit Indicator Rows of individual forms to edit each indicator --!>
{% for indicator in indicator_list %}
<form action="/settings" method="post" >
<input type="hidden" name="setting" value="edit_indicator"/>
<div class="ierow">
<div id="edit_indctr_controls">
<button type="submit" name="delete" class="e_btn" value="{{indicator}}">&#10008;</button>
<button type="submit" name="submit" style ="color:darkgreen;" class="e_btn" value="{{indicator}}">&#x2714;</button>
</div>
<div class="iename">{{indicator}}</div>
<div id="ieprop_container">
{% for property in indicator_list[indicator] %}
{% set list1 = property.split('_') %}
<div class="ieprop" >
<label class="ietextbox" for="{{indicator}}_{{property}}">{{property}}</label>
{% if property=='type' %}
<select class="ietextbox" id="{{indicator}}_{{property}}" name="{{property}}">
{% for i_type in indicator_types %}
<option value="{{i_type}}" {% if indicator_list[indicator][property] == i_type %} selected="selected"{%endif%}>{{i_type}}</option>
{% endfor %}
</select>
{% elif property=='ma' %}
<select class="ietextbox" id="{{indicator}}_{{property}}" name="{{property}}">
{% for ma_val in ma_vals %}
<option value="{{ma_vals[ma_val]}}" {% if indicator_list[indicator][property] == ma_vals[ma_val] %} selected="selected"{%endif%}>{{ma_val}}</option>
{% endfor %}
</select>
{% elif property=='color' or list1[0]=='color' %}
<input class="ietextbox" type="color" id="{{indicator}}_{{property}}"
value="{{indicator_list[indicator][property]}}"
name="{{property}}">
{% elif property=='period' %}
<input class="ietextbox" type="number" id="{{indicator}}_{{property}}"
value="{{indicator_list[indicator][property]}}"
name="{{property}}">
{% elif property=='visible' %}
<input class="ietextbox" type="checkbox" id="{{indicator}}_{{property}}"
value="{{indicator_list[indicator][property]}}"
name="{{property}}"
{% if indicator in checked %} checked{%endif%}>
{% elif property=='value' %}
<input class="ie_value" type="number" id="{{indicator}}_{{property}}"
value="{{indicator_list[indicator][property]}}"
name="{{property}}" readonly>
{% else %}
<input class="ietextbox" type="text" id="{{indicator}}_{{property}}"
value="{{indicator_list[indicator][property]}}"
name="{{property}}">
{%endif%}
</div><!-- end row of properties --!>
{% endfor %}
</div><!-- end row of property container --!>
</div><!-- end of row container --!>
</form>
{% endfor %}
<!-- End of Rows of individual forms to edit each indicator --!>
<form action="/settings" method="post" id="new_i_form">
<input type="hidden" name="setting" value="new_indicator"/>
<hr>
<!-- Create indicator div container --!>
<div id="create_indcr_container">
<h1>Add Indicator</h1>
<label for "newi_name">Indicator Name</label><input type ="text" name="newi_name" value="New Indicator">
<label for "newi_type">Type</label>
<select id="newi_type" name="newi_type">
{% for i_type in indicator_types %}
<option value="{{i_type}}">{{i_type}}</option>
{% endfor %}
</select>
<br><br>
<span>Properties: <span id="new_prop_list"></span></span>
<button name="add_prop_clear" id="add_prop_clear" style="color:darkred;" type="button" value="add_prop_clear" onclick="document.getElementById('new_prop_list').innerHTML=''">&#10008;</button>
<br><br>
<div id="add_prop_container" name="add_prop_container">
<label for "new_prop_name">Property Name</label>
<input type="text" id="new_prop_name" name="new_prop_name" value="name">
<br>
<label for "new_prop_value">Property Value</label>
<input type="text" id="new_prop_value" name="new_prop_value" value="value">
<button name="add_prop" id="add_prop" type="button" value="add_prop" style="color:darkgreen;" onclick="UI.indicators.add_to_list()">&#10009;</button>
<label for "add_prop">Add Property</label>
</div>
<br>
<button type="button" onclick="UI.indicators.submit_new_i()" name="create_indicator" id="create_indicator" >Create New Indicator</button>
<input type="hidden" id="new_prop_obj" name="new_prop_obj" value="">
</div> <!-- End of Create indicator div container --!>
</form>
</div><!-- End of Edit Indicator Panel -->
</div><!-- End Master Panel --->
</body>
</html>