brighter-trading/src/templates/new_strategy_popup.html

133 lines
4.6 KiB
HTML

<!-- Strategy Form Popup -->
<div class="form-popup" id="new_strat_form" style="display: none; overflow: hidden; position: absolute; width: 400px; height: 640px; border-radius: 10px;">
<!-- Draggable Header Section -->
<div id="draggable_header" style="cursor: move; padding: 10px; background-color: #3E3AF2; color: white; border-bottom: 1px solid #ccc;">
<h1 id="form-header-create">Create New Strategy</h1>
<h1 id="form-header-edit" style="display: none;">Edit Strategy</h1>
</div>
<!-- Main Content (Scrollable) -->
<form class="form-container" style="display: grid; grid-template-columns: 1fr; grid-template-rows: auto; overflow-y: auto;">
<!-- Blockly workspace -->
<div id="blocklyDiv" style="grid-column: 1; height: 300px; width: 100%;"></div>
<!-- Name of the strategy -->
<div style="grid-column: 1;">
<label for="name_box" style="display: inline-block; width: 20%;">Name:</label>
<input class="ietextbox" type="text" id="name_box" name="name_box" value="Indicator name" style="width: 75%; display: inline-block;">
</div>
<!-- Public checkbox -->
<div style="grid-column: 1;">
<label for="public_checkbox" style="display: inline-block; width: 20%;">Public:</label>
<input type="checkbox" id="public_checkbox" name="public_checkbox" style="display: inline-block;" onclick="UI.strats.toggleFeeBox()">
</div>
<!-- Fee input field -->
<div style="grid-column: 1;">
<label for="fee_box" style="display: inline-block; width: 20%;">Fee(%):</label>
<input class="ietextbox" type="number" id="fee_box" name="fee_box" placeholder="0.00" step="0.01" min="0" style="width: 65px; display: inline-block;" disabled>
</div>
<!-- Buttons -->
<div style="grid-column: 1; text-align: center;">
<button type="button" class="btn cancel" onclick="UI.strats.close_form()">Close</button>
<!-- Create Button -->
<button id="submit-create" type="button" class="btn next" onclick="UI.strats.submitStrategy('new')">Create Strategy</button>
<!-- Edit Button -->
<button id="submit-edit" type="button" class="btn next" onclick="UI.strats.submitStrategy('edit')" style="display:none;">Edit Strategy</button>
</div>
</form>
<!-- Add the missing resize handle here -->
<div class="resize-handle" id="resize-br"></div>
</div>
<!-- Add CSS to hide scrollbars but allow scrolling and fix the resize handle -->
<style>
/* Hide scrollbars but still allow scrolling */
.form-popup {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.form-popup::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
/* Style the draggable header section */
#draggable_header {
cursor: move;
padding: 10px;
background-color: #3E3AF2;
color: white;
border-bottom: 1px solid #ccc;
position: relative;
z-index: 10;
}
/* Style the form container to be scrollable and take up remaining space */
.form-container {
overflow-y: auto; /* Makes it scrollable */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.form-container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
/* Label and input field styling */
.form_panels label {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.ietextbox {
width: 75%;
display: inline-block;
}
/* Resize handle styling */
.resize-handle {
width: 20px;
height: 20px;
background-color: #000;
position: absolute;
bottom: 0;
right: 0;
cursor: se-resize;
z-index: 10;
border-radius: 3px;
}
</style>
<xml id="toolbox" style="display: none">
<category name="Indicators" colour="230">
<!-- Indicator blocks go here -->
</category>
<category name="Values" colour="230">
<block type="last_candle_value"></block>
<block type="value_input"></block>
</category>
<category name="Logic" colour="210">
<block type="comparison"></block>
<block type="logical_and"></block>
<block type="logical_or"></block>
<block type="is_true"></block>
</category>
<!-- New category for Trading Actions -->
<category name="Trading" colour="230">
<block type="trade_action"></block>
<block type="order_type"></block>
<block type="time_in_force"></block>
<block type="stop_loss"></block>
<block type="take_profit"></block>
</category>
</xml>