This commit is contained in:
Dobromir Popov
2025-10-23 00:21:22 +03:00
parent dbab0283c9
commit b0771ff34e
8 changed files with 451 additions and 125 deletions

View File

@@ -4,9 +4,14 @@
<i class="fas fa-tags"></i>
Annotations
</h6>
<button class="btn btn-sm btn-outline-light" id="export-annotations-btn" title="Export">
<i class="fas fa-download"></i>
</button>
<div class="btn-group btn-group-sm">
<button class="btn btn-sm btn-outline-light" id="export-annotations-btn" title="Export">
<i class="fas fa-download"></i>
</button>
<button class="btn btn-sm btn-outline-danger" id="clear-all-annotations-btn" title="Clear All">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
<div class="card-body p-2">
<div class="list-group list-group-flush" id="annotations-list">
@@ -48,6 +53,48 @@
});
});
// Clear all annotations
document.getElementById('clear-all-annotations-btn').addEventListener('click', function() {
if (appState.annotations.length === 0) {
showError('No annotations to clear');
return;
}
if (!confirm(`Are you sure you want to delete all ${appState.annotations.length} annotations? This action cannot be undone.`)) {
return;
}
fetch('/api/clear-all-annotations', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
symbol: appState.currentSymbol
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Clear from app state
appState.annotations = [];
// Update UI
renderAnnotationsList(appState.annotations);
// Clear from chart
if (appState.chartManager) {
appState.chartManager.clearAllAnnotations();
}
showSuccess(`Cleared ${data.deleted_count} annotations`);
} else {
showError('Failed to clear annotations: ' + data.error.message);
}
})
.catch(error => {
showError('Network error: ' + error.message);
});
});
// Function to render annotations list
function renderAnnotationsList(annotations) {
const listContainer = document.getElementById('annotations-list');

View File

@@ -10,30 +10,31 @@
<div class="mb-3">
<label for="symbol-select" class="form-label">Symbol</label>
<select class="form-select form-select-sm" id="symbol-select">
<option value="ETH/USDT" selected>ETH/USDT</option>
<option value="BTC/USDT">BTC/USDT</option>
{% 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-1s" value="1s" checked>
<label class="form-check-label" for="tf-1s">1 Second</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="tf-1m" value="1m" checked>
<label class="form-check-label" for="tf-1m">1 Minute</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="tf-1h" value="1h" checked>
<label class="form-check-label" for="tf-1h">1 Hour</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="tf-1d" value="1d" checked>
<label class="form-check-label" for="tf-1d">1 Day</label>
<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 -->
@@ -73,6 +74,21 @@
</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>
@@ -168,4 +184,87 @@
}
}
});
// 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
if (appState.chartManager) {
appState.chartManager.updateCharts(data.chart_data);
}
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>