chore: code organization and logic comments

Signed-off-by: joshuaunity <[email protected]>

flexmeasures/ui/templates/crud/asset.html

@@ -415,7 +415,7 @@ <h5 class="modal-title">Edit Dashboard Graphs</h5>
 
 
                           <div class="mb-3">
-                            <button class="btn btn-primary" onclick="fetchSensors()">
+                            <button class="btn btn-primary" onclick="getSensors()">
                               Fetch Sensors
                             </button>
                           </div>
@@ -466,7 +466,32 @@ <h5 class="modal-title">Edit Dashboard Graphs</h5>
     let sensors = [];
     let sensorCache = {};
     let editingIndex = null; 
+    const sensorsApiUrl = `${window.location.origin}/api/v3_0/sensors?page=1&per_page=10&asset_id={{ asset.id }}&include_public_assets=true`;
 
+    // Fetch Account Details
+    async function getAccount(accountId){
+        const apiUrl = window.location.origin + "/api/v3_0/accounts/" + accountId;
+        const response = await fetch(apiUrl);
+        const account = await response.json();
+        return account;
+    }
+
+    // Fetch Asset Details
+    async function getAsset(assetId){
+        const apiUrl = window.location.origin + "/api/v3_0/assets/" + assetId;
+        const response = await fetch(apiUrl);
+        const asset = await response.json();
+        return asset;
+    }
+
+    // Fetch account from asset
+    async function getAssetAccount(assetId){
+        const asset = await getAsset(assetId);
+        const account = await getAccount(asset.account_id);
+        return account;
+    }
+
+    // Fetch Sensor Details
     async function getSensor(id) {
         if (sensorCache[id]) {
             return sensorCache[id];
@@ -478,6 +503,13 @@ <h5 class="modal-title">Edit Dashboard Graphs</h5>
         return sensor;
     }
 
+    // Fetch the sensors
+    async function getSensors(graphIndex) {
+        const response = await fetch(sensorsApiUrl);
+        sensors = await response.json().then((data) => data.data);
+        renderApiSensors(sensors, graphIndex);
+    }
+
     // Function to render the data list
     async function renderData() {
         const dataList = document.getElementById("dataList");
@@ -520,7 +552,7 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
                         `;
                     }).join('')}
                     </p>
-                    <button class="btn btn-danger btn-sm me-2" onclick="fetchSensors(${index})">Add Sensor</button>
+                    <button class="btn btn-danger btn-sm me-2" onclick="getSensors(${index})">Add Sensor</button>
                     <button class="btn btn-danger btn-sm me-2" onclick="removeItem(${index})">Remove</button>
                     <button class="btn btn-secondary btn-sm me-2" onclick="moveUp(${index})" ${index === 0 ? "disabled" : ""}>Move Up</button>
                     <button class="btn btn-secondary btn-sm" onclick="moveDown(${index})" ${index === data.length - 1 ? "disabled" : ""}>Move Down</button>
@@ -536,8 +568,6 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
         const searchValue = document.getElementById("searchInput").value.toLowerCase();
         const filterValue = document.getElementById("unitsSelect").value;
 
-        const baseApiUrl = `${window.location.origin}/api/v3_0/sensors?page=1&per_page=10`;
-
         const params = new URLSearchParams();
 
         if (searchValue) {
@@ -548,7 +578,7 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
             params.append('unit', filterValue);
         }
 
-        const apiUrl = `${baseApiUrl}&${params.toString()}`;
+        const apiUrl = `${sensorsApiUrl}&${params.toString()}`;
 
         try {
             const response = await fetch(apiUrl);
@@ -612,31 +642,12 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
         renderData(); 
     }
 
-    // Fetch Account Details
-    async function getAccount(accountId){
-        const apiUrl = window.location.origin + "/api/v3_0/accounts/" + accountId;
-        const response = await fetch(apiUrl);
-        const account = await response.json();
-        return account;
-    }
-
-    // Fetch Asset Details
-    async function getAsset(assetId){
-        const apiUrl = window.location.origin + "/api/v3_0/assets/" + assetId;
-        const response = await fetch(apiUrl);
-        const asset = await response.json();
-        return asset;
-    }
-
-    // Fetch account from asset
-    async function getAssetAccount(assetId){
-        const asset = await getAsset(assetId);
-        const account = await getAccount(asset.account_id);
-        return account;
-    }
-
     // Render the available API sensors
     function renderApiSensors(sensors, graphIndex) {
+        // graphIndex is undefined when the sensors are being added to the graph
+        // graphIndex is defined when the sensors are being added to the data list. In other words 
+        // when more sensors are being added to single graph
+
         const apiSensorsList = document.getElementById("apiSensorsList");
         apiSensorsList.innerHTML = ""; // Clear the previous sensors
         sensors.forEach(async (sensor) => {
@@ -691,14 +702,6 @@ <h5 class="card-title">${sensor.name}</h5>
         updateSensorToShow();
     });
 
-    // Fetch the sensors from the API
-    async function fetchSensors(graphIndex) {
-        const apiURL = window.location.origin + "/api/v3_0/sensors?page=1&per_page=10&asset_id={{ asset.id }}&include_public_assets=true";
-        const response = await fetch(apiURL);
-        sensors = await response.json().then((data) => data.data);
-        renderApiSensors(sensors, graphIndex);
-    }
-
     // Add sensor to the data list
     function addSensorToList(id) {
         const newAsset = {