239 lines
10 KiB
HTML
239 lines
10 KiB
HTML
<div class="content" id="indicator_panel" style="max-height: 70px;">
|
|
<!-- Indicator Panel Section -->
|
|
|
|
<div id="edit_indcr_panel" style="display: grid; grid-template-columns: 1fr 1fr;">
|
|
<!-- Button for adding a new indicator -->
|
|
<div class="section" style="grid-column: 1;">
|
|
<button class="btn" onclick="UI.indicators.open_form()">New Indicator</button>
|
|
</div>
|
|
<!-- Button for displaying indicator options -->
|
|
<div class="section" style="grid-column: 2;">
|
|
<button class="btn">Indicator Options</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Indicator list display section -->
|
|
<div class="section" style="margin-top: 15px; overflow-x: auto; display: grid; grid-auto-rows: minmax(80px, auto); grid-template-columns: 75px 200px 100px 150px 150px 75px 100px 100px auto; gap: 10px; padding-left: 10px;">
|
|
<div style="background-color: #F7E1C1; grid-column: 1 / span 9; padding: 5px 0; display: grid; grid-template-columns: 75px 200px 100px 150px 150px 75px 100px 100px auto; gap: 10px;">
|
|
<div style="text-align: center;"><h3 class="header-text">Remove or Edit</h3></div>
|
|
<div style="text-align: center;"><h3 class="header-text">Name</h3></div>
|
|
<div style="text-align: center;"><h3 class="header-text">Value</h3></div>
|
|
<div style="text-align: center;"><h3 class="header-text">Type</h3></div>
|
|
<div style="text-align: center;"><h3 class="header-text">Source</h3></div>
|
|
<div style="text-align: center;"><h3 class="header-text">Visible</h3></div>
|
|
<div style="text-align: center;"><h3 class="header-text">Period</h3></div>
|
|
<div style="text-align: center;"><h3 class="header-text">Color</h3></div>
|
|
<div style="text-align: center;"><h3 class="header-text">Properties</h3></div>
|
|
<hr style="grid-column: 1 / span 9; width: 100%; height: 1px; border: 1px solid #ccc; margin: 5px 0;">
|
|
</div>
|
|
|
|
<!-- Loop through each indicator in indicator_list -->
|
|
{% for indicator in indicator_list %}
|
|
<div class="indicator-row" style="display: grid; grid-column: 1 / span 9; align-items: center; grid-template-columns: 75px 200px 100px 150px 150px 75px 100px 100px auto; gap: 10px; padding-left: 10px;">
|
|
|
|
<!-- Edit and Remove buttons -->
|
|
<div style="text-align: center;">
|
|
<button type="button" class="e_btn" onclick="UI.indicators.deleteIndicator('{{indicator}}', event)">✘</button>
|
|
<button type="button" class="e_btn edit" onclick="UI.indicators.updateIndicator(event)">✔</button>
|
|
</div>
|
|
|
|
<!-- Indicator Name -->
|
|
<div style="text-align: center;">{{indicator}}</div>
|
|
|
|
<!-- Fixed property: Value -->
|
|
<div style="text-align: center;">
|
|
<!-- Create a generic value container for JavaScript to populate -->
|
|
<textarea class="ie_value" id="{{indicator}}_value" name="value" readonly style="resize: none; overflow: hidden; height: auto; width: 100%; border: none; background: transparent; text-align: center;">N/A</textarea>
|
|
</div>
|
|
|
|
<!-- Fixed property: Type -->
|
|
<div style="text-align: center;">
|
|
{% if 'type' in indicator_list[indicator] %}
|
|
<span id="{{indicator}}_type">{{indicator_list[indicator]['type']}}</span>
|
|
{% else %}
|
|
<span>-</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Source fields for Symbol, Timeframe, Exchange -->
|
|
<div style="text-align: center;">
|
|
<input list="symbols" class="ietextbox" id="{{indicator}}_source_symbol" name="market" value="{{indicator_list[indicator]['source']['market']}}">
|
|
<datalist id="symbols">
|
|
{% for symbol in symbols %}
|
|
<option value="{{symbol}}"></option>
|
|
{% endfor %}
|
|
</datalist>
|
|
|
|
<input list="timeframes" class="ietextbox" id="{{indicator}}_source_timeframe" name="timeframe" value="{{indicator_list[indicator]['source']['timeframe']}}">
|
|
<datalist id="timeframes">
|
|
{% for timeframe in intervals %}
|
|
<option value="{{timeframe}}"></option>
|
|
{% endfor %}
|
|
</datalist>
|
|
|
|
<input list="exchanges" class="ietextbox" id="{{indicator}}_source_exchange_name" name="exchange" value="{{indicator_list[indicator]['source']['exchange']}}">
|
|
<datalist id="exchanges">
|
|
{% for exchange in exchanges %}
|
|
<option value="{{exchange}}"></option>
|
|
{% endfor %}
|
|
</datalist>
|
|
</div>
|
|
|
|
<!-- Checkbox for Visibility -->
|
|
<div style="text-align: center;">
|
|
{% if 'visible' in indicator_list[indicator] %}
|
|
<input type="checkbox" id="{{indicator}}_visible" value="{{indicator_list[indicator]['visible']}}" name="visible" {% if indicator in checked %} checked {% endif %}>
|
|
{% else %}
|
|
<span>-</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Period field -->
|
|
<div style="text-align: center;">
|
|
{% if 'period' in indicator_list[indicator] %}
|
|
<input class="ietextbox" type="number" id="{{indicator}}_period" value="{{indicator_list[indicator]['period']}}" name="period">
|
|
{% else %}
|
|
<span>-</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Color Picker -->
|
|
<div style="text-align: center;">
|
|
{% if 'color' in indicator_list[indicator] %}
|
|
<input class="ietextbox" type="color" id="{{indicator}}_color"
|
|
value="{{ indicator_list[indicator]['color'] if indicator_list[indicator]['color'] else '#000000' }}"
|
|
name="color">
|
|
{% else %}
|
|
<input class="ietextbox" type="color" id="{{indicator}}_color" value="#000000" name="color">
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Dynamic properties -->
|
|
<div style="grid-column: span 1; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
|
|
{% for property, value in indicator_list[indicator].items() %}
|
|
{% if property not in ['type', 'value', 'color', 'period', 'visible', 'source'] %}
|
|
<div style="margin-bottom: 17px;">
|
|
<label for="{{indicator}}_{{property}}" class="ietextbox-label">{{property}}</label>
|
|
{% if 'color' in property %}
|
|
<input class="ietextbox" type="color" id="{{indicator}}_{{property}}" value="{{value}}" name="{{property}}">
|
|
{% else %}
|
|
<input class="ietextbox" type="text" id="{{indicator}}_{{property}}" value="{{value}}" name="{{property}}">
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Styles -->
|
|
<style>
|
|
/* General shadow styling for all elements except checkboxes */
|
|
.ietextbox, .e_btn, input[type="color"] {
|
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Style for Edit and Remove buttons */
|
|
.e_btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
padding: 8px 12px;
|
|
background-color: #f44336; /* Red for remove */
|
|
color: white;
|
|
border: 1px solid black;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Green background for Edit button */
|
|
.e_btn.edit {
|
|
background-color: #4CAF50;
|
|
}
|
|
|
|
/* Hover effect for buttons */
|
|
.e_btn:hover {
|
|
opacity: 0.9;
|
|
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.e_btn:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Color picker input */
|
|
input[type="color"] {
|
|
border: 1px solid black;
|
|
padding: 5px;
|
|
width: 60px;
|
|
height: 40px;
|
|
border-radius: 17px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Hover effect for color picker */
|
|
input[type="color"]:hover {
|
|
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Styling for input fields and textboxes */
|
|
.ietextbox {
|
|
width: 100%;
|
|
padding: 5px;
|
|
border-radius: 15px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Alternating row colors */
|
|
.indicator-row:nth-child(even) {
|
|
background-color: #E0E0E0;
|
|
}
|
|
|
|
.indicator-row:nth-child(odd) {
|
|
background-color: #F7E1C1;
|
|
}
|
|
|
|
/* Opposite colors for textboxes */
|
|
.indicator-row:nth-child(even) .ietextbox {
|
|
background-color: #F7E1C1;
|
|
}
|
|
|
|
.indicator-row:nth-child(odd) .ietextbox {
|
|
background-color: #E0E0E0;
|
|
}
|
|
input[type="checkbox"] {
|
|
width: 20px; /* Increase the size of the checkbox */
|
|
height: 20px; /* Adjust the height to match */
|
|
cursor: pointer; /* Add a pointer cursor for better UX */
|
|
margin: 0; /* Reset margin */
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- JavaScript -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Handle focus and restore behavior for each dropdown
|
|
document.querySelectorAll('.ietextbox').forEach(function(input) {
|
|
let originalValue = input.value;
|
|
|
|
// Clear the input when focused
|
|
input.addEventListener('focus', function() {
|
|
originalValue = input.value;
|
|
input.value = ''; // Clear the input
|
|
});
|
|
|
|
// Restore the original value if no new selection is made
|
|
input.addEventListener('blur', function() {
|
|
if (!input.value) {
|
|
input.value = originalValue; // Restore the original value if input is empty
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|