From 393c5ca01f4e4b8a406502024127b337b514efef Mon Sep 17 00:00:00 2001
From: mrlt8 <67088095+mrlt8@users.noreply.github.com>
Date: Wed, 21 Aug 2024 06:45:50 -0700
Subject: [PATCH] Update battery level in WebUI

---
 app/static/site.css      |  3 ++-
 app/static/site.js       | 36 ++++++++++++++++++++++++++++++++++++
 app/templates/index.html |  2 +-
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/app/static/site.css b/app/static/site.css
index 5732db0e..83e0acc8 100644
--- a/app/static/site.css
+++ b/app/static/site.css
@@ -142,7 +142,8 @@ video {
 .status .fa-circle-play,
 .status .fa-circle-pause,
 .status .fa-satellite-dish,
-.fa-arrows-rotate {
+.fa-arrows-rotate,
+.card-header-title .icon.battery {
   cursor: pointer;
 }
 
diff --git a/app/static/site.js b/app/static/site.js
index 2abc9c71..25d971ad 100644
--- a/app/static/site.js
+++ b/app/static/site.js
@@ -404,6 +404,7 @@ document.addEventListener("DOMContentLoaded", () => {
       const preview = card.querySelector(`img.refresh_img, video[data-cam='${cam}']`);
       const motionIcon = card.querySelector(".icon.motion");
       const connected = card.dataset.connected.toLowerCase() === "true";
+      updateBatteryLevel(card);
 
       card.dataset.connected = false;
       statusIcon.className = "fas";
@@ -752,4 +753,39 @@ document.addEventListener("DOMContentLoaded", () => {
       bulmaToast.toast({ message: `<strong>${title}</strong> - ${message}`, type: `is-${type}`, pauseOnHover: true, duration: 10000 })
     }
   }
+  function updateBatteryLevel(card) {
+    console.log("updateBatteryLevel")
+    if (card.dataset.battery?.toLowerCase() !== "true") { return; }
+    const iconElement = card.querySelector(".icon.battery i");
+    fetch(`api/${card.id}/battery`)
+      .then((resp) => resp.json())
+      .then((data) => {
+        if (data.status != "success" || !data.value) { return; }
+        const batteryLevel = parseInt(data.value);
+        let batteryIcon;
+        iconElement.classList.remove("has-text-danger");
+        iconElement.classList.forEach(cls => {
+          if (cls.startsWith('fa-battery-')) {
+            iconElement.classList.remove(cls);
+          }
+        });
+        if (batteryLevel > 90) {
+          batteryIcon = "full";
+        } else if (batteryLevel > 75) {
+          batteryIcon = "three-quarters";
+        } else if (batteryLevel > 50) {
+          batteryIcon = "half";
+        } else if (batteryLevel > 10) {
+          batteryIcon = "quarter";
+        } else {
+          batteryIcon = "empty";
+          iconElement.classList.add("has-text-danger");
+        }
+        iconElement.classList.add(`fa-battery-${batteryIcon}`);
+        iconElement.parentElement.title = `Battery Level: ${batteryLevel}%`;
+      })
+  }
+  document.querySelectorAll('div.camera[data-battery="True"]').forEach((card) => {
+    card.querySelector(".icon.battery").addEventListener("click", () => updateBatteryLevel(card));
+  });
 });
diff --git a/app/templates/index.html b/app/templates/index.html
index 60def48f..246d9653 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -144,7 +144,7 @@
                     {% endif %}
                     {% endif %}
                     {% if camera.is_battery %}
-                    <span class="icon" title="Battery">
+                    <span class="icon battery">
                         <i class="fas fa-battery-empty" aria-hidden="true"></i>
                     </span>
                     {% endif %}