234 lines
9.9 KiB
HTML
234 lines
9.9 KiB
HTML
<div class="card annotation-list mb-3">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-tags"></i>
|
|
Annotations
|
|
</h6>
|
|
<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">
|
|
<!-- Annotations will be dynamically added here -->
|
|
<div class="text-center text-muted py-3" id="no-annotations-msg">
|
|
<i class="fas fa-info-circle"></i>
|
|
<p class="mb-0 small">No annotations yet</p>
|
|
<p class="mb-0 small">Click on charts to create</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Export annotations
|
|
document.getElementById('export-annotations-btn').addEventListener('click', function () {
|
|
fetch('/api/export-annotations', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
symbol: appState.currentSymbol,
|
|
format: 'json'
|
|
})
|
|
})
|
|
.then(response => response.blob())
|
|
.then(blob => {
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `annotations_${appState.currentSymbol}_${Date.now()}.json`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
a.remove();
|
|
showSuccess('Annotations exported successfully');
|
|
})
|
|
.catch(error => {
|
|
showError('Failed to export annotations: ' + error.message);
|
|
});
|
|
});
|
|
|
|
// 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');
|
|
const noAnnotationsMsg = document.getElementById('no-annotations-msg');
|
|
|
|
if (annotations.length === 0) {
|
|
noAnnotationsMsg.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
noAnnotationsMsg.style.display = 'none';
|
|
|
|
// Clear existing items (except the no-annotations message)
|
|
Array.from(listContainer.children).forEach(child => {
|
|
if (child.id !== 'no-annotations-msg') {
|
|
child.remove();
|
|
}
|
|
});
|
|
|
|
// Add annotation items
|
|
annotations.forEach(annotation => {
|
|
const item = document.createElement('div');
|
|
item.className = 'list-group-item list-group-item-action p-2';
|
|
item.setAttribute('data-annotation-id', annotation.annotation_id);
|
|
|
|
const profitClass = annotation.profit_loss_pct >= 0 ? 'text-success' : 'text-danger';
|
|
const directionIcon = annotation.direction === 'LONG' ? 'fa-arrow-up' : 'fa-arrow-down';
|
|
|
|
item.innerHTML = `
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex align-items-center mb-1">
|
|
<i class="fas ${directionIcon} me-1"></i>
|
|
<strong class="small">${annotation.direction}</strong>
|
|
<span class="badge bg-secondary ms-2 small">${annotation.timeframe}</span>
|
|
</div>
|
|
<div class="small text-muted">
|
|
${new Date(annotation.entry.timestamp).toLocaleString()}
|
|
</div>
|
|
<div class="small ${profitClass} fw-bold">
|
|
${annotation.profit_loss_pct >= 0 ? '+' : ''}${annotation.profit_loss_pct.toFixed(2)}%
|
|
</div>
|
|
</div>
|
|
<div class="btn-group-vertical btn-group-sm">
|
|
<button class="btn btn-sm btn-outline-primary view-annotation-btn" title="View">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-success generate-testcase-btn" title="Generate Test Case">
|
|
<i class="fas fa-file-code"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger delete-annotation-btn" title="Delete">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Add event listeners
|
|
item.querySelector('.view-annotation-btn').addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
viewAnnotation(annotation);
|
|
});
|
|
|
|
item.querySelector('.generate-testcase-btn').addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
generateTestCase(annotation.annotation_id);
|
|
});
|
|
|
|
item.querySelector('.delete-annotation-btn').addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
console.log('=== Delete annotation button clicked ===');
|
|
console.log('Annotation ID:', annotation.annotation_id);
|
|
console.log('window.deleteAnnotation type:', typeof window.deleteAnnotation);
|
|
console.log('window object keys containing delete:', 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...');
|
|
try {
|
|
window.deleteAnnotation(annotation.annotation_id);
|
|
} catch (error) {
|
|
console.error('Error calling deleteAnnotation:', error);
|
|
if (typeof window.showError === 'function') {
|
|
window.showError('Error calling delete function: ' + error.message);
|
|
} else {
|
|
alert('Error calling delete function: ' + error.message);
|
|
}
|
|
}
|
|
} 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'));
|
|
if (typeof window.showError === 'function') {
|
|
window.showError('Delete function not available. Please refresh the page.');
|
|
} else {
|
|
alert('Delete function not available. Please refresh the page.');
|
|
}
|
|
}
|
|
});
|
|
|
|
listContainer.appendChild(item);
|
|
});
|
|
|
|
// Update annotation count
|
|
document.getElementById('annotation-count').textContent = annotations.length;
|
|
}
|
|
|
|
function viewAnnotation(annotation) {
|
|
// Navigate to annotation time and highlight it
|
|
if (appState.timeNavigator) {
|
|
appState.timeNavigator.navigateToTime(new Date(annotation.entry.timestamp).getTime());
|
|
}
|
|
if (appState.chartManager) {
|
|
appState.chartManager.highlightAnnotation(annotation.annotation_id);
|
|
}
|
|
}
|
|
|
|
function generateTestCase(annotationId) {
|
|
fetch('/api/generate-test-case', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ annotation_id: annotationId })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showSuccess('Test case generated successfully');
|
|
} else {
|
|
showError('Failed to generate test case: ' + data.error.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showError('Network error: ' + error.message);
|
|
});
|
|
}
|
|
|
|
// Note: deleteAnnotation is defined in annotation_dashboard.html to avoid duplication
|
|
</script> |