Live update and Battery status
parent
219c9136e6
commit
4a6c7fce74
|
@ -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>🔧</a>
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue