added battery monitor to frontend
parent
5290bce3b5
commit
0de19abec5
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,13 +1,14 @@
|
|||
{
|
||||
"name": "x-frontend",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"description": "A basic frontend with bulma css",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "webpack --mode production",
|
||||
"watch": "npm-watch sandbox",
|
||||
"watch": "webpack --mode development --watch",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"sandbox": "node sandbox/sandbox.js"
|
||||
"sandbox": "npm-watch sandbox-server",
|
||||
"sandbox-server": "node sandbox/sandbox.js"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
|
@ -26,9 +27,8 @@
|
|||
"npm-watch": "^0.6.0"
|
||||
},
|
||||
"watch": {
|
||||
"sandbox": {
|
||||
"sandbox-server": {
|
||||
"patterns": [
|
||||
"src",
|
||||
"sandbox"
|
||||
]
|
||||
}
|
||||
|
|
|
@ -1,2 +1,33 @@
|
|||
@charset "utf-8";
|
||||
@import "~bulma/bulma";
|
||||
|
||||
.battery-status {
|
||||
width: 40px;
|
||||
}
|
||||
.battery-status progress {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
.battery-status ::-webkit-progress-value,
|
||||
.battery-status ::-moz-progress-bar {
|
||||
background-color: $green;
|
||||
}
|
||||
.battery-status.is-danger ::-webkit-progress-value,
|
||||
.battery-status.is-danger ::-moz-progress-bar {
|
||||
background-color: $danger;
|
||||
}
|
||||
.battery-status.is-warning ::-webkit-progress-value,
|
||||
.battery-status.is-warning ::-moz-progress-bar {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
|
||||
.battery-status.is-charging::after {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
content: '🗲';
|
||||
color: #000;
|
||||
text-shadow: 0 0 1px #FFF;
|
||||
}
|
|
@ -0,0 +1,19 @@
|
|||
const m = require('mithril');
|
||||
|
||||
const BatteryView = {
|
||||
view: function(vnode) {
|
||||
if (vnode.attrs.percent === undefined) return null;
|
||||
let classes = [];
|
||||
if (vnode.attrs.is_charging) classes.push("is-charging");
|
||||
if (vnode.attrs.percent <= 20) classes.push("is-danger");
|
||||
else if (vnode.attrs.percent <= 40) classes.push("is-warning");
|
||||
return m('.battery-status', { class: classes.join(" ") }, [
|
||||
m('progress', {
|
||||
value:(vnode.attrs.percent || null),
|
||||
max:"100"
|
||||
}, vnode.attrs.percent)
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = BatteryView;
|
|
@ -1,5 +1,6 @@
|
|||
const m = require('mithril');
|
||||
const Weather = require('../models/weather');
|
||||
const BatteryView = require('./BatteryView.js');
|
||||
|
||||
var CurrentView = {
|
||||
|
||||
|
@ -36,7 +37,8 @@ var CurrentView = {
|
|||
m('.control', m('label.checkbox', [ m('input[type=checkbox]',{
|
||||
checked: CurrentView.autorefresh_enabled,
|
||||
onchange: function(e) { CurrentView.autorefresh_enabled = e.target.checked; }
|
||||
}), " Auto"]))
|
||||
}), " Auto"])),
|
||||
m('.control', m(BatteryView, { ...Weather.current.battery })),
|
||||
])
|
||||
])]);
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue