make power viewing nicer in the UI

Author: timoschilling

fs_src/index.html

@@ -444,9 +444,14 @@ <h1 id="head">Switch</h1>
           </label>
         </div>
         <div class="form-control" id="power_stats_container" style="display: none;">
-          <label for="power_stats">Power:</label>
-          <span id="power_stats"></span>
-        </div>
+          <div class="form-control">
+            <label for="power_stats_current">Current:</label>
+            <span id="power_stats_current"></span>
+          </div>
+          <div class="form-control">
+            <label for="power_stats_total">Total:</label>
+            <span id="power_stats_total"></span>
+          </div>
         <div>
           <div class="form-control">
             <label for="name">Name:</label>

fs_src/script.js

@@ -1074,12 +1074,18 @@ function updateElement(key, value, info) {
 function updatePowerStats(c, cd) {
   if (cd.apower === undefined) return;
 
-  apower = Math.round(cd.apower * 10) / 10;
-  console.log(apower)
-  updateInnerText(el(c, "power_stats"), `${apower}W, ${cd.aenergy}Wh`);
+  updateInnerText(
+      el(c, "power_stats_current"), `${formatFloat(cd.apower, 3)} W`);
+  updateInnerText(
+      el(c, "power_stats_total"), `${formatFloat(cd.aenergy, 3)} Wh`);
   el(c, "power_stats_container").style.display = "block";
 }
 
+function formatFloat(number, digits) {
+  return new Intl.NumberFormat("en-EN", {minimumFractionDigits: digits})
+      .format(number);
+}
+
 function getInfo() {
   return new Promise(function(resolve, reject) {
     if (pendingGetInfo) {