debug(pressure-chart): add detailed logging for element discovery and button clicks

SUMMARY:
Added comprehensive logging to diagnose pressure monitor demo issue.
Will show if elements are found after innerHTML set and if event listeners
are attached successfully.

CHANGES:
- Log all element discovery (gauge, buttons, metrics)
- Log event listener attachment success/failure
- Log when simulate() and reset() methods are called
- Bump version to v20251019173500

DEBUGGING:
User reports demo not working despite initialization succeeding.
These logs will reveal:
- If DOM elements are queryable after innerHTML
- If event listeners are successfully attached
- If button clicks are triggering methods

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow 2025-10-20 07:47:31 +13:00
parent c89c07a500
commit 0e0c004728
2 changed files with 20 additions and 2 deletions

View file

@ -549,8 +549,8 @@
<script src="/js/components/interactive-diagram.js?v=20251019170000"></script>
<!-- Data Visualizations (Phase 3) -->
<script src="/js/components/pressure-chart.js?v=20251019173000"></script>
<script src="/js/components/activity-timeline.js?v=20251019173000"></script>
<script src="/js/components/pressure-chart.js?v=20251019173500"></script>
<script src="/js/components/activity-timeline.js?v=20251019173500"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>

View file

@ -101,11 +101,26 @@ class PressureChart {
simulateBtn: document.getElementById('pressure-simulate-btn'),
resetBtn: document.getElementById('pressure-reset-btn')
};
// Verify elements were found
console.log('[PressureChart] Elements found:', {
gaugeFill: !!this.elements.gaugeFill,
gaugeValue: !!this.elements.gaugeValue,
status: !!this.elements.status,
simulateBtn: !!this.elements.simulateBtn,
resetBtn: !!this.elements.resetBtn
});
}
attachEventListeners() {
if (!this.elements.simulateBtn || !this.elements.resetBtn) {
console.error('[PressureChart] Cannot attach event listeners - buttons not found');
return;
}
console.log('[PressureChart] Attaching event listeners to buttons');
this.elements.simulateBtn.addEventListener('click', () => this.simulate());
this.elements.resetBtn.addEventListener('click', () => this.reset());
console.log('[PressureChart] Event listeners attached successfully');
}
setLevel(level) {
@ -190,12 +205,14 @@ class PressureChart {
}
simulate() {
console.log('[PressureChart] Simulate button clicked - starting pressure simulation');
// Simulate pressure increasing from current to 85%
const targetLevels = [30, 50, 70, 85];
let index = 0;
const step = () => {
if (index >= targetLevels.length) return;
console.log('[PressureChart] Setting pressure level to', targetLevels[index]);
this.setLevel(targetLevels[index]);
index++;
setTimeout(step, 1500);
@ -205,6 +222,7 @@ class PressureChart {
}
reset() {
console.log('[PressureChart] Reset button clicked');
this.setLevel(0);
}
}