From 06048c64b66bcbfccab339f2fbeb05a329f49916 Mon Sep 17 00:00:00 2001
From: joshuaunity <oghenerobojosh01@gmail.com>
Date: Mon, 21 Oct 2024 09:10:21 +0100
Subject: [PATCH] feat: auto refresh graph and smart auto saving

Signed-off-by: joshuaunity <oghenerobojosh01@gmail.com>
---
 documentation/changelog.rst               |  1 +
 flexmeasures/ui/templates/base.html       |  5 +++++
 flexmeasures/ui/templates/crud/asset.html | 25 +++++++++--------------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/documentation/changelog.rst b/documentation/changelog.rst
index 6fef53f86..8a2002955 100644
--- a/documentation/changelog.rst
+++ b/documentation/changelog.rst
@@ -19,6 +19,7 @@ New features
 * Speed up loading the accounts page,by making the pagination backend-based and adding support for that in the API [see `PR #1196 <https://github.com/FlexMeasures/flexmeasures/pull/1196>`_]
 * Speed up loading the account detail page by by switching to server-side pagination for assets, replacing client-side pagination [see `PR #1202 <https://github.com/FlexMeasures/flexmeasures/pull/1202>`_]
 * Simplify and Globalize toasts in the flexmeasures project [see `PR #1207 <https://github.com/FlexMeasures/flexmeasures/pull/1207>_`]
+* "Added form to edit an asset's sensors_to_show data directly from the UI [see `PR #1212 <https://github.com/FlexMeasures/flexmeasures/pull/1212>_`]
 
 Infrastructure / Support
 ----------------------
diff --git a/flexmeasures/ui/templates/base.html b/flexmeasures/ui/templates/base.html
index d8e73fc58..8bc076807 100644
--- a/flexmeasures/ui/templates/base.html
+++ b/flexmeasures/ui/templates/base.html
@@ -365,6 +365,11 @@
         });
     }
 
+    // even lister to refresh graph
+    document.addEventListener('refreshGraph', async function() {
+        await embedAndLoad(chartSpecsPath + 'event_starts_after=' + storeStartDate.toISOString() + '&event_ends_before=' + storeEndDate.toISOString() + '&', elementId, datasetName, previousResult, storeStartDate, storeEndDate);
+    })
+
     var combineLegend = 'true';
     {% if active_page == "assets" %}
         var dataPath = '/api/v3_0/assets/' + {{ asset.id }};
diff --git a/flexmeasures/ui/templates/crud/asset.html b/flexmeasures/ui/templates/crud/asset.html
index 3d90a32be..89b1d15d0 100644
--- a/flexmeasures/ui/templates/crud/asset.html
+++ b/flexmeasures/ui/templates/crud/asset.html
@@ -202,7 +202,7 @@ <h3>Edit {{ asset.name }}</h3>
                                     {{ asset_form.sensors_to_show.label(class="col-sm-3 control-label") }}
                                 
                                     <div class="col-md-6">
-                                        <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
+                                        <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#sensorsToShowForm">
                                             Edit Graph
                                         </button>
                                 
@@ -383,7 +383,7 @@ <h3>All child assets for {{ asset.name }}</h3>
     </div>
 
     <!-- Modal -->
-    <div class="modal fade modal-xl" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
+    <div class="modal fade modal-xl" id="sensorsToShowForm" tabindex="-1" aria-labelledby="sensorsToShowFormLabel"
         aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
@@ -466,7 +466,7 @@ <h5 class="modal-title">Edit Dashboard Graphs</h5>
 </script>
 
 <script>
-
+    const formModal = document.getElementById('sensorsToShowForm');
     let rawJSON = "{{ asset.sensors_to_show | safe}}";
     rawJSON = rawJSON.replace(/'/g, '"');
     let data = JSON.parse(rawJSON);
@@ -577,7 +577,6 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
     async function removeItem(index) {
         data.splice(index, 1);
         try {
-            await updateSensorToShow();
             renderData(); 
         } catch (error) {
             showToast("Failed to save changes: " + error, "error");
@@ -588,7 +587,6 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
         if (index > 0) {
             [data[index - 1], data[index]] = [data[index], data[index - 1]]; // Swap items
             try {
-                await updateSensorToShow();
                 renderData(); 
             } catch (error) {
                 showToast("Failed to save changes: " + error, "error");
@@ -600,7 +598,6 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
         if (index < data.length - 1) {
             [data[index], data[index + 1]] = [data[index + 1], data[index]]; // Swap items
             try {
-                await updateSensorToShow();
                 renderData(); 
             } catch (error) {
                 showToast("Failed to save changes: " + error, "error");
@@ -619,12 +616,7 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
         data[index].title = newTitle;
         editingIndex = null;
             
-        try {
-            await updateSensorToShow();
-            renderData(); 
-        } catch (error) {
-            showToast("Failed to save changes: " + error, "error");
-        }
+        renderData(); 
     }
 
     // Render the available API assets
@@ -648,7 +640,7 @@ <h5 class="card-title">${asset.name}</h5>
                         
                     </div>
                 </div>
-            `;data
+            `;
 
             apiSensorsList.appendChild(col);
         });
@@ -669,12 +661,15 @@ <h5 class="card-title">${asset.name}</h5>
         if (!response.ok) {
             showToast("Failed to update the asset", "error");
         } else{
-            rawData = await response.json().then((data) => console.log(data));
-            await embedAndLoad(chartSpecsPath + 'event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate + '&', elementId, datasetName, previousResult, startDate, endDate),
+            document.dispatchEvent(new Event('refreshGraph'));
             showToast("Changes saved successfully", "success");
         }
     }
 
+    formModal.addEventListener('hidden.bs.modal', function () {
+        updateSensorToShow();
+    });
+
     // Fetch the assets from the API
     async function fetchAssets(graphIndex) {
         const apiURL = window.location.origin + "/api/v3_0/sensors?page=1&per_page=10";