optimized gui

This commit is contained in:
David Brazda
2023-09-21 23:24:49 +02:00
parent 2bfd51845f
commit 2887e37ed1
5 changed files with 78 additions and 29 deletions

View File

@ -107,6 +107,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="lowercontainer" id="lowercontainer"></div>
</div> </div>
</div> </div>
<div id="hist-trades" class="flex-items"> <div id="hist-trades" class="flex-items">
@ -623,7 +624,9 @@
<input type="text" id="itemName"><br><br> <input type="text" id="itemName"><br><br>
<label for="jsonTextarea">JSON Data:</label><br> <label for="jsonTextarea">JSON Data:</label><br>
<textarea id="jsonTextarea" rows="15" cols="75"></textarea><br><br> <!-- <textarea id="jsonTextarea" rows="15" cols="75"></textarea><br><br> -->
<div id="json_editor" style="height: 513px;width: 1100px;;border:1px solid black;"></div>
<button type="button" id="saveButton">Save</button> <button type="button" id="saveButton">Save</button>
<button type="button" id="addButton">Add</button> <button type="button" id="addButton">Add</button>

View File

@ -333,6 +333,7 @@ function chart_archived_run(archRecord, data, oneMinuteBars) {
//define tooltip //define tooltip
const container1 = document.getElementById('chart'); const container1 = document.getElementById('chart');
const containerlower = document.getElementById('lowercontainer');
const toolTipWidth = 90; const toolTipWidth = 90;
const toolTipHeight = 90; const toolTipHeight = 90;
@ -352,7 +353,7 @@ function chart_archived_run(archRecord, data, oneMinuteBars) {
initialize_chart() initialize_chart()
container1.append(switcherElement) containerlower.append(switcherElement)
candlestickSeries = null candlestickSeries = null
@ -376,7 +377,7 @@ function chart_archived_run(archRecord, data, oneMinuteBars) {
remove_indicators(); remove_indicators();
btnElement = document.getElementById("indicatorsButtons") btnElement = document.getElementById("indicatorsButtons")
if (btnElement) { if (btnElement) {
container1.removeChild(btnElement); containerlower.removeChild(btnElement);
} }
if (interval == native_resolution) { if (interval == native_resolution) {
@ -390,7 +391,7 @@ function chart_archived_run(archRecord, data, oneMinuteBars) {
//buttonky jako vypnute //buttonky jako vypnute
var indbuttonElement = populate_indicator_buttons(false); var indbuttonElement = populate_indicator_buttons(false);
} }
container1.append(indbuttonElement); containerlower.append(indbuttonElement);
display_buy_markers(); display_buy_markers();

View File

@ -1,3 +1,5 @@
let editor_json
//JS code for FRONTEND CONFIG FORM //JS code for FRONTEND CONFIG FORM
$(document).ready(function () { $(document).ready(function () {
// API Base URL // API Base URL
@ -25,22 +27,24 @@ $(document).ready(function () {
if (((to_select !== null) && (to_select == item.id)) || ((to_select == null) && (index==0))) { if (((to_select !== null) && (to_select == item.id)) || ((to_select == null) && (index==0))) {
selected = "SELECTED" selected = "SELECTED"
$('#itemName').val(item.item_name); $('#itemName').val(item.item_name);
$('#jsonTextarea').val(item.json_data); //$('#jsonTextarea').val(item.json_data);
if (!editor_json) {
require(["vs/editor/editor.main"], () => {
editor_json = monaco.editor.create(document.getElementById('json_editor'), {
value: item.json_data,
language: 'json',
theme: 'vs-dark',
automaticLayout: true
});
});
}
else
{
editor_json.setValue(item.json_data)
}
editingItemId = item.id; editingItemId = item.id;
// Get the textarea element.
var textarea = $("#jsonTextarea");
// // Highlight the JSON formatted string in the textarea.
// hljs.highlightElement(textarea.get(0));
// console.log(textarea.get(0))
// console.log(textarea.get(1))
// // Highlight the JSON formatted string whenever the textarea is edited.
// textarea.on("input", function() {
// hljs.highlightElement(textarea.get(0));
// //hljs.highlightBlock(textarea.get(0),{ language: 'json' });
// });
} }
configList.append(`<option value="${item.id}" ${selected}>${item.item_name}</option>`); configList.append(`<option value="${item.id}" ${selected}>${item.item_name}</option>`);
}); });
@ -54,8 +58,9 @@ $(document).ready(function () {
localArray.forEach((item, index, array) => { localArray.forEach((item, index, array) => {
if (item.id == itemId) { if (item.id == itemId) {
$('#itemName').val(item.item_name); $('#itemName').val(item.item_name);
$('#jsonTextarea').val(item.json_data); //$('#jsonTextarea').val(item.json_data);
editingItemId = itemId; editingItemId = itemId;
editor_json.setValue(item.json_data)
} }
}); });
} }
@ -76,7 +81,8 @@ $(document).ready(function () {
// Save or add a config item // Save or add a config item
$('#saveButton').click(function () { $('#saveButton').click(function () {
const itemName = $('#itemName').val(); const itemName = $('#itemName').val();
const jsonData = $('#jsonTextarea').val(); //const jsonData = $('#jsonTextarea').val();
const jsonData = editor_json.getValue()
var validformat = false var validformat = false
$('#addButton').attr('disabled', false); $('#addButton').attr('disabled', false);
$('#deleteButton').attr('disabled', false); $('#deleteButton').attr('disabled', false);
@ -133,7 +139,8 @@ $(document).ready(function () {
$('#addButton').click(function () { $('#addButton').click(function () {
$('#configList').val(''); $('#configList').val('');
$('#itemName').val(''); $('#itemName').val('');
$('#jsonTextarea').val(''); editor_json.setValue('')
//$('#jsonTextarea').val('');
editingItemId = null; editingItemId = null;
$('#addButton').attr('disabled', true); $('#addButton').attr('disabled', true);
$('#deleteButton').attr('disabled', true); $('#deleteButton').attr('disabled', true);
@ -154,7 +161,8 @@ $(document).ready(function () {
if (editingItemId == null) { if (editingItemId == null) {
$('#configList').val(''); $('#configList').val('');
$('#itemName').val(''); $('#itemName').val('');
$('#jsonTextarea').val(''); editor_json.setValue('')
//$('#jsonTextarea').val('');
} }
else { else {
var confirmed = window.confirm("Confirm?"); var confirmed = window.confirm("Confirm?");

View File

@ -1,8 +1,12 @@
API_KEY = localStorage.getItem("api-key") API_KEY = localStorage.getItem("api-key")
var chart = null var chart = null
var colors = ["#8B1874","#B71375","#B46060","#61c740","#BE6DB7","#898121","#4389d9","#00425A","#B5D5C5","#e61957","#8B1874","#B71375","#B46060","#61c740","#BE6DB7","#898121","#4389d9","#00425A","#B5D5C5","#e61957"] // var colors = ["#8B1874","#B71375","#B46060","#61c740","#BE6DB7","#898121","#4389d9","#00425A","#B5D5C5","#e61957","#8B1874","#B71375","#B46060","#61c740","#BE6DB7","#898121","#4389d9","#00425A","#B5D5C5","#e61957"]
var reset_colors = ["#8B1874","#B71375","#B46060","#61c740","#BE6DB7","#898121","#4389d9","#00425A","#B5D5C5","#e61957","#8B1874","#B71375","#B46060","#61c740","#BE6DB7","#898121","#4389d9","#00425A","#B5D5C5","#e61957"] // var reset_colors = ["#8B1874","#B71375","#B46060","#61c740","#BE6DB7","#898121","#4389d9","#00425A","#B5D5C5","#e61957","#8B1874","#B71375","#B46060","#61c740","#BE6DB7","#898121","#4389d9","#00425A","#B5D5C5","#e61957"]
var colors = ["#8B1874","#B71375","#B46060","#61c740","#BE6DB7","#898121","#4389d9","#00425A","#B5D5C5","#e61957","#7B0E60","#550844","#9B2888","#BD38A0","#A30F68","#6E0B50","#CA2183","#E6319B","#A04C54","#643848","#CA7474","#E68D8D","#4F9C34","#3B7128","#73DF4D","#95EF65","#A857A4","#824690","#D087CC","#E2A1DF","#79711B","#635D17","#99912B","#B1A73D","#3779C9","#2B68B3","#5599ED","#77A9F7","#003A4C","#002F3B","#004C67","#00687D","#A1C6B5","#8CC6A5","#C9E6D5","#E4F6EA","#D2144A","#A60F3B","#FA2463","#FF3775"];
var reset_colors = ["#8B1874","#B71375","#B46060","#61c740","#BE6DB7","#898121","#4389d9","#00425A","#B5D5C5","#e61957","#7B0E60","#550844","#9B2888","#BD38A0","#A30F68","#6E0B50","#CA2183","#E6319B","#A04C54","#643848","#CA7474","#E68D8D","#4F9C34","#3B7128","#73DF4D","#95EF65","#A857A4","#824690","#D087CC","#E2A1DF","#79711B","#635D17","#99912B","#B1A73D","#3779C9","#2B68B3","#5599ED","#77A9F7","#003A4C","#002F3B","#004C67","#00687D","#A1C6B5","#8CC6A5","#C9E6D5","#E4F6EA","#D2144A","#A60F3B","#FA2463","#FF3775"];
var indList = [] var indList = []
var verticalSeries=null var verticalSeries=null
var candlestickSeries = null var candlestickSeries = null

View File

@ -281,8 +281,15 @@ html {
width: 100%; width: 100%;
} }
#lowercontainer {
display: contents;
/* width: 500px; */
}
#indicatorsButtons {
display: contents;
/* width: 500px; */
}
pre { pre {
display: block; display: block;
@ -352,7 +359,7 @@ pre {
/* color: var(--bs-dark-text-emphasis); */ /* color: var(--bs-dark-text-emphasis); */
} }
.switcher { /* .switcher {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 54px; margin-left: 54px;
@ -360,9 +367,19 @@ pre {
height: 30px; height: 30px;
margin-top: 8px; margin-top: 8px;
color: #2196F3; color: #2196F3;
} */
.switcher {
display: flex;
/* align-items: center; */
/* margin-left: 54px; */
/* width: 269px; */
margin-top: 5px;
margin-bottom: 3px;
color: #2196F3;
} }
.switcher-item { /* .switcher-item {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
@ -374,6 +391,22 @@ pre {
border: none; border: none;
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
} */
.switcher-item {
cursor: pointer;
text-decoration: none;
display: inline-block;
padding: 3px 6px;
font-size: 14px;
/* color: #262b3e; */
/* background-color: #818581; */
background-color: #0202022e;;
margin-right: 8px;
margin-bottom: 6px;
border: none;
border-radius: 5px;
outline: none;
} }
.switcher-item:hover { .switcher-item:hover {