From a360ca99a3b05daba86c8e1bb7cc1887dc7d4620 Mon Sep 17 00:00:00 2001
From: TaprootFreak <142087526+TaprootFreak@users.noreply.github.com>
Date: Sat, 14 Feb 2026 18:01:21 +0100
Subject: [PATCH] Replace inline onclick handlers with addEventListener for CSP
 compliance

CSP header 'script-src-attr: none' blocks inline event handlers on
the production site, making range buttons non-functional. Move click
handling to the external JS files using addEventListener on
data-range attributes.
---
 src/assets/monitoring-btc.html | 6 +++---
 src/assets/monitoring-btc.js   | 7 +++++++
 src/assets/monitoring-usd.html | 6 +++---
 src/assets/monitoring-usd.js   | 7 +++++++
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/assets/monitoring-btc.html b/src/assets/monitoring-btc.html
index b3b7c7a20..fa8d8f603 100644
--- a/src/assets/monitoring-btc.html
+++ b/src/assets/monitoring-btc.html
@@ -85,9 +85,9 @@ <h1>lightning.space - BTC Monitoring</h1>
   <div class="section">
     <h2>BTC Balance History</h2>
     <div class="range-buttons">
-      <button class="active" onclick="loadChart('24h')">24h</button>
-      <button onclick="loadChart('7d')">7d</button>
-      <button onclick="loadChart('30d')">30d</button>
+      <button class="active" data-range="24h">24h</button>
+      <button data-range="7d">7d</button>
+      <button data-range="30d">30d</button>
     </div>
     <div class="chart-container">
       <canvas id="btcChart"></canvas>
diff --git a/src/assets/monitoring-btc.js b/src/assets/monitoring-btc.js
index 3f3b24848..041547e72 100644
--- a/src/assets/monitoring-btc.js
+++ b/src/assets/monitoring-btc.js
@@ -200,3 +200,10 @@ function renderChart(points) {
 
 loadData();
 loadChart('24h');
+
+var rangeButtons = document.querySelectorAll('.range-buttons button[data-range]');
+for (var i = 0; i < rangeButtons.length; i++) {
+  rangeButtons[i].addEventListener('click', function () {
+    loadChart(this.getAttribute('data-range'));
+  });
+}
diff --git a/src/assets/monitoring-usd.html b/src/assets/monitoring-usd.html
index e4556fde5..557a873fb 100644
--- a/src/assets/monitoring-usd.html
+++ b/src/assets/monitoring-usd.html
@@ -85,9 +85,9 @@ <h1>lightning.space - USD Monitoring</h1>
   <div class="section">
     <h2>USD Balance History</h2>
     <div class="range-buttons">
-      <button class="active" onclick="loadChart('24h')">24h</button>
-      <button onclick="loadChart('7d')">7d</button>
-      <button onclick="loadChart('30d')">30d</button>
+      <button class="active" data-range="24h">24h</button>
+      <button data-range="7d">7d</button>
+      <button data-range="30d">30d</button>
     </div>
     <div class="chart-container">
       <canvas id="usdChart"></canvas>
diff --git a/src/assets/monitoring-usd.js b/src/assets/monitoring-usd.js
index 0930a2929..c6fcd590d 100644
--- a/src/assets/monitoring-usd.js
+++ b/src/assets/monitoring-usd.js
@@ -162,3 +162,10 @@ function renderChart(points) {
 
 loadData();
 loadChart('24h');
+
+var rangeButtons = document.querySelectorAll('.range-buttons button[data-range]');
+for (var i = 0; i < rangeButtons.length; i++) {
+  rangeButtons[i].addEventListener('click', function () {
+    loadChart(this.getAttribute('data-range'));
+  });
+}