min pivot distance only applies to L1 pivots ,
charts minimize addons, delete buttons WIP
This commit is contained in:
@@ -299,58 +299,15 @@
|
||||
toast.addEventListener('hidden.bs.toast', () => toast.remove());
|
||||
}
|
||||
|
||||
function setupGlobalFunctions() {
|
||||
// Make functions globally available
|
||||
window.showError = showError;
|
||||
window.showSuccess = showSuccess;
|
||||
window.renderAnnotationsList = renderAnnotationsList;
|
||||
window.deleteAnnotation = deleteAnnotation;
|
||||
window.highlightAnnotation = highlightAnnotation;
|
||||
|
||||
// Verify functions are set
|
||||
console.log('Global functions setup complete:');
|
||||
console.log(' - window.deleteAnnotation:', typeof window.deleteAnnotation);
|
||||
console.log(' - window.renderAnnotationsList:', typeof window.renderAnnotationsList);
|
||||
console.log(' - window.showError:', typeof window.showError);
|
||||
console.log(' - window.showSuccess:', typeof window.showSuccess);
|
||||
}
|
||||
|
||||
function renderAnnotationsList(annotations) {
|
||||
const listElement = document.getElementById('annotations-list');
|
||||
if (!listElement) return;
|
||||
|
||||
listElement.innerHTML = '';
|
||||
|
||||
annotations.forEach(annotation => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'annotation-item mb-2 p-2 border rounded';
|
||||
item.innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<small class="text-muted">${annotation.timeframe}</small>
|
||||
<div class="fw-bold ${annotation.profit_loss_pct >= 0 ? 'text-success' : 'text-danger'}">
|
||||
${annotation.direction} ${annotation.profit_loss_pct >= 0 ? '+' : ''}${annotation.profit_loss_pct.toFixed(2)}%
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
${new Date(annotation.entry.timestamp).toLocaleString()}
|
||||
</small>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button class="btn btn-outline-primary btn-sm" onclick="highlightAnnotation('${annotation.annotation_id}')" title="Highlight">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-danger btn-sm" onclick="deleteAnnotation('${annotation.annotation_id}')" title="Delete">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
listElement.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteAnnotation(annotationId) {
|
||||
console.log('deleteAnnotation called with ID:', annotationId);
|
||||
|
||||
if (!window.appState || !window.appState.annotations) {
|
||||
console.error('appState not initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Current annotations:', window.appState.annotations.map(a => a.annotation_id));
|
||||
|
||||
if (!confirm('Delete this annotation?')) {
|
||||
console.log('Delete cancelled by user');
|
||||
@@ -406,9 +363,84 @@
|
||||
}
|
||||
|
||||
function highlightAnnotation(annotationId) {
|
||||
if (window.appState.chartManager) {
|
||||
if (window.appState && window.appState.chartManager) {
|
||||
window.appState.chartManager.highlightAnnotation(annotationId);
|
||||
}
|
||||
}
|
||||
|
||||
function setupGlobalFunctions() {
|
||||
// Make functions globally available
|
||||
window.showError = showError;
|
||||
window.showSuccess = showSuccess;
|
||||
window.renderAnnotationsList = renderAnnotationsList;
|
||||
window.deleteAnnotation = deleteAnnotation;
|
||||
window.highlightAnnotation = highlightAnnotation;
|
||||
|
||||
// Verify functions are set
|
||||
console.log('Global functions setup complete:');
|
||||
console.log(' - window.deleteAnnotation:', typeof window.deleteAnnotation);
|
||||
console.log(' - window.renderAnnotationsList:', typeof window.renderAnnotationsList);
|
||||
console.log(' - window.showError:', typeof window.showError);
|
||||
console.log(' - window.showSuccess:', typeof window.showSuccess);
|
||||
}
|
||||
|
||||
function renderAnnotationsList(annotations) {
|
||||
const listElement = document.getElementById('annotations-list');
|
||||
if (!listElement) return;
|
||||
|
||||
listElement.innerHTML = '';
|
||||
|
||||
annotations.forEach(annotation => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'annotation-item mb-2 p-2 border rounded';
|
||||
item.innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<small class="text-muted">${annotation.timeframe}</small>
|
||||
<div class="fw-bold ${annotation.profit_loss_pct >= 0 ? 'text-success' : 'text-danger'}">
|
||||
${annotation.direction} ${annotation.profit_loss_pct >= 0 ? '+' : ''}${annotation.profit_loss_pct.toFixed(2)}%
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
${new Date(annotation.entry.timestamp).toLocaleString()}
|
||||
</small>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button class="btn btn-outline-primary btn-sm highlight-btn" title="Highlight">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-danger btn-sm delete-btn" title="Delete">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add event listeners
|
||||
item.querySelector('.highlight-btn').addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
console.log('Highlight button clicked for:', annotation.annotation_id);
|
||||
if (typeof window.highlightAnnotation === 'function') {
|
||||
window.highlightAnnotation(annotation.annotation_id);
|
||||
}
|
||||
});
|
||||
|
||||
item.querySelector('.delete-btn').addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
console.log('Delete button clicked for:', annotation.annotation_id);
|
||||
console.log('window.deleteAnnotation type:', typeof window.deleteAnnotation);
|
||||
|
||||
if (typeof window.deleteAnnotation === 'function') {
|
||||
console.log('Calling window.deleteAnnotation...');
|
||||
window.deleteAnnotation(annotation.annotation_id);
|
||||
} else {
|
||||
console.error('window.deleteAnnotation is not a function:', typeof window.deleteAnnotation);
|
||||
alert('Delete function not available. Please refresh the page.');
|
||||
}
|
||||
});
|
||||
|
||||
listElement.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -166,12 +166,16 @@
|
||||
item.querySelector('.delete-annotation-btn').addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
console.log('Delete button clicked for:', annotation.annotation_id);
|
||||
console.log('window.deleteAnnotation type:', typeof window.deleteAnnotation);
|
||||
console.log('window object keys:', Object.keys(window).filter(k => k.includes('delete')));
|
||||
|
||||
// Use window.deleteAnnotation to ensure we get the global function
|
||||
if (typeof window.deleteAnnotation === 'function') {
|
||||
console.log('Calling window.deleteAnnotation...');
|
||||
window.deleteAnnotation(annotation.annotation_id);
|
||||
} else {
|
||||
console.error('window.deleteAnnotation is not a function:', typeof window.deleteAnnotation);
|
||||
console.log('Available functions:', Object.keys(window).filter(k => typeof window[k] === 'function'));
|
||||
alert('Delete function not available. Please refresh the page.');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -26,36 +26,60 @@
|
||||
<div class="timeframe-chart" id="chart-1s">
|
||||
<div class="chart-header">
|
||||
<span class="timeframe-label">1 Second</span>
|
||||
<span class="chart-info" id="info-1s"></span>
|
||||
<div class="chart-header-controls">
|
||||
<span class="chart-info" id="info-1s"></span>
|
||||
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1s"
|
||||
title="Minimize Chart">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-plot" id="plot-1s"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="timeframe-chart" id="chart-1m">
|
||||
<div class="chart-header">
|
||||
<span class="timeframe-label">1 Minute</span>
|
||||
<span class="chart-info" id="info-1m"></span>
|
||||
<div class="chart-header-controls">
|
||||
<span class="chart-info" id="info-1m"></span>
|
||||
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1m"
|
||||
title="Minimize Chart">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-plot" id="plot-1m"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="timeframe-chart" id="chart-1h">
|
||||
<div class="chart-header">
|
||||
<span class="timeframe-label">1 Hour</span>
|
||||
<span class="chart-info" id="info-1h"></span>
|
||||
<div class="chart-header-controls">
|
||||
<span class="chart-info" id="info-1h"></span>
|
||||
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1h"
|
||||
title="Minimize Chart">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-plot" id="plot-1h"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="timeframe-chart" id="chart-1d">
|
||||
<div class="chart-header">
|
||||
<span class="timeframe-label">1 Day</span>
|
||||
<span class="chart-info" id="info-1d"></span>
|
||||
<div class="chart-header-controls">
|
||||
<span class="chart-info" id="info-1d"></span>
|
||||
<button type="button" class="btn btn-sm btn-outline-light minimize-btn" data-timeframe="1d"
|
||||
title="Minimize Chart">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-plot" id="plot-1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Loading overlay -->
|
||||
<div id="chart-loading" class="chart-loading d-none">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
@@ -68,25 +92,25 @@
|
||||
|
||||
<script>
|
||||
// Chart panel controls
|
||||
document.getElementById('zoom-in-btn').addEventListener('click', function() {
|
||||
document.getElementById('zoom-in-btn').addEventListener('click', function () {
|
||||
if (appState.chartManager) {
|
||||
appState.chartManager.handleZoom(1.5);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('zoom-out-btn').addEventListener('click', function() {
|
||||
|
||||
document.getElementById('zoom-out-btn').addEventListener('click', function () {
|
||||
if (appState.chartManager) {
|
||||
appState.chartManager.handleZoom(0.67);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('reset-zoom-btn').addEventListener('click', function() {
|
||||
|
||||
document.getElementById('reset-zoom-btn').addEventListener('click', function () {
|
||||
if (appState.chartManager) {
|
||||
appState.chartManager.resetZoom();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('fullscreen-btn').addEventListener('click', function() {
|
||||
|
||||
document.getElementById('fullscreen-btn').addEventListener('click', function () {
|
||||
const chartContainer = document.getElementById('chart-container');
|
||||
if (chartContainer.requestFullscreen) {
|
||||
chartContainer.requestFullscreen();
|
||||
@@ -96,4 +120,37 @@
|
||||
chartContainer.msRequestFullscreen();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
// Minimize button functionality
|
||||
document.querySelectorAll('.minimize-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function () {
|
||||
const timeframe = this.getAttribute('data-timeframe');
|
||||
const chartElement = document.getElementById(`chart-${timeframe}`);
|
||||
const plotElement = document.getElementById(`plot-${timeframe}`);
|
||||
|
||||
if (chartElement.classList.contains('minimized')) {
|
||||
// Restore chart
|
||||
chartElement.classList.remove('minimized');
|
||||
plotElement.style.display = 'block';
|
||||
this.innerHTML = '<i class="fas fa-minus"></i>';
|
||||
this.title = 'Minimize Chart';
|
||||
|
||||
// Update chart layout
|
||||
if (window.appState && window.appState.chartManager) {
|
||||
window.appState.chartManager.updateChartLayout();
|
||||
}
|
||||
} else {
|
||||
// Minimize chart
|
||||
chartElement.classList.add('minimized');
|
||||
plotElement.style.display = 'none';
|
||||
this.innerHTML = '<i class="fas fa-plus"></i>';
|
||||
this.title = 'Restore Chart';
|
||||
|
||||
// Update chart layout
|
||||
if (window.appState && window.appState.chartManager) {
|
||||
window.appState.chartManager.updateChartLayout();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user