398 lines
23 KiB
HTML
398 lines
23 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='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='general.js') }}"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Pop up forms for interface -->
|
|
<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>
|
|
<!-- 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">
|
|
<p>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">
|
|
<button class="new_btn" id="new_signal" onclick="UI.signals.open_signal_Form()">New Signal</button>
|
|
<hr>
|
|
<h3>Signals</h3>
|
|
</div>
|
|
<button class="collapsible bg_blue">Strategies</button>
|
|
<div class="content">
|
|
<button class="new_btn">New Strategy</button>
|
|
<hr>
|
|
<h3>Strategies</h3>
|
|
</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">
|
|
<form action="/trade" method="post">
|
|
<input type="text" id="quantity" name="quantity" placeholder="eg. 0.001" />
|
|
<select id="symbol" name="symbol">
|
|
{% for symbol in symbols %}
|
|
<option>{{ symbol['symbol'] }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<input type="submit" name="buy" value="buy" />
|
|
<input type="submit" name="sell" value="sell" />
|
|
</form>
|
|
</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}}">✘</button>
|
|
<button type="submit" name="submit" style ="color:darkgreen;" class="e_btn" value="{{indicator}}">✔</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['simple_indicators'] %}
|
|
<option value="{{i_type}}" {% if indicator_list[indicator][property] == i_type %} selected="selected"{%endif%}>{{i_type}}</option>
|
|
{% endfor %}
|
|
{% for i_type in indicator_types['other'] %}
|
|
<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['simple_indicators'] %}
|
|
<option value="{{i_type}}">{{i_type}}</option>
|
|
{% endfor %}
|
|
{% for i_type in indicator_types['other'] %}
|
|
<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=''">✘</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()">✙</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> |