add fetch to entity count

Signed-off-by: Musilah <nataleigh.nk@gmail.com>
absmach · Mar 13, 2024 · 6e15931 · 6e15931
1 parent 4a250f1
commit 6e15931
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 11 deletions.
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -604,9 +604,10 @@ class EntityCount extends Chart {
     super(widgetID, chartData);
     this.Style = {
       width: "400px",
-      height: "175px",
+      height: "200px",
     };
     this.Content = this.#generateContent();
+    this.Script = this.#generateScript();
   }
 
   #generateContent() {
@@ -617,16 +618,46 @@ class EntityCount extends Chart {
             <h5 class="card-title">Entity Count</h5>
           </div>
           <div class="card-body text-center">
-            <p class="card-text value"> 35</p>
+            <p class="card-text count"> 35</p>
           </div>
           <div class="card-footer text-right">
-            <p class="card-text">
-              Domain Name: D1
-            </p>
+            <p class="card-text"> Domain : ${this.chartData.domain}</p>
+            <p class="card-text"> Channel : ${this.chartData.channel}</p>
           </div>
         </div>
     </div>
-        `;
+    `;
+  }
+
+  #generateScript() {
+    return`
+    (function() {
+      var entityCount = document.getElementById("${this.ID}");
+
+      async function getData() {
+        try{
+          const response = await fetch(
+            "/channels/${this.chartData.channel}/things"+
+            "?domain=${this.chartData.domain}"
+          );
+          console.log("Response: ", response);
+          if (response.ok) {
+            const data = await response.json();
+            console.log("Things: ", data);
+            entityCount.querySelector(".count").textContent = data.total;
+            
+          } else {
+            console.error("HTTP request failed with status: ", response.status);
+          }
+        } catch (error) {
+          console.error("Failed to fetch card data: ", error);
+        }
+      }
+
+      getData();
+      setInterval(getData, 20000);
+    })();
+    `;
   }
 }
 
@@ -1747,6 +1778,8 @@ class ValueCard extends Chart {
         try {
           const response = await fetch(
             "/data?channel=${this.chartData.channel}"+
+            "&publisher=${this.chartData.thing}" +
+            "&name=${this.chartData.valueName}" +
             "&limit=1",
           );
           if (response.ok) {
@@ -1762,7 +1795,7 @@ class ValueCard extends Chart {
       }
 
       getData();
-      setInterval(getData, 2000000);
+      setInterval(getData, 20000);
     })();
     `;
   }

diff --git a/ui/web/templates/charts/entitycountmodal.html b/ui/web/templates/charts/entitycountmodal.html
@@ -46,9 +46,7 @@ <h5 class="modal-title" id="entityCountModalLabel">Entity Count Card</h5>
                 name="domain"
                 id="domain-id"
                 placeholder="Enter the domain ID"
-                required
               />
-              <div class="invalid-feedback">Please enter a valid uuid</div>
             </div>
           </div>
           <div class="modal-footer">

diff --git a/ui/web/templates/dashboard.html b/ui/web/templates/dashboard.html
@@ -117,8 +117,6 @@ <h5 id="widgetsCanvasLabel">Widgets</h5>
               {{ template "alarmstablemodal" . }}
               {{ template "entitiestablemodal" . }}
               {{ template "entitycountmodal" . }}
-              {{ template "progressbarmodal" . }}
-              {{ template "labelmodal" . }}
             </div>
           </div>
         </div>