Modal markup must come before script tag — fix silent click handler

This commit is contained in:
Michiel Berger 2026-05-01 09:27:25 +02:00
parent be6012c1ea
commit 093605be2e
2 changed files with 18 additions and 13 deletions

View file

@ -250,15 +250,20 @@ form.addEventListener("submit", (e) => { e.preventDefault(); recalc(); });
// ─── Battery timeline modal ──────────────────────────────────────────── // ─── Battery timeline modal ────────────────────────────────────────────
const modal = document.getElementById("timeline-modal"); function mustFind(id) {
const tlTitle = document.getElementById("tl-title"); const el = document.getElementById(id);
const tlDate = document.getElementById("tl-date"); if (!el) console.error(`[pluginbattery] missing element #${id} — modal will not work`);
const tlDays = document.getElementById("tl-days"); return el;
const tlOnBox = document.getElementById("tl-battery-on"); }
const tlPrev = document.getElementById("tl-prev"); const modal = mustFind("timeline-modal");
const tlNext = document.getElementById("tl-next"); const tlTitle = mustFind("tl-title");
const tlStatus = document.getElementById("tl-status"); const tlDate = mustFind("tl-date");
const tlSummary = document.getElementById("tl-summary"); const tlDays = mustFind("tl-days");
const tlOnBox = mustFind("tl-battery-on");
const tlPrev = mustFind("tl-prev");
const tlNext = mustFind("tl-next");
const tlStatus = mustFind("tl-status");
const tlSummary = mustFind("tl-summary");
let activeBattery = null; // the row clicked let activeBattery = null; // the row clicked
let tlData = null; // last fetched timeline payload let tlData = null; // last fetched timeline payload

View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Honest battery payback — vs thuisbatterijgids.nl</title> <title>Honest battery payback — vs thuisbatterijgids.nl</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uplot@1.6.31/dist/uPlot.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uplot@1.6.31/dist/uPlot.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=17"> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=18">
</head> </head>
<body> <body>
@ -156,9 +156,6 @@
</p> </p>
</footer> </footer>
<script src="https://cdn.jsdelivr.net/npm/uplot@1.6.31/dist/uPlot.iife.min.js"></script>
<script src="{{ url_for('static', filename='app.js') }}?v=17"></script>
<div id="timeline-modal" class="modal" hidden> <div id="timeline-modal" class="modal" hidden>
<div class="modal-backdrop" data-close="modal"></div> <div class="modal-backdrop" data-close="modal"></div>
<div class="modal-card"> <div class="modal-card">
@ -195,5 +192,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/uplot@1.6.31/dist/uPlot.iife.min.js"></script>
<script src="{{ url_for('static', filename='app.js') }}?v=18"></script>
</body> </body>
</html> </html>