Add device storage info

js/.eslintrc.json

@@ -1,6 +1,6 @@
 {
     "parserOptions": {
-        "ecmaVersion": 6,
+        "ecmaVersion": 2020,
         "sourceType": "script"
     },
     "rules": {

js/comms.js

@@ -196,9 +196,9 @@ const Comms = {
       });
     });
   },
-  // Get Device ID and version, plus a JSON list of installed apps
+  // Get Device ID, version, storage stats, and a JSON list of installed apps
   getDeviceInfo : (noReset) => {
-    Progress.show({title:`Getting app list...`,sticky:true});
+    Progress.show({title:`Getting device info...`,sticky:true});
     return new Promise((resolve,reject) => {
       Puck.write("\x03",(result) => {
         if (result===null) {
@@ -240,7 +240,7 @@ const Comms = {
           return;
         }
 
-        let cmd, finalJS = `E.toJS([process.env.BOARD,process.env.VERSION,process.env.EXPTR,0|getTime(),E.CRC32(getSerial()+NRF.getAddress())]).substr(1)`;
+        let cmd, finalJS = `JSON.stringify(require("Storage").getStats?require("Storage").getStats():{})+","+E.toJS([process.env.BOARD,process.env.VERSION,process.env.EXPTR,0|getTime(),E.CRC32(getSerial()+NRF.getAddress())]).substr(1)`;
         if (Const.SINGLE_APP_ONLY) // only one app on device, info file is in app.info
           cmd = `\x10Bluetooth.println("["+(require("Storage").read("app.info")||"null")+","+${finalJS})\n`;
         else
@@ -259,12 +259,13 @@ const Comms = {
           let appList;
           try {
             appList = JSON.parse(appListJSON);
-            // unpack the last 4 elements which are board info (See finalJS above)
+            // unpack the last 6 elements which are board info (See finalJS above)
             info.uid = appList.pop(); // unique ID for watch (hash of internal serial number and MAC)
             info.currentTime = appList.pop()*1000; // time in ms
             info.exptr = appList.pop(); // used for compilation
             info.version = appList.pop();
             info.id = appList.pop();
+            info.storageStats = appList.pop(); // how much storage has been used
             // if we just have 'null' then it means we have no apps
             if (appList.length==1 && appList[0]==null)
               appList = [];

js/index.js

@@ -995,6 +995,7 @@ function getInstalledApps(refresh) {
       device.id = info.id;
       device.version = info.version;
       device.exptr = info.exptr;
+      device.storageStats = info.storageStats;
       device.appsInstalled = info.apps;
       haveInstalledApps = true;
       if ("function"==typeof onFoundDeviceInfo)
@@ -1016,11 +1017,39 @@ function getInstalledApps(refresh) {
       const deviceInfoElem = document.getElementById("more-deviceinfo");
       if (deviceInfoElem) {
         deviceInfoElem.style.display = "inherit";
+        let storageRow = "";
+        if (device.storageStats?.totalBytes) {
+          const stats = device.storageStats;
+          const totalKB = (stats.totalBytes / 1000).toFixed(2);
+          const usedKB = (stats.fileBytes / 1000).toFixed(2);
+          const trashKB = (stats.trashBytes / 1000).toFixed(2);
+          const freeKB = (stats.freeBytes / 1000).toFixed(2);
+          const bytePrc = 100 / stats.totalBytes;
+          const usedPrc = bytePrc * stats.fileBytes;
+          const trashPrc = bytePrc * stats.trashBytes;
+          const freePrc = bytePrc * stats.freeBytes;
+          if (isNaN(usedPrc) || isNaN(trashPrc) || isNaN(freePrc)) {
+            console.error("Unexpected error: Could not calculate storage statistics");
+          } else {
+            storageRow = `
+<tr><td><b>Storage</b></td><td>
+  <p style="margin-bottom:.4rem;">${totalKB} KiB in total, ${stats.fileCount} files used, ${stats.trashCount} files trashed.</p>
+  <div class="bar" style="margin-bottom:.3rem;">
+    <!-- These styles prevent overflow of text if the bar item is too small to fit all the text -->
+    <style>.bar-item{white-space:nowrap;padding-left:.1rem;padding-right:.1rem;}</style>
+    <div class="bar-item tooltip bg-error"   data-tooltip="${usedKB} KiB, ${usedPrc.toFixed(2)}% used"    style="width:${usedPrc}%; color:hsl(218 16% 2%)">${usedPrc.toFixed(0)}% used</div>
+    <div class="bar-item tooltip bg-warning" data-tooltip="${trashKB} KiB, ${trashPrc.toFixed(2)}% trash" style="width:${trashPrc}%;color:hsl(218 16% 7%)">${trashPrc.toFixed(0)}% trash</div>
+    <div class="bar-item tooltip bg-success" data-tooltip="${freeKB} KiB, ${freePrc.toFixed(2)}% free"    style="width:${freePrc}%; color:hsl(218 16% 7%)">${freePrc.toFixed(0)}% free</div>
+  </div>
+</td></tr>`;
+          }
+        }
         const deviceInfoContentElem = document.getElementById("more-deviceinfo-content");
         deviceInfoContentElem.innerHTML = `
 <table class="table"><tbody>
   <tr><td><b>Device Type</b></td><td>${device.id}</td></tr>
   <tr><td><b>Firmware Version</b></td><td>${device.version}</td></tr>
+  ${storageRow}
   <tr><td><b>Apps Installed</b></td><td>${(device.appsInstalled || []).map(a => `${a.id} (${a.version})`).join(", ")}</td></tr>
 </tbody></table>`;
       }