stored
This commit is contained in:
@@ -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');
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user