kenbarbour
/
uweather_firmware
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Live update and Battery status

develop
Kenneth Barbour 2020-07-08 21:48:05 -04:00
parent 219c9136e6
commit 4a6c7fce74
2 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/Navbar.js
View File

@ -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>

33
frontend/src/components/NavbarBatteryItem.js 100644
View File

@ -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;