135 lines
4.4 KiB
HTML
135 lines
4.4 KiB
HTML
<!-- Backtest Form Popup -->
|
|
<div class="form-popup" id="backtest_form" style="display: none; overflow: hidden; position: absolute; width: 400px; height: 600px; border-radius: 10px;">
|
|
|
|
<!-- Draggable Header Section -->
|
|
<div id="backtest_draggable_header" style="cursor: move; padding: 10px; background-color: #3E3AF2; color: white; border-bottom: 1px solid #ccc;">
|
|
<h1 id="backtest-form-header-create">Create New Backtest</h1>
|
|
<h1 id="backtest-form-header-edit" style="display: none;">Edit Backtest</h1>
|
|
</div>
|
|
|
|
<!-- Main Content (Scrollable) -->
|
|
<form class="form-container" style="overflow-y: auto;">
|
|
<!-- Select Strategy -->
|
|
<div>
|
|
<label for="strategy_select" style="display: inline-block; width: 30%;">Strategy:</label>
|
|
<select id="strategy_select" name="strategy_select" style="width: 65%;"></select>
|
|
</div>
|
|
|
|
<!-- Start Date -->
|
|
<div>
|
|
<label for="start_date" style="display: inline-block; width: 30%;">Start Date/Time:</label>
|
|
<input type="datetime-local" id="start_date" name="start_date" style="width: 65%;" required>
|
|
</div>
|
|
|
|
<!-- Initial Capital -->
|
|
<div>
|
|
<label for="initial_capital" style="display: inline-block; width: 30%;">Initial Capital:</label>
|
|
<input type="number" id="initial_capital" name="initial_capital" style="width: 65%;" required value="10000">
|
|
</div>
|
|
|
|
<!-- Commission -->
|
|
<div>
|
|
<label for="commission" style="display: inline-block; width: 30%;">Commission:</label>
|
|
<input type="number" step="0.0001" id="commission" name="commission" style="width: 65%;" required value="0.001">
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div style="text-align: center;">
|
|
<button type="button" class="btn cancel" onclick="UI.backtesting.closeForm()">Close</button>
|
|
<button id="backtest-submit-create" type="button" class="btn next" onclick="UI.backtesting.submitTest('new')">Run Test</button>
|
|
<button id="backtest-submit-edit" type="button" class="btn next" onclick="UI.backtesting.submitTest('edit')" style="display:none;">Edit Test</button>
|
|
</div>
|
|
|
|
<!-- Status message (Initially Hidden) -->
|
|
<div id="backtest-status-message" style="display: none; margin-top: 10px; color: blue;"></div>
|
|
|
|
<!-- Progress bar (Initially Hidden) -->
|
|
<div id="backtest-progress-container">
|
|
<div id="progress_bar" style="width: 0%; height: 20px; background-color: green; text-align: center; color: white;">
|
|
0%
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results section (Initially Hidden) -->
|
|
<div id="backtest-results" style="display: none; margin-top: 10px;">
|
|
<h4>Test Results</h4>
|
|
<pre id="results_display"></pre>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Resizer -->
|
|
<div id="resize-backtest" class="resize-handle"></div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Styling for backtest popup and container */
|
|
.backtests-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.backtest-item {
|
|
position: relative;
|
|
width: 150px;
|
|
height: 120px;
|
|
text-align: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.backtest-item:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.backtest-name {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: white;
|
|
padding: 5px;
|
|
border-radius: 10px;
|
|
color: black;
|
|
text-align: center;
|
|
width: 100px;
|
|
}
|
|
|
|
.delete-button {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
background-color: red;
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
#backtest-progress-container {
|
|
display: none; /* Initially hidden */
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#backtest-progress-container.show {
|
|
display: block; /* Show when backtest is running */
|
|
}
|
|
#results_display {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#results_display table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
#results_display th, #results_display td {
|
|
border: 1px solid #ccc;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
#results_display th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
</style>
|