feat: initialize delete-data inputs to the graph's current start/end time range

Agent-Logs-Url: https://github.com/FlexMeasures/flexmeasures/sessions/88194780-0b56-4e59-8c91-0fd6d22a6c8d

Co-authored-by: nhoening <1042336+nhoening@users.noreply.github.com>

Author: Copilot

flexmeasures/ui/templates/includes/graphs.html

@@ -446,6 +446,12 @@
             var queryStartDate = (startDate != null) ? (startDate.toISOString()) : (null);
             var queryEndDate = (endDate != null) ? (endDate.toISOString()) : (null);
 
+            // Notify the "Delete data" panel of the new graph date range so its inputs stay in sync.
+            // detail: { startDate: Date, endDate: Date } – endDate has +1 day applied (exclusive end).
+            document.dispatchEvent(new CustomEvent('graphDateRangeChanged', {
+                detail: { startDate: startDate, endDate: endDate }
+            }));
+
             {% if active_page == "sensors" %}
             const toggleStats = document.getElementById('toggleStatsCheckbox');
             if (toggleStats.checked) {

flexmeasures/ui/templates/sensors/index.html

@@ -640,6 +640,34 @@ <h5 id="statsHeader">Statistics</h5>
     const startInputEl = document.getElementById('deleteDataStart');
     const untilInputEl = document.getElementById('deleteDataUntil');
 
+    const _pad = n => String(n).padStart(2, '0');
+    function toDatetimeLocalString(date) {
+        if (!date || isNaN(date.getTime())) { return ''; }
+        return `${date.getFullYear()}-${_pad(date.getMonth()+1)}-${_pad(date.getDate())}T${_pad(date.getHours())}:${_pad(date.getMinutes())}`;
+    }
+
+    function syncDeleteInputsWithGraphRange(start, end) {
+        if (start) { startInputEl.value = toDatetimeLocalString(start); }
+        if (end)   { untilInputEl.value  = toDatetimeLocalString(end); }
+    }
+
+    // Initialize delete data inputs with the time range currently shown in the graph.
+    // event_starts_after/event_ends_before are set when URL params (start_time/end_time) are present.
+    {% if event_starts_after %}
+    (function () {
+        try {
+            var _start = new Date('{{ event_starts_after }}');
+            var _end   = {% if event_ends_before %}new Date('{{ event_ends_before }}'){% else %}null{% endif %};
+            syncDeleteInputsWithGraphRange(_start, _end);
+        } catch (e) { /* ignore invalid date strings */ }
+    })();
+    {% endif %}
+
+    // Keep delete data inputs in sync when the user changes the graph date picker
+    document.addEventListener('graphDateRangeChanged', function(e) {
+        syncDeleteInputsWithGraphRange(e.detail.startDate, e.detail.endDate);
+    });
+
     async function deleteData(sourceValue, startValue, untilValue) {
         const params = {};
         if (sourceValue) {