From 4a6c7fce748d4010617f9f25953c64247722f0d7 Mon Sep 17 00:00:00 2001
From: Kenneth Barbour <kenbarbour@gmail.com>
Date: Wed, 8 Jul 2020 21:48:05 -0400
Subject: [PATCH] Live update and Battery status

---
 frontend/src/components/Navbar.js            | 29 ++++++-----------
 frontend/src/components/NavbarBatteryItem.js | 33 ++++++++++++++++++++
 2 files changed, 43 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/NavbarBatteryItem.js

diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
index c095ab0..b21a47b 100644
--- a/frontend/src/components/Navbar.js
+++ b/frontend/src/components/Navbar.js
@@ -2,18 +2,23 @@ import m from 'mithril';
 import { Link } from 'mithril/route'
 import UserPrefs from '../models/UserPrefs';
 import Weather from '../models/weather';
+import NavbarBatteryItem from './NavbarBatteryItem';
+
+function liveUpdate() {
+    if (UserPrefs.prefs.liveUpdate) {
+        Weather.loadCurrent();
+    }
+}
 
 class Navbar {
 
     oninit() {
         UserPrefs.load();
+        Navbar.intervalID = setInterval(liveUpdate, 30000);
     }
 
     view() {
-        const batteryClass = 'is-success'; // TODO: determine from battery
-        const batteryPercentage = 65;
-        const batteryVoltage = 3.6;
-        const batteryIsCharging = false;
+        
         const menuActiveClass = Navbar.isMenuActive ? 'is-active' : '';
 
         return (
@@ -33,21 +38,7 @@ class Navbar {
                 </div>
                 <div class={`navbar-menu ${menuActiveClass}`}>
                     <div class="navbar-end">
-                        <div class="navbar-item has-dropdown is-hoverable">
-                            <div class="navbar-link">
-                                <progress class={`progress is-small ${batteryClass}`} 
-                                        style="width: 32px;" 
-                                        value={batteryPercentage} 
-                                        max="100">
-                                            {batteryPercentage}%
-                                </progress>
-                            </div>
-                            <div class="navbar-dropdown is-right">
-                                <div class="navbar-item">{batteryVoltage} volts</div>
-                                <div class="navbar-item">{batteryPercentage} %</div>
-                                <div class="navbar-item">{batteryIsCharging ? 'Charging' : 'Not charging'}</div>
-                            </div>
-                        </div>
+                        <NavbarBatteryItem />
                         <div class="navbar-item has-dropdown is-hoverable">
                             <div class="navbar-link">
                                 <a>&#128295;</a>
diff --git a/frontend/src/components/NavbarBatteryItem.js b/frontend/src/components/NavbarBatteryItem.js
new file mode 100644
index 0000000..68b0db7
--- /dev/null
+++ b/frontend/src/components/NavbarBatteryItem.js
@@ -0,0 +1,33 @@
+import m from 'mithril';
+import Weather from '../models/weather';
+
+class NavbarBatteryItem {
+    view() {
+        if (!Weather.current || !Weather.current.battery) {
+            return null;
+        }
+        const batteryPercentage = Weather.current.battery.percent;
+        const batteryClass = (batteryPercentage > 30) ? 'is-success' : 'is-danger';
+        const batteryVoltage = Weather.current.battery.voltage;
+        const batteryIsCharging = Weather.current.battery.is_charging;
+        return (
+            <div class="navbar-item has-dropdown is-hoverable">
+                <div class="navbar-link">
+                    <progress class={`progress is-small ${batteryClass}`} 
+                            style="width: 32px;" 
+                            value={batteryPercentage} 
+                            max="100">
+                        {batteryPercentage}%
+                    </progress>
+                </div>
+                <div class="navbar-dropdown is-right">
+                    <div class="navbar-item">{batteryVoltage} volts</div>
+                    <div class="navbar-item">{batteryPercentage} %</div>
+                    <div class="navbar-item">{batteryIsCharging ? 'Charging' : 'Not charging'}</div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default NavbarBatteryItem;
\ No newline at end of file