321 lines
13 KiB
HTML
321 lines
13 KiB
HTML
<div class="card control-panel mb-3">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-sliders-h"></i>
|
|
Controls
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Symbol Selection -->
|
|
<div class="mb-3">
|
|
<label for="symbol-select" class="form-label">Symbol</label>
|
|
<select class="form-select form-select-sm" id="symbol-select">
|
|
{% for symbol in symbols %}
|
|
<option value="{{ symbol }}" {% if symbol == current_symbol %}selected{% endif %}>{{ symbol }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Timeframe Selection -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Timeframes</label>
|
|
{% for timeframe in timeframes %}
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="tf-{{ timeframe }}" value="{{ timeframe }}" checked>
|
|
<label class="form-check-label" for="tf-{{ timeframe }}">
|
|
{% if timeframe == '1s' %}1 Second
|
|
{% elif timeframe == '1m' %}1 Minute
|
|
{% elif timeframe == '1h' %}1 Hour
|
|
{% elif timeframe == '1d' %}1 Day
|
|
{% elif timeframe == '5m' %}5 Minutes
|
|
{% elif timeframe == '15m' %}15 Minutes
|
|
{% elif timeframe == '4h' %}4 Hours
|
|
{% else %}{{ timeframe }}
|
|
{% endif %}
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Time Navigation -->
|
|
<div class="mb-3">
|
|
<label for="date-picker" class="form-label">Navigate to Date</label>
|
|
<input type="datetime-local" class="form-control form-control-sm" id="date-picker">
|
|
<button class="btn btn-primary btn-sm w-100 mt-2" id="goto-date-btn">
|
|
<i class="fas fa-calendar-day"></i>
|
|
Go to Date
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Time Range Selector -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Quick Range</label>
|
|
<div class="btn-group-vertical w-100" role="group">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" data-range="1h">1 Hour</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" data-range="4h">4 Hours</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" data-range="1d">1 Day</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" data-range="1w">1 Week</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Buttons -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigate</label>
|
|
<div class="btn-group w-100" role="group">
|
|
<button type="button" class="btn btn-sm btn-outline-primary" id="nav-backward-btn" title="Backward">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" id="nav-now-btn" title="Now">
|
|
<i class="fas fa-clock"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" id="nav-forward-btn" title="Forward">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Refresh -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Data</label>
|
|
<div class="btn-group w-100" role="group">
|
|
<button type="button" class="btn btn-sm btn-outline-success" id="refresh-data-btn" title="Refresh Data">
|
|
<i class="fas fa-sync-alt"></i>
|
|
Refresh
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-info" id="auto-refresh-toggle" title="Auto Refresh">
|
|
<i class="fas fa-play" id="auto-refresh-icon"></i>
|
|
</button>
|
|
</div>
|
|
<small class="text-muted">Refresh chart data from data provider</small>
|
|
</div>
|
|
|
|
<!-- Annotation Mode -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Annotation Mode</label>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="annotation-mode-toggle" checked>
|
|
<label class="form-check-label" for="annotation-mode-toggle">
|
|
<span id="annotation-mode-label">Enabled</span>
|
|
</label>
|
|
</div>
|
|
<small class="text-muted">Click charts to mark trades</small>
|
|
</div>
|
|
|
|
<!-- Current Annotation Status -->
|
|
<div class="mb-3" id="pending-annotation-status" style="display: none;">
|
|
<div class="alert alert-info py-2 px-2 mb-0">
|
|
<small>
|
|
<i class="fas fa-info-circle"></i>
|
|
<strong>Entry marked</strong><br>
|
|
Click to mark exit point
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Symbol selection
|
|
document.getElementById('symbol-select').addEventListener('change', function(e) {
|
|
appState.currentSymbol = e.target.value;
|
|
|
|
// Reload annotations for new symbol
|
|
reloadAnnotationsForSymbol(appState.currentSymbol);
|
|
|
|
// Reload chart data
|
|
loadInitialData();
|
|
});
|
|
|
|
// Function to reload annotations when symbol changes
|
|
function reloadAnnotationsForSymbol(symbol) {
|
|
fetch('/api/get-annotations', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ symbol: symbol })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Update app state with filtered annotations
|
|
appState.annotations = data.annotations;
|
|
|
|
// Clear existing annotations from chart
|
|
if (appState.chartManager) {
|
|
appState.chartManager.clearAllAnnotations();
|
|
|
|
// Add new annotations to chart
|
|
data.annotations.forEach(annotation => {
|
|
appState.chartManager.addAnnotation(annotation);
|
|
});
|
|
}
|
|
|
|
// Update annotation list UI
|
|
if (typeof renderAnnotationsList === 'function') {
|
|
renderAnnotationsList(appState.annotations);
|
|
}
|
|
|
|
console.log(`Loaded ${data.count} annotations for ${symbol}`);
|
|
} else {
|
|
console.error('Failed to load annotations:', data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading annotations:', error);
|
|
});
|
|
}
|
|
|
|
// Timeframe checkboxes
|
|
document.querySelectorAll('.form-check-input[id^="tf-"]').forEach(checkbox => {
|
|
checkbox.addEventListener('change', function() {
|
|
const timeframes = Array.from(document.querySelectorAll('.form-check-input[id^="tf-"]:checked'))
|
|
.map(cb => cb.value);
|
|
appState.currentTimeframes = timeframes;
|
|
loadInitialData();
|
|
});
|
|
});
|
|
|
|
// Date picker navigation
|
|
document.getElementById('goto-date-btn').addEventListener('click', function() {
|
|
const dateValue = document.getElementById('date-picker').value;
|
|
if (dateValue && appState.timeNavigator) {
|
|
const timestamp = new Date(dateValue).getTime();
|
|
appState.timeNavigator.navigateToTime(timestamp);
|
|
}
|
|
});
|
|
|
|
// Quick range buttons
|
|
document.querySelectorAll('[data-range]').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const range = this.getAttribute('data-range');
|
|
if (appState.timeNavigator) {
|
|
appState.timeNavigator.setTimeRange(range);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Navigation buttons
|
|
document.getElementById('nav-backward-btn').addEventListener('click', function() {
|
|
if (appState.timeNavigator) {
|
|
appState.timeNavigator.scrollBackward();
|
|
}
|
|
});
|
|
|
|
document.getElementById('nav-now-btn').addEventListener('click', function() {
|
|
if (appState.timeNavigator) {
|
|
appState.timeNavigator.navigateToNow();
|
|
}
|
|
});
|
|
|
|
document.getElementById('nav-forward-btn').addEventListener('click', function() {
|
|
if (appState.timeNavigator) {
|
|
appState.timeNavigator.scrollForward();
|
|
}
|
|
});
|
|
|
|
// Annotation mode toggle
|
|
document.getElementById('annotation-mode-toggle').addEventListener('change', function(e) {
|
|
const label = document.getElementById('annotation-mode-label');
|
|
if (e.target.checked) {
|
|
label.textContent = 'Enabled';
|
|
if (appState.annotationManager) {
|
|
appState.annotationManager.enable();
|
|
}
|
|
} else {
|
|
label.textContent = 'Disabled';
|
|
if (appState.annotationManager) {
|
|
appState.annotationManager.disable();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Data refresh functionality
|
|
let autoRefreshInterval = null;
|
|
let isAutoRefreshEnabled = false;
|
|
|
|
// Manual refresh button
|
|
document.getElementById('refresh-data-btn').addEventListener('click', function() {
|
|
refreshChartData();
|
|
});
|
|
|
|
// Auto refresh toggle
|
|
document.getElementById('auto-refresh-toggle').addEventListener('click', function() {
|
|
toggleAutoRefresh();
|
|
});
|
|
|
|
function refreshChartData() {
|
|
const refreshBtn = document.getElementById('refresh-data-btn');
|
|
const icon = refreshBtn.querySelector('i');
|
|
|
|
// Show loading state
|
|
icon.className = 'fas fa-spinner fa-spin';
|
|
refreshBtn.disabled = true;
|
|
|
|
fetch('/api/refresh-data', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
symbol: appState.currentSymbol,
|
|
timeframes: appState.currentTimeframes
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Update charts with new data and pivot bounds
|
|
if (appState.chartManager) {
|
|
appState.chartManager.updateCharts(data.chart_data, data.pivot_bounds);
|
|
}
|
|
|
|
// Show pivot bounds info if available
|
|
if (data.pivot_bounds) {
|
|
const pivotInfo = data.pivot_bounds;
|
|
showSuccess(`Chart data refreshed successfully. Found ${pivotInfo.total_levels} pivot levels (${pivotInfo.support_levels.length} support, ${pivotInfo.resistance_levels.length} resistance) from ${pivotInfo.timeframe} data over ${pivotInfo.period}`);
|
|
} else {
|
|
showSuccess('Chart data refreshed successfully');
|
|
}
|
|
} else {
|
|
showError('Failed to refresh data: ' + data.error.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showError('Network error: ' + error.message);
|
|
})
|
|
.finally(() => {
|
|
// Reset button state
|
|
icon.className = 'fas fa-sync-alt';
|
|
refreshBtn.disabled = false;
|
|
});
|
|
}
|
|
|
|
function toggleAutoRefresh() {
|
|
const toggleBtn = document.getElementById('auto-refresh-toggle');
|
|
const icon = document.getElementById('auto-refresh-icon');
|
|
|
|
if (isAutoRefreshEnabled) {
|
|
// Disable auto refresh
|
|
if (autoRefreshInterval) {
|
|
clearInterval(autoRefreshInterval);
|
|
autoRefreshInterval = null;
|
|
}
|
|
isAutoRefreshEnabled = false;
|
|
icon.className = 'fas fa-play';
|
|
toggleBtn.title = 'Enable Auto Refresh';
|
|
showSuccess('Auto refresh disabled');
|
|
} else {
|
|
// Enable auto refresh (every 30 seconds)
|
|
autoRefreshInterval = setInterval(refreshChartData, 30000);
|
|
isAutoRefreshEnabled = true;
|
|
icon.className = 'fas fa-pause';
|
|
toggleBtn.title = 'Disable Auto Refresh';
|
|
showSuccess('Auto refresh enabled (30s interval)');
|
|
}
|
|
}
|
|
|
|
// Clean up interval when page unloads
|
|
window.addEventListener('beforeunload', function() {
|
|
if (autoRefreshInterval) {
|
|
clearInterval(autoRefreshInterval);
|
|
}
|
|
});
|
|
</script>
|