feat: show sensor accoutn for fethed sensors

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="fetchAssets()">
+                            <button class="btn btn-primary" onclick="fetchSensors()">
                               Fetch Sensors
                             </button>
                           </div>
@@ -463,7 +463,7 @@ <h5 class="modal-title">Edit Dashboard Graphs</h5>
     let rawJSON = "{{ asset.sensors_to_show | safe}}";
     rawJSON = rawJSON.replace(/'/g, '"');
     let data = JSON.parse(rawJSON);
-    let assets = [];
+    let sensors = [];
     let sensorCache = {};
     let editingIndex = null; 
 
@@ -520,7 +520,7 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
                         `;
                     }).join('')}
                     </p>
-                    <button class="btn btn-danger btn-sm me-2" onclick="fetchAssets(${index})">Add Sensor</button>
+                    <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="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>
@@ -554,16 +554,16 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
             const response = await fetch(apiUrl);
 
             if (!response.ok) {
-                throw new Error('Failed to fetch assets');
+                throw new Error('Failed to fetch sensors');
             }
 
             const data = await response.json();
-            const filteredAssets = data.data;
+            const filteredSensors = data.data;
 
-            // Render the fetched assets
-            renderApiSensors(filteredAssets);
+            // Render the fetched sensors
+            renderApiSensors(filteredSensors);
         } catch (error) {
-            showToast("Failed to filter/search assets", "error");
+            showToast("Failed to filter/search sesnors", "error");
         }
     }
 
@@ -612,31 +612,51 @@ <h5 class="card-title pt-2"><b> Sensors: </b></h5>
         renderData(); 
     }
 
-    // Rnder Account Details
+    // 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;
     }
 
-    // Render the available API assets
-    function renderApiSensors(assets, graphIndex) {
+    // 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) {
         const apiSensorsList = document.getElementById("apiSensorsList");
-        apiSensorsList.innerHTML = ""; // Clear the previous assets
+        apiSensorsList.innerHTML = ""; // Clear the previous sensors
+        sensors.forEach(async (sensor) => {
+            const Account = await getAssetAccount(sensor.generic_asset_id);
 
-        assets.forEach((asset) => {
             const col = document.createElement("div");
             col.classList.add("col-12", "mb-1");
 
             col.innerHTML = `
                 <div class="card m-0">
                     <div class="card-body p-0">
-                        <h5 class="card-title">${asset.name}</h5>
-                        <p class="card-text">ID: ${asset.id}, Unit: ${asset.unit}</p>
+                        <h5 class="card-title">${sensor.name}</h5>
+                        <p class="card-text">
+                            <b>ID:</b> ${sensor.id}, 
+                            <b>Unit:</b> ${sensor.unit}, 
+                            <b>Account:</b> ${Account.name}
+                        </p>
                         ${graphIndex !== undefined 
-                        ? `<button class="btn btn-primary btn-sm" onclick="addSensorToGraph(${graphIndex}, ${asset.id})">Add</button>` 
-                        : `<button class="btn btn-primary btn-sm" onclick="addSensorToList(${asset.id})">Add to Graph</button>`
+                        ? `<button class="btn btn-primary btn-sm" onclick="addSensorToGraph(${graphIndex}, ${sensor.id})">Add</button>` 
+                        : `<button class="btn btn-primary btn-sm" onclick="addSensorToList(${sensor.id})">Add to Graph</button>`
                         }
                         
                     </div>
@@ -671,12 +691,12 @@ <h5 class="card-title">${asset.name}</h5>
         updateSensorToShow();
     });
 
-    // Fetch the assets from the API
-    async function fetchAssets(graphIndex) {
+    // 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);
-        assets = await response.json().then((data) => data.data);
-        renderApiSensors(assets, graphIndex);
+        sensors = await response.json().then((data) => data.data);
+        renderApiSensors(sensors, graphIndex);
     }
 
     // Add sensor to the data list