added battery monitor to frontend

frontend/package.json

@@ -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"
       ]
     }

frontend/src/style.scss

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

frontend/src/views/BatteryView.js

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

frontend/src/views/CurrentView.js

@@ -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 })),
       ])
     ])]);
   },